/* @vitest-environment jsdom */

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

import { CaptchaChallengeField } from './CaptchaChallengeField';

const CAPTCHA_CHALLENGE = {
  challengeId: 'captcha-1',
  promptText: '请输入图中字符。',
  imageDataUrl: 'data:image/png;base64,ZmFrZQ==',
  expiresInSeconds: 120,
};

test('does not render without a captcha challenge', () => {
  const { container } = render(
    <CaptchaChallengeField
      challenge={null}
      answer=""
      onAnswerChange={vi.fn()}
    />,
  );

  expect(container.firstChild).toBeNull();
});

test('reuses platform media frame and text field chrome', async () => {
  const user = userEvent.setup();
  const handleAnswerChange = vi.fn();

  render(
    <CaptchaChallengeField
      challenge={CAPTCHA_CHALLENGE}
      answer=""
      onAnswerChange={handleAnswerChange}
    />,
  );

  const image = screen.getByAltText('图形验证码');
  const imageFrame = image.closest('.platform-media-frame');
  const input = screen.getByLabelText('图形验证码答案');

  expect(screen.getByText('请输入图中字符。')).toBeTruthy();
  expect(imageFrame?.className).toContain('platform-media-frame');
  expect(imageFrame?.className).toContain('bg-white/68');
  expect(input.className).toContain('border-[var(--platform-subpanel-border)]');
  expect(input.className).toContain('h-11');

  await user.type(input, '7');

  expect(handleAnswerChange).toHaveBeenLastCalledWith('7');
});