"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

interface NavItem {
  href: string;
  label: string;
  // M1 仅作品库 + 设置可达；其余为后续里程碑占位（禁用）。
  enabled: boolean;
}

const NAV_ITEMS: NavItem[] = [
  { href: "/", label: "作品库", enabled: true },
  { href: "/settings/providers", label: "设置", enabled: true },
  { href: "#outline", label: "大纲", enabled: false },
  { href: "#codex", label: "设定库", enabled: false },
  { href: "#foreshadow", label: "伏笔", enabled: false },
  { href: "#review", label: "审稿", enabled: false },
  { href: "#style", label: "文风", enabled: false },
];

// 左导航：当前项朱砂竖条 + 浅晕底（UX §5.1）。
export function LeftNav() {
  const pathname = usePathname();
  return (
    <nav
      className="w-44 shrink-0 border-r border-line bg-panel py-4"
      aria-label="主导航"
    >
      <ul className="flex flex-col gap-1 px-2">
        {NAV_ITEMS.map((item) => {
          const active = item.enabled && pathname === item.href;
          if (!item.enabled) {
            return (
              <li key={item.label}>
                <span
                  className="block cursor-not-allowed rounded px-3 py-2 text-sm text-ink-soft/50"
                  aria-disabled="true"
                  title="后续里程碑开放"
                >
                  {item.label}
                </span>
              </li>
            );
          }
          return (
            <li key={item.label}>
              <Link
                href={item.href}
                aria-current={active ? "page" : undefined}
                className={`flex items-center gap-2 rounded px-3 py-2 text-sm ${
                  active
                    ? "border-l-2 border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
                    : "text-ink hover:bg-[var(--color-cinnabar-wash)]"
                }`}
              >
                {item.label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}