/* @vitest-environment jsdom */

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

import { PlatformModalCloseButton } from './PlatformModalCloseButton';

test('renders profile modal close button with shared chrome', () => {
  render(<PlatformModalCloseButton label="关闭账户充值" onClick={() => {}} />);

  const button = screen.getByRole('button', { name: '关闭账户充值' });

  expect(button.className).toContain('platform-modal-close');
  expect(button.className).toContain('h-9');
  expect(button.querySelector('svg')).toBeTruthy();
});

test('supports floating close button and custom icon', () => {
  render(
    <PlatformModalCloseButton
      label="关闭泥点账单"
      variant="floating"
      icon={<span aria-hidden="true">×</span>}
    />,
  );

  const button = screen.getByRole('button', { name: '关闭泥点账单' });

  expect(button.className).toContain('absolute');
  expect(button.className).toContain('right-3');
  expect(button.textContent).toBe('×');
});

test('supports compact profile icon button', () => {
  render(
    <PlatformModalCloseButton
      label="关闭昵称修改"
      variant="profileCompact"
      icon="×"
    />,
  );

  const button = screen.getByRole('button', { name: '关闭昵称修改' });

  expect(button.className).toContain('platform-profile-icon-button');
  expect(button.className).toContain('h-8');
  expect(button.textContent).toBe('×');
});

test('supports plain floating close button', () => {
  render(
    <PlatformModalCloseButton
      label="关闭邀请好友"
      variant="floatingPlain"
      icon="×"
    />,
  );

  const button = screen.getByRole('button', { name: '关闭邀请好友' });

  expect(button.className).toContain('absolute');
  expect(button.className).toContain('top-2');
  expect(button.className).not.toContain('shadow-sm');
});

test('supports platform icon close button', () => {
  render(
    <PlatformModalCloseButton label="关闭素材图片" variant="platformIcon" />,
  );

  const button = screen.getByRole('button', { name: '关闭素材图片' });

  expect(button.className).toContain('platform-icon-button');
  expect(button.className).toContain('disabled:opacity-45');
  expect(button.querySelector('svg')).toBeTruthy();
});

test('supports pixel close button', () => {
  render(<PlatformModalCloseButton label="关闭像素弹窗" variant="pixel" />);

  const button = screen.getByRole('button', { name: '关闭像素弹窗' });

  expect(button.className).toContain('bg-black/30');
  expect(button.className).toContain('text-zinc-400');
  expect(button.className).toContain('absolute');
  expect(button.className).toContain('disabled:opacity-45');
  expect(button.getAttribute('title')).toBe('关闭像素弹窗');
});

test('supports inline pixel placement and intercepted click behavior', async () => {
  const user = userEvent.setup();
  const onClick = vi.fn();
  const onHeaderClick = vi.fn();

  render(
    <div onClick={onHeaderClick}>
      <PlatformModalCloseButton
        label="关闭像素标题栏"
        variant="pixel"
        placement="inline"
        stopPropagation
        onClick={onClick}
      />
    </div>,
  );

  const button = screen.getByRole('button', { name: '关闭像素标题栏' });
  await user.click(button);

  expect(button.className).toContain('relative');
  expect(button.className).toContain('shrink-0');
  expect(onClick).toHaveBeenCalledTimes(1);
  expect(onHeaderClick).not.toHaveBeenCalled();
});

test('supports editor dark close button', () => {
  render(
    <PlatformModalCloseButton label="关闭角色自定义" variant="editorDark" />,
  );

  const button = screen.getByRole('button', { name: '关闭角色自定义' });

  expect(button.className).toContain(
    'platform-modal-close-button--editor-dark',
  );
  expect(button.className).toContain('border-white/10');
  expect(button.className).toContain('bg-white/5');
});