<script setup>
import { ref, onMounted, watch } from 'vue'
import { useDeviceStore } from '@/stores/deviceStore'
import { open } from '@tauri-apps/plugin-dialog'
import { 
  User, 
  FolderOpen, 
  Info, 
  Shield, 
  Check,
  Edit2,
  Sun,
  Moon,
  Monitor
} from 'lucide-vue-next'

const deviceStore = useDeviceStore()

const isEditingName = ref(false)
const editedName = ref('')
const isSaving = ref(false)

// 主题设置 ('system' | 'light' | 'dark')
const themeMode = ref(localStorage.getItem('theme') || 'system')

// 应用主题
function applyTheme(mode) {
  const root = document.documentElement
  if (mode === 'system') {
    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    root.classList.toggle('dark', isDark)
  } else {
    root.classList.toggle('dark', mode === 'dark')
  }
}

// 设置主题
function setTheme(mode) {
  themeMode.value = mode
  localStorage.setItem('theme', mode)
  applyTheme(mode)
}

// 监听系统主题变化
watch(themeMode, (mode) => applyTheme(mode), { immediate: true })

// 开始编辑名称
function startEditName() {
  editedName.value = deviceStore.localDevice?.deviceName || ''
  isEditingName.value = true
}

// 保存名称
async function saveName() {
  if (!editedName.value.trim()) return
  
  isSaving.value = true
  try {
    await deviceStore.updateDeviceName(editedName.value.trim())
    isEditingName.value = false
  } finally {
    isSaving.value = false
  }
}

// 选择下载目录
async function selectDownloadDir() {
  const selected = await open({
    directory: true,
    multiple: false,
    defaultPath: deviceStore.config?.downloadDir,
  })
  
  if (selected) {
    await deviceStore.updateDownloadDir(selected)
  }
}

onMounted(() => {
  editedName.value = deviceStore.localDevice?.deviceName || ''
  
  // 初始化主题
  applyTheme(themeMode.value)
  
  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    if (themeMode.value === 'system') {
      applyTheme('system')
    }
  })
})
</script>

<template>
  <div class="h-full overflow-y-auto">
    <div class="max-w-2xl mx-auto p-6">
      <h1 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">设置</h1>

      <!-- 设备信息 -->
      <section class="bg-white dark:bg-gray-800 rounded-xl border border-surface-200 dark:border-gray-700 mb-6">
        <div class="p-4 border-b border-surface-100 dark:border-gray-700">
          <h2 class="font-medium text-gray-900 dark:text-white flex items-center gap-2">
            <User :size="18" />
            设备信息
          </h2>
        </div>
        
        <div class="p-4 space-y-4">
          <!-- 设备名称 -->
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">设备名称</span>
            <div class="flex items-center gap-2">
              <template v-if="isEditingName">
                <input
                  v-model="editedName"
                  type="text"
                  class="px-3 py-1 border border-surface-200 dark:border-gray-600 dark:bg-gray-700 rounded-lg focus:outline-none focus:border-primary-400 dark:text-white"
                  @keyup.enter="saveName"
                />
                <button
                  @click="saveName"
                  :disabled="isSaving"
                  class="p-1.5 rounded-lg bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50"
                >
                  <Check :size="16" />
                </button>
              </template>
              <template v-else>
                <span class="font-medium text-gray-900 dark:text-white">
                  {{ deviceStore.localDevice?.deviceName }}
                </span>
                <button
                  @click="startEditName"
                  class="p-1.5 rounded-lg hover:bg-surface-100 dark:hover:bg-gray-700 text-gray-400"
                >
                  <Edit2 :size="16" />
                </button>
              </template>
            </div>
          </div>

          <!-- 设备 ID -->
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">设备 ID</span>
            <span class="font-mono text-sm text-gray-500 dark:text-gray-400">
              {{ deviceStore.localDevice?.deviceId?.slice(0, 8) }}...
            </span>
          </div>

          <!-- IP 地址 -->
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">IP 地址</span>
            <span class="font-mono text-gray-900 dark:text-white">
              {{ deviceStore.localDevice?.ip || '未知' }}
            </span>
          </div>

          <!-- 端口 -->
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">服务端口</span>
            <span class="text-gray-900 dark:text-white">
              WS: {{ deviceStore.config?.wsPort }} / HTTP: {{ deviceStore.config?.httpPort }}
            </span>
          </div>
        </div>
      </section>

      <!-- 外观设置 -->
      <section class="bg-white dark:bg-gray-800 rounded-xl border border-surface-200 dark:border-gray-700 mb-6">
        <div class="p-4 border-b border-surface-100 dark:border-gray-700">
          <h2 class="font-medium text-gray-900 dark:text-white flex items-center gap-2">
            <Sun :size="18" />
            外观设置
          </h2>
        </div>
        
        <div class="p-4">
          <span class="text-gray-600 dark:text-gray-400 block mb-3">主题模式</span>
          <div class="flex gap-2">
            <button
              @click="setTheme('system')"
              :class="[
                'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors',
                themeMode === 'system'
                  ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400'
                  : 'border-surface-200 dark:border-gray-600 hover:bg-surface-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
              ]"
            >
              <Monitor :size="18" />
              <span>跟随系统</span>
            </button>
            <button
              @click="setTheme('light')"
              :class="[
                'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors',
                themeMode === 'light'
                  ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400'
                  : 'border-surface-200 dark:border-gray-600 hover:bg-surface-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
              ]"
            >
              <Sun :size="18" />
              <span>明亮</span>
            </button>
            <button
              @click="setTheme('dark')"
              :class="[
                'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-colors',
                themeMode === 'dark'
                  ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400'
                  : 'border-surface-200 dark:border-gray-600 hover:bg-surface-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
              ]"
            >
              <Moon :size="18" />
              <span>暗黑</span>
            </button>
          </div>
        </div>
      </section>

      <!-- 文件设置 -->
      <section class="bg-white dark:bg-gray-800 rounded-xl border border-surface-200 dark:border-gray-700 mb-6">
        <div class="p-4 border-b border-surface-100 dark:border-gray-700">
          <h2 class="font-medium text-gray-900 dark:text-white flex items-center gap-2">
            <FolderOpen :size="18" />
            文件设置
          </h2>
        </div>
        
        <div class="p-4 space-y-4">
          <!-- 下载目录 -->
          <div class="flex items-center justify-between">
            <div>
              <span class="text-gray-600 dark:text-gray-400">下载保存位置</span>
              <p class="text-sm text-gray-400 dark:text-gray-500 mt-0.5">
                {{ deviceStore.config?.downloadDir }}
              </p>
            </div>
            <button
              @click="selectDownloadDir"
              class="px-4 py-2 bg-surface-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-surface-200 dark:hover:bg-gray-600 transition-colors"
            >
              更改
            </button>
          </div>
        </div>
      </section>

      <!-- 关于 -->
      <section class="bg-white dark:bg-gray-800 rounded-xl border border-surface-200 dark:border-gray-700">
        <div class="p-4 border-b border-surface-100 dark:border-gray-700">
          <h2 class="font-medium text-gray-900 dark:text-white flex items-center gap-2">
            <Info :size="18" />
            关于
          </h2>
        </div>
        
        <div class="p-4 space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">应用名称</span>
            <span class="font-medium text-gray-900 dark:text-white">Flash Send</span>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-gray-600 dark:text-gray-400">版本</span>
            <span class="text-gray-900 dark:text-white">1.0.0</span>
          </div>
          
        </div>
      </section>

    </div>
  </div>
</template>
