<script setup lang="ts">
import { ref } from 'vue'
import { useSettingsStore } from '../stores/settings'
import { invoke } from '@tauri-apps/api/core'
import { open } from '@tauri-apps/plugin-dialog'
import { Folder, RefreshCw, Monitor, Sun, Moon, Terminal, Download, FileText, X } from 'lucide-vue-next'
import { format } from 'date-fns' // Import format

const settingsStore = useSettingsStore()
const updatingYtdlp = ref(false)
const updatingQuickjs = ref(false)
const updatingFfmpeg = ref(false)
const updateStatus = ref('')

async function browsePath() {
  const selected = await open({
    directory: true,
    multiple: false,
    defaultPath: settingsStore.settings.download_path
  })
  
  if (selected) {
    settingsStore.settings.download_path = selected as string
    await settingsStore.save()
  }
}

async function browseCookies() {
  const selected = await open({
    multiple: false,
    directory: false,
    filters: [{ name: 'Text Files', extensions: ['txt', 'cookies'] }, { name: 'All Files', extensions: ['*'] }],
    defaultPath: settingsStore.settings.cookies_path || undefined
  })
  
  if (selected) {
    settingsStore.settings.cookies_path = selected as string
    await settingsStore.save()
  }
}

async function clearCookies() {
  settingsStore.settings.cookies_path = ''
  await settingsStore.save()
}

async function updateYtdlp() {
  updatingYtdlp.value = true
  updateStatus.value = '正在更新 yt-dlp...'
  try {
    const res = await invoke<string>('update_ytdlp')
    updateStatus.value = res
    await settingsStore.refreshVersions()
  } catch (e: any) {
    updateStatus.value = 'yt-dlp 错误：' + e.toString()
  } finally {
    updatingYtdlp.value = false
  }
}

async function updateQuickjs() {
  updatingQuickjs.value = true
  updateStatus.value = '正在更新 QuickJS...'
  try {
    const res = await invoke<string>('update_quickjs')
    updateStatus.value = res
    await settingsStore.refreshVersions()
  } catch (e: any) {
    updateStatus.value = 'QuickJS 错误：' + e.toString()
  } finally {
    updatingQuickjs.value = false
  }
}

async function updateFfmpeg() {
  updatingFfmpeg.value = true
  updateStatus.value = '正在更新 FFmpeg...'
  try {
    const res = await invoke<string>('update_ffmpeg')
    updateStatus.value = res
    await settingsStore.refreshVersions()
  } catch (e: any) {
    updateStatus.value = 'FFmpeg 错误：' + e.toString()
  } finally {
    updatingFfmpeg.value = false
  }
}

function setTheme(theme: 'light' | 'dark' | 'system') {
    settingsStore.settings.theme = theme
    settingsStore.save()
}
</script>

<template>
  <div class="max-w-3xl mx-auto p-8">
    <header class="mb-8">
      <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">设置</h1>
      <!-- <p class="text-gray-500 dark:text-gray-400 mt-2">配置您的下载偏好。</p> -->
    </header>

    <div class="space-y-6">
       <!-- Download Path -->
       <section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
          <h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">下载位置</h2>
          <div class="flex gap-3">
             <div class="flex-1 bg-gray-50 dark:bg-zinc-800 rounded-xl px-4 py-3 text-sm text-gray-600 dark:text-gray-300 font-mono truncate border border-transparent focus-within:border-blue-500 transition-colors">
                {{ settingsStore.settings.download_path || '未设置 (使用默认)' }}
             </div>
             <button 
               @click="browsePath"
               class="bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white px-4 py-3 rounded-xl font-medium transition-colors flex items-center gap-2"
             >
               <Folder class="w-5 h-5" />
               浏览
             </button>
          </div>
       </section>

       <!-- Cookies Path -->
       <section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
          <h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">Cookies 文件</h2>
          <div class="flex gap-3">
             <div class="flex-1 bg-gray-50 dark:bg-zinc-800 rounded-xl px-4 py-3 text-sm text-gray-600 dark:text-gray-300 font-mono border border-transparent focus-within:border-blue-500 transition-colors flex items-center justify-between group min-w-0">
                <div class="truncate mr-2">
                    {{ settingsStore.settings.cookies_path || '未设置 (默认空)' }}
                </div>
                <button 
                    v-if="settingsStore.settings.cookies_path"
                    @click="clearCookies"
                    class="text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all p-1 rounded-md hover:bg-gray-200 dark:hover:bg-zinc-700 shrink-0"
                    title="清除 Cookies 路径"
                >
                    <X class="w-4 h-4" />
                </button>
             </div>
             <button 
               @click="browseCookies"
               class="bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white px-4 py-3 rounded-xl font-medium transition-colors flex items-center gap-2 shrink-0"
             >
               <FileText class="w-5 h-5" />
               选择
             </button>
          </div>
          <p class="text-xs text-gray-400 mt-2">选填。请指定包含 cookies 的文本文件（Netscape 格式）。频繁使用 cookies 下载视频可能导致封号，慎用。</p>
       </section>

       <!-- Theme -->
       <section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
          <h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">外观</h2>
          <div class="grid grid-cols-3 gap-4">
             <button 
               @click="setTheme('light')"
               class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
               :class="settingsStore.settings.theme === 'light' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
             >
                <Sun class="w-6 h-6" />
                <span class="font-medium">浅色</span>
             </button>
             <button 
               @click="setTheme('dark')"
               class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
               :class="settingsStore.settings.theme === 'dark' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
             >
                <Moon class="w-6 h-6" />
                <span class="font-medium">深色</span>
             </button>
             <button 
               @click="setTheme('system')"
               class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
               :class="settingsStore.settings.theme === 'system' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
             >
                <Monitor class="w-6 h-6" />
                <span class="font-medium">跟随系统</span>
             </button>
          </div>
       </section>

       <!-- Binary Management -->
       <section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
          <h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">外部二进制文件</h2>
          
          <div class="space-y-4">
              <!-- yt-dlp -->
              <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
                  <div class="flex items-center gap-4">
                      <div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
                          <Download class="w-5 h-5 text-blue-600" />
                      </div>
                      <div>
                          <div class="font-medium text-zinc-900 dark:text-white">yt-dlp</div>
                          <div class="text-xs text-gray-500 mt-0.5 font-mono">v{{ settingsStore.ytdlpVersion }}</div>
                      </div>
                  </div>
                  <button 
                    @click="updateYtdlp"
                    :disabled="updatingYtdlp"
                    class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
                  >
                    <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingYtdlp }" />
                    更新
                  </button>
              </div>

              <!-- QuickJS -->
              <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
                  <div class="flex items-center gap-4">
                      <div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
                          <Terminal class="w-5 h-5 text-green-600" />
                      </div>
                      <div>
                          <div class="font-medium text-zinc-900 dark:text-white">QuickJS</div>
                          <div class="text-xs text-gray-500 mt-0.5 font-mono" :title="settingsStore.quickjsVersion">{{ settingsStore.quickjsVersion }}</div>
                      </div>
                  </div>
                  <button 
                    @click="updateQuickjs"
                    :disabled="updatingQuickjs"
                    class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
                  >
                    <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingQuickjs }" />
                    更新
                  </button>
              </div>

              <!-- FFmpeg -->
              <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
                  <div class="flex items-center gap-4">
                      <div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
                          <Terminal class="w-5 h-5 text-purple-600" />
                      </div>
                      <div>
                          <div class="font-medium text-zinc-900 dark:text-white">FFmpeg</div>
                          <div class="text-xs text-gray-500 mt-0.5 font-mono" :title="settingsStore.ffmpegVersion">
                            {{ ['Checking...', '未安装', 'Error'].includes(settingsStore.ffmpegVersion) ? settingsStore.ffmpegVersion : '已安装' }}
                          </div>
                      </div>
                  </div>
                  <button 
                    @click="updateFfmpeg"
                    :disabled="updatingFfmpeg"
                    class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
                  >
                    <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingFfmpeg }" />
                    更新
                  </button>
              </div>
          </div>

          <div v-if="updateStatus" class="mt-4 p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg text-xs font-mono text-gray-600 dark:text-gray-400 whitespace-pre-wrap border border-gray-200 dark:border-zinc-700">
             {{ updateStatus }}
          </div>
          <div v-if="settingsStore.runtimeStatus" class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
             <div class="rounded-lg border border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800 px-3 py-2">
                FFmpeg 来源：{{ settingsStore.runtimeStatus.ffmpeg_source }}
             </div>
             <div class="rounded-lg border border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800 px-3 py-2">
                JS Runtime：{{ settingsStore.runtimeStatus.js_runtime_name }} ({{ settingsStore.runtimeStatus.js_runtime_source }})
             </div>
          </div>
          <p class="text-xs text-gray-400 mt-4 text-right">上次检查： {{ settingsStore.settings.last_updated ? format(new Date(settingsStore.settings.last_updated), 'yyyy-MM-dd HH:mm:ss') : '从未' }}</p>
       </section>
    </div>
  </div>
</template>
