/* @vitest-environment jsdom */

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

import { PlatformDarkOptionCard } from './PlatformDarkOptionCard';

test('renders selected dark option card with tone classes', () => {
  render(
    <PlatformDarkOptionCard selected tone="rose" className="w-full">
      玫瑰信物
    </PlatformDarkOptionCard>,
  );

  const card = screen.getByRole('button', { name: '玫瑰信物' });

  expect(card.className).toContain('platform-dark-option-card');
  expect(card.className).toContain('border-rose-400/60');
  expect(card.className).toContain('bg-rose-500/10');
  expect(card.className).toContain('w-full');
});

test('renders idle dark option card and forwards button behavior', async () => {
  const user = userEvent.setup();
  const handleClick = vi.fn();

  render(
    <PlatformDarkOptionCard
      selected={false}
      radius="sm"
      padding="md"
      onClick={handleClick}
    >
      月壳
    </PlatformDarkOptionCard>,
  );

  const card = screen.getByRole('button', { name: '月壳' });

  expect(card.getAttribute('type')).toBe('button');
  expect(card.className).toContain('border-white/8');
  expect(card.className).toContain('hover:border-white/15');
  expect(card.className).toContain('rounded-lg');
  expect(card.className).toContain('py-2.5');

  await user.click(card);

  expect(handleClick).toHaveBeenCalledTimes(1);
});

test('supports emerald, sky, and amber selected tones', () => {
  const { rerender } = render(
    <PlatformDarkOptionCard selected tone="emerald">
      购买物品
    </PlatformDarkOptionCard>,
  );

  expect(screen.getByRole('button', { name: '购买物品' }).className).toContain(
    'border-emerald-400/45',
  );

  rerender(
    <PlatformDarkOptionCard selected tone="sky">
      出售物品
    </PlatformDarkOptionCard>,
  );

  expect(screen.getByRole('button', { name: '出售物品' }).className).toContain(
    'border-sky-400/45',
  );

  rerender(
    <PlatformDarkOptionCard selected tone="amber">
      调整同行
    </PlatformDarkOptionCard>,
  );

  expect(screen.getByRole('button', { name: '调整同行' }).className).toContain(
    'border-amber-400/60',
  );
});

test('supports large radius and spacing for dark option grids', () => {
  render(
    <PlatformDarkOptionCard selected tone="sky" radius="lg" padding="lg">
      奔跑
    </PlatformDarkOptionCard>,
  );

  const card = screen.getByRole('button', { name: '奔跑' });

  expect(card.className).toContain('rounded-2xl');
  expect(card.className).toContain('py-3');
});