"use client";

import { Fragment } from "react";
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 {
  isNavItemActive,
  navSections,
  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;
}

// 导航条目列表（桌面静态侧栏与移动抽屉共用，避免渲染漂移）。
// 项目内页把 10 项按 写作/资料库/审阅/更多 分组（P2-1），每组一个小标题；全局组无标题直显于顶部。
export function NavItems({ projectId, activeNav, onNavigate }: NavItemsProps) {
  const pathname = usePathname() ?? "/";
  const sections = navSections(projectId);

  return (
    <ul className="flex flex-col gap-1 px-2">
      {sections.map((section) => (
        <Fragment key={section.label ?? "__global"}>
          {section.label !== null ? (
            <li
              className="mt-3 px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-ink-soft/60"
              aria-hidden="true"
            >
              {section.label}
            </li>
          ) : null}
          {section.items.map((item) => (
            <NavLink
              key={item.label}
              item={item}
              active={isNavItemActive(item, { pathname, activeNav })}
              onNavigate={onNavigate}
            />
          ))}
        </Fragment>
      ))}
    </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>
  );
}