/* @vitest-environment jsdom */

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

import { PlatformMudPointConfirmDialog } from './PlatformMudPointConfirmDialog';

test('renders standard mud point confirmation copy and forwards confirm', () => {
  const onClose = vi.fn();
  const onConfirm = vi.fn();

  render(
    <PlatformMudPointConfirmDialog
      open
      points={8}
      onClose={onClose}
      onConfirm={onConfirm}
      portal={false}
    />,
  );

  const dialog = screen.getByRole('dialog', { name: '确认消耗泥点' });

  expect(within(dialog).getByText('消耗 8 泥点')).toBeTruthy();

  fireEvent.click(within(dialog).getByRole('button', { name: '确定' }));
  expect(onConfirm).toHaveBeenCalledTimes(1);
});

test('supports extra detail copy and close button override', () => {
  const onClose = vi.fn();

  render(
    <PlatformMudPointConfirmDialog
      open
      points={7}
      title="保存正式素材"
      description="角色形象"
      onClose={onClose}
      onConfirm={vi.fn()}
      showCloseButton={false}
      portal={false}
    >
      本次会覆盖当前待确认素材。
    </PlatformMudPointConfirmDialog>,
  );

  const dialog = screen.getByRole('dialog', { name: '保存正式素材' });

  expect(within(dialog).getByText('消耗 7 泥点')).toBeTruthy();
  expect(within(dialog).getByText('本次会覆盖当前待确认素材。')).toBeTruthy();
  expect(screen.queryByRole('button', { name: '关闭' })).toBeNull();
});

test('applies the stronger default overlay and panel chrome', () => {
  render(
    <PlatformMudPointConfirmDialog
      open
      points={10}
      onClose={() => {}}
      onConfirm={() => {}}
      portal={false}
    />,
  );

  const dialog = screen.getByRole('dialog', { name: '确认消耗泥点' });
  const overlay = dialog.parentElement as HTMLElement;

  expect(overlay.className).toContain('platform-modal-backdrop');
  expect(overlay.className).toContain('platform-theme--light');
  expect(overlay.className).toContain('!bg-black/45');
  expect(dialog.className).toContain('platform-modal-shell');
  expect(dialog.className).toContain('max-w-xs');
  expect(dialog.className).toContain(
    'shadow-[0_24px_70px_rgba(15,23,42,0.22)]',
  );
});