writer-work-flow/apps/web/components/codex/CodexPage.tsx

"use client";

import { useMemo, useState } from "react";

import { AppShell } from "@/components/AppShell";
import { CharacterGenerator } from "@/components/generation/CharacterGenerator";
import { WorldGenerator } from "@/components/generation/WorldGenerator";
import type {
  CharacterCardView,
  ProjectResponse,
  WorldEntityCardView,
} from "@/lib/api/types";
import {
  mergeCharacterCards,
  worldEntityRules,
} from "@/lib/generation/cards";

type CodexTab = "characters" | "world" | "timeline";

interface CodexPageProps {
  project: ProjectResponse;
  // 后端读端点（GET .../characters / .../world_entities）拉来的跨会话全量真源。
  initialCharacters: CharacterCardView[];
  initialWorldEntities: WorldEntityCardView[];
  // 进页可经 ?gen=character|world 直接打开对应生成器（命令面板动作跳转）。
  initialTab?: CodexTab;
}

const TABS: { key: CodexTab; label: string }[] = [
  { key: "characters", label: "人物" },
  { key: "world", label: "世界观" },
  { key: "timeline", label: "时间线" },
];

// 设定库 Codex（UX §6.5）：管理人物 / 世界观 / 时间线。
// 初始列表来自后端读端点（跨会话全量真源）；本会话新入库的角色卡再合并补显，
// 故刷新后不再为空、且不与真源重复（按 name 去重，见 mergeCharacterCards）。
// 世界观本期无入库端点（仅生成预览）→ 展示真源 + 生成器预览。时间线为 P2/派生，暂占位。
export function CodexPage({
  project,
  initialCharacters,
  initialWorldEntities,
  initialTab = "characters",
}: CodexPageProps) {
  const [tab, setTab] = useState<CodexTab>(initialTab);
  // 本会话内新入库的角色（即时回显，无需刷新即见）。
  const [sessionCards, setSessionCards] = useState<CharacterCardView[]>([]);

  // 真源（初始全量）+ 本会话新卡，按 name 去重合并。
  const characters = useMemo(
    () => mergeCharacterCards(initialCharacters, sessionCards),
    [initialCharacters, sessionCards],
  );

  return (
    <AppShell
      title={`〈${project.title}〉`}
      subtitle="设定库"
      projectId={project.id}
      activeNav="codex"
    >
      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-4">
        <div className="mb-4 flex items-center gap-2" role="tablist">
          {TABS.map((t) => (
            <button
              key={t.key}
              type="button"
              role="tab"
              aria-selected={tab === t.key}
              onClick={() => setTab(t.key)}
              className={`rounded px-3 py-1.5 text-sm ${
                tab === t.key
                  ? "border-b-2 border-cinnabar text-cinnabar"
                  : "text-ink-soft hover:text-ink"
              }`}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="min-h-0 flex-1 overflow-auto">
          {tab === "characters" ? (
            <div className="flex flex-col gap-4">
              <section className="rounded border border-line bg-panel p-3">
                <h3 className="mb-2 font-serif text-sm text-ink">
                  已入库人物（{characters.length}）
                </h3>
                {characters.length > 0 ? (
                  <ul className="flex flex-col gap-2">
                    {characters.map((c, i) => (
                      <li
                        key={`${c.name}-${i}`}
                        className="rounded bg-bg px-2 py-1.5 text-xs text-ink-soft"
                      >
                        <span className="text-ink">
                          {c.name}（{c.role}）
                        </span>
                        {c.relations && c.relations.length > 0 ? (
                          <ul className="mt-1 flex flex-wrap gap-1">
                            {c.relations.map((r, j) => (
                              <li
                                key={`${r.name}-${r.kind}-${j}`}
                                className="rounded bg-panel px-1.5 py-0.5 text-[11px]"
                                title={r.note ?? undefined}
                              >
                                {r.kind} · {r.name}
                              </li>
                            ))}
                          </ul>
                        ) : null}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-xs text-ink-soft">
                    暂无入库人物，先在下方生成并入库。
                  </p>
                )}
              </section>
              <CharacterGenerator
                projectId={project.id}
                onIngested={(_, cards) =>
                  setSessionCards((prev) => [...prev, ...cards])
                }
              />
            </div>
          ) : null}

          {tab === "world" ? (
            <div className="flex flex-col gap-4">
              <section className="rounded border border-line bg-panel p-3">
                <h3 className="mb-2 font-serif text-sm text-ink">
                  已入库世界观（{initialWorldEntities.length}）
                </h3>
                {initialWorldEntities.length > 0 ? (
                  <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
                    {initialWorldEntities.map((entity, i) => (
                      <article
                        key={`${entity.name}-${i}`}
                        className="rounded border border-line bg-bg p-3 text-sm"
                      >
                        <header className="mb-2 flex items-center gap-2">
                          <span className="font-serif text-base text-ink">
                            {entity.name}
                          </span>
                          <span className="rounded bg-panel px-2 py-0.5 text-xs text-ink-soft">
                            {entity.type}
                          </span>
                        </header>
                        {worldEntityRules(entity).length > 0 ? (
                          <ul className="flex list-disc flex-col gap-1 pl-5 text-ink-soft">
                            {worldEntityRules(entity).map((rule, j) => (
                              <li key={j}>{rule}</li>
                            ))}
                          </ul>
                        ) : (
                          <p className="text-ink-soft">（无显式硬规则）</p>
                        )}
                      </article>
                    ))}
                  </div>
                ) : (
                  <p className="text-xs text-ink-soft">
                    暂无入库世界观，可在下方生成预览参考。
                  </p>
                )}
              </section>
              <WorldGenerator projectId={project.id} />
            </div>
          ) : null}

          {tab === "timeline" ? (
            <div className="rounded border border-dashed border-line bg-panel p-6 text-center text-sm text-ink-soft">
              时间线为派生视图（P2），将由章节摘要 + 伏笔窗口自动汇总，敬请期待。
            </div>
          ) : null}
        </div>
      </div>
    </AppShell>
  );
}