<template>
  <div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
        <p class="text-gray-600">Customize your dashboard experience and application preferences</p>
      </div>
      <div class="mt-4 sm:mt-0 flex items-center gap-3">
        <span v-if="settingsStore.lastSaved" class="text-xs text-gray-500">
          Last saved: {{ formatTime(settingsStore.lastSaved) }}
        </span>
        <button
          @click="showResetDialog = true"
          class="px-3 py-1.5 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition-colors"
        >
          Reset All
        </button>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Settings Navigation -->
      <div class="lg:col-span-1">
        <nav class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sticky top-4">
          <ul class="space-y-1">
            <li v-for="section in settingSections" :key="section.id">
              <button
                @click="activeSection = section.id"
                class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors"
                :class="
                  activeSection === section.id
                    ? 'bg-blue-100 text-blue-700'
                    : 'text-gray-700 hover:bg-gray-100'
                "
              >
                <span class="text-lg">{{ section.icon }}</span>
                <div>
                  <div class="font-medium">{{ section.name }}</div>
                  <div class="text-xs opacity-75">{{ section.description }}</div>
                </div>
              </button>
            </li>
          </ul>
        </nav>
      </div>

      <!-- Settings Content -->
      <div class="lg:col-span-2 space-y-6">
        <!-- Appearance Settings -->
        <div
          v-if="activeSection === 'appearance'"
          class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
        >
          <div class="p-6 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-900">Appearance</h3>
            <p class="text-gray-600 text-sm mt-1">Customize the look and feel of your dashboard</p>
          </div>
          <div class="p-6 space-y-6">
            <!-- Theme Selection -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-3">Theme</label>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div
                  v-for="theme in settingsStore.getThemeOptions()"
                  :key="theme.value"
                  @click="settingsStore.updateSetting('theme', theme.value)"
                  class="relative p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-blue-300"
                  :class="
                    settingsStore.settings.theme === theme.value
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200'
                  "
                >
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <span class="text-lg">{{ theme.icon }}</span>
                      <span class="font-medium text-gray-900">{{ theme.label }}</span>
                    </div>
                    <div v-if="settingsStore.settings.theme === theme.value" class="text-blue-600">
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path
                          fill-rule="evenodd"
                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                          clip-rule="evenodd"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Navigation Mode -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-3">Bottom Navigation</label>
              <div class="space-y-3">
                <div
                  v-for="mode in settingsStore.getNavigationModeOptions()"
                  :key="mode.value"
                  @click="settingsStore.updateSetting('ui.navigationMode', mode.value)"
                  class="relative p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-blue-300"
                  :class="
                    settingsStore.settings.ui.navigationMode === mode.value
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200'
                  "
                >
                  <div class="flex items-start justify-between">
                    <div class="flex items-start gap-3">
                      <span class="text-lg mt-0.5">{{ mode.icon }}</span>
                      <div>
                        <div class="font-medium text-gray-900">{{ mode.label }}</div>
                        <div class="text-sm text-gray-600 mt-1">{{ mode.description }}</div>
                      </div>
                    </div>
                    <div
                      v-if="settingsStore.settings.ui.navigationMode === mode.value"
                      class="text-blue-600 mt-1"
                    >
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path
                          fill-rule="evenodd"
                          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                          clip-rule="evenodd"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- UI Options -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                <div>
                  <div class="font-medium text-gray-900">Compact Mode</div>
                  <div class="text-sm text-gray-600">Reduce spacing and padding</div>
                </div>
                <button
                  @click="
                    settingsStore.updateSetting(
                      'ui.compactMode',
                      !settingsStore.settings.ui.compactMode,
                    )
                  "
                  class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                  :class="settingsStore.settings.ui.compactMode ? 'bg-blue-600' : 'bg-gray-200'"
                >
                  <span
                    class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                    :class="
                      settingsStore.settings.ui.compactMode ? 'translate-x-6' : 'translate-x-1'
                    "
                  ></span>
                </button>
              </div>

              <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                <div>
                  <div class="font-medium text-gray-900">Animations</div>
                  <div class="text-sm text-gray-600">Enable smooth transitions</div>
                </div>
                <button
                  @click="
                    settingsStore.updateSetting(
                      'ui.showAnimations',
                      !settingsStore.settings.ui.showAnimations,
                    )
                  "
                  class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                  :class="settingsStore.settings.ui.showAnimations ? 'bg-blue-600' : 'bg-gray-200'"
                >
                  <span
                    class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                    :class="
                      settingsStore.settings.ui.showAnimations ? 'translate-x-6' : 'translate-x-1'
                    "
                  ></span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Data & Sync Settings -->
        <div
          v-if="activeSection === 'data'"
          class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
        >
          <div class="p-6 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-900">Data & Synchronization</h3>
            <p class="text-gray-600 text-sm mt-1">Configure data refresh and connection settings</p>
          </div>
          <div class="p-6 space-y-6">
            <!-- Auto Refresh -->
            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
              <div>
                <div class="font-medium text-gray-900">Auto Refresh</div>
                <div class="text-sm text-gray-600">Automatically refresh data periodically</div>
              </div>
              <button
                @click="
                  settingsStore.updateSetting(
                    'ui.autoRefresh',
                    !settingsStore.settings.ui.autoRefresh,
                  )
                "
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settingsStore.settings.ui.autoRefresh ? 'bg-blue-600' : 'bg-gray-200'"
              >
                <span
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settingsStore.settings.ui.autoRefresh ? 'translate-x-6' : 'translate-x-1'"
                ></span>
              </button>
            </div>

            <!-- Refresh Interval -->
            <div v-if="settingsStore.settings.ui.autoRefresh">
              <label class="block text-sm font-medium text-gray-700 mb-3">Refresh Interval</label>
              <div class="flex items-center gap-4">
                <input
                  type="range"
                  min="1"
                  max="60"
                  :value="settingsStore.settings.ui.refreshInterval"
                  @input="
                    settingsStore.updateSetting(
                      'ui.refreshInterval',
                      parseInt(($event.target as HTMLInputElement).value),
                    )
                  "
                  class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                />
                <div
                  class="bg-gray-100 px-3 py-1 rounded text-sm font-medium min-w-[80px] text-center"
                >
                  {{ settingsStore.settings.ui.refreshInterval }}s
                </div>
              </div>
            </div>

            <!-- WebSocket URL -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">WebSocket URL</label>
              <div class="flex gap-3">
                <input
                  v-model="websocketUrlInput"
                  type="text"
                  placeholder="ws://localhost:8000/ws"
                  class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  :class="{
                    'border-red-300 focus:ring-red-500 focus:border-red-500': websocketUrlError,
                  }"
                />
                <button
                  @click="updateWebSocketUrl"
                  :disabled="
                    !websocketUrlInput || websocketUrlInput === settingsStore.settings.websocketUrl
                  "
                  class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white rounded-lg text-sm font-medium transition-colors"
                >
                  Update
                </button>
              </div>
              <p v-if="websocketUrlError" class="text-red-600 text-sm mt-1">
                {{ websocketUrlError }}
              </p>
              <p v-else class="text-gray-500 text-sm mt-1">
                Current: {{ settingsStore.settings.websocketUrl }}
              </p>
            </div>

            <!-- Auto Connect -->
            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
              <div>
                <div class="font-medium text-gray-900">Auto Connect</div>
                <div class="text-sm text-gray-600">
                  Automatically connect to WebSocket on app start
                </div>
              </div>
              <button
                @click="
                  settingsStore.updateSetting('autoConnect', !settingsStore.settings.autoConnect)
                "
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settingsStore.settings.autoConnect ? 'bg-blue-600' : 'bg-gray-200'"
              >
                <span
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settingsStore.settings.autoConnect ? 'translate-x-6' : 'translate-x-1'"
                ></span>
              </button>
            </div>
          </div>
        </div>

        <!-- Notifications Settings -->
        <div
          v-if="activeSection === 'notifications'"
          class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
        >
          <div class="p-6 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-900">Notifications</h3>
            <p class="text-gray-600 text-sm mt-1">
              Configure how you receive alerts and notifications
            </p>
          </div>
          <div class="p-6 space-y-6">
            <!-- Enable Notifications -->
            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
              <div>
                <div class="font-medium text-gray-900">Enable Notifications</div>
                <div class="text-sm text-gray-600">Receive system alerts and updates</div>
              </div>
              <button
                @click="
                  settingsStore.updateSetting(
                    'notifications.enabled',
                    !settingsStore.settings.notifications.enabled,
                  )
                "
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="
                  settingsStore.settings.notifications.enabled ? 'bg-blue-600' : 'bg-gray-200'
                "
              >
                <span
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="
                    settingsStore.settings.notifications.enabled ? 'translate-x-6' : 'translate-x-1'
                  "
                ></span>
              </button>
            </div>

            <div v-if="settingsStore.settings.notifications.enabled" class="space-y-4">
              <!-- Notification Types -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div
                  class="flex items-center justify-between p-4 border border-gray-200 rounded-lg"
                >
                  <div>
                    <div class="font-medium text-gray-900">Sound Alerts</div>
                    <div class="text-sm text-gray-600">Play sound for notifications</div>
                  </div>
                  <button
                    @click="
                      settingsStore.updateSetting(
                        'notifications.sound',
                        !settingsStore.settings.notifications.sound,
                      )
                    "
                    class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                    :class="
                      settingsStore.settings.notifications.sound ? 'bg-blue-600' : 'bg-gray-200'
                    "
                  >
                    <span
                      class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                      :class="
                        settingsStore.settings.notifications.sound
                          ? 'translate-x-6'
                          : 'translate-x-1'
                      "
                    ></span>
                  </button>
                </div>

                <div
                  class="flex items-center justify-between p-4 border border-gray-200 rounded-lg"
                >
                  <div>
                    <div class="font-medium text-gray-900">Desktop Notifications</div>
                    <div class="text-sm text-gray-600">Show browser notifications</div>
                  </div>
                  <button
                    @click="toggleDesktopNotifications"
                    class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                    :class="
                      settingsStore.settings.notifications.desktop ? 'bg-blue-600' : 'bg-gray-200'
                    "
                  >
                    <span
                      class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                      :class="
                        settingsStore.settings.notifications.desktop
                          ? 'translate-x-6'
                          : 'translate-x-1'
                      "
                    ></span>
                  </button>
                </div>
              </div>

              <!-- Critical Only -->
              <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                <div>
                  <div class="font-medium text-gray-900">Critical Alerts Only</div>
                  <div class="text-sm text-gray-600">Only show high-priority notifications</div>
                </div>
                <button
                  @click="
                    settingsStore.updateSetting(
                      'notifications.criticalOnly',
                      !settingsStore.settings.notifications.criticalOnly,
                    )
                  "
                  class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                  :class="
                    settingsStore.settings.notifications.criticalOnly
                      ? 'bg-blue-600'
                      : 'bg-gray-200'
                  "
                >
                  <span
                    class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                    :class="
                      settingsStore.settings.notifications.criticalOnly
                        ? 'translate-x-6'
                        : 'translate-x-1'
                    "
                  ></span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Advanced Settings -->
        <div
          v-if="activeSection === 'advanced'"
          class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
        >
          <div class="p-6 border-b border-gray-100">
            <h3 class="text-lg font-semibold text-gray-900">Advanced</h3>
            <p class="text-gray-600 text-sm mt-1">Developer options and advanced configuration</p>
          </div>
          <div class="p-6 space-y-6">
            <!-- Developer Mode -->
            <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
              <div>
                <div class="font-medium text-gray-900">Developer Mode</div>
                <div class="text-sm text-gray-600">Enable debug logs and development features</div>
              </div>
              <button
                @click="
                  settingsStore.updateSetting(
                    'developerMode',
                    !settingsStore.settings.developerMode,
                  )
                "
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
                :class="settingsStore.settings.developerMode ? 'bg-blue-600' : 'bg-gray-200'"
              >
                <span
                  class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
                  :class="settingsStore.settings.developerMode ? 'translate-x-6' : 'translate-x-1'"
                ></span>
              </button>
            </div>

            <!-- Export/Import Settings -->
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Export Settings</label>
                <button
                  @click="exportSettings"
                  class="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors"
                >
                  Export Configuration
                </button>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Import Settings</label>
                <div class="flex gap-3">
                  <textarea
                    v-model="importSettingsJson"
                    placeholder="Paste exported settings JSON here..."
                    rows="3"
                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                  <button
                    @click="importSettings"
                    :disabled="!importSettingsJson.trim()"
                    class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white rounded-lg text-sm font-medium transition-colors"
                  >
                    Import
                  </button>
                </div>
                <p v-if="importError" class="text-red-600 text-sm mt-1">{{ importError }}</p>
                <p v-if="importSuccess" class="text-green-600 text-sm mt-1">
                  Settings imported successfully!
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Reset Confirmation Dialog -->
    <div
      v-if="showResetDialog"
      class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
    >
      <div class="bg-white rounded-xl max-w-md w-full p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Reset All Settings</h3>
        <p class="text-gray-600 mb-4">
          Are you sure you want to reset all settings to their default values? This action cannot be
          undone.
        </p>
        <div class="flex gap-3">
          <button
            @click="showResetDialog = false"
            class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"
          >
            Cancel
          </button>
          <button
            @click="resetAllSettings"
            class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors"
          >
            Reset Settings
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useSettingsStore } from '@/stores/settings'

const settingsStore = useSettingsStore()

// Component state
const activeSection = ref('appearance')
const showResetDialog = ref(false)
const websocketUrlInput = ref('')
const websocketUrlError = ref('')
const importSettingsJson = ref('')
const importError = ref('')
const importSuccess = ref(false)

// Settings sections
const settingSections = [
  {
    id: 'appearance',
    name: 'Appearance',
    description: 'Theme & UI',
    icon: '🎨',
  },
  {
    id: 'data',
    name: 'Data & Sync',
    description: 'Connection & refresh',
    icon: '🔄',
  },
  {
    id: 'notifications',
    name: 'Notifications',
    description: 'Alerts & sounds',
    icon: '🔔',
  },
  {
    id: 'advanced',
    name: 'Advanced',
    description: 'Developer options',
    icon: '⚙️',
  },
]

// Methods
const formatTime = (date: Date) => {
  return new Intl.DateTimeFormat('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  }).format(date)
}

const updateWebSocketUrl = () => {
  if (!settingsStore.isValidWebSocketUrl(websocketUrlInput.value)) {
    websocketUrlError.value = 'Please enter a valid WebSocket URL (ws:// or wss://)'
    return
  }

  settingsStore.updateSetting('websocketUrl', websocketUrlInput.value)
  websocketUrlError.value = ''
}

const toggleDesktopNotifications = async () => {
  if (!settingsStore.settings.notifications.desktop) {
    const permission = await settingsStore.requestNotificationPermission()
    if (permission) {
      settingsStore.updateSetting('notifications.desktop', true)
    } else {
      alert('Notification permission is required to enable desktop notifications.')
    }
  } else {
    settingsStore.updateSetting('notifications.desktop', false)
  }
}

const exportSettings = () => {
  const settingsJson = settingsStore.exportSettings()
  const blob = new Blob([settingsJson], { type: 'application/json' })
  const url = URL.createObjectURL(blob)

  const a = document.createElement('a')
  a.href = url
  a.download = `dashboard-settings-${new Date().toISOString().split('T')[0]}.json`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

const importSettings = () => {
  importError.value = ''
  importSuccess.value = false

  const success = settingsStore.importSettings(importSettingsJson.value)

  if (success) {
    importSuccess.value = true
    importSettingsJson.value = ''
    setTimeout(() => {
      importSuccess.value = false
    }, 3000)
  } else {
    importError.value = 'Invalid settings format. Please check the JSON structure.'
  }
}

const resetAllSettings = () => {
  settingsStore.resetToDefaults()
  showResetDialog.value = false
  websocketUrlInput.value = settingsStore.settings.websocketUrl
}

// Initialize
onMounted(() => {
  settingsStore.initialize()
  websocketUrlInput.value = settingsStore.settings.websocketUrl
})
</script>
