/*
 * 2차 인증(OTP) 등록 카드 — 마이페이지용. setup(QR 발급) → Authenticator 앱 스캔 → confirm(코드 검증) 활성화.
 * 시크릿은 화면 1회 표기(백엔드 응답 노출 금지 원칙과 별개로, 사용자 본인 등록 목적).
 */
import { useState } from 'react';
import { twoFactorApi, type OtpSetupResponse } from '@/api/common';

export function OtpSetupCard(): JSX.Element {
  const [setup, setSetup] = useState<OtpSetupResponse | null>(null);
  const [code, setCode] = useState<string>('');
  const [done, setDone] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<boolean>(false);

  const start = async (): Promise<void> => {
    setError(null);
    setBusy(true);
    try {
      setSetup(await twoFactorApi.setup());
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const confirm = async (): Promise<void> => {
    setError(null);
    setBusy(true);
    try {
      await twoFactorApi.confirm(code.trim());
      setDone(true);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <section className="otp-setup-card">
      <h3>2차 인증(OTP) 등록</h3>
      {done ? (
        <p role="status">OTP가 활성화되었습니다. 다음 로그인부터 인증 코드가 필요합니다.</p>
      ) : (
        <>
          {!setup ? (
            <button type="button" onClick={start} disabled={busy}>
              OTP 등록 시작
            </button>
          ) : (
            <div className="otp-setup-steps">
              <p>Authenticator 앱으로 아래 QR을 스캔하세요.</p>
              <img src={setup.qrImageDataUri} alt="OTP QR" width={180} height={180} />
              <label htmlFor="otp-code">인증 코드 6자리</label>
              <input
                id="otp-code"
                inputMode="numeric"
                maxLength={6}
                value={code}
                onChange={(e) => setCode(e.target.value)}
              />
              <button type="button" onClick={confirm} disabled={busy || code.trim().length < 6}>
                확인 및 활성화
              </button>
            </div>
          )}
        </>
      )}
      {error && <p className="otp-error" role="alert">{error}</p>}
    </section>
  );
}
