Genarrative/src/components/BackstoryArchive.tsx

import { PlatformEmptyState } from './common/PlatformEmptyState';
import { PlatformPillBadge } from './common/PlatformPillBadge';
import { PlatformSubpanel } from './common/PlatformSubpanel';

export type BackstoryUnlockedChapter = {
  id: string;
  title: string;
  content: string;
};

export type BackstoryLockedChapter = {
  id: string;
  title: string;
  teaser: string;
  affinityRequired: number;
};

interface BackstoryArchiveProps {
  publicSummary?: string | null;
  unlockedChapters: BackstoryUnlockedChapter[];
  lockedChapters: BackstoryLockedChapter[];
}

export function BackstoryArchive({
  publicSummary,
  unlockedChapters,
  lockedChapters,
}: BackstoryArchiveProps) {
  const totalChapters = unlockedChapters.length + lockedChapters.length;

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="text-[10px] uppercase tracking-[0.18em] text-zinc-500">
          背景故事
        </div>
        {totalChapters > 0 ? (
          <div className="text-[10px] tracking-[0.14em] text-zinc-500">
            已解锁 {unlockedChapters.length} / {totalChapters}
          </div>
        ) : null}
      </div>

      {publicSummary ? (
        <PlatformSubpanel surface="dark" radius="xs" padding="sm">
          <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
            公开印象
          </div>
          <div className="mt-2 text-sm leading-relaxed text-zinc-200">
            {publicSummary}
          </div>
        </PlatformSubpanel>
      ) : null}

      {unlockedChapters.map((chapter) => (
        <PlatformSubpanel
          key={`unlocked-backstory-${chapter.id}`}
          surface="dark"
          radius="xs"
          padding="sm"
          className="border-amber-300/18 bg-amber-500/[0.06]"
        >
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="text-sm font-semibold text-white">
              {chapter.title}
            </div>
            <PlatformPillBadge
              tone="darkAmber"
              size="xxs"
              className="px-2 py-0.5 tracking-[0.14em]"
            >
              已解锁
            </PlatformPillBadge>
          </div>
          <div className="mt-2 text-sm leading-relaxed text-zinc-200">
            {chapter.content}
          </div>
        </PlatformSubpanel>
      ))}

      {lockedChapters.map((chapter) => (
        <PlatformSubpanel
          key={`locked-backstory-${chapter.id}`}
          surface="dark"
          radius="xs"
          padding="sm"
        >
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="text-sm font-semibold text-zinc-200">
              {chapter.title}
            </div>
            <PlatformPillBadge
              tone="darkNeutral"
              size="xxs"
              className="px-2 py-0.5 tracking-[0.14em]"
            >
              需好感 {chapter.affinityRequired}
            </PlatformPillBadge>
          </div>
          <div className="mt-2 text-sm leading-relaxed text-zinc-500">
            {chapter.teaser}
          </div>
        </PlatformSubpanel>
      ))}

      {!publicSummary && totalChapters === 0 ? (
        <PlatformEmptyState surface="editorDark" size="compact" tone="soft">
          暂无可整理的背景线索。
        </PlatformEmptyState>
      ) : null}
    </div>
  );
}