/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import { expect, test, vi } from 'vitest';

import { AnimationState, type Character, WorldType } from '../types';
import { CharacterDetailModal } from './CharacterDetailModal';

vi.mock('./CharacterAnimator', () => ({
  CharacterAnimator: () => <div>角色动画</div>,
}));

vi.mock('./MedievalNpcAnimator', () => ({
  MedievalNpcAnimator: () => <div>NPC 动画</div>,
}));

vi.mock('./PixelCloseButton', () => ({
  PixelCloseButton: ({
    label,
    onClick,
  }: {
    label: string;
    onClick: () => void;
  }) => (
    <button type="button" onClick={onClick}>
      {label}
    </button>
  ),
}));

function createCharacter(): Character {
  return {
    id: 'sword-princess',
    name: '剑之公主',
    title: '王庭剑姬',
    gender: 'female',
    description: '以迅疾剑技和正面压制见长。',
    backstory: '王庭旁支出身，正在追回失落誓剑。',
    avatar: '/roles/sword-princess.png',
    portrait: '/roles/sword-princess.png',
    assetFolder: 'roles',
    assetVariant: 'generated',
    attributes: {
      strength: 12,
      agility: 14,
      intelligence: 8,
      spirit: 10,
    },
    personality: '外冷内热，做决定时很少犹豫。',
    skills: [
      {
        id: 'oath-slash',
        name: '誓剑斩',
        animation: AnimationState.SKILL1,
        damage: 18,
        manaCost: 6,
        cooldownTurns: 2,
        range: 1,
        style: 'burst',
      },
    ],
    adventureOpenings: {
      [WorldType.WUXIA]: {
        reason: '踏入王庭旧案。',
        goal: '追回誓剑。',
        monologue: '旧誓仍在。',
      },
    },
  };
}

function findPanelForText(text: string) {
  let current: HTMLElement | null = screen.getByText(text);

  while (current) {
    if (
      current.className.includes('border-white/10') &&
      current.className.includes('bg-black/25')
    ) {
      return current;
    }
    current = current.parentElement;
  }

  return null;
}

test('角色详情装备背包和旅程信息复用暗色平台子面板', () => {
  render(
    <CharacterDetailModal
      character={createCharacter()}
      worldType={WorldType.WUXIA}
      onClose={vi.fn()}
    />,
  );

  const candidateBadge = screen.getByText('候选人');
  const genderBadge = screen.getByText('性别: 女');

  expect(candidateBadge.className).toContain('rounded-full');
  expect(candidateBadge.className).toContain('bg-sky-500/10');
  expect(genderBadge.className).toContain('rounded-full');
  expect(genderBadge.className).toContain('bg-black/20');

  for (const text of [
    '王庭剑',
    '武斗牌',
    '踏入王庭旧案。',
    '追回誓剑。',
    '王庭旁支出身，正在追回失落誓剑。',
    '外冷内热，做决定时很少犹豫。',
  ]) {
    const panel = findPanelForText(text);

    expect(panel?.className).toContain('border-white/10');
    expect(panel?.className).toContain('bg-black/25');
    expect(panel?.className).toContain('rounded-[1rem]');
  }
});