writer-work-flow/apps/web/components/outline/OutlineEditor.tsx

"use client";

import { useMemo, useState } from "react";

import { AppShell } from "@/components/AppShell";
import type { OutlineChapterView, ProjectResponse } from "@/lib/api/types";
import {
  distinctVolumes,
  filterByViewVolume,
  groupByVolume,
  type ViewVolume,
} from "@/lib/outline/outline";
import { useOutline } from "@/lib/outline/useOutline";
import { OutlineChapterRow } from "./OutlineChapterRow";

interface OutlineEditorProps {
  project: ProjectResponse;
  initialChapters: OutlineChapterView[];
}

// 大纲编辑器主体（UX §6.7）。RSC 种入已存大纲；Client 承载生成（POST .../outline）。
// 无凭据 → 503 LLM_UNAVAILABLE 经 error 检出、引导去设置。
export function OutlineEditor({
  project,
  initialChapters,
}: OutlineEditorProps) {
  const { chapters, status, error, generate } = useOutline(initialChapters);
  const [volume, setVolume] = useState(1);
  // 视图卷过滤（"全部" 或某卷）——只影响展示，与生成的目标卷 `volume` 解耦。
  const [viewVolume, setViewVolume] = useState<ViewVolume>("all");
  const availableVolumes = useMemo(() => distinctVolumes(chapters), [chapters]);
  const volumes = useMemo(
    () => groupByVolume(filterByViewVolume(chapters, viewVolume)),
    [chapters, viewVolume],
  );
  const generating = status === "generating";

  return (
    <AppShell
      title={`〈${project.title}〉`}
      subtitle="大纲"
      projectId={project.id}
      activeNav="outline"
    >
      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-6">
        <div className="mb-4 flex items-center gap-3">
          <h1 className="font-serif text-lg text-ink">大纲</h1>
          {availableVolumes.length > 0 ? (
            <label htmlFor="view-vol" className="ml-auto text-xs text-ink-soft">
              查看
              <select
                id="view-vol"
                value={viewVolume === "all" ? "all" : String(viewVolume)}
                onChange={(e) =>
                  setViewVolume(
                    e.target.value === "all" ? "all" : Number(e.target.value),
                  )
                }
                className="ml-1 rounded border border-line bg-bg px-2 py-1 text-sm text-ink focus:border-cinnabar focus:outline-none"
              >
                <option value="all">全部</option>
                {availableVolumes.map((v) => (
                  <option key={v} value={String(v)}>
                    卷 {v}
                  </option>
                ))}
              </select>
            </label>
          ) : null}
          <label
            htmlFor="vol"
            className={`text-xs text-ink-soft${availableVolumes.length > 0 ? "" : " ml-auto"}`}
          >
            卷号
          </label>
          <input
            id="vol"
            inputMode="numeric"
            value={volume}
            onChange={(e) => setVolume(Math.max(1, Number(e.target.value) || 1))}
            className="w-16 rounded border border-line bg-bg px-2 py-1 text-sm text-ink focus:border-cinnabar focus:outline-none"
          />
          <button
            type="button"
            disabled={generating}
            onClick={() => void generate(project.id, volume)}
            className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90 disabled:opacity-40"
          >
            {generating ? "排大纲中…" : "✦ AI 排大纲"}
          </button>
        </div>

        {error ? (
          <p className="mb-4 text-sm text-conflict">
            大纲生成失败（{error.code}）：{error.message}
            {error.code === "LLM_UNAVAILABLE" ? (
              <>
                {" "}
                <a
                  href="/settings/providers"
                  className="underline hover:text-cinnabar"
                >
                  去设置提供商
                </a>
              </>
            ) : null}
          </p>
        ) : null}

        <div className="min-h-0 flex-1 overflow-auto">
          {volumes.length === 0 ? (
            <p className="rounded border border-dashed border-line p-6 text-sm text-ink-soft">
              {chapters.length > 0 && viewVolume !== "all"
                ? `卷 ${viewVolume} 暂无大纲。切到「全部」查看其它卷，或点「✦ AI 排大纲」为本卷生成。`
                : "暂无大纲。点「✦ AI 排大纲」生成逐章节拍与伏笔窗口。"}
            </p>
          ) : (
            volumes.map((group) => (
              <section key={group.volume} className="mb-6">
                <h2 className="mb-2 font-serif text-base text-ink">
                  卷 {group.volume}
                </h2>
                <ul className="space-y-1">
                  {group.chapters.map((ch) => (
                    <OutlineChapterRow
                      key={ch.no}
                      chapter={ch}
                      projectId={project.id}
                    />
                  ))}
                </ul>
              </section>
            ))
          )}
        </div>
      </div>
    </AppShell>
  );
}