Genarrative/src/components/CompanionCampModal.tsx

import { AnimatePresence, motion } from 'motion/react';
import { useEffect, useMemo, useState } from 'react';

import { getCharacterById } from '../data/characterPresets';
import { MAX_COMPANIONS } from '../data/npcInteractions';
import { Character, CompanionState } from '../types';
import { getNineSliceStyle, UI_CHROME } from '../uiAssets';
import { PlatformActionButton } from './common/PlatformActionButton';
import { PlatformDarkModalFooter } from './common/PlatformDarkModalFooter';
import { PlatformDarkOptionCard } from './common/PlatformDarkOptionCard';
import { PlatformEmptyState } from './common/PlatformEmptyState';
import { PlatformMediaFrame } from './common/PlatformMediaFrame';
import { PlatformPillBadge } from './common/PlatformPillBadge';
import { PlatformStatusMessage } from './common/PlatformStatusMessage';
import { PlatformSubpanel } from './common/PlatformSubpanel';
import { PixelCloseButton } from './PixelCloseButton';

interface CompanionCampModalProps {
  isOpen: boolean;
  playerCharacter: Character | null;
  companions: CompanionState[];
  roster: CompanionState[];
  inBattle: boolean;
  onClose: () => void;
  onBenchCompanion: (npcId: string) => void;
  onActivateCompanion: (npcId: string, swapNpcId?: string | null) => void;
}

type CompanionCardData = {
  companion: CompanionState;
  character: Character;
};

function StatusPill({ label, value }: { label: string; value: string }) {
  return (
    <PlatformPillBadge
      tone="darkNeutral"
      size="xxs"
      className="font-normal text-zinc-300"
    >
      {label} {value}
    </PlatformPillBadge>
  );
}

function buildCampMoments(
  playerCharacter: Character | null,
  activeCompanions: CompanionCardData[],
  reserveCompanions: CompanionCardData[],
) {
  if (!playerCharacter) {
    return ['营地尚未准备完毕。'];
  }

  const moments: string[] = [];
  if (activeCompanions.length === 0 && reserveCompanions.length === 0) {
    moments.push(`${playerCharacter.name}独自坐在营火旁，暂时还没有固定同行者。`);
  }

  if (activeCompanions.length >= 2) {
    const firstCompanion = activeCompanions[0];
    const secondCompanion = activeCompanions[1];
    if (firstCompanion && secondCompanion) {
      moments.push(`${firstCompanion.character.name}和${secondCompanion.character.name}正低声商量下一段路怎么走。`);
    }
  }

  const trustedCompanion = activeCompanions.find(item => item.companion.joinedAtAffinity >= 70);
  if (trustedCompanion) {
    moments.push(`${trustedCompanion.character.name}熟练地清点补给，看起来已经像能交托后背的同伴了。`);
  }

  if (reserveCompanions.length > 0) {
    const reserveCompanion = reserveCompanions[0];
    if (reserveCompanion) {
      moments.push(`${reserveCompanion.character.name}正在营地里待命，随时都能重新归队。`);
    }
  }

  if (moments.length === 0) {
    moments.push(`${playerCharacter.name}环视营地，确认众人都已经各就各位。`);
  }

  return moments.slice(0, 3);
}

export function CompanionCampModal({
  isOpen,
  playerCharacter,
  companions,
  roster,
  inBattle,
  onClose,
  onBenchCompanion,
  onActivateCompanion,
}: CompanionCampModalProps) {
  const [selectedSwapNpcId, setSelectedSwapNpcId] = useState<string | null>(null);

  const activeCompanionCards = useMemo<CompanionCardData[]>(
    () => companions
      .map(companion => {
        const character = getCharacterById(companion.characterId);
        return character ? { companion, character } : null;
      })
      .filter(Boolean) as CompanionCardData[],
    [companions],
  );

  const reserveCompanionCards = useMemo<CompanionCardData[]>(
    () => roster
      .map(companion => {
        const character = getCharacterById(companion.characterId);
        return character ? { companion, character } : null;
      })
      .filter(Boolean) as CompanionCardData[],
    [roster],
  );

  const campMoments = useMemo(
    () => buildCampMoments(playerCharacter, activeCompanionCards, reserveCompanionCards),
    [activeCompanionCards, playerCharacter, reserveCompanionCards],
  );

  useEffect(() => {
    if (!isOpen) return;
    if (companions.length >= MAX_COMPANIONS) {
      setSelectedSwapNpcId(companions[0]?.npcId ?? null);
      return;
    }
    setSelectedSwapNpcId(null);
  }, [companions, isOpen]);

  return (
    <AnimatePresence>
      {isOpen && (
        <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,58rem)] w-full max-w-5xl 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-sm font-semibold text-white">营地编组</div>
                <div className="mt-1 text-[11px] tracking-[0.18em] text-zinc-500">
                  {playerCharacter ? `${playerCharacter.name} / 出战 ${companions.length}/${MAX_COMPANIONS}` : '队伍调度'}
                </div>
              </div>
              <PixelCloseButton onClick={onClose} label="关闭营地编组" />
            </div>

            <div className="grid min-h-0 flex-1 gap-4 overflow-y-auto p-5 lg:grid-cols-[1.05fr_0.95fr] lg:overflow-hidden">
              <PlatformSubpanel
                as="section"
                surface="dark"
                radius="sm"
                padding="md"
                className="lg:min-h-0 lg:overflow-y-auto"
              >
                <div className="mb-3 flex items-center justify-between gap-3">
                  <div>
                    <div className="text-xs font-bold text-white">当前队伍</div>
                    <div className="mt-1 text-xs text-zinc-400">
                      可直接把同行者转入后备，或先选定替换位，再让后备成员归队。
                    </div>
                  </div>
                  <StatusPill label="出战" value={`${companions.length}/${MAX_COMPANIONS}`} />
                </div>
                {inBattle && (
                  <PlatformStatusMessage
                    tone="warning"
                    surface="editorDark"
                    size="xs"
                    className="mb-3"
                  >
                    战斗中无法调整编组。
                  </PlatformStatusMessage>
                )}

                <div className="space-y-3">
                  {activeCompanionCards.length > 0 ? activeCompanionCards.map(({ companion, character }) => {
                    const selectedForSwap = selectedSwapNpcId === companion.npcId;
                    return (
                      <PlatformSubpanel
                        as="div"
                        key={companion.npcId}
                        data-testid={`active-companion-card-${companion.npcId}`}
                        surface={selectedForSwap ? 'darkSky' : 'dark'}
                        radius="xs"
                        padding="md"
                      >
                        <div className="flex items-center gap-3">
                          <PlatformMediaFrame
                            src={character.portrait}
                            alt={character.name}
                            fallbackLabel={character.name}
                            aspect="square"
                            surface="editorDark"
                            className="h-16 w-16 shrink-0 rounded-xl"
                            imageClassName="h-full w-full scale-125 object-contain"
                            imageProps={{ style: { imageRendering: 'pixelated' } }}
                          />
                          <div className="min-w-0 flex-1">
                            <div className="text-sm font-semibold text-white">{character.name}</div>
                            <div className="text-[10px] tracking-[0.18em] text-zinc-500">{character.title}</div>
                            <div className="mt-2 flex flex-wrap gap-2">
                              <StatusPill label="生命" value={`${companion.hp}/${companion.maxHp}`} />
                              <StatusPill label="灵力" value={`${companion.mana}/${companion.maxMana}`} />
                              <StatusPill label="好感" value={`${companion.joinedAtAffinity}`} />
                            </div>
                          </div>
                        </div>
                        <div className="mt-3 flex flex-wrap gap-2">
                          <PlatformDarkOptionCard
                            disabled={inBattle}
                            onClick={() => setSelectedSwapNpcId(companion.npcId)}
                            selected={selectedForSwap}
                            tone="sky"
                            radius="sm"
                            padding="sm"
                            className="text-xs"
                          >
                            设为替换位
                          </PlatformDarkOptionCard>
                          <PlatformActionButton
                            surface="editorDark"
                            tone="secondary"
                            size="xs"
                            disabled={inBattle}
                            onClick={() => onBenchCompanion(companion.npcId)}
                          >
                            转入后备
                          </PlatformActionButton>
                        </div>
                      </PlatformSubpanel>
                    );
                  }) : (
                    <PlatformEmptyState
                      surface="editorDark"
                      size="inline"
                      className="rounded-xl py-6 font-normal text-zinc-400"
                    >
                      当前没有已出战的同行者。
                    </PlatformEmptyState>
                  )}
                </div>
              </PlatformSubpanel>

              <PlatformSubpanel
                as="section"
                surface="dark"
                radius="sm"
                padding="md"
                className="lg:min-h-0 lg:overflow-y-auto"
              >
                <div className="mb-3 flex items-center justify-between gap-3">
                  <div>
                    <div className="text-xs font-bold text-white">后备队伍</div>
                    <div className="mt-1 text-xs text-zinc-400">
                      后备同行者会在营地待命，随时可以重新召回。
                    </div>
                  </div>
                  <StatusPill label="后备" value={`${reserveCompanionCards.length}`} />
                </div>

                <div className="space-y-3">
                  {reserveCompanionCards.length > 0 ? reserveCompanionCards.map(({ companion, character }) => {
                    const needsSwap = companions.length >= MAX_COMPANIONS;
                    return (
                      <PlatformSubpanel
                        as="div"
                        key={companion.npcId}
                        data-testid={`reserve-companion-card-${companion.npcId}`}
                        surface="dark"
                        radius="xs"
                        padding="md"
                      >
                        <div className="flex items-center gap-3">
                          <PlatformMediaFrame
                            src={character.portrait}
                            alt={character.name}
                            fallbackLabel={character.name}
                            aspect="square"
                            surface="editorDark"
                            className="h-16 w-16 shrink-0 rounded-xl"
                            imageClassName="h-full w-full scale-125 object-contain"
                            imageProps={{ style: { imageRendering: 'pixelated' } }}
                          />
                          <div className="min-w-0 flex-1">
                            <div className="text-sm font-semibold text-white">{character.name}</div>
                            <div className="text-[10px] tracking-[0.18em] text-zinc-500">{character.title}</div>
                            <div className="mt-2 flex flex-wrap gap-2">
                              <StatusPill label="生命" value={`${companion.hp}/${companion.maxHp}`} />
                              <StatusPill label="灵力" value={`${companion.mana}/${companion.maxMana}`} />
                              <StatusPill label="好感" value={`${companion.joinedAtAffinity}`} />
                            </div>
                          </div>
                        </div>
                        <PlatformActionButton
                          surface="editorDark"
                          tone={inBattle || (needsSwap && !selectedSwapNpcId) ? 'ghost' : 'success'}
                          size="xs"
                          fullWidth
                          disabled={inBattle || (needsSwap && !selectedSwapNpcId)}
                          onClick={() => onActivateCompanion(companion.npcId, needsSwap ? selectedSwapNpcId : null)}
                          className="mt-3"
                        >
                          {needsSwap ? '换入队伍' : '编入队伍'}
                        </PlatformActionButton>
                      </PlatformSubpanel>
                    );
                  }) : (
                    <PlatformEmptyState
                      surface="editorDark"
                      size="inline"
                      className="rounded-xl py-6 font-normal text-zinc-400"
                    >
                      当前还没有后备同行者。
                    </PlatformEmptyState>
                  )}
                </div>
              </PlatformSubpanel>
            </div>

            <PlatformDarkModalFooter layout="content" padding="roomy">
              <div className="mb-3 text-xs font-bold text-white">营地气氛</div>
              <div className="grid gap-3 md:grid-cols-3">
                {campMoments.map((moment, index) => (
                  <PlatformSubpanel
                    as="div"
                    key={`camp-moment-${index}-${moment}`}
                    surface="dark"
                    radius="xs"
                    padding="md"
                    className="text-sm leading-relaxed text-zinc-300"
                  >
                    {moment}
                  </PlatformSubpanel>
                ))}
              </div>
            </PlatformDarkModalFooter>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}