"use client";

import Link from "next/link";
import {
  Blocks,
  BookOpen,
  Boxes,
  ClipboardCheck,
  Flag,
  LayoutTemplate,
  ListTree,
  Palette,
  PenLine,
  Settings,
  Sparkles,
  Workflow,
  type LucideIcon,
} from "lucide-react";
import { usePathname } from "next/navigation";

import {
  GLOBAL_NAV_ITEMS,
  isNavItemActive,
  projectNavItems,
  type ActiveNav,
  type NavItem,
} from "@/lib/nav/items";
import { focusRing } from "@/lib/ui/variants";

interface NavItemsProps {
  // 项目内页传 projectId → 展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
  projectId?: string;
  activeNav?: ActiveNav;
  // 抽屉内点链接后关闭抽屉；静态侧栏不传。
  onNavigate?: () => void;
}

// 导航条目列表（桌面静态侧栏与移动抽屉共用，避免渲染漂移）。
export function NavItems({ projectId, activeNav, onNavigate }: NavItemsProps) {
  const pathname = usePathname() ?? "/";
  const scoped = projectId ? projectNavItems(projectId) : [];

  return (
    <ul className="flex flex-col gap-1 px-2">
      {GLOBAL_NAV_ITEMS.map((item) => (
        <NavLink
          key={item.label}
          item={item}
          active={isNavItemActive(item, { pathname, activeNav })}
          onNavigate={onNavigate}
        />
      ))}
      {scoped.length > 0 ? (
        <li
          className="mt-3 px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-ink-soft/60"
          aria-hidden="true"
        >
          本作
        </li>
      ) : null}
      {scoped.map((item) => (
        <NavLink
          key={item.label}
          item={item}
          active={isNavItemActive(item, { pathname, activeNav })}
          onNavigate={onNavigate}
        />
      ))}
    </ul>
  );
}

function navIcon(item: NavItem): LucideIcon {
  if (item.key === "write") return PenLine;
  if (item.key === "outline") return ListTree;
  if (item.key === "foreshadow") return Flag;
  if (item.key === "review") return ClipboardCheck;
  if (item.key === "chains") return Workflow;
  if (item.key === "style") return Palette;
  if (item.key === "codex") return BookOpen;
  if (item.key === "toolbox") return Sparkles;
  if (item.key === "rules") return Boxes;
  if (item.key === "skills") return Blocks;
  if (item.href === "/templates") return LayoutTemplate;
  if (item.href === "/settings/providers") return Settings;
  return BookOpen;
}

function NavLink({
  item,
  active,
  onNavigate,
}: {
  item: NavItem;
  active: boolean;
  onNavigate?: () => void;
}) {
  const Icon = navIcon(item);
  return (
    <li>
      <Link
        href={item.href}
        onClick={onNavigate}
        aria-current={active ? "page" : undefined}
        className={`flex items-center gap-2 rounded px-3 py-2 text-sm transition-colors ${focusRing} ${
          active
            ? "border-l-2 border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
            : "border-l-2 border-transparent text-ink hover:bg-[var(--color-cinnabar-wash)] hover:text-cinnabar"
        }`}
      >
        <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
        {item.label}
      </Link>
    </li>
  );
}