<template>
  <header
    class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50"
  >
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center space-x-8">
          <UButton to="/" variant="ghost" class="text-xl font-bold">
            <UIcon name="i-heroicons-newspaper" class="w-6 h-6 mr-2" />
            LinkShare Blog
          </UButton>

          <nav class="hidden md:flex items-center space-x-4">
            <UButton to="/" variant="ghost" :active="$route.path === '/'">
              首页
            </UButton>
            <UButton
              v-if="isAuthenticated"
              to="/create"
              variant="ghost"
              :active="$route.path === '/create'"
            >
              写文章
            </UButton>
            <UButton
              v-if="isAdmin"
              to="/admin/dashboard"
              variant="ghost"
              :active="$route.path.startsWith('/admin')"
            >
              管理后台
            </UButton>
          </nav>
        </div>

        <div class="flex items-center space-x-4">
          <UButton
            variant="ghost"
            icon="i-heroicons-magnifying-glass"
            size="sm"
            class="hidden sm:flex"
          />

          <UButton
            v-if="isDark"
            variant="ghost"
            icon="i-heroicons-sun"
            size="sm"
            @click="toggleDark()"
          />
          <UButton
            v-else
            variant="ghost"
            icon="i-heroicons-moon"
            size="sm"
            @click="toggleDark()"
          />

          <template v-if="isAuthenticated">
            <UserMenu />
          </template>
          <template v-else>
            <UButton to="/login" color="indigo" size="sm">
              登录
            </UButton>
          </template>

          <UButton
            variant="ghost"
            icon="i-heroicons-bars-3"
            size="sm"
            class="md:hidden"
            @click="mobileMenuOpen = !mobileMenuOpen"
          />
        </div>
      </div>
    </div>

    <div v-if="mobileMenuOpen" class="md:hidden border-t border-gray-200 dark:border-gray-700">
      <nav class="px-4 py-4 space-y-2">
        <UButton to="/" variant="ghost" class="w-full justify-start" @click="mobileMenuOpen = false">
          首页
        </UButton>
        <UButton
          v-if="isAuthenticated"
          to="/create"
          variant="ghost"
          class="w-full justify-start"
          @click="mobileMenuOpen = false"
        >
          写文章
        </UButton>
        <UButton
          v-if="isAdmin"
          to="/admin/dashboard"
          variant="ghost"
          class="w-full justify-start"
          @click="mobileMenuOpen = false"
        >
          管理后台
        </UButton>
        <UButton
          v-if="!isAuthenticated"
          to="/login"
          color="indigo"
          class="w-full"
          @click="mobileMenuOpen = false"
        >
          登录
        </UButton>
      </nav>
    </div>
  </header>
</template>

<script setup lang="ts">
const { isAuthenticated, isAdmin } = useAuth()
const mobileMenuOpen = ref(false)

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
