import { X } from 'lucide-react';
import { AnimatePresence, motion } from 'motion/react';
import type { ReactNode } from 'react';
import { useEffect, useMemo, useState } from 'react';

import {
  AFFINITY_BACKSTORY_CHAPTER_THRESHOLDS,
  DEFAULT_PRIVATE_CHAT_UNLOCK_AFFINITY,
} from '../data/affinityLevels';
import {
  buildRelationState,
  resolveAttributeSchema,
  resolveCharacterAttributeProfile,
} from '../data/attributeResolver';
import {
  formatBuildContributionPercent,
  getBuildContributionAttributeRows,
  getBuildContributionQualityLabel,
  getCompanionBuildDamageBreakdown,
  getPlayerBuildDamageBreakdown,
  resolveMonsterOutgoingDamage,
} from '../data/buildDamage';
import {
  getCharacterById,
  getCharacterMaxHp,
  getCharacterMaxMana,
  getCharacterPrivateChatUnlockAffinity,
  getCharacterPublicBackstorySummary,
  getInventoryItems,
  getLockedCharacterBackstoryChapters,
  getUnlockedCharacterBackstoryChapters,
} from '../data/characterPresets';
import {
  getHostileNpcPresetById,
  getMonsterPresetsByWorld,
} from '../data/hostileNpcPresets';
import { buildMedievalNpcVisualFromCustomWorldVisual } from '../data/medievalNpcVisuals';
import {
  buildEncounterAttributeRumors,
  resolveEncounterAttributeProfile,
} from '../data/npcAttributeInsights';
import {
  buildInitialNpcState,
  createNpcBattleMonster,
  normalizeNpcPersistentState,
} from '../data/npcInteractions';
import { getSceneHostileNpcPresetIds } from '../data/scenePresets';
import type { CharacterChatTarget } from '../hooks/useStoryGeneration';
import { getResourceLabelsForWorld } from '../services/customWorldPresentation';
import {
  AnimationState,
  type Character,
  type Encounter,
  type GameState,
  type InventoryItem,
  type NpcPersistentState,
} from '../types';
import { getNineSliceStyle, UI_CHROME } from '../uiAssets';
import { AffinityStatusCard } from './AffinityStatusCard';
import {
  BackstoryArchive,
  type BackstoryLockedChapter,
  type BackstoryUnlockedChapter,
} from './BackstoryArchive';
import { CharacterAnimator } from './CharacterAnimator';
import {
  getCharacterDetailSpriteStyle,
  getContributionVisualStyle,
  getSkillDeliveryLabel,
  getSkillStyleLabel,
} from './CharacterInfoHelpers';
import {
  CharacterAttributeGrid,
  CharacterSkillsList,
  MultiplierContributionList,
  StatusRow,
} from './CharacterInfoShared';
import { GENERIC_NPC_SCENE_SCALE } from './game-canvas/GameCanvasShared';
import type { GameCanvasEntitySelection } from './GameCanvas';
import { HostileNpcAnimator } from './HostileNpcAnimator';
import {
  InventoryItemDetailModal,
  InventoryItemGrid,
} from './InventoryItemViews';
import { MedievalNpcAnimator } from './MedievalNpcAnimator';
import { SkillEffectPreview } from './SkillEffectPreview';

interface AdventureEntityModalProps {
  selection: GameCanvasEntitySelection | null;
  gameState: GameState;
  onClose: () => void;
  onOpenCharacterChat?: (target: CharacterChatTarget) => void;
}

const [
  BACKSTORY_UNLOCK_AFFINITY_EASED = 15,
  BACKSTORY_UNLOCK_AFFINITY_FRIENDLY = 30,
  BACKSTORY_UNLOCK_AFFINITY_TRUSTED = 60,
  BACKSTORY_UNLOCK_AFFINITY_CLOSE = 90,
] = AFFINITY_BACKSTORY_CHAPTER_THRESHOLDS;

function estimateCharacterMaxHp(
  character: Character,
  worldType: GameState['worldType'],
  customWorldProfile: GameState['customWorldProfile'],
) {
  return getCharacterMaxHp(character, worldType, customWorldProfile);
}

function estimateNpcMaxHp(
  character: Character | null,
  worldType: GameState['worldType'],
  customWorldProfile: GameState['customWorldProfile'],
) {
  return character
    ? estimateCharacterMaxHp(character, worldType, customWorldProfile)
    : 120;
}

function estimateNpcMaxMana(character: Character | null) {
  return character ? getCharacterMaxMana(character) : 0;
}

function Section({ title, children }: { title: string; children: ReactNode }) {
  return (
    <div className="rounded-2xl border border-white/8 bg-black/20 p-4">
      <div className="mb-3 text-[10px] uppercase tracking-[0.22em] text-zinc-500">
        {title}
      </div>
      {children}
    </div>
  );
}

function resolveSkillPreviewMonsterId(gameState: GameState) {
  if (!gameState.worldType) {
    return null;
  }

  const sceneMonsterId = getSceneHostileNpcPresetIds(gameState.currentScenePreset)[0] ?? null;
  if (sceneMonsterId) {
    return sceneMonsterId;
  }

  return getMonsterPresetsByWorld(gameState.worldType)[0]?.id ?? null;
}

function buildPreviewInventoryDescription(
  characterName: string,
  item: { category: string; name: string; quantity: number },
) {
  const quantityText = item.quantity > 1 ? `，当前数量 x${item.quantity}` : '';

  switch (item.category) {
    case '消耗品':
      return `${characterName} 随身准备的消耗品，适合在关键时刻快速补给${quantityText}。`;
    case '稀有品':
      return `${characterName} 妥善保管的稀有物件，通常和经历、身份或交易筹码有关${quantityText}。`;
    case '专属品':
      return `${characterName} 不轻易示人的专属信物，往往带着明显的个人痕迹${quantityText}。`;
    case '材料':
      return `${characterName} 随身收着的制作材料，可用于后续锻造或交换${quantityText}。`;
    default:
      return `${characterName} 携带的${item.category}${quantityText}。`;
  }
}

function getPreviewInventoryRarity(category: string): InventoryItem['rarity'] {
  switch (category) {
    case '专属品':
      return 'epic';
    case '稀有品':
      return 'rare';
    case '材料':
      return 'uncommon';
    default:
      return 'common';
  }
}

function buildCharacterInventoryPreviewItems(
  character: Character,
  worldType: GameState['worldType'],
) {
  return getInventoryItems(character, worldType).map(
    (item, index) =>
      ({
        id: `preview:${character.id}:${index}:${item.category}:${item.name}`,
        category: item.category,
        name: item.name,
        quantity: item.quantity,
        rarity: getPreviewInventoryRarity(item.category),
        tags: [],
        description: buildPreviewInventoryDescription(character.name, item),
      }) satisfies InventoryItem,
  );
}

function getNpcBadge(
  encounter: Encounter,
  affinity: number,
  battleStatePresent: boolean,
) {
  if (encounter.hostile || battleStatePresent || affinity < 0) {
    return '敌对角色';
  }
  return '相遇角色';
}

function describeRelationStance(affinity: number) {
  switch (buildRelationState(affinity).stance) {
    case 'hostile':
      return '敌对';
    case 'guarded':
      return '戒备';
    case 'neutral':
      return '试探';
    case 'cooperative':
      return '合作';
    case 'bonded':
      return '深信';
    default:
      return '未知';
  }
}

function truncateBackstoryTeaser(text: string, maxLength = 42) {
  const normalized = text.replace(/\s+/g, ' ').trim();
  if (normalized.length <= maxLength) {
    return normalized;
  }

  return `${normalized.slice(0, Math.max(0, maxLength - 1)).trim()}…`;
}

function buildGenericNpcBackstoryArchive(
  encounter: Encounter,
  npcState: NpcPersistentState,
  rumors: string[],
  battleStatePresent: boolean,
): {
  publicSummary: string;
  unlockedChapters: BackstoryUnlockedChapter[];
  lockedChapters: BackstoryLockedChapter[];
} {
  const publicSummary =
    npcState.affinity < 0 || encounter.hostile || battleStatePresent
      ? `${encounter.npcName}表面上仍以“${encounter.context}”的身份行动，但此刻已把你视作敌人。${encounter.npcDescription}`
      : `${encounter.npcName}以“${encounter.context}”的身份出现在你面前。${encounter.npcDescription}`;
  const relationText = describeRelationStance(npcState.affinity);
  const rumorText =
    rumors.length > 0
      ? rumors.join('；')
      : `${encounter.npcName}当前显露出来的大多仍是“${encounter.context}”这一层身份。`;
  const contactText = npcState.firstMeaningfulContactResolved
    ? '你们已经越过最初的表面试探，对方开始显露更稳定的行事轮廓。'
    : '目前仍停留在初见观察阶段，对方真正的来历和立场还没有完全摊开。';
  const chapterBlueprints: Array<
    BackstoryUnlockedChapter & Pick<BackstoryLockedChapter, 'affinityRequired'>
  > = [
    {
      id: 'surface-role',
      title: '表层身份',
      affinityRequired: BACKSTORY_UNLOCK_AFFINITY_EASED,
      content: `${contactText}你最先能确认的是，${encounter.npcName}眼下确实以“${encounter.context}”的身份处理局面。${encounter.npcDescription}`,
    },
    {
      id: 'behavior-clues',
      title: '行事线索',
      affinityRequired: BACKSTORY_UNLOCK_AFFINITY_FRIENDLY,
      content: `随着接触增加，你已经能从细节里摸到一些稳定线索：${rumorText}`,
    },
    {
      id: 'true-stance',
      title: '真实立场',
      affinityRequired: BACKSTORY_UNLOCK_AFFINITY_TRUSTED,
      content:
        npcState.affinity < 0 || encounter.hostile || battleStatePresent
          ? `${encounter.npcName}对你的态度已经明确落到“${relationText}”一侧，很多原本还能试探的空间都转成了直接敌意。`
          : `相处到这一步，你已能判断 ${encounter.npcName} 对你的态度偏“${relationText}”，不再只是维持表面身份，而是开始露出更真实的站位。`,
    },
    {
      id: 'deep-concern',
      title: '深层牵挂',
      affinityRequired: BACKSTORY_UNLOCK_AFFINITY_CLOSE,
      content:
        npcState.affinity < 0 || encounter.hostile || battleStatePresent
          ? `即使局势已经转向对立，你仍能感觉到，${encounter.npcName}真正死守的东西，多半和“${encounter.context}”这一身份背后的职责、利益或旧牵连有关。`
          : `继续相处后，你大致能确认，${encounter.npcName}最在意的仍是“${encounter.context}”这一身份背后的职责、利益或牵挂。虽然未必会全盘交底，但已经肯让你看到更核心的顾虑。`,
    },
  ];

  return {
    publicSummary,
    unlockedChapters: chapterBlueprints
      .filter((chapter) => npcState.affinity >= chapter.affinityRequired)
      .map(({ affinityRequired: _affinityRequired, ...chapter }) => chapter),
    lockedChapters: chapterBlueprints
      .filter((chapter) => npcState.affinity < chapter.affinityRequired)
      .map((chapter) => ({
        id: chapter.id,
        title: chapter.title,
        affinityRequired: chapter.affinityRequired,
        teaser: truncateBackstoryTeaser(chapter.content),
      })),
  };
}

function buildGenericNpcSkillCatalog(params: {
  encounter: Encounter;
  npcState: NpcPersistentState;
  worldType: GameState['worldType'];
  customWorldProfile: GameState['customWorldProfile'];
}): Character['skills'] {
  const { encounter, npcState, worldType, customWorldProfile } = params;
  const battleMonster = createNpcBattleMonster(encounter, npcState, 'fight', {
    worldType,
    customWorldProfile,
  });
  const damage = resolveMonsterOutgoingDamage(
    battleMonster,
    9,
    1,
    worldType,
    customWorldProfile,
  );
  const isRanged = Boolean(
    battleMonster.attackRange >= 3 ||
      battleMonster.combatTags?.some((tag) =>
        ['远射', '法修', '符阵', '雷法'].includes(tag),
      ),
  );

  const basicAttack: Character['skills'][number] = {
    id: `npc-basic-attack:${encounter.id ?? encounter.npcName}`,
    name: '普通攻击',
    animation: AnimationState.ATTACK,
    casterAnimation: AnimationState.ATTACK,
    damage,
    manaCost: 0,
    cooldownTurns: 0,
    range: Number(battleMonster.attackRange.toFixed(1)),
    style: isRanged ? 'projectile' : 'steady',
    delivery: isRanged ? 'ranged' : 'melee',
    releaseDelayMs: isRanged ? 220 : 120,
  };

  return [basicAttack];
}

function buildFallbackCompanionNpcState(affinity: number): NpcPersistentState {
  return normalizeNpcPersistentState({
    affinity,
    relationState: buildRelationState(affinity),
    helpUsed: false,
    chattedCount: 0,
    giftsGiven: 0,
    inventory: [],
    recruited: true,
    revealedFacts: [],
    knownAttributeRumors: [],
    firstMeaningfulContactResolved: true,
    seenBackstoryChapterIds: [],
  });
}

export function AdventureEntityModal({
  selection,
  gameState,
  onClose,
  onOpenCharacterChat,
}: AdventureEntityModalProps) {
  const [selectedSkillId, setSelectedSkillId] = useState<string | null>(null);
  const [selectedContributionLabel, setSelectedContributionLabel] = useState<
    string | null
  >(null);
  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
  const playerCharacter =
    selection?.kind === 'player' ? gameState.playerCharacter : null;
  const companion =
    selection?.kind === 'companion' ? selection.companion : null;
  const companionCharacter = companion?.character ?? null;
  const companionRosterState = companion
    ? (gameState.companions.find((item) => item.npcId === companion.npcId) ??
      gameState.roster.find((item) => item.npcId === companion.npcId) ??
      null)
    : null;
  const companionNpcState = companion
    ? normalizeNpcPersistentState(
        gameState.npcStates[companion.npcId] ??
          buildFallbackCompanionNpcState(
            companionRosterState?.joinedAtAffinity ?? 0,
          ),
      )
    : null;
  const npcEncounter = selection?.kind === 'npc' ? selection.encounter : null;
  const npcCharacter = npcEncounter?.characterId
    ? getCharacterById(npcEncounter.characterId)
    : null;
  const npcId = npcEncounter?.id ?? npcEncounter?.npcName ?? null;
  const npcState = npcEncounter
    ? normalizeNpcPersistentState(
        gameState.npcStates[npcId ?? ''] ??
          buildInitialNpcState(npcEncounter, gameState.worldType, gameState),
      )
    : null;
  const monsterPresetId = npcEncounter?.monsterPresetId ?? null;
  const hostileNpcPreset =
    monsterPresetId && gameState.worldType
      ? getHostileNpcPresetById(gameState.worldType, monsterPresetId)
      : null;
  const npcBattleState =
    selection?.kind === 'npc' ? (selection.battleState ?? null) : null;
  const archiveCharacter =
    selection?.kind === 'companion'
      ? companionCharacter
      : selection?.kind === 'npc'
        ? npcCharacter
        : null;
  const archiveNpcState =
    selection?.kind === 'companion'
      ? companionNpcState
      : selection?.kind === 'npc'
        ? npcState
        : null;
  const detailCharacter =
    selection?.kind === 'player'
      ? playerCharacter
      : selection?.kind === 'companion'
        ? companionCharacter
        : npcCharacter;
  const archiveAffinity = archiveNpcState?.affinity ?? 0;
  const archivePublicSummary = archiveCharacter
    ? getCharacterPublicBackstorySummary(archiveCharacter, gameState.worldType)
    : null;
  const unlockedBackstoryChapters: BackstoryUnlockedChapter[] = archiveCharacter
    ? getUnlockedCharacterBackstoryChapters(
        archiveCharacter,
        archiveAffinity,
        gameState.worldType,
      ).map((chapter) => ({
        id: chapter.id,
        title: chapter.title,
        content: chapter.content,
      }))
    : [];
  const lockedBackstoryChapters: BackstoryLockedChapter[] = archiveCharacter
    ? getLockedCharacterBackstoryChapters(
        archiveCharacter,
        archiveAffinity,
        gameState.worldType,
      ).map((chapter) => ({
        id: chapter.id,
        title: chapter.title,
        teaser: chapter.teaser,
        affinityRequired: chapter.affinityRequired,
      }))
    : [];
  const privateChatUnlockAffinity = companionCharacter
    ? getCharacterPrivateChatUnlockAffinity(
        companionCharacter,
        gameState.worldType,
      )
    : null;
  const privateChatUnlocked = Boolean(
    selection?.kind === 'companion' &&
      companionCharacter &&
      companionNpcState?.recruited &&
      privateChatUnlockAffinity != null &&
      companionNpcState.affinity >= privateChatUnlockAffinity,
  );

  const title =
    selection?.kind === 'player'
      ? (playerCharacter?.name ?? '主角')
      : selection?.kind === 'companion'
        ? (companionCharacter?.name ?? '同行角色')
        : (npcEncounter?.npcName ?? '相遇角色');

  const subtitle =
    selection?.kind === 'player'
      ? (playerCharacter?.title ?? '主角')
      : selection?.kind === 'companion'
        ? (companionCharacter?.title ?? '同行角色')
        : (npcEncounter?.context ?? '相遇角色');

  const description =
    selection?.kind === 'player'
      ? (playerCharacter?.description ?? '')
      : selection?.kind === 'companion'
        ? (companionCharacter?.description ?? '')
        : (npcEncounter?.npcDescription ?? '');

  const hp =
    selection?.kind === 'player'
      ? gameState.playerHp
      : selection?.kind === 'companion'
        ? (companion?.hp ??
          (companionCharacter
            ? estimateCharacterMaxHp(
                companionCharacter,
                gameState.worldType,
                gameState.customWorldProfile,
              )
            : 0))
        : (npcBattleState?.hp ??
          estimateNpcMaxHp(
            npcCharacter,
            gameState.worldType,
            gameState.customWorldProfile,
          ));

  const maxHp =
    selection?.kind === 'player'
      ? gameState.playerMaxHp
      : selection?.kind === 'companion'
        ? (companion?.maxHp ??
          (companionCharacter
            ? estimateCharacterMaxHp(
                companionCharacter,
                gameState.worldType,
                gameState.customWorldProfile,
              )
            : 0))
        : (npcBattleState?.maxHp ??
          estimateNpcMaxHp(
            npcCharacter,
            gameState.worldType,
            gameState.customWorldProfile,
          ));

  const mana =
    selection?.kind === 'player'
      ? gameState.playerMana
      : selection?.kind === 'companion'
        ? (companion?.mana ??
          (companionCharacter ? getCharacterMaxMana(companionCharacter) : 0))
        : estimateNpcMaxMana(npcCharacter);

  const maxMana =
    selection?.kind === 'player'
      ? gameState.playerMaxMana
      : selection?.kind === 'companion'
        ? (companion?.maxMana ??
          (companionCharacter ? getCharacterMaxMana(companionCharacter) : 0))
        : estimateNpcMaxMana(npcCharacter);
  const companionChatTarget =
    selection?.kind === 'companion' && companionCharacter
      ? ({
          character: companionCharacter,
          npcId: companion?.npcId ?? null,
          roleLabel: '同行角色',
          hp,
          maxHp,
          mana,
          maxMana,
          affinity: companionNpcState?.affinity ?? null,
        } satisfies CharacterChatTarget)
      : null;
  const inventory = useMemo(
    () =>
      selection?.kind === 'player'
        ? gameState.playerInventory
        : selection?.kind === 'companion' && companionCharacter
          ? buildCharacterInventoryPreviewItems(
              companionCharacter,
              gameState.worldType,
            )
          : (npcState?.inventory ?? []),
    [
      companionCharacter,
      gameState.playerInventory,
      gameState.worldType,
      npcState?.inventory,
      selection?.kind,
    ],
  );
  const attributeSchema = resolveAttributeSchema(
    gameState.worldType,
    gameState.customWorldProfile,
  );
  const selectedAttributeProfile =
    selection?.kind === 'player'
      ? playerCharacter
        ? resolveCharacterAttributeProfile(
            playerCharacter,
            gameState.worldType,
            gameState.customWorldProfile,
          )
        : null
      : selection?.kind === 'companion'
        ? companionCharacter
          ? resolveCharacterAttributeProfile(
              companionCharacter,
              gameState.worldType,
              gameState.customWorldProfile,
            )
          : null
        : npcCharacter
          ? resolveCharacterAttributeProfile(
              npcCharacter,
              gameState.worldType,
              gameState.customWorldProfile,
            )
          : npcEncounter
            ? resolveEncounterAttributeProfile(npcEncounter, {
                worldType: gameState.worldType,
                customWorldProfile: gameState.customWorldProfile,
              })
            : null;
  const resourceLabels = getResourceLabelsForWorld(
    gameState.worldType,
    gameState.customWorldProfile,
  );
  const genericNpcRumors =
    npcEncounter && !npcCharacter
      ? buildEncounterAttributeRumors(npcEncounter, {
          worldType: gameState.worldType,
          customWorldProfile: gameState.customWorldProfile,
          limit: 3,
        })
      : [];
  const genericNpcArchive =
    npcEncounter && npcState && !npcCharacter
      ? buildGenericNpcBackstoryArchive(
          npcEncounter,
          npcState,
          genericNpcRumors,
          Boolean(npcBattleState),
        )
      : null;
  const genericNpcSkills = useMemo(
    () =>
      npcEncounter && npcState && !npcCharacter
        ? buildGenericNpcSkillCatalog({
            encounter: npcEncounter,
            npcState,
            worldType: gameState.worldType,
            customWorldProfile: gameState.customWorldProfile,
          })
        : [],
    [
      gameState.customWorldProfile,
      gameState.worldType,
      npcCharacter,
      npcEncounter,
      npcState,
    ],
  );
  const displayedSkills = detailCharacter?.skills ?? genericNpcSkills;
  const buildBreakdown = useMemo(
    () =>
      selection?.kind === 'player' && playerCharacter
        ? getPlayerBuildDamageBreakdown(gameState, playerCharacter)
        : detailCharacter
          ? getCompanionBuildDamageBreakdown(
              detailCharacter,
              gameState.worldType,
              gameState.customWorldProfile,
            )
          : null,
    [detailCharacter, gameState, playerCharacter, selection?.kind],
  );
  const selectedContributionRow =
    buildBreakdown?.rows.find(
      (row) => row.label === selectedContributionLabel,
    ) ?? null;
  const selectedContributionAttributes = selectedContributionRow
    ? getBuildContributionAttributeRows(
        selectedContributionRow,
        attributeSchema,
        { resourceLabels },
      )
    : [];
  const selectedSkill =
    displayedSkills.find((skill) => skill.id === selectedSkillId) ?? null;
  const selectedSkillPreviewWorldType = gameState.worldType ?? null;
  const selectedSkillPreviewMonsterId = selectedSkillPreviewWorldType
    ? resolveSkillPreviewMonsterId(gameState)
    : null;
  const selectedSkillPreviewMode =
    selection?.kind === 'npc' && npcEncounter && npcCharacter
      ? 'npc'
      : 'player';
  const selectedInventoryItem =
    inventory.find((item) => item.id === selectedItemId) ?? null;
  const selectedSkillOwnerName =
    detailCharacter?.name ?? npcEncounter?.npcName ?? title;
  const recentChronicleEntries = gameState.storyEngineMemory?.chronicle?.slice(-3) ?? [];
  const recentCarrierEchoes = (gameState.storyEngineMemory?.recentCarrierIds ?? [])
    .map((carrierId) =>
      gameState.playerInventory.find((item) => item.id === carrierId)?.runtimeMetadata?.storyFingerprint?.visibleClue
      ?? gameState.playerInventory.find((item) => item.id === carrierId)?.name
      ?? '',
    )
    .filter(Boolean)
    .slice(0, 3);
  const sceneResidues = gameState.currentScenePreset?.narrativeResidues?.slice(0, 3) ?? [];
  const selectedCompanionResolution =
    detailCharacter
      ? gameState.storyEngineMemory?.companionResolutions?.find(
          (resolution) => resolution.characterId === detailCharacter.id,
        ) ?? null
      : null;
  const relatedConsequences = (gameState.storyEngineMemory?.consequenceLedger ?? [])
    .filter((record) =>
      detailCharacter
        ? record.relatedIds.includes(detailCharacter.id)
        : npcEncounter
          ? record.relatedIds.includes(npcEncounter.id ?? npcEncounter.npcName)
          : false,
    )
    .slice(-3);

  useEffect(() => {
    setSelectedSkillId(null);
    setSelectedContributionLabel(null);
    setSelectedItemId(null);
  }, [selection?.kind, title]);

  useEffect(() => {
    if (!selectedContributionLabel || selectedContributionRow) return;
    setSelectedContributionLabel(null);
  }, [selectedContributionLabel, selectedContributionRow]);

  useEffect(() => {
    if (!selectedSkillId || selectedSkill) return;
    setSelectedSkillId(null);
  }, [selectedSkill, selectedSkillId]);

  useEffect(() => {
    if (!selectedItemId || selectedInventoryItem) return;
    setSelectedItemId(null);
  }, [selectedInventoryItem, selectedItemId]);

  return (
    <AnimatePresence>
      {selection && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[72] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm"
          onClick={onClose}
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.96, y: 8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.96, y: 8 }}
            transition={{ duration: 0.18, ease: 'easeOut' }}
            className="pixel-nine-slice pixel-modal-shell flex max-h-[min(92vh,48rem)] w-full max-w-3xl flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
            style={getNineSliceStyle(UI_CHROME.modalPanel)}
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
              <div>
                <div className="text-[10px] uppercase tracking-[0.24em] text-zinc-500">
                  详情
                </div>
                <div className="mt-1 text-lg font-semibold text-white">
                  {title}
                </div>
                <div className="mt-1 text-sm text-zinc-400">{subtitle}</div>
              </div>
              <button
                type="button"
                onClick={onClose}
                className="rounded-full border border-white/10 bg-black/20 p-2 text-zinc-400 transition-colors hover:text-white"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
              <div className="grid gap-4 lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1.18fr)]">
                <div className="space-y-4">
                  <Section title="立绘">
                    <div className="flex flex-col items-center text-center">
                      <div className="flex h-44 w-full max-w-[16rem] items-end justify-center overflow-hidden rounded-2xl border border-white/10 bg-black/20">
                        {selection.kind === 'player' && playerCharacter ? (
                          playerCharacter.visual ? (
                            <MedievalNpcAnimator
                              visualSpec={buildMedievalNpcVisualFromCustomWorldVisual(playerCharacter.visual)}
                              scale={2.08}
                            />
                          ) : (
                            <CharacterAnimator
                              state={AnimationState.IDLE}
                              character={playerCharacter}
                              className="h-full w-full"
                              imageClassName="object-bottom"
                              style={getCharacterDetailSpriteStyle(
                                playerCharacter,
                              )}
                            />
                          )
                        ) : selection.kind === 'companion' &&
                          companionCharacter ? (
                          companionCharacter.visual ? (
                            <MedievalNpcAnimator
                              visualSpec={buildMedievalNpcVisualFromCustomWorldVisual(companionCharacter.visual)}
                              scale={2.08}
                            />
                          ) : (
                            <CharacterAnimator
                              state={AnimationState.IDLE}
                              character={companionCharacter}
                              className="h-full w-full"
                              imageClassName="object-bottom"
                              style={getCharacterDetailSpriteStyle(
                                companionCharacter,
                              )}
                            />
                          )
                        ) : npcCharacter ? (
                          npcCharacter.visual ? (
                            <MedievalNpcAnimator
                              visualSpec={buildMedievalNpcVisualFromCustomWorldVisual(npcCharacter.visual)}
                              scale={2.08}
                            />
                          ) : (
                            <CharacterAnimator
                              state={AnimationState.IDLE}
                              character={npcCharacter}
                              className="h-full w-full"
                              imageClassName="object-bottom"
                              style={getCharacterDetailSpriteStyle(npcCharacter)}
                            />
                          )
                        ) : hostileNpcPreset ? (
                          <HostileNpcAnimator
                            hostileNpc={hostileNpcPreset}
                            animation={npcBattleState?.animation ?? 'idle'}
                            flip={
                              (npcBattleState?.facing ?? 'left') === 'right'
                            }
                          />
                        ) : npcEncounter ? (
                          <MedievalNpcAnimator
                            encounter={npcEncounter}
                            scale={GENERIC_NPC_SCENE_SCALE / 3}
                          />
                        ) : null}
                      </div>
                      {selection.kind === 'npc' && npcEncounter && npcState && (
                        <div className="mt-3 rounded-full border border-rose-400/25 bg-rose-500/10 px-3 py-1 text-[10px] tracking-[0.18em] text-rose-100">
                          {getNpcBadge(
                            npcEncounter,
                            npcState.affinity,
                            Boolean(npcBattleState),
                          )}
                        </div>
                      )}
                      <p className="mt-3 text-sm leading-relaxed text-zinc-300">
                        {description}
                      </p>
                    </div>
                  </Section>
                </div>

                <div className="space-y-4">
                  {archiveCharacter && archiveNpcState ? (
                    <Section title="关系">
                      <div className="space-y-3">
                        <AffinityStatusCard
                          affinity={archiveNpcState.affinity}
                        />
                        <BackstoryArchive
                          publicSummary={archivePublicSummary}
                          unlockedChapters={unlockedBackstoryChapters}
                          lockedChapters={lockedBackstoryChapters}
                        />
                      </div>
                    </Section>
                  ) : selection.kind === 'npc' && npcState ? (
                    <Section title="关系">
                      <div className="space-y-3">
                        <AffinityStatusCard affinity={npcState.affinity} />
                        {genericNpcArchive ? (
                          <BackstoryArchive
                            publicSummary={genericNpcArchive.publicSummary}
                            unlockedChapters={
                              genericNpcArchive.unlockedChapters
                            }
                            lockedChapters={genericNpcArchive.lockedChapters}
                          />
                        ) : null}
                      </div>
                    </Section>
                  ) : null}

                  {selection.kind === 'companion' && companionChatTarget ? (
                    <Section title="私聊">
                      <div className="rounded-2xl border border-sky-400/18 bg-sky-500/8 p-4">
                        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                          <div>
                            <div className="text-[10px] uppercase tracking-[0.18em] text-sky-200/80">
                              私聊
                            </div>
                            <div className="mt-1 text-sm text-zinc-300">
                              {privateChatUnlocked
                                ? '已解锁，可直接与该同伴单独交谈。'
                                : `好感达到 ${privateChatUnlockAffinity ?? DEFAULT_PRIVATE_CHAT_UNLOCK_AFFINITY} 后解锁，当前 ${companionNpcState?.affinity ?? 0}。`}
                            </div>
                          </div>
                          <button
                            type="button"
                            disabled={
                              !privateChatUnlocked || !onOpenCharacterChat
                            }
                            onClick={() => {
                              if (
                                !privateChatUnlocked ||
                                !onOpenCharacterChat
                              ) {
                                return;
                              }
                              onClose();
                              onOpenCharacterChat(companionChatTarget);
                            }}
                            className={`rounded-xl px-4 py-2 text-sm font-medium transition-colors ${
                              privateChatUnlocked && onOpenCharacterChat
                                ? 'border border-sky-300/40 bg-sky-400/15 text-sky-50 hover:bg-sky-400/22'
                                : 'cursor-not-allowed border border-white/8 bg-black/20 text-zinc-500'
                            }`}
                          >
                            {privateChatUnlocked
                              ? '聊天'
                              : `聊天（${privateChatUnlockAffinity ?? DEFAULT_PRIVATE_CHAT_UNLOCK_AFFINITY} 解锁）`}
                          </button>
                        </div>
                      </div>
                    </Section>
                  ) : null}

                  {(recentChronicleEntries.length > 0 ||
                    recentCarrierEchoes.length > 0 ||
                    sceneResidues.length > 0 ||
                    relatedConsequences.length > 0 ||
                    Boolean(selectedCompanionResolution)) && (
                    <Section title="最近回响">
                      <div className="space-y-3">
                        {selectedCompanionResolution && (
                          <div className="rounded-xl border border-emerald-400/18 bg-emerald-500/8 px-3 py-2 text-xs text-emerald-100/85">
                            队友收束：{selectedCompanionResolution.resolutionType} · {selectedCompanionResolution.summary}
                          </div>
                        )}
                        {relatedConsequences.length > 0 && (
                          <div className="space-y-1">
                            {relatedConsequences.map((record, index) => (
                              <div
                                key={record.id || `consequence-${record.title}-${index}`}
                                className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs text-zinc-400"
                              >
                                <span className="text-white">{record.title}</span>
                                {'：'}
                                {record.summary}
                              </div>
                            ))}
                          </div>
                        )}
                        {recentChronicleEntries.length > 0 && (
                          <div className="space-y-1">
                            {recentChronicleEntries.map((entry, index) => (
                              <div
                                key={entry.id || `chronicle-${entry.title}-${index}`}
                                className="rounded-xl border border-white/8 bg-black/20 px-3 py-2"
                              >
                                <div className="text-sm font-medium text-white">
                                  {entry.title}
                                </div>
                                <div className="mt-1 text-xs text-zinc-400">
                                  {entry.summary}
                                </div>
                              </div>
                            ))}
                          </div>
                        )}
                        {recentCarrierEchoes.length > 0 && (
                          <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs text-amber-100/85">
                            载体回响：{recentCarrierEchoes.join('；')}
                          </div>
                        )}
                        {sceneResidues.length > 0 && (
                          <div className="space-y-1">
                            {sceneResidues.map((residue, index) => (
                              <div
                                key={residue.id || `residue-${residue.title}-${index}`}
                                className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs text-zinc-400"
                              >
                                <span className="text-white">{residue.title}</span>
                                {'：'}
                                {residue.visibleClue}
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </Section>
                  )}

                  <Section title="属性">
                    <div className="space-y-4">
                      <div className="space-y-3">
                        <StatusRow
                          label={resourceLabels.hp}
                          current={hp}
                          max={maxHp}
                          tone="hp"
                        />
                        {maxMana > 0 ? (
                          <StatusRow
                            label={resourceLabels.mp}
                            current={mana}
                            max={maxMana}
                            tone="mp"
                          />
                        ) : null}
                      </div>
                      {buildBreakdown ? (
                        <MultiplierContributionList
                          breakdown={buildBreakdown}
                          onSelectContribution={(row) =>
                            setSelectedContributionLabel(row.label)
                          }
                        />
                      ) : null}
                      <CharacterAttributeGrid
                        attributeProfile={selectedAttributeProfile}
                        attributeSchema={attributeSchema}
                        buildBreakdown={buildBreakdown}
                        resourceLabels={resourceLabels}
                        gridClassName="grid grid-cols-1 gap-2 text-sm text-zinc-300 sm:grid-cols-2"
                        cardClassName="rounded-xl border border-white/8 bg-black/25 px-3 py-2"
                      />
                    </div>
                  </Section>

                  {detailCharacter ? (
                    <Section title="技能">
                      <CharacterSkillsList
                        skills={displayedSkills}
                        onSelectSkill={setSelectedSkillId}
                      />
                    </Section>
                  ) : displayedSkills.length > 0 ? (
                    <Section title="技能">
                      <CharacterSkillsList
                        skills={displayedSkills}
                        onSelectSkill={setSelectedSkillId}
                      />
                    </Section>
                  ) : null}

                  <Section title="物品">
                    {inventory.length > 0 ? (
                      <InventoryItemGrid
                        items={inventory}
                        selectedItemId={selectedItemId}
                        minimumSlotCount={8}
                        onSelectItem={(item) => setSelectedItemId(item.id)}
                      />
                    ) : (
                      <div className="text-sm text-zinc-500">暂无物品</div>
                    )}
                  </Section>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}

      {selectedContributionRow && detailCharacter && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[75] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm"
          onClick={() => setSelectedContributionLabel(null)}
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.96, y: 8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.96, y: 8 }}
            transition={{ duration: 0.18, ease: 'easeOut' }}
            className="pixel-nine-slice pixel-modal-shell flex max-h-[min(88vh,40rem)] w-full max-w-xl flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
            style={getNineSliceStyle(UI_CHROME.modalPanel)}
            onClick={(event) => event.stopPropagation()}
          >
            <div className="relative border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
              <div className="min-w-0 pr-10">
                <div className="text-[10px] tracking-[0.22em] text-sky-300/80">
                  标签效果
                </div>
                <div className="mt-1 truncate text-sm font-semibold text-white">
                  {selectedContributionRow.label}
                </div>
                <div className="mt-1 text-[10px] tracking-[0.18em] text-zinc-500">
                  {detailCharacter.name}
                </div>
              </div>
              <button
                type="button"
                onClick={() => setSelectedContributionLabel(null)}
                className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            <div className="overflow-y-auto p-4 sm:p-5">
              <div className="grid gap-4 lg:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]">
                <div className="space-y-4">
                  <div
                    className="rounded-2xl border px-4 py-4"
                    style={getContributionVisualStyle(
                      selectedContributionRow.bonusDelta,
                    )}
                  >
                    <div className="flex flex-wrap items-start justify-between gap-3">
                      <div className="min-w-0 flex-1">
                        <div className="text-[10px] uppercase tracking-[0.16em] text-current/70">
                          标签概览
                        </div>
                        <div className="mt-2 text-sm font-semibold">
                          {selectedContributionRow.label}
                        </div>
                      </div>
                      <div className="rounded-xl border border-current/15 bg-black/25 px-3 py-2 text-right">
                        <div className="text-[11px] tracking-[0.14em] text-current/70">
                          {getBuildContributionQualityLabel(
                            selectedContributionRow.bonusDelta,
                          )}
                        </div>
                        <div className="mt-1 text-sm font-semibold">
                          总加成{' '}
                          {formatBuildContributionPercent(
                            selectedContributionRow.bonusDelta,
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="rounded-2xl border border-white/8 bg-black/20 p-4">
                  <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
                    属性加成
                  </div>

                  {selectedContributionAttributes.length > 0 ? (
                    <div className="mt-4 grid gap-3 sm:grid-cols-2">
                      {selectedContributionAttributes.map((attribute) => (
                        <div
                          key={`${selectedContributionRow.label}-${attribute.slotId}`}
                          className="rounded-xl border border-white/8 bg-black/25 px-4 py-3"
                        >
                          <div className="flex items-center justify-between gap-3 text-sm text-zinc-200">
                            <span>{attribute.label}</span>
                            <span className="font-semibold text-white">
                              {formatBuildContributionPercent(
                                attribute.modifierDelta,
                              )}
                            </span>
                          </div>
                          <div className="mt-2 text-[11px] leading-5 text-zinc-500">
                            {attribute.definition}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="mt-4 rounded-xl border border-white/8 bg-black/25 px-4 py-3 text-sm leading-6 text-zinc-400">
                      当前标签还没有可展示的属性适配明细。
                    </div>
                  )}
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}

      {selectedSkill ? (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[76] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm"
          onClick={() => setSelectedSkillId(null)}
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.96, y: 8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.96, y: 8 }}
            transition={{ duration: 0.18, ease: 'easeOut' }}
            className="pixel-nine-slice pixel-modal-shell flex max-h-[min(90vh,54rem)] w-full max-w-4xl flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
            style={getNineSliceStyle(UI_CHROME.modalPanel)}
            onClick={(event) => event.stopPropagation()}
          >
            <div className="relative border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
              <div className="min-w-0 pr-10">
                <div className="text-[10px] tracking-[0.22em] text-sky-300/80">
                  技能详情
                </div>
                <div className="mt-1 truncate text-sm font-semibold text-white">
                  {selectedSkill.name}
                </div>
                <div className="mt-1 text-[10px] tracking-[0.18em] text-zinc-500">
                  {selectedSkillOwnerName}
                </div>
              </div>
              <button
                type="button"
                onClick={() => setSelectedSkillId(null)}
                className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            <div className="space-y-4 overflow-y-auto p-4 sm:p-5">
              {detailCharacter && selectedSkillPreviewWorldType ? (
                <SkillEffectPreview
                  mode={selectedSkillPreviewMode}
                  worldType={selectedSkillPreviewWorldType}
                  character={detailCharacter}
                  skill={selectedSkill}
                  targetMonsterId={selectedSkillPreviewMonsterId}
                  npcEncounter={
                    selectedSkillPreviewMode === 'npc' ? npcEncounter : null
                  }
                  targetCharacter={
                    selectedSkillPreviewMode === 'npc' ? playerCharacter : null
                  }
                />
              ) : (
                <div className="rounded-xl border border-white/8 bg-black/20 px-4 py-3 text-sm text-zinc-400">
                  {detailCharacter
                    ? '当前未进入具体世界，暂时无法恢复技能预览。'
                    : '该 NPC 当前没有独立技能演示模型，先展示真实技能数据。'}
                </div>
              )}

              <div className="flex flex-wrap gap-2">
                <span className="rounded-full border border-white/10 bg-white/6 px-2 py-1 text-[10px] text-zinc-100">
                  {getSkillDeliveryLabel(selectedSkill)}
                </span>
                <span className="rounded-full border border-sky-400/20 bg-sky-500/10 px-2 py-1 text-[10px] text-sky-100">
                  {getSkillStyleLabel(selectedSkill)}
                </span>
                {selectedSkill.buildBuffs?.length ? (
                  <span className="rounded-full border border-emerald-400/20 bg-emerald-500/10 px-2 py-1 text-[10px] text-emerald-100">
                    附带 {selectedSkill.buildBuffs.length} 个状态标签
                  </span>
                ) : null}
              </div>

              <div className="grid grid-cols-2 gap-2 text-sm text-zinc-300 sm:grid-cols-4">
                <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-3">
                  <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
                    伤害
                  </div>
                  <div className="mt-1 font-semibold text-white">
                    {selectedSkill.damage}
                  </div>
                </div>
                <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-3">
                  <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
                    法力
                  </div>
                  <div className="mt-1 font-semibold text-white">
                    {selectedSkill.manaCost}
                  </div>
                </div>
                <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-3">
                  <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
                    冷却
                  </div>
                  <div className="mt-1 font-semibold text-white">
                    {selectedSkill.cooldownTurns}
                  </div>
                </div>
                <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-3">
                  <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
                    距离
                  </div>
                  <div className="mt-1 font-semibold text-white">
                    {selectedSkill.range}
                  </div>
                </div>
              </div>

              <div className="rounded-xl border border-white/8 bg-black/20 px-4 py-3 text-sm leading-relaxed text-zinc-300">
                {selectedSkill.name} 属于{getSkillStyleLabel(selectedSkill)}
                路线，通常以{getSkillDeliveryLabel(selectedSkill)}方式出手，
                造成 {selectedSkill.damage} 点伤害，消耗{' '}
                {selectedSkill.manaCost} 点灵力，冷却{' '}
                {selectedSkill.cooldownTurns} 回合。
                {selectedSkill.effects?.length
                  ? ` 该技能还会触发 ${selectedSkill.effects.length} 段战斗特效。`
                  : ''}
              </div>

              {selectedSkill.buildBuffs?.length ? (
                <div className="rounded-xl border border-white/8 bg-black/20 px-4 py-3">
                  <div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
                    附带状态标签
                  </div>
                  <div className="mt-3 flex flex-wrap gap-2">
                    {selectedSkill.buildBuffs.map((buff) => (
                      <span
                        key={buff.id}
                        className="rounded-full border border-sky-400/20 bg-sky-500/10 px-2 py-1 text-[10px] text-sky-100"
                      >
                        {buff.name} / {buff.tags.join('、')} /{' '}
                        {buff.durationTurns} 回合
                      </span>
                    ))}
                  </div>
                </div>
              ) : null}
            </div>
          </motion.div>
        </motion.div>
      ) : null}

      {(gameState.playerCharacter ?? detailCharacter) ? (
        <InventoryItemDetailModal
          item={selectedInventoryItem}
          playerCharacter={gameState.playerCharacter ?? detailCharacter!}
          worldType={gameState.worldType}
          ownerLabel={detailCharacter?.name ?? title}
          onClose={() => setSelectedItemId(null)}
        />
      ) : null}
    </AnimatePresence>
  );
}