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 { groupByVolume } 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);
  const volumes = useMemo(() => groupByVolume(chapters), [chapters]);
  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>
          <label htmlFor="vol" className="ml-auto text-xs text-ink-soft">
            卷号
          </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">
              暂无大纲。点「✦ 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} />
                  ))}
                </ul>
              </section>
            ))
          )}
        </div>
      </div>
    </AppShell>
  );
}