/* @vitest-environment jsdom */

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

import type { AuthUser } from '../../services/authService';
import { BindPhoneScreen } from './BindPhoneScreen';

const baseUser: AuthUser = {
  id: 'user-1',
  displayName: '微信旅人',
  avatarUrl: null,
  publicUserCode: 'user-bind-phone',
  phoneNumberMasked: null,
  loginMethod: 'wechat',
  bindingStatus: 'pending_bind_phone',
  wechatBound: true,
};

test('绑定手机号表单复用平台输入和字段标题', async () => {
  const user = userEvent.setup();
  const onSubmit = vi.fn().mockResolvedValue(undefined);

  render(
    <BindPhoneScreen
      user={baseUser}
      platformTheme="light"
      sendingCode={false}
      binding={false}
      error=""
      captchaChallenge={null}
      onSendCode={vi.fn().mockResolvedValue({
        cooldownSeconds: 60,
        expiresInSeconds: 300,
      })}
      onSubmit={onSubmit}
      onLogout={vi.fn().mockResolvedValue(undefined)}
    />,
  );

  const phoneInput = screen.getByLabelText('手机号') as HTMLInputElement;
  const codeInput = screen.getByLabelText('验证码') as HTMLInputElement;

  expect(phoneInput.className).toContain('platform-text-field');
  expect(codeInput.className).toContain('platform-text-field');
  expect(screen.getByText('手机号').className).toContain(
    'text-[var(--platform-text-strong)]',
  );
  expect(screen.getByText('当前登录身份：微信旅人').className).toContain(
    'platform-subpanel',
  );

  await user.type(phoneInput, '13800000000');
  await user.type(codeInput, '123456');
  await user.click(screen.getByRole('button', { name: '绑定手机号并进入游戏' }));

  expect(onSubmit).toHaveBeenCalledWith('13800000000', '123456');
});