<script setup>
import { ref } from 'vue'
import Dashboard from './views/Dashboard.vue'
import RecentCrawls from './views/RecentCrawls.vue'
import PriorityCrawl from './views/PriorityCrawl.vue'
import SearchView from './views/SearchView.vue'

const tab = ref('dashboard')

const nav = [
  { id: 'dashboard', label: '概览', icon: '📊' },
  { id: 'recent', label: '最近', icon: '🕷️' },
  { id: 'search', label: '搜索', icon: '🔍' },
  { id: 'priority', label: '插入', icon: '🚀' },
]
</script>

<template>
  <div class="flex h-screen bg-gray-950 text-gray-100 font-sans">
    <!-- Desktop Sidebar -->
    <aside class="hidden md:flex w-56 bg-gray-900 border-r border-gray-800 flex-col shrink-0">
      <div class="px-5 py-5 border-b border-gray-800">
        <div class="text-lg font-semibold text-white tracking-tight">SESE Admin</div>
        <div class="text-xs text-gray-500 mt-0.5">爬取内容监控</div>
      </div>
      <nav class="flex-1 py-4 px-3 space-y-1">
        <button
          v-for="item in nav"
          :key="item.id"
          @click="tab = item.id"
          :class="[
            'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
            tab === item.id
              ? 'bg-blue-600 text-white'
              : 'text-gray-400 hover:text-white hover:bg-gray-800'
          ]"
        >
          <span>{{ item.icon }}</span>
          {{ item.label }}
        </button>
      </nav>
      <div class="px-5 py-4 border-t border-gray-800">
        <div class="text-xs text-gray-600">sese-engine v1.0</div>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 overflow-y-auto pb-16 md:pb-0">
      <Dashboard v-if="tab === 'dashboard'" />
      <RecentCrawls v-else-if="tab === 'recent'" />
      <SearchView v-else-if="tab === 'search'" />
      <PriorityCrawl v-else-if="tab === 'priority'" />
    </main>

    <!-- Mobile Bottom Navigation -->
    <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 flex justify-around items-center h-16 z-50">
      <button
        v-for="item in nav"
        :key="item.id"
        @click="tab = item.id"
        :class="[
          'flex flex-col items-center justify-center gap-0.5 flex-1 h-full transition-colors',
          tab === item.id
            ? 'text-blue-400'
            : 'text-gray-500'
        ]"
      >
        <span class="text-lg">{{ item.icon }}</span>
        <span class="text-[10px]">{{ item.label }}</span>
      </button>
    </nav>
  </div>
</template>
