import {
  type ReactNode,
  useDeferredValue,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import type {
  EightAnchorContent,
  KeyRelationshipValue,
} from '../../packages/shared/src/contracts/customWorldAgent';
import { getCustomWorldSceneRelativePositionLabel } from '../data/customWorldSceneGraph';
import {
  resolveCustomWorldCampSceneImage,
  resolveCustomWorldLandmarkImageMap,
} from '../data/customWorldVisuals';
import { resolveCustomWorldCampScene } from '../services/customWorldCamp';
import { normalizeCustomWorldCreatorIntent } from '../services/customWorldCreatorIntent';
import {
  AnimationState,
  Character,
  CustomWorldProfile,
  type SceneActBlueprint,
  type SceneChapterBlueprint,
} from '../types';
import { CharacterAnimator } from './CharacterAnimator';
import type { RpgCreationEditorTarget } from './rpg-creation-editor/RpgCreationEntityEditorModal';
import { CustomWorldNpcPortrait } from './CustomWorldNpcVisualEditor';
import { ResolvedAssetImage } from './ResolvedAssetImage';

export type ResultTab = 'world' | 'playable' | 'story' | 'landmarks';

type PendingGeneratedEntity = {
  id: string;
  kind: 'playable' | 'story' | 'landmark';
  title: string;
  progress: number;
  phaseLabel: string;
};

type RecentGeneratedIds = Record<'playable' | 'story' | 'landmark', string[]>;

interface CustomWorldEntityCatalogProps {
  profile: CustomWorldProfile;
  previewCharacters: Character[];
  activeTab: ResultTab;
  onActiveTabChange: (tab: ResultTab) => void;
  onEditTarget: (target: RpgCreationEditorTarget) => void;
  onProfileChange: (profile: CustomWorldProfile) => void;
  onDeleteStoryNpcs?: (ids: string[]) => void;
  onDeleteLandmarks?: (ids: string[]) => void;
  createActionLabel?: string;
  onCreateAction?: () => void;
  createActionDisabled?: boolean;
  pendingGeneratedEntity?: PendingGeneratedEntity | null;
  recentGeneratedIds?: RecentGeneratedIds;
  readOnly?: boolean;
}

const RESULT_TABS: Array<{ id: ResultTab; label: string }> = [
  { id: 'world', label: '世界' },
  { id: 'playable', label: '可扮演角色' },
  { id: 'story', label: '场景角色' },
  { id: 'landmarks', label: '场景' },
];

function Section({
  title,
  subtitle,
  badge,
  actions,
  children,
}: {
  title: string;
  subtitle?: string;
  badge?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
}) {
  return (
    <div className="platform-surface platform-surface--soft px-3.5 py-3">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="text-xs font-bold tracking-[0.16em] text-white">
            {title}
          </div>
          {subtitle ? (
            <div className="mt-1 text-xs leading-6 text-zinc-500">
              {subtitle}
            </div>
          ) : null}
        </div>
        <div className="flex items-center gap-2">
          {badge}
          {actions}
        </div>
      </div>
      <div className="mt-3">{children}</div>
    </div>
  );
}

function SmallButton({
  onClick,
  children,
  tone = 'default',
  disabled = false,
}: {
  onClick: React.MouseEventHandler<HTMLButtonElement>;
  children: ReactNode;
  tone?: 'default' | 'sky' | 'rose';
  disabled?: boolean;
  actions?: ReactNode;
}) {
  const toneClassName =
    tone === 'sky'
      ? 'platform-button platform-button--primary'
      : tone === 'rose'
        ? 'platform-button platform-button--danger'
        : 'platform-button platform-button--ghost';

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={`${toneClassName} min-h-0 rounded-full px-3 py-1 text-[11px] ${disabled ? 'cursor-not-allowed opacity-45' : ''}`}
    >
      {children}
    </button>
  );
}

function SearchBox({
  value,
  onChange,
  placeholder,
}: {
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
}) {
  return (
    <div className="platform-subpanel rounded-2xl px-3 py-2">
      <input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className="w-full bg-transparent text-sm text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
      />
    </div>
  );
}

function ImageFrame({
  src,
  alt,
  fallbackLabel,
  tone = 'square',
}: {
  src?: string;
  alt: string;
  fallbackLabel: string;
  tone?: 'square' | 'landscape';
}) {
  return (
    <div
      className={`overflow-hidden rounded-2xl border border-[var(--platform-subpanel-border)] bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.22),transparent_42%),linear-gradient(180deg,rgba(255,96,147,0.92),rgba(255,146,109,0.84))] ${tone === 'landscape' ? 'aspect-[16/9]' : 'aspect-square'}`}
    >
      {src ? (
        <ResolvedAssetImage
          src={src}
          alt={alt}
          className="h-full w-full object-cover"
        />
      ) : (
        <div className="flex h-full w-full items-center justify-center px-4 text-center text-sm font-semibold tracking-[0.18em] text-zinc-400">
          {fallbackLabel}
        </div>
      )}
    </div>
  );
}

function EmptyState({ title }: { title: string }) {
  return (
    <div className="platform-subpanel rounded-2xl border-dashed px-5 py-6 text-center">
      <div className="text-sm text-[var(--platform-text-base)]">{title}</div>
    </div>
  );
}

function buildFallbackRenderKey(
  value: string | null | undefined,
  fallback: string,
) {
  const normalizedValue = value?.trim();
  return normalizedValue ? normalizedValue : fallback;
}

function NewBadge() {
  return (
    <span className="platform-pill platform-pill--warm px-2.5 py-1 text-[10px] font-semibold">
      新
    </span>
  );
}

function PendingEntityCard({
  title,
  phaseLabel,
  progress,
}: {
  title: string;
  phaseLabel: string;
  progress: number;
}) {
  return (
    <div className="platform-banner platform-banner--info rounded-[1.35rem] px-4 py-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="text-sm font-semibold text-[var(--platform-text-strong)]">
            {title}
          </div>
          <div className="mt-1 text-xs leading-6">
            {phaseLabel}
          </div>
        </div>
        <div className="platform-pill platform-pill--cool px-2.5 py-1 text-[10px]">
          {Math.round(progress)}%
        </div>
      </div>
      <div className="platform-progress-track mt-3 h-2.5 overflow-hidden rounded-full">
        <div
          className="h-full bg-[linear-gradient(90deg,#ff4f8b_0%,#ff8a73_100%)] transition-[width] duration-300"
          style={{ width: `${Math.max(6, Math.min(100, progress))}%` }}
        />
      </div>
    </div>
  );
}

function resolveSceneEntrySceneChapters(params: {
  sceneChapters: CustomWorldProfile['sceneChapterBlueprints'];
  sceneId: string;
  sceneName: string;
}) {
  const sceneChapters = params.sceneChapters ?? [];
  const normalizedSceneId = params.sceneId.trim();
  const normalizedSceneName = params.sceneName.trim();

  const directMatches = sceneChapters.filter(
    (chapter) => chapter.sceneId.trim() === normalizedSceneId,
  );
  if (directMatches.length > 0) {
    return directMatches;
  }

  const linkedMatches = sceneChapters.filter((chapter) =>
    chapter.linkedLandmarkIds.some(
      (landmarkId) => landmarkId.trim() === normalizedSceneId,
    ),
  );
  if (linkedMatches.length > 0) {
    return linkedMatches;
  }

  return sceneChapters.filter((chapter) => {
    const chapterTitle = chapter.title.trim();
    return (
      chapterTitle === normalizedSceneName ||
      chapter.summary.includes(normalizedSceneName) ||
      chapter.acts.some(
        (act) =>
          act.title.includes(normalizedSceneName) ||
          act.summary.includes(normalizedSceneName),
      )
    );
  });
}

function buildSceneActParticipantText(
  act: SceneActBlueprint,
  roleById: Map<
    string,
    | CustomWorldProfile['playableNpcs'][number]
    | CustomWorldProfile['storyNpcs'][number]
  >,
) {
  const primaryRoleName = roleById.get(act.primaryNpcId)?.name?.trim() || '';
  const supportRoleNames = act.encounterNpcIds
    .filter((roleId) => roleId !== act.primaryNpcId)
    .map((roleId) => roleById.get(roleId)?.name?.trim() || '')
    .filter(Boolean);

  return compactTextList([
    primaryRoleName ? `主角色：${primaryRoleName}` : '',
    supportRoleNames.length > 0
      ? `相遇角色：${supportRoleNames.join('、')}`
      : '',
  ]).join('；');
}

function buildSceneChapterSearchText(
  sceneChapters: SceneChapterBlueprint[],
  roleById: Map<
    string,
    | CustomWorldProfile['playableNpcs'][number]
    | CustomWorldProfile['storyNpcs'][number]
  >,
) {
  return sceneChapters
    .flatMap((chapter) => [
      chapter.title,
      chapter.summary,
      ...chapter.acts.flatMap((act) => [
        act.title,
        act.summary,
        act.actGoal,
        act.transitionHook,
        buildSceneActParticipantText(act, roleById),
      ]),
    ])
    .filter(Boolean)
    .join(' ');
}

function resolveSceneCardImage(params: {
  sceneImageSrc?: string | null;
  sceneChapters: SceneChapterBlueprint[];
}) {
  const firstActImageSrc =
    params.sceneChapters
      .flatMap((chapter) => chapter.acts)
      .map((act) => act.backgroundImageSrc?.trim() || '')
      .find(Boolean) || '';

  return firstActImageSrc || params.sceneImageSrc?.trim() || '';
}

function collectSceneActImagePreviews(sceneChapters: SceneChapterBlueprint[]) {
  return sceneChapters.flatMap((chapter) =>
    chapter.acts
      .map((act, index) => ({
        id: act.id.trim() || `${chapter.id}-act-${index}`,
        title: act.title.trim() || `第${index + 1}幕`,
        imageSrc: act.backgroundImageSrc?.trim() || '',
      }))
      .filter((act) => act.imageSrc),
  );
}

function buildFallbackSceneActImagePreviews(params: {
  sceneChapters: SceneChapterBlueprint[];
  sceneImageSrc?: string | null;
}) {
  const actPreviews = collectSceneActImagePreviews(params.sceneChapters);
  const sceneImageSrc = params.sceneImageSrc?.trim() || '';

  if (actPreviews.length > 0 || !sceneImageSrc) {
    return actPreviews;
  }

  // 中文注释：旧草稿可能只把开局场景图写在 camp.imageSrc，尚未回填到每一幕；目录侧先用场景图兜底，避免开局场景看起来没有幕图片。
  return [1, 2, 3].map((actNumber) => ({
    id: `fallback-scene-act-${actNumber}`,
    title: `第${actNumber}幕`,
    imageSrc: sceneImageSrc,
  }));
}

function SceneActPreviewStrip({
  acts,
  sceneName,
}: {
  acts: Array<{ id: string; title: string; imageSrc: string }>;
  sceneName: string;
}) {
  if (acts.length <= 0) return null;

  return (
    <div className="flex w-full gap-1.5 overflow-x-auto pb-0.5">
      {acts.map((act) => (
        <div
          key={act.id}
          className="platform-subpanel h-12 w-[5.25rem] shrink-0 overflow-hidden rounded-xl"
          title={act.title}
        >
          <ResolvedAssetImage
            src={act.imageSrc}
            alt={`${sceneName}-${act.title}`}
            className="h-full w-full object-cover"
          />
        </div>
      ))}
    </div>
  );
}

function CatalogCard({
  title,
  description,
  media,
  badge,
  isSelectionMode,
  isSelected,
  onClick,
  layout = 'stacked',
  mediaClassName,
  disabled = false,
  actions,
}: {
  title: string;
  description: string;
  media: ReactNode;
  badge?: ReactNode;
  isSelectionMode: boolean;
  isSelected: boolean;
  onClick: () => void;
  layout?: 'stacked' | 'compact';
  mediaClassName?: string;
  disabled?: boolean;
  actions?: ReactNode;
}) {
  const selectionBadge = isSelectionMode ? (
    <div
      className={`shrink-0 rounded-full border px-2.5 py-1 text-[10px] ${
        isSelected
          ? 'border-rose-300/25 bg-rose-500/14 text-rose-50'
          : 'platform-subpanel text-[var(--platform-text-soft)]'
      }`}
    >
      {isSelected ? '已选' : '选择'}
    </div>
  ) : null;

  if (layout === 'compact') {
    return (
      <div
        role="button"
        tabIndex={disabled ? -1 : 0}
        onClick={disabled ? undefined : onClick}
        aria-disabled={disabled}
        className={`w-full rounded-[1.3rem] border p-2.5 text-left transition-colors xl:p-3 ${
          isSelected
            ? 'border-rose-300/35 bg-rose-500/10'
            : 'platform-subpanel'
        }`}
      >
        <div className="flex items-start gap-3 xl:gap-3.5">
          <div
            className={`platform-subpanel shrink-0 overflow-hidden rounded-[1rem] ${mediaClassName ?? 'h-[4.75rem] w-[4.75rem]'}`}
          >
            {media}
          </div>
          <div className="min-w-0 flex-1 xl:min-h-[5.6rem]">
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0 text-[15px] font-semibold leading-5 text-white xl:line-clamp-1">
                {title}
              </div>
              <div className="flex items-center gap-2">
                {badge}
                {selectionBadge}
              </div>
            </div>
            <div className="mt-1.5 text-sm leading-5 text-zinc-300 xl:line-clamp-2">
              {description || '暂无描述'}
            </div>
            {actions ? <div className="mt-2 flex flex-wrap gap-2">{actions}</div> : null}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      role="button"
      tabIndex={disabled ? -1 : 0}
      onClick={disabled ? undefined : onClick}
      aria-disabled={disabled}
      className={`w-full rounded-[1.4rem] border p-3 text-left transition-colors ${
        isSelected
          ? 'border-rose-300/35 bg-rose-500/10'
          : 'platform-subpanel'
      }`}
    >
      <div className="space-y-3">
        <div
          className={`platform-subpanel overflow-hidden rounded-[1.1rem] ${mediaClassName ?? ''}`}
        >
          {media}
        </div>
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0 text-base font-semibold text-white">
            {title}
          </div>
          <div className="flex items-center gap-2">
            {badge}
            {selectionBadge}
          </div>
        </div>
        <div className="text-sm leading-6 text-zinc-300">
          {description || '暂无描述'}
        </div>
        {actions ? <div className="flex flex-wrap gap-2">{actions}</div> : null}
      </div>
    </div>
  );
}

function matchText(text: string, query: string) {
  return text.toLowerCase().includes(query.toLowerCase());
}

function getSearchPlaceholder(tab: ResultTab) {
  if (tab === 'playable') return '搜索角色名称、称号、标签';
  if (tab === 'story') return '搜索场景角色名称、身份、动机';
  if (tab === 'landmarks') return '搜索场景名称、描述、NPC、连接';
  return '搜索';
}

function compactTextList(values: Array<string | null | undefined>) {
  return values.map((value) => value?.trim() ?? '').filter(Boolean);
}

function buildPlayableRoleCardDescription(
  role: CustomWorldProfile['playableNpcs'][number],
) {
  const summary =
    role.description.trim() ||
    role.backstoryReveal.publicSummary.trim() ||
    role.backstory.trim() ||
    role.motivation.trim();

  return compactTextList([role.title || role.role, summary]).join(' / ');
}

function resolvePlayableRolePreviewImage(
  role: CustomWorldProfile['playableNpcs'][number],
  previewCharacter: Character | null,
) {
  if (role.imageSrc?.trim()) {
    return role.imageSrc;
  }

  if (previewCharacter?.portrait?.trim()) {
    return previewCharacter.portrait;
  }

  if (previewCharacter?.avatar?.trim()) {
    return previewCharacter.avatar;
  }

  return '';
}

function toText(value: unknown) {
  return typeof value === 'string' ? value.trim() : '';
}

function toTextArray(value: unknown) {
  return Array.isArray(value)
    ? value.map((item) => toText(item)).filter(Boolean)
    : [];
}

function toRecord(value: unknown) {
  return value && typeof value === 'object' && !Array.isArray(value)
    ? (value as Record<string, unknown>)
    : null;
}

function buildRelationshipSeedText(value: unknown) {
  const record = toRecord(value);
  if (!record) {
    return '';
  }

  return compactTextList([
    toText(record.name),
    toText(record.role),
    toText(record.relationToPlayer)
      ? `与玩家：${toText(record.relationToPlayer)}`
      : '',
    toText(record.hiddenHook) ? `代价/暗线：${toText(record.hiddenHook)}` : '',
  ]).join('；');
}

function buildKeyRelationshipText(value: KeyRelationshipValue) {
  return compactTextList([
    value.pairs,
    value.relationshipType,
    value.secretOrCost ? `代价/秘密：${value.secretOrCost}` : '',
  ]).join('；');
}

function buildAnchorContentFromProfileFallback(
  profile: CustomWorldProfile,
): EightAnchorContent {
  const creatorIntent = normalizeCustomWorldCreatorIntent(profile.creatorIntent);
  const relationshipSeed = creatorIntent?.keyCharacters[0] ?? null;

  return {
    worldPromise: {
      hook:
        creatorIntent?.worldHook ||
        profile.anchorPack?.worldSummary ||
        profile.summary,
      differentiator: profile.subtitle || profile.settingText,
      desiredExperience:
        compactTextList([
          creatorIntent?.toneDirectives.join('、') || '',
          profile.tone,
        ]).join('；') || profile.tone,
    },
    playerFantasy: {
      playerRole: creatorIntent?.playerPremise || profile.playerGoal,
      corePursuit: profile.playerGoal,
      fearOfLoss:
        relationshipSeed?.hiddenHook ||
        creatorIntent?.coreConflicts[0] ||
        profile.coreConflicts[0] ||
        '',
    },
    themeBoundary: {
      toneKeywords: compactTextList([
        creatorIntent?.themeKeywords.join('、') || '',
        creatorIntent?.toneDirectives.join('、') || '',
      ]),
      aestheticDirectives: compactTextList([profile.tone, profile.subtitle]),
      forbiddenDirectives: creatorIntent?.forbiddenDirectives ?? [],
    },
    playerEntryPoint: {
      openingIdentity: creatorIntent?.playerPremise || '',
      openingProblem:
        creatorIntent?.openingSituation || profile.coreConflicts[0] || '',
      entryMotivation: profile.playerGoal,
    },
    coreConflict: {
      surfaceConflicts:
        creatorIntent?.coreConflicts.length
          ? creatorIntent.coreConflicts
          : profile.coreConflicts,
      hiddenCrisis:
        relationshipSeed?.hiddenHook ||
        profile.summary ||
        profile.settingText,
      firstTouchedConflict:
        creatorIntent?.openingSituation ||
        profile.coreConflicts[0] ||
        profile.playerGoal,
    },
    keyRelationships: relationshipSeed
      ? [
          {
            pairs: compactTextList([
              relationshipSeed.name,
              relationshipSeed.role,
            ]).join(' · '),
            relationshipType: relationshipSeed.relationToPlayer || '',
            secretOrCost: relationshipSeed.hiddenHook || '',
          },
        ]
      : [],
    hiddenLines: {
      hiddenTruths: compactTextList([
        relationshipSeed?.hiddenHook || '',
        profile.summary,
      ]),
      misdirectionHints: compactTextList([
        profile.subtitle,
        profile.majorFactions[0] || '',
      ]),
      revealPacing:
        creatorIntent?.openingSituation ||
        profile.coreConflicts[0] ||
        profile.playerGoal,
    },
    iconicElements: {
      iconicMotifs:
        creatorIntent?.iconicElements.length
          ? creatorIntent.iconicElements
          : compactTextList([
              profile.anchorPack?.motifDirectives.join('、') || '',
              profile.landmarks[0]?.name || '',
            ]),
      institutionsOrArtifacts: compactTextList([
        profile.camp?.name || '',
        profile.majorFactions[0] || '',
      ]),
      hardRules: compactTextList([profile.playerGoal, profile.coreConflicts[0] || '']),
    },
  };
}

function getProfileAnchorContent(profile: CustomWorldProfile) {
  const anchorContentRecord = profile.anchorContent;
  if (!anchorContentRecord) {
    return buildAnchorContentFromProfileFallback(profile);
  }

  const worldPromiseRecord = toRecord(anchorContentRecord.worldPromise);
  const playerFantasyRecord = toRecord(anchorContentRecord.playerFantasy);
  const themeBoundaryRecord = toRecord(anchorContentRecord.themeBoundary);
  const playerEntryPointRecord = toRecord(anchorContentRecord.playerEntryPoint);
  const coreConflictRecord = toRecord(anchorContentRecord.coreConflict);
  const hiddenLinesRecord = toRecord(anchorContentRecord.hiddenLines);
  const iconicElementsRecord = toRecord(anchorContentRecord.iconicElements);

  return {
    worldPromise: worldPromiseRecord
      ? {
          hook: toText(worldPromiseRecord.hook),
          differentiator: toText(worldPromiseRecord.differentiator),
          desiredExperience: toText(worldPromiseRecord.desiredExperience),
        }
      : null,
    playerFantasy: playerFantasyRecord
      ? {
          playerRole: toText(playerFantasyRecord.playerRole),
          corePursuit: toText(playerFantasyRecord.corePursuit),
          fearOfLoss: toText(playerFantasyRecord.fearOfLoss),
        }
      : null,
    themeBoundary: themeBoundaryRecord
      ? {
          toneKeywords: toTextArray(themeBoundaryRecord.toneKeywords),
          aestheticDirectives: toTextArray(
            themeBoundaryRecord.aestheticDirectives,
          ),
          forbiddenDirectives: toTextArray(themeBoundaryRecord.forbiddenDirectives),
        }
      : null,
    playerEntryPoint: playerEntryPointRecord
      ? {
          openingIdentity: toText(playerEntryPointRecord.openingIdentity),
          openingProblem: toText(playerEntryPointRecord.openingProblem),
          entryMotivation: toText(playerEntryPointRecord.entryMotivation),
        }
      : null,
    coreConflict: coreConflictRecord
      ? {
          surfaceConflicts: toTextArray(coreConflictRecord.surfaceConflicts),
          hiddenCrisis: toText(coreConflictRecord.hiddenCrisis),
          firstTouchedConflict: toText(coreConflictRecord.firstTouchedConflict),
        }
      : null,
    keyRelationships: Array.isArray(anchorContentRecord.keyRelationships)
      ? anchorContentRecord.keyRelationships
          .map((entry) => toRecord(entry))
          .filter(Boolean)
          .map((entry) => ({
            pairs: toText(entry?.pairs),
            relationshipType: toText(entry?.relationshipType),
            secretOrCost: toText(entry?.secretOrCost),
          }))
      : [],
    hiddenLines: hiddenLinesRecord
      ? {
          hiddenTruths: toTextArray(hiddenLinesRecord.hiddenTruths),
          misdirectionHints: toTextArray(hiddenLinesRecord.misdirectionHints),
          revealPacing: toText(hiddenLinesRecord.revealPacing),
        }
      : null,
    iconicElements: iconicElementsRecord
      ? {
          iconicMotifs: toTextArray(iconicElementsRecord.iconicMotifs),
          institutionsOrArtifacts: toTextArray(
            iconicElementsRecord.institutionsOrArtifacts,
          ),
          hardRules: toTextArray(iconicElementsRecord.hardRules),
        }
      : null,
  } satisfies EightAnchorContent;
}

function buildOpeningSceneSearchText(
  profile: CustomWorldProfile,
  campScene: ReturnType<typeof resolveCustomWorldCampScene>,
) {
  return [
    campScene.name,
    campScene.description,
    profile.playerGoal,
    profile.summary,
    '开局场景',
    '开局归处',
  ].join(' ');
}

function buildStructuredFoundationEntries(profile: CustomWorldProfile) {
  const creatorIntent = normalizeCustomWorldCreatorIntent(profile.creatorIntent);
  const anchorContent = getProfileAnchorContent(profile);
  const fallbackRelationshipText =
    buildRelationshipSeedText(creatorIntent?.keyCharacters[0]) ||
    profile.playableNpcs[0]?.relationshipHooks.join('；') ||
    profile.storyNpcs[0]?.relationshipHooks.join('；') ||
    '';

  return [
    {
      id: 'world-promise',
      label: '世界承诺',
      value: compactTextList([
        anchorContent.worldPromise?.hook || '',
        anchorContent.worldPromise?.differentiator || '',
        anchorContent.worldPromise?.desiredExperience || '',
      ]).join('；'),
    },
    {
      id: 'player-fantasy',
      label: '玩家幻想',
      value: compactTextList([
        anchorContent.playerFantasy?.playerRole || '',
        anchorContent.playerFantasy?.corePursuit || '',
        anchorContent.playerFantasy?.fearOfLoss || '',
      ]).join('；'),
    },
    {
      id: 'theme-boundary',
      label: '主题边界',
      value: compactTextList([
        anchorContent.themeBoundary?.toneKeywords.join('、') || '',
        anchorContent.themeBoundary?.aestheticDirectives.join('、') || '',
        anchorContent.themeBoundary?.forbiddenDirectives.length
          ? `避免：${anchorContent.themeBoundary.forbiddenDirectives.join('、')}`
          : '',
      ]).join('；'),
    },
    {
      id: 'player-entry-point',
      label: '玩家切入口',
      value: compactTextList([
        anchorContent.playerEntryPoint?.openingIdentity || '',
        anchorContent.playerEntryPoint?.openingProblem || '',
        anchorContent.playerEntryPoint?.entryMotivation || '',
      ]).join('；'),
    },
    {
      id: 'core-conflict',
      label: '核心冲突',
      value: compactTextList([
        anchorContent.coreConflict?.surfaceConflicts.join('、') || '',
        anchorContent.coreConflict?.hiddenCrisis || '',
        anchorContent.coreConflict?.firstTouchedConflict || '',
      ]).join('；'),
    },
    {
      id: 'key-relationships',
      label: '关键关系',
      value:
        anchorContent.keyRelationships.map(buildKeyRelationshipText).join('\n') ||
        fallbackRelationshipText,
    },
    {
      id: 'hidden-lines',
      label: '暗线与揭示',
      value: compactTextList([
        anchorContent.hiddenLines?.hiddenTruths.join('、') || '',
        anchorContent.hiddenLines?.misdirectionHints.join('、') || '',
        anchorContent.hiddenLines?.revealPacing || '',
      ]).join('；'),
    },
    {
      id: 'iconic-elements',
      label: '标志元素',
      value: compactTextList([
        anchorContent.iconicElements?.iconicMotifs.join('、') || '',
        anchorContent.iconicElements?.institutionsOrArtifacts.join('、') || '',
        anchorContent.iconicElements?.hardRules.join('、') || '',
      ]).join('；'),
    },
  ];
}

type CatalogRole =
  | CustomWorldProfile['playableNpcs'][number]
  | CustomWorldProfile['storyNpcs'][number];

type BulkDeleteTab = 'story' | 'landmarks';

function buildRoleSearchText(role: CatalogRole) {
  return [
    role.name,
    role.title,
    role.role,
    role.description,
    role.backstory,
    role.backstoryReveal.publicSummary,
    role.personality,
    role.motivation,
    role.combatStyle,
    ...role.backstoryReveal.chapters.flatMap((chapter) => [
      chapter.title,
      chapter.teaser,
      chapter.content,
      chapter.contextSnippet,
    ]),
    ...role.skills.flatMap((skill) => [skill.name, skill.summary, skill.style]),
    ...role.initialItems.flatMap((item) => [
      item.name,
      item.category,
      item.description,
      ...item.tags,
    ]),
    ...role.relationshipHooks,
    ...role.tags,
  ].join(' ');
}

function buildLandmarkSearchText(
  landmark: CustomWorldProfile['landmarks'][number],
  storyNpcById: Map<string, CustomWorldProfile['storyNpcs'][number]>,
  landmarkById: Map<string, CustomWorldProfile['landmarks'][number]>,
) {
  return [
    landmark.name,
    landmark.description,
    ...landmark.sceneNpcIds.map((npcId) => storyNpcById.get(npcId)?.name ?? ''),
    ...landmark.connections.flatMap((connection) => [
      landmarkById.get(connection.targetLandmarkId)?.name ?? '',
      getCustomWorldSceneRelativePositionLabel(connection.relativePosition),
      connection.summary,
    ]),
  ].join(' ');
}

export function CustomWorldEntityCatalog({
  profile,
  previewCharacters,
  activeTab,
  onActiveTabChange,
  onEditTarget,
  onProfileChange,
  onDeleteStoryNpcs,
  onDeleteLandmarks,
  createActionLabel,
  onCreateAction,
  createActionDisabled = false,
  pendingGeneratedEntity = null,
  recentGeneratedIds = {
    playable: [],
    story: [],
    landmark: [],
  },
  readOnly = false,
}: CustomWorldEntityCatalogProps) {
  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
  const [searchDraft, setSearchDraft] = useState('');
  const [bulkDeleteMode, setBulkDeleteMode] = useState<BulkDeleteTab | null>(
    null,
  );
  const [selectedBulkIds, setSelectedBulkIds] = useState<string[]>([]);
  const deferredSearch = useDeferredValue(searchDraft.trim());

  const storyNpcById = useMemo(
    () => new Map(profile.storyNpcs.map((npc) => [npc.id, npc])),
    [profile.storyNpcs],
  );
  const roleById = useMemo(
    () =>
      new Map(
        [...profile.playableNpcs, ...profile.storyNpcs].map((role) => [
          role.id,
          role,
        ]),
      ),
    [profile.playableNpcs, profile.storyNpcs],
  );
  const landmarkById = useMemo(
    () => new Map(profile.landmarks.map((landmark) => [landmark.id, landmark])),
    [profile.landmarks],
  );
  const landmarkImageById = useMemo(
    () => resolveCustomWorldLandmarkImageMap(profile),
    [profile],
  );
  const resolvedCampScene = useMemo(
    () => resolveCustomWorldCampScene(profile),
    [profile],
  );
  const resolvedCampImageSrc = useMemo(
    () => resolveCustomWorldCampSceneImage(profile),
    [profile],
  );
  const previewCharacterById = useMemo(
    () =>
      new Map(
        profile.playableNpcs.map((role, index) => [
          role.id,
          previewCharacters[index] ?? null,
        ]),
      ),
    [previewCharacters, profile.playableNpcs],
  );
  const recentPlayableIdSet = useMemo(
    () => new Set(recentGeneratedIds.playable),
    [recentGeneratedIds.playable],
  );
  const recentStoryIdSet = useMemo(
    () => new Set(recentGeneratedIds.story),
    [recentGeneratedIds.story],
  );
  const recentLandmarkIdSet = useMemo(
    () => new Set(recentGeneratedIds.landmark),
    [recentGeneratedIds.landmark],
  );

  const filteredPlayable = useMemo(
    () =>
      profile.playableNpcs.filter(
        (role) =>
          !deferredSearch ||
          matchText(buildRoleSearchText(role), deferredSearch),
      ),
    [deferredSearch, profile.playableNpcs],
  );

  const filteredStory = useMemo(
    () =>
      profile.storyNpcs.filter(
        (npc) =>
          !deferredSearch ||
          matchText(buildRoleSearchText(npc), deferredSearch),
      ),
    [deferredSearch, profile.storyNpcs],
  );

  const filteredLandmarks = useMemo(
    () =>
      profile.landmarks.filter(
        (landmark) =>
          !deferredSearch ||
          matchText(
            buildLandmarkSearchText(landmark, storyNpcById, landmarkById),
            deferredSearch,
          ),
      ),
    [deferredSearch, landmarkById, profile.landmarks, storyNpcById],
  );
  const structuredFoundationEntries = useMemo(
    () => buildStructuredFoundationEntries(profile),
    [profile],
  );
  const normalizedCreatorIntent = useMemo(
    () => normalizeCustomWorldCreatorIntent(profile.creatorIntent),
    [profile.creatorIntent],
  );
  const filteredSceneEntries = useMemo(() => {
    const openingSceneChapters = resolveSceneEntrySceneChapters({
      sceneChapters: profile.sceneChapterBlueprints,
      sceneId: resolvedCampScene.id,
      sceneName: resolvedCampScene.name,
    });
    const openingSceneImageSrc = resolveSceneCardImage({
      sceneImageSrc: resolvedCampImageSrc,
      sceneChapters: openingSceneChapters,
    });
    const openingSceneEntry = {
      id: resolvedCampScene.id,
      kind: 'camp' as const,
      name: resolvedCampScene.name,
      description: resolvedCampScene.description,
      imageSrc: openingSceneImageSrc,
      sceneChapters: openingSceneChapters,
      actPreviews: buildFallbackSceneActImagePreviews({
        sceneChapters: openingSceneChapters,
        sceneImageSrc: openingSceneImageSrc,
      }),
      searchText: [
        buildOpeningSceneSearchText(profile, resolvedCampScene),
        buildSceneChapterSearchText(openingSceneChapters, roleById),
      ]
        .filter(Boolean)
        .join(' '),
    };
    const landmarkEntries = profile.landmarks.map((landmark) => {
      const sceneChapters = resolveSceneEntrySceneChapters({
        sceneChapters: profile.sceneChapterBlueprints,
        sceneId: landmark.id,
        sceneName: landmark.name,
      });
      const sceneImageSrc = resolveSceneCardImage({
        sceneImageSrc: landmarkImageById.get(landmark.id) ?? landmark.imageSrc,
        sceneChapters,
      });

      return {
        id: landmark.id,
        kind: 'landmark' as const,
        name: landmark.name,
        description: landmark.description,
        imageSrc: sceneImageSrc,
        sceneChapters,
        actPreviews: buildFallbackSceneActImagePreviews({
          sceneChapters,
          sceneImageSrc,
        }),
        searchText: [
          buildLandmarkSearchText(landmark, storyNpcById, landmarkById),
          buildSceneChapterSearchText(sceneChapters, roleById),
        ]
          .filter(Boolean)
          .join(' '),
      };
    });
    const recentEntries = landmarkEntries.filter((entry) =>
      recentLandmarkIdSet.has(entry.id),
    );
    const restEntries = landmarkEntries.filter(
      (entry) => !recentLandmarkIdSet.has(entry.id),
    );
    const allEntries = [...recentEntries, openingSceneEntry, ...restEntries];

    if (!deferredSearch) {
      return allEntries;
    }

    return allEntries.filter((entry) =>
      matchText(entry.searchText, deferredSearch),
    );
  }, [
    deferredSearch,
    landmarkById,
    landmarkImageById,
    profile,
    recentLandmarkIdSet,
    resolvedCampImageSrc,
    resolvedCampScene,
    roleById,
    storyNpcById,
  ]);

  const lockedCharacterNames = useMemo(
    () =>
      new Set(
        normalizedCreatorIntent?.keyCharacters
          .filter((entry) => entry.locked)
          .map((entry) => entry.name.trim())
          .filter(Boolean) ?? [],
      ),
    [normalizedCreatorIntent],
  );

  const counts = {
    world: 1,
    playable:
      profile.playableNpcs.length +
      (pendingGeneratedEntity?.kind === 'playable' ? 1 : 0),
    story:
      profile.storyNpcs.length +
      (pendingGeneratedEntity?.kind === 'story' ? 1 : 0),
    landmarks:
      profile.landmarks.length +
      1 +
      (pendingGeneratedEntity?.kind === 'landmark' ? 1 : 0),
  } satisfies Record<ResultTab, number>;
  const bulkDeleteTab: BulkDeleteTab | null =
    activeTab === 'story' || activeTab === 'landmarks' ? activeTab : null;
  const isBulkDeleteMode =
    bulkDeleteTab !== null && bulkDeleteMode === bulkDeleteTab;

  useEffect(() => {
    if (bulkDeleteMode && bulkDeleteMode !== activeTab) {
      setBulkDeleteMode(null);
      setSelectedBulkIds([]);
    }
  }, [activeTab, bulkDeleteMode]);

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;
    if (typeof container.scrollTo === 'function') {
      container.scrollTo({ top: 0, behavior: 'auto' });
      return;
    }
    container.scrollTop = 0;
  }, [activeTab]);

  const removePlayable = (id: string, name: string) => {
    if (profile.playableNpcs.length <= 1) {
      window.alert('至少保留一个可扮演角色，才能正常进入自定义世界。');
      return;
    }
    if (!window.confirm(`确认删除可扮演角色「${name}」吗？`)) return;
    onProfileChange({
      ...profile,
      playableNpcs: profile.playableNpcs.filter((role) => role.id !== id),
    });
  };

  const startBulkDelete = (tab: BulkDeleteTab) => {
    setBulkDeleteMode(tab);
    setSelectedBulkIds([]);
  };

  const cancelBulkDelete = () => {
    setBulkDeleteMode(null);
    setSelectedBulkIds([]);
  };

  const toggleBulkSelected = (id: string) => {
    setSelectedBulkIds((current) =>
      current.includes(id)
        ? current.filter((entry) => entry !== id)
        : [...current, id],
    );
  };

  const confirmBulkDelete = () => {
    if (!bulkDeleteTab || selectedBulkIds.length === 0) {
      return;
    }

    const label = bulkDeleteTab === 'story' ? '场景角色' : '场景';
    const confirmed = window.confirm(
      `确认批量删除 ${selectedBulkIds.length} 个${label}吗？`,
    );
    if (!confirmed) {
      return;
    }

    if (bulkDeleteTab === 'story') {
      onDeleteStoryNpcs?.(selectedBulkIds);
    } else {
      onDeleteLandmarks?.(selectedBulkIds);
    }
    cancelBulkDelete();
  };

  return (
    <div
      ref={scrollContainerRef}
      className="h-full min-h-0 space-y-3 overflow-y-auto overscroll-contain pr-1 scrollbar-hide xl:space-y-4 xl:pr-2"
    >
      <div className="px-1 pb-1 text-center xl:rounded-[2rem] xl:border xl:border-[var(--platform-subpanel-border)] xl:bg-white/55 xl:px-6 xl:py-4 xl:text-left xl:shadow-[0_18px_70px_rgba(255,79,139,0.08)] xl:backdrop-blur-sm">
        <div className="text-[11px] font-bold tracking-[0.28em] text-zinc-500">
          世界档案
        </div>
        <div className="mt-2 text-3xl font-black text-[var(--platform-text-strong)] sm:text-[2.2rem] xl:mt-1 xl:text-[2rem]">
          {profile.name}
        </div>
        <div className="mt-2 text-sm tracking-[0.18em] text-zinc-400 xl:mt-1 xl:text-xs">
          {profile.subtitle}
        </div>
      </div>

      <div className="platform-sticky-fade sticky top-0 z-10 -mx-1 space-y-3 px-1 pb-3 pt-1 backdrop-blur-sm xl:rounded-[1.75rem] xl:border xl:border-[var(--platform-subpanel-border)] xl:bg-white/70 xl:px-4 xl:py-3 xl:shadow-[0_16px_48px_rgba(255,79,139,0.08)]">
        <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide xl:pb-0">
          {RESULT_TABS.map((tab) => (
            <div key={tab.id}>
              <button
                type="button"
                onClick={() => onActiveTabChange(tab.id)}
                className={`platform-tab px-3 py-2 text-left text-sm xl:min-w-[5.25rem] xl:px-4 xl:py-2 ${activeTab === tab.id ? 'platform-tab--active' : ''}`}
              >
                <div className="font-semibold">{tab.label}</div>
                <div className="mt-1 text-[10px] tracking-[0.16em] text-[var(--platform-text-soft)]">
                  {counts[tab.id]}
                </div>
              </button>
            </div>
          ))}
        </div>

        {activeTab !== 'world' ? (
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center xl:gap-3">
            <div className="min-w-0 flex-1">
              <SearchBox
                value={searchDraft}
                onChange={setSearchDraft}
                placeholder={getSearchPlaceholder(activeTab)}
              />
            </div>
            <div className="flex flex-wrap items-center justify-end gap-2">
              {isBulkDeleteMode ? (
                <>
                  <div className="platform-pill platform-pill--neutral px-3 py-1 text-[11px]">
                    已选 {selectedBulkIds.length}
                  </div>
                  <SmallButton onClick={cancelBulkDelete}>取消</SmallButton>
                  <SmallButton onClick={confirmBulkDelete} tone="rose">
                    删除选中
                  </SmallButton>
                </>
              ) : (
                <>
                  {!readOnly && createActionLabel && onCreateAction ? (
                    <SmallButton
                      onClick={onCreateAction}
                      tone="sky"
                      disabled={createActionDisabled}
                    >
                      {createActionLabel}
                    </SmallButton>
                  ) : null}
                  {!readOnly &&
                  bulkDeleteTab &&
                  ((bulkDeleteTab === 'story' && onDeleteStoryNpcs) ||
                    (bulkDeleteTab === 'landmarks' && onDeleteLandmarks)) ? (
                    <SmallButton
                      onClick={() => startBulkDelete(bulkDeleteTab)}
                      tone="rose"
                    >
                      批量删除
                    </SmallButton>
                  ) : null}
                </>
              )}
            </div>
          </div>
        ) : null}
      </div>

      {activeTab === 'world' ? (
        <div className="space-y-3 xl:grid xl:grid-cols-[0.8fr_1.2fr] xl:items-start xl:gap-3 xl:space-y-0">
          <Section title="档案规模">
            <div className="grid grid-cols-3 gap-2 text-center text-[11px] text-zinc-300">
              <div className="platform-subpanel rounded-xl px-2 py-3">
                <div className="text-xl font-black text-white">
                  {profile.playableNpcs.length}
                </div>
                <div>可扮演角色</div>
              </div>
              <div className="platform-subpanel rounded-xl px-2 py-3">
                <div className="text-xl font-black text-white">
                  {profile.storyNpcs.length}
                </div>
                <div>场景角色</div>
              </div>
              <div className="platform-subpanel rounded-xl px-2 py-3">
                <div className="text-xl font-black text-white">
                  {profile.landmarks.length + 1}
                </div>
                <div>场景</div>
              </div>
            </div>
          </Section>

          <Section
            title="世界概述"
            actions={
              readOnly ? (
                <SmallButton
                  onClick={() => onEditTarget({ kind: 'world' })}
                  tone="sky"
                >
                  查看详情
                </SmallButton>
              ) : (
                <SmallButton
                  onClick={() => onEditTarget({ kind: 'world' })}
                  tone="sky"
                >
                  编辑
                </SmallButton>
              )
            }
          >
              <div className="space-y-3 text-sm leading-7 text-zinc-300">
                <p>{profile.summary}</p>
                <div className="platform-banner platform-banner--warning rounded-2xl px-3 py-3">
                  主线目标：{profile.playerGoal}
                </div>
                <div className="platform-subpanel rounded-2xl px-3 py-3">
                  世界基调：{profile.tone}
                </div>
              </div>
          </Section>

          <Section
            title="基本设定"
            actions={
              readOnly ? (
                <SmallButton
                  onClick={() => onEditTarget({ kind: 'world' })}
                  tone="sky"
                >
                  查看详情
                </SmallButton>
              ) : (
                <SmallButton
                  onClick={() => onEditTarget({ kind: 'world' })}
                  tone="sky"
                >
                  编辑
                </SmallButton>
              )
            }
          >
            <div className="space-y-3">
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                {structuredFoundationEntries.map((entry) => (
                  <div
                    key={entry.id}
                    className="platform-subpanel rounded-2xl px-4 py-4"
                  >
                    <div className="text-[11px] font-bold tracking-[0.18em] text-zinc-500">
                      {entry.label}
                    </div>
                    <div className="mt-2 whitespace-pre-line text-sm leading-7 text-zinc-100">
                      {entry.value || '待补充'}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Section>
        </div>
      ) : null}

      {activeTab === 'playable' ? (
        <div className="space-y-3 xl:grid xl:grid-cols-2 xl:gap-3 xl:space-y-0 2xl:grid-cols-3">
          {pendingGeneratedEntity?.kind === 'playable' ? (
            <PendingEntityCard
              title={pendingGeneratedEntity.title}
              phaseLabel={pendingGeneratedEntity.phaseLabel}
              progress={pendingGeneratedEntity.progress}
            />
          ) : null}
          {filteredPlayable.length === 0 ? (
            <EmptyState title="当前没有符合搜索条件的可扮演角色。" />
          ) : (
            filteredPlayable.map((role, index) => {
              const previewCharacter =
                previewCharacterById.get(role.id) ?? null;
              const previewImageSrc = resolvePlayableRolePreviewImage(
                role,
                previewCharacter,
              );
              const description = buildPlayableRoleCardDescription(role);

              return (
                <div
                  key={buildFallbackRenderKey(
                    role.id,
                    `playable-role-${index}-${role.name.trim() || 'unnamed'}`,
                  )}
                  className="space-y-2"
                >
                  <CatalogCard
                    title={role.name}
                    description={description || '暂无描述'}
                    badge={recentPlayableIdSet.has(role.id) ? <NewBadge /> : null}
                    isSelectionMode={false}
                    isSelected={false}
                    layout="compact"
                    mediaClassName="h-[4.75rem] w-[4.75rem] sm:h-[5.25rem] sm:w-[5.25rem] xl:h-[5.75rem] xl:w-[5.75rem]"
                    onClick={() =>
                      onEditTarget({
                        kind: 'playable',
                        mode: 'edit',
                        id: role.id,
                      })
                    }
                    media={
                      role.imageSrc?.trim() ? (
                        <ResolvedAssetImage
                          src={role.imageSrc}
                          alt={role.name}
                          className="h-full w-full object-cover object-top"
                        />
                      ) : previewCharacter ? (
                        <CharacterAnimator
                          state={AnimationState.RUN}
                          character={previewCharacter}
                          className="h-full w-full"
                          imageClassName="object-bottom"
                        />
                      ) : previewImageSrc ? (
                        <ResolvedAssetImage
                          src={previewImageSrc}
                          alt={role.name}
                          className="h-full w-full object-cover object-top"
                        />
                      ) : (
                          <div className="flex h-full w-full items-center justify-center bg-[rgba(255,255,255,0.64)] px-3 text-center text-xs font-semibold tracking-[0.16em] text-[var(--platform-text-soft)]">
                            {role.name.slice(0, 4) || '角色'}
                          </div>
                      )
                    }
                  />
                  <div className="flex flex-wrap items-center gap-2 px-1">
                    {lockedCharacterNames.has(role.name.trim()) ? (
                      <span className="platform-pill platform-pill--warm px-2.5 py-1 text-[10px]">
                        创作者锁定
                      </span>
                    ) : null}
                    <span className="platform-pill platform-pill--neutral px-2.5 py-1 text-[10px]">
                      初始好感 {role.initialAffinity}
                    </span>
                    {role.generatedVisualAssetId ? (
                      <span className="platform-pill platform-pill--success px-2.5 py-1 text-[10px]">
                        已生成主图
                      </span>
                    ) : null}
                    {role.tags.slice(0, 2).map((tag) => (
                      <span
                        key={`${role.id}-${tag}`}
                        className="platform-pill platform-pill--neutral px-2.5 py-1 text-[10px]"
                      >
                        {tag}
                      </span>
                    ))}
                    {!readOnly ? (
                      <div className="ml-auto">
                        <SmallButton
                          onClick={() => removePlayable(role.id, role.name)}
                          tone="rose"
                        >
                          删除
                        </SmallButton>
                      </div>
                    ) : null}
                  </div>
                </div>
              );
            })
          )}
        </div>
      ) : null}

      {activeTab === 'story' ? (
        <div className="space-y-3 xl:grid xl:grid-cols-2 xl:gap-3 xl:space-y-0 2xl:grid-cols-3">
          {pendingGeneratedEntity?.kind === 'story' ? (
            <PendingEntityCard
              title={pendingGeneratedEntity.title}
              phaseLabel={pendingGeneratedEntity.phaseLabel}
              progress={pendingGeneratedEntity.progress}
            />
          ) : null}
          {filteredStory.length === 0 ? (
            <EmptyState title="当前没有符合搜索条件的场景角色。" />
          ) : (
            filteredStory.map((npc, index) => (
              <div
                key={buildFallbackRenderKey(
                  npc.id,
                  `story-npc-${index}-${npc.name.trim() || 'unnamed'}`,
                )}
              >
                <CatalogCard
                  title={npc.name}
                  description={npc.description}
                  badge={recentStoryIdSet.has(npc.id) ? <NewBadge /> : null}
                  isSelectionMode={isBulkDeleteMode}
                  isSelected={selectedBulkIds.includes(npc.id)}
                  layout="compact"
                  mediaClassName="h-[4.75rem] w-[4.75rem] sm:h-[5.25rem] sm:w-[5.25rem] xl:h-[5.75rem] xl:w-[5.75rem]"
                  onClick={() =>
                    isBulkDeleteMode
                      ? toggleBulkSelected(npc.id)
                      : readOnly
                        ? onEditTarget({
                            kind: 'story',
                            mode: 'edit',
                            id: npc.id,
                          })
                        : onEditTarget({
                            kind: 'story',
                            mode: 'edit',
                            id: npc.id,
                          })
                  }
                  media={
                    <CustomWorldNpcPortrait
                      npc={npc}
                      profile={profile}
                      visual={npc.visual}
                      className="h-full w-full"
                      contentClassName="min-h-0 p-2"
                      scale={1.82}
                      preferImageSrc
                    />
                  }
                />
              </div>
            ))
          )}
        </div>
      ) : null}

      {activeTab === 'landmarks' ? (
        <div className="space-y-3 xl:grid xl:grid-cols-2 xl:gap-3 xl:space-y-0 2xl:grid-cols-3">
          {pendingGeneratedEntity?.kind === 'landmark' ? (
            <PendingEntityCard
              title={pendingGeneratedEntity.title}
              phaseLabel={pendingGeneratedEntity.phaseLabel}
              progress={pendingGeneratedEntity.progress}
            />
          ) : null}
          {filteredSceneEntries.length === 0 ? (
            <EmptyState title="当前没有符合搜索条件的场景。" />
          ) : (
            filteredSceneEntries.map((scene, index) => (
              <CatalogCard
                key={buildFallbackRenderKey(
                  scene.id,
                  `scene-entry-${index}-${scene.name.trim() || scene.kind}`,
                )}
                title={scene.name}
                description={
                  scene.kind === 'camp'
                    ? `开局场景 · ${scene.description}`
                    : scene.description
                }
                badge={
                  scene.kind === 'landmark' && recentLandmarkIdSet.has(scene.id) ? (
                    <NewBadge />
                  ) : null
                }
                isSelectionMode={scene.kind === 'landmark' && isBulkDeleteMode}
                isSelected={
                  scene.kind === 'landmark' &&
                  selectedBulkIds.includes(scene.id)
                }
                onClick={() =>
                  scene.kind === 'camp'
                    ? onEditTarget({ kind: 'camp' })
                    : isBulkDeleteMode
                      ? toggleBulkSelected(scene.id)
                      : onEditTarget({
                          kind: 'landmark',
                          mode: 'edit',
                          id: scene.id,
                        })
                }
                media={
                  <ImageFrame
                    src={scene.imageSrc}
                    alt={scene.name}
                    fallbackLabel={scene.name.slice(0, 4) || '场景'}
                    tone="landscape"
                  />
                }
                actions={
                  <SceneActPreviewStrip
                    acts={scene.actPreviews}
                    sceneName={scene.name}
                  />
                }
                disabled={scene.kind === 'camp' && isBulkDeleteMode}
              />
            ))
          )}
        </div>
      ) : null}
    </div>
  );
}