<!-- app/components/layout/AppHeader.vue - 顶部导航和页面切换入口 -->
<script lang="ts" setup>
import { Activity, BookOpenText, LayoutDashboard, Search } from "lucide-vue-next";

import { Button } from "@/components/ui/button";

/** 顶部导航项，icon 使用 lucide，和项目里 shadcn 的图标体系保持一致 */
const navItems = [
  {
    label: "答题",
    to: "/",
    icon: Search
  },
  {
    label: "Dashboard",
    to: "/dashboard",
    icon: LayoutDashboard
  },
  {
    label: "文档",
    to: "/docs",
    icon: BookOpenText
  }
];

const route = useRoute();

/** 当前路由高亮，Dashboard 的子路径也归到 Dashboard 导航项 */
const isActive = (to: string) => {
  if (to === "/") return route.path === "/";
  return route.path.startsWith(to);
};
</script>

<template>
  <header class="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
    <div
      class="mx-auto flex min-h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 md:px-6"
    >
      <NuxtLink to="/" class="flex min-w-0 items-center gap-3">
        <span
          class="flex size-9 shrink-0 items-center justify-center rounded-2xl bg-primary text-primary-foreground"
        >
          <Activity class="size-5" />
        </span>
        <span class="min-w-0">
          <span class="block truncate text-base font-semibold text-foreground">
            OCS AI 答题服务
          </span>
          <span class="block truncate text-xs text-muted-foreground">
            Nuxt API Runtime
          </span>
        </span>
      </NuxtLink>

      <nav class="flex shrink-0 items-center gap-1 overflow-x-auto">
        <Button
          v-for="item in navItems"
          :key="item.to"
          as-child
          :variant="isActive(item.to) ? 'secondary' : 'ghost'"
          size="sm"
        >
          <NuxtLink :to="item.to" class="gap-2">
            <component :is="item.icon" class="size-4" />
            <span>{{ item.label }}</span>
          </NuxtLink>
        </Button>
      </nav>
    </div>
  </header>
</template>
