import type { AuthCaptchaChallenge } from '../../services/authService';
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { PlatformTextField } from '../common/PlatformTextField';

type CaptchaChallengeFieldProps = {
  challenge: AuthCaptchaChallenge | null;
  answer: string;
  onAnswerChange: (value: string) => void;
};

export function CaptchaChallengeField({
  challenge,
  answer,
  onAnswerChange,
}: CaptchaChallengeFieldProps) {
  if (!challenge) {
    return null;
  }

  return (
    <PlatformStatusMessage
      tone="info"
      surface="profile"
      className="grid gap-3 rounded-2xl"
    >
      <div className="text-sm leading-6">{challenge.promptText}</div>
      <PlatformMediaFrame
        src={challenge.imageDataUrl}
        alt="图形验证码"
        fallbackLabel="图形验证码"
        aspect="auto"
        surface="soft"
        className="h-14 w-40"
      />
      <PlatformTextField
        value={answer}
        aria-label="图形验证码答案"
        placeholder="输入图形验证码"
        density="compact"
        className="h-11"
        onChange={(event) => onAnswerChange(event.target.value)}
      />
    </PlatformStatusMessage>
  );
}