writer-work-flow/apps/web/components/workbench/Workbench.tsx

"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";

import { AppShell } from "@/components/AppShell";
import type { ProjectResponse } from "@/lib/api/types";
import { useAutosave } from "@/lib/autosave/useAutosave";
import { useDraftStream } from "@/lib/stream/useDraftStream";
import { ChapterList } from "./ChapterList";
import { ChapterAssistant } from "./ChapterAssistant";
import { Editor } from "./Editor";

interface WorkbenchProps {
  project: ProjectResponse;
}

// M1：单章工作台。章节列表为占位（无章节列表端点）；默认第 1 章。
const M1_CHAPTER_NO = 1;

export function Workbench({ project }: WorkbenchProps) {
  const chapterNo = M1_CHAPTER_NO;
  const [text, setText] = useState("");
  const autosave = useAutosave(project.id, chapterNo);
  const stream = useDraftStream();
  const lastStreamText = useRef("");

  // 流式 token 累积进编辑器（打字机）；停止/结束后已生成部分留在草稿。
  useEffect(() => {
    const streamed = stream.state.text;
    if (
      (stream.state.phase === "streaming" ||
        stream.state.phase === "done" ||
        stream.state.phase === "aborted") &&
      streamed !== lastStreamText.current
    ) {
      lastStreamText.current = streamed;
      setText(streamed);
      autosave.onChange(streamed);
    }
  }, [stream.state.phase, stream.state.text, autosave]);

  const onWrite = (): void => {
    void stream.start(project.id, chapterNo);
  };

  const onEditorChange = (value: string): void => {
    setText(value);
    autosave.onChange(value);
  };

  const wordCount = text.length;

  return (
    <AppShell
      title={`〈${project.title}〉`}
      subtitle={`第 ${chapterNo} 章`}
    >
      <div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[12rem_1fr_18rem]">
        <ChapterList currentChapterNo={chapterNo} />

        <section className="flex min-w-0 flex-col bg-bg">
          <div className="flex-1 overflow-auto px-6 py-8">
            <Editor
              value={text}
              onChange={onEditorChange}
              streaming={stream.isStreaming}
            />
          </div>
          <Toolbar
            projectId={project.id}
            chapterNo={chapterNo}
            wordCount={wordCount}
            savedLabel={autosave.savedLabel}
            saveStatus={autosave.status}
            streaming={stream.isStreaming}
            streamError={stream.state.error}
            onWrite={onWrite}
            onStop={stream.stop}
          />
        </section>

        <ChapterAssistant />
      </div>
    </AppShell>
  );
}

interface ToolbarProps {
  projectId: string;
  chapterNo: number;
  wordCount: number;
  savedLabel: string | null;
  saveStatus: ReturnType<typeof useAutosave>["status"];
  streaming: boolean;
  streamError: { code: string; message: string } | null;
  onWrite: () => void;
  onStop: () => void;
}

function Toolbar({
  projectId,
  chapterNo,
  wordCount,
  savedLabel,
  saveStatus,
  streaming,
  streamError,
  onWrite,
  onStop,
}: ToolbarProps) {
  return (
    <div className="border-t border-line bg-panel px-6 py-3">
      {streamError ? (
        <p className="mb-2 text-sm text-conflict">
          写章失败（{streamError.code}）：{streamError.message}
        </p>
      ) : null}
      <div className="flex items-center gap-4">
        {streaming ? (
          <button
            type="button"
            onClick={onStop}
            className="rounded border border-conflict px-4 py-2 text-sm text-conflict"
          >
            停
          </button>
        ) : (
          <button
            type="button"
            onClick={onWrite}
            className="rounded bg-cinnabar px-4 py-2 text-sm text-panel hover:opacity-90"
          >
            ✍ 写本章
          </button>
        )}
        <span className="font-mono text-xs text-ink-soft">
          字数 {wordCount.toLocaleString()}
        </span>
        <Link
          href={`/projects/${projectId}/review?chapter=${chapterNo}`}
          className="rounded border border-cinnabar px-4 py-2 text-sm text-cinnabar hover:bg-[var(--color-cinnabar-wash)]"
        >
          审稿 →
        </Link>
        <span className="ml-auto font-mono text-xs text-ink-soft">
          {saveStatus === "saving"
            ? "保存中…"
            : saveStatus === "error"
              ? "保存失败"
              : (savedLabel ?? "尚未保存")}
        </span>
      </div>
    </div>
  );
}