import Link from "next/link";
import {
  BookOpen,
  ClipboardCheck,
  ListTree,
  PenLine,
  Sparkles,
  type LucideIcon,
} from "lucide-react";

import { AiToolbarMoreMenu } from "@/components/AiToolbarMoreMenu";
import {
  aiToolItems,
  primaryAiToolItems,
  secondaryAiToolItems,
} from "@/lib/nav/ai-tools";
import type { ActiveNav } from "@/lib/nav/items";
import { buttonClass } from "@/lib/ui/variants";

interface AiToolbarProps {
  projectId: string;
  activeNav?: ActiveNav;
}

// T4-a · 项目内页常驻 AI 工具条（顶栏下，UX §3/§5）。
// 桌面展示完整工具条；窄屏只保留写本章/审稿，把低频入口收进更多菜单。
export function AiToolbar({ projectId, activeNav }: AiToolbarProps) {
  const primaryItems = primaryAiToolItems(projectId);
  const secondaryItems = secondaryAiToolItems(projectId);
  return (
    <nav
      aria-label="AI 工具条"
      className="sticky top-16 z-20 flex h-12 items-center gap-2 border-b border-line bg-panel px-4 sm:px-6"
    >
      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden lg:hidden">
        {primaryItems.map((item) => {
          const isActive = item.key === activeNav;
          const className = toolClassName(item.primary === true, isActive);
          const Icon = toolIcon(item.key);
          return (
            <Link
              key={item.href}
              href={item.href}
              aria-current={isActive ? "page" : undefined}
              className={className}
            >
              <Icon className="h-4 w-4" aria-hidden="true" />
              <span>{item.label}</span>
            </Link>
          );
        })}
        <AiToolbarMoreMenu items={secondaryItems} activeNav={activeNav} />
      </div>

      <div className="hidden items-center gap-2 overflow-x-auto whitespace-nowrap lg:flex">
        {aiToolItems(projectId).map((item) => {
          const isActive = item.key === activeNav;
          const className = toolClassName(item.primary === true, isActive);
          const Icon = toolIcon(item.key);
          return (
            <Link
              key={item.href}
              href={item.href}
              aria-current={isActive ? "page" : undefined}
              className={className}
            >
              <Icon className="h-4 w-4" aria-hidden="true" />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}

function toolIcon(key: ActiveNav): LucideIcon {
  if (key === "write") return PenLine;
  if (key === "review") return ClipboardCheck;
  if (key === "outline") return ListTree;
  if (key === "codex") return BookOpen;
  return Sparkles;
}

function toolClassName(isPrimary: boolean, isActive: boolean): string {
  if (isActive) {
    return buttonClass({ variant: "outline", size: "sm" });
  }
  if (isPrimary) {
    return buttonClass({ variant: "primary", size: "sm" });
  }
  return buttonClass({ variant: "secondary", size: "sm" });
}