/* @vitest-environment jsdom */

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

import { PlatformAuthModalShell } from './PlatformAuthModalShell';

test('renders auth modal shell with platform theme and auth card chrome', () => {
  const onClose = vi.fn();

  const { container } = render(
    <PlatformAuthModalShell
      title="账号入口"
      platformTheme="light"
      onClose={onClose}
      closeLabel="关闭登录弹窗"
      panelClassName="!max-w-md"
    >
      <div>登录表单</div>
    </PlatformAuthModalShell>,
  );

  const dialog = screen.getByRole('dialog', { name: '账号入口' });

  expect(container.querySelector('[role="dialog"]')).toBeNull();
  expect(document.body.contains(dialog)).toBe(true);
  expect(dialog.parentElement?.className).toContain('platform-theme--light');
  expect(dialog.className).toContain('platform-modal-shell');
  expect(dialog.className).toContain('platform-auth-card');
  expect(dialog.className).toContain('!max-w-md');
  expect(within(dialog).getByText('登录表单')).toBeTruthy();

  const backdrop = dialog.parentElement as HTMLElement;
  fireEvent.pointerDown(within(dialog).getByText('登录表单'));
  fireEvent.pointerUp(backdrop);
  fireEvent.click(backdrop);
  expect(onClose).not.toHaveBeenCalled();

  fireEvent.pointerDown(backdrop);
  fireEvent.pointerUp(backdrop);
  fireEvent.click(backdrop);
  expect(onClose).toHaveBeenCalledTimes(1);
});

test('keeps escape disabled for auth flows', () => {
  const onClose = vi.fn();

  render(
    <PlatformAuthModalShell
      title="请填写邀请码"
      platformTheme="dark"
      onClose={onClose}
      closeLabel="取消填写邀请码"
      zIndexClassName="z-[130]"
    >
      <div>邀请码表单</div>
    </PlatformAuthModalShell>,
  );

  fireEvent.keyDown(window, { key: 'Escape' });

  expect(onClose).not.toHaveBeenCalled();
  expect(screen.getByRole('button', { name: '取消填写邀请码' })).toBeTruthy();
});

test('allows account shell callers to own overlay spacing and panel size', () => {
  render(
    <PlatformAuthModalShell
      title="账号信息"
      platformTheme="light"
      onClose={vi.fn()}
      closeLabel="关闭账号弹窗"
      size="xl"
      showHeader={false}
      overlaySpacing="none"
      overlayClassName="!items-end"
      overlayStyle={{ paddingTop: '12px' }}
      authCardClassName=""
      panelClassName="!max-w-3xl !bg-transparent"
      bodyClassName="!p-0"
    >
      <div>账号内容</div>
    </PlatformAuthModalShell>,
  );

  const dialog = screen.getByRole('dialog', { name: '账号信息' });
  const overlay = dialog.parentElement as HTMLElement;

  expect(overlay.className).toContain('platform-theme--light');
  expect(overlay.className).not.toContain('!px-3');
  expect(overlay.style.paddingTop).toBe('12px');
  expect(dialog.className).toContain('!max-w-3xl');
  expect(dialog.className).not.toContain('platform-auth-card');
  expect(within(dialog).queryByRole('button', { name: '关闭账号弹窗' })).toBeNull();
});