// filepath: src/App.vue
<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView, RouterLink, useRoute } from 'vue-router'
import { Home, History, Settings as SettingsIcon, Download, FileText } from 'lucide-vue-next'
import { useSettingsStore } from './stores/settings'
import { useQueueStore } from './stores/queue'
import { useLogsStore } from './stores/logs'

const settingsStore = useSettingsStore()
const queueStore = useQueueStore()
const logsStore = useLogsStore()
const route = useRoute()

onMounted(async () => {
  await settingsStore.loadSettings()
  await settingsStore.initYtdlp()
  await queueStore.initListener()
  await logsStore.initListener()
})
</script>

<template>
  <div class="flex h-screen bg-gray-50 dark:bg-zinc-950 text-zinc-900 dark:text-gray-100 font-sans overflow-hidden">
    <!-- Sidebar -->
    <aside class="w-20 lg:w-64 bg-white dark:bg-zinc-900 border-r border-gray-200 dark:border-zinc-800 flex flex-col flex-shrink-0">
      <div class="p-6 flex items-center gap-3 justify-center lg:justify-start">
        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white shrink-0">
           <Download class="w-5 h-5" />
        </div>
        <span class="font-bold text-lg hidden lg:block">流萤</span>
      </div>

      <nav class="flex-1 px-4 space-y-2 mt-4 flex flex-col pb-6">
        <!-- Top Section -->
        <RouterLink to="/" 
          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
          :class="route.path === '/' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
        >
          <Home class="w-5 h-5 shrink-0" />
          <span class="hidden lg:block font-medium">下载</span>
        </RouterLink>
        
        <RouterLink to="/history" 
          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
          :class="route.path === '/history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
        >
          <History class="w-5 h-5 shrink-0" />
          <span class="hidden lg:block font-medium">历史</span>
        </RouterLink>

        <div class="flex-1"></div>

        <!-- Bottom Section -->
        <RouterLink to="/logs" 
          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
          :class="route.path === '/logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
        >
          <FileText class="w-5 h-5 shrink-0" />
          <span class="hidden lg:block font-medium">日志</span>
        </RouterLink>

        <RouterLink to="/settings" 
          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
          :class="route.path === '/settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
        >
          <SettingsIcon class="w-5 h-5 shrink-0" />
          <span class="hidden lg:block font-medium">设置</span>
        </RouterLink>
      </nav>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 overflow-auto bg-gray-50 dark:bg-zinc-950 relative">
      <RouterView />
    </main>
  </div>
</template>