<template>
  <nav class="bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <h1 class="text-xl font-bold text-gray-900">文件中转站管理</h1>
          </div>
          <div class="hidden md:ml-6 md:flex md:space-x-8">
            <router-link
              to="/admin"
              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              :class="$route.path === '/admin' ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
            >
              概览
            </router-link>
            <router-link
              to="/admin/batches"
              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              :class="$route.path.includes('/admin/batches') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
            >
              文件管理
            </router-link>
            <router-link
              to="/admin/tokens"
              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              :class="$route.path.includes('/admin/tokens') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
            >
              API 管理
            </router-link>
            <router-link
              to="/admin/config"
              class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
              :class="$route.path.includes('/admin/config') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'"
            >
              系统配置
            </router-link>
          </div>
        </div>
        
        <div class="flex items-center space-x-4">
          <!-- 移动端菜单按钮 -->
          <Button variant="ghost" @click="showMobileMenu = !showMobileMenu" class="md:hidden" size="sm">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </Button>
          
          <Button variant="outline" @click="router.push('/')" size="sm">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-1a1 1 0 011-1h2a1 1 0 011 1v1a1 1 0 001 1m-6 0h6"></path>
            </svg>
            前往前台
          </Button>
          <Button variant="destructive" @click="handleLogout" size="sm">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
            </svg>
            退出登录
          </Button>
        </div>
      </div>
      
      <!-- 移动端菜单 -->
      <div class="md:hidden" v-if="showMobileMenu">
        <div class="pt-2 pb-3 space-y-1">
          <router-link
            to="/admin"
            class="block pl-3 pr-4 py-2 text-base font-medium"
            :class="$route.path === '/admin' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
            @click="showMobileMenu = false"
          >
            概览
          </router-link>
          <router-link
            to="/admin/batches"
            class="block pl-3 pr-4 py-2 text-base font-medium"
            :class="$route.path.includes('/admin/batches') ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
            @click="showMobileMenu = false"
          >
            文件管理
          </router-link>
          <router-link
            to="/admin/tokens"
            class="block pl-3 pr-4 py-2 text-base font-medium"
            :class="$route.path.includes('/admin/tokens') ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
            @click="showMobileMenu = false"
          >
            API 管理
          </router-link>
          <router-link
            to="/admin/config"
            class="block pl-3 pr-4 py-2 text-base font-medium"
            :class="$route.path.includes('/admin/config') ? 'bg-indigo-50 border-indigo-500 text-indigo-700 border-l-4' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'"
            @click="showMobileMenu = false"
          >
            系统配置
          </router-link>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'

const router = useRouter()
const showMobileMenu = ref(false)

const handleLogout = () => {
  localStorage.removeItem('admin_token')
  router.push('/admin/login')
}
</script>