import Link from "next/link";

import { buildChapterEntries, type ChapterEntry } from "@/lib/workbench/chapter";

interface ChapterListProps {
  projectId: string;
  // 大纲章节（来自 GET .../outline，无大纲时为空）；当前章会被并入并去重。
  chapters: ChapterEntry[];
  currentChapterNo: number;
}

// 左栏目录（UX §6.3）：列出大纲全部章节 + 当前章，点击切换写作章号（`?chapter=N`）。
// 桌面 aside 包裹；移动端经 Workbench 抽屉复用 ChapterListContent。
export function ChapterList({
  projectId,
  chapters,
  currentChapterNo,
}: ChapterListProps) {
  return (
    <aside className="hidden border-r border-line bg-panel py-4 xl:block">
      <ChapterListContent
        projectId={projectId}
        chapters={chapters}
        currentChapterNo={currentChapterNo}
      />
    </aside>
  );
}

export function ChapterListContent({
  projectId,
  chapters,
  currentChapterNo,
}: ChapterListProps) {
  const entries = buildChapterEntries(chapters, currentChapterNo);
  const hasOutline = chapters.length > 0;
  return (
    <>
      <h2 className="px-4 text-xs font-semibold uppercase tracking-wide text-ink-soft">
        目录
      </h2>
      <ul className="mt-2">
        {entries.map((entry) => {
          const active = entry.no === currentChapterNo;
          return (
            <li key={entry.no}>
              <Link
                href={`/projects/${projectId}/write?chapter=${entry.no}`}
                aria-current={active ? "page" : undefined}
                className={
                  active
                    ? "flex flex-col gap-0.5 border-l-2 border-cinnabar bg-[var(--color-cinnabar-wash)] px-4 py-2 text-sm text-cinnabar"
                    : "flex flex-col gap-0.5 border-l-2 border-transparent px-4 py-2 text-sm text-ink hover:border-cinnabar hover:text-cinnabar"
                }
              >
                <span className="flex items-center gap-2">
                  {active ? <span aria-hidden="true">●</span> : null}第{" "}
                  {entry.no} 章
                </span>
                {entry.title ? (
                  <span className="truncate text-xs text-ink-soft">
                    {entry.title}
                  </span>
                ) : null}
              </Link>
            </li>
          );
        })}
      </ul>
      {!hasOutline ? (
        <p className="mt-4 px-4 text-xs text-ink-soft/70">
          还没有章节目录。
          <Link
            href={`/projects/${projectId}/outline`}
            className="text-cinnabar hover:underline"
          >
            去「大纲」生成
          </Link>
          。
        </p>
      ) : null}
    </>
  );
}