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 ? (
        <div className="rounded-xl border border-white/8 bg-black/25 px-4 py-3">
          <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>
        </div>
      ) : null}

      {unlockedChapters.map((chapter) => (
        <div
          key={`unlocked-backstory-${chapter.id}`}
          className="rounded-xl border border-amber-300/18 bg-amber-500/[0.06] px-4 py-3"
        >
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="text-sm font-semibold text-white">
              {chapter.title}
            </div>
            <span className="rounded-full border border-amber-300/18 bg-amber-400/10 px-2 py-0.5 text-[10px] tracking-[0.14em] text-amber-100">
              已解锁
            </span>
          </div>
          <div className="mt-2 text-sm leading-relaxed text-zinc-200">
            {chapter.content}
          </div>
        </div>
      ))}

      {lockedChapters.map((chapter) => (
        <div
          key={`locked-backstory-${chapter.id}`}
          className="rounded-xl border border-white/8 bg-black/18 px-4 py-3"
        >
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="text-sm font-semibold text-zinc-200">
              {chapter.title}
            </div>
            <span className="rounded-full border border-white/10 bg-black/20 px-2 py-0.5 text-[10px] tracking-[0.14em] text-zinc-400">
              需好感 {chapter.affinityRequired}
            </span>
          </div>
          <div className="mt-2 text-sm leading-relaxed text-zinc-500">
            {chapter.teaser}
          </div>
        </div>
      ))}

      {!publicSummary && totalChapters === 0 ? (
        <div className="rounded-xl border border-white/8 bg-black/18 px-4 py-3 text-sm text-zinc-500">
          暂无可整理的背景线索。
        </div>
      ) : null}
    </div>
  );
}