import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { authApi } from '../../api/endpoints';
import { ApiRequestError } from '../../api/client';
import { Button } from '../../components/ui/Button';
import type { OtpSetupResponse } from '../../api/types';
import './login.css';

/**
 * 2차 인증(Authenticator/TOTP) 관리 — 로그인 상태에서 접근(/otp-setup).
 * 상태 조회 → 미등록이면 setup(QR)·6자리 confirm → 활성화. 등록 상태면 해제 가능.
 */
type Phase = 'loading' | 'idle' | 'setup' | 'enabled';

export function OtpSetupPage() {
  const navigate = useNavigate();
  const [phase, setPhase] = useState<Phase>('loading');
  const [data, setData] = useState<OtpSetupResponse | null>(null);
  const [code, setCode] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const st = await authApi.otpStatus();
        if (alive) setPhase(st.otpEnabled ? 'enabled' : 'idle');
      } catch (err) {
        if (alive) {
          setError(messageOf(err));
          setPhase('idle');
        }
      }
    })();
    return () => {
      alive = false;
    };
  }, []);

  async function startSetup() {
    setError(null);
    setBusy(true);
    try {
      const res = await authApi.otpSetup();
      setData(res);
      setPhase('setup');
    } catch (err) {
      setError(messageOf(err));
    } finally {
      setBusy(false);
    }
  }

  async function confirm() {
    setError(null);
    setBusy(true);
    try {
      await authApi.otpConfirm(code.trim());
      setData(null);
      setCode('');
      setPhase('enabled');
    } catch (err) {
      setError(messageOf(err));
    } finally {
      setBusy(false);
    }
  }

  async function disable() {
    setError(null);
    setBusy(true);
    try {
      await authApi.otpResetSelf();
      setPhase('idle');
    } catch (err) {
      setError(messageOf(err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="kx-otp-page">
      <div className="kx-login__card">
        <h2 className="kx-login__title">2차 인증 — Authenticator(OTP)</h2>
        <p className="kx-login__title-sub">
          Google·Microsoft Authenticator 등 OTP 앱으로 6자리 코드를 사용하는 2차 인증을 관리합니다.
        </p>

        {error && (
          <p className="kx-login__error" role="alert">
            {error}
          </p>
        )}

        {phase === 'loading' && <p className="kx-login__title-sub">상태 확인 중…</p>}

        {phase === 'idle' && (
          <div className="kx-otp__enroll">
            <p className="kx-login__title-sub">등록을 시작하면 QR 코드가 발급됩니다.</p>
            <Button block disabled={busy} onClick={startSetup}>
              {busy ? '발급 중…' : 'Authenticator 등록 시작'}
            </Button>
          </div>
        )}

        {phase === 'setup' && data && (
          <div className="kx-otp__enroll">
            <ol className="kx-otp__steps">
              <li>Authenticator 앱에서 아래 QR을 스캔하세요.</li>
              <li>스캔이 안 되면 수동 키를 직접 입력하세요.</li>
              <li>앱에 표시된 6자리 코드를 입력해 확인하세요.</li>
            </ol>
            <div className="kx-otp__qr">
              <img src={data.qrImageDataUri} alt="OTP QR" width={180} height={180} />
            </div>
            <div className="kx-otp__secret">
              <span className="kx-otp__secret-label">수동 입력 키</span>
              <code>{data.secret}</code>
            </div>
            <div className="kx-field">
              <label htmlFor="otp-confirm">앱에 표시된 6자리 코드</label>
              <input
                id="otp-confirm"
                inputMode="numeric"
                autoComplete="one-time-code"
                maxLength={6}
                placeholder="000000"
                className="kx-otp__code-input"
                value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
              />
            </div>
            <Button block disabled={busy || code.length !== 6} onClick={confirm}>
              {busy ? '확인 중…' : '코드 확인 · 활성화'}
            </Button>
          </div>
        )}

        {phase === 'enabled' && (
          <div className="kx-otp__enroll">
            <p className="kx-otp__ok">2차 인증(Authenticator)이 활성화되어 있습니다.</p>
            <Button variant="secondary" block disabled={busy} onClick={disable}>
              {busy ? '처리 중…' : 'Authenticator 해제(이메일 인증으로 복귀)'}
            </Button>
          </div>
        )}

        <button
          type="button"
          className="kx-login__text-link kx-otp__cancel"
          onClick={() => navigate(-1)}
        >
          ← 돌아가기
        </button>
      </div>
    </div>
  );
}

function messageOf(err: unknown): string {
  if (err instanceof ApiRequestError) {
    if (err.code === 'OTP_INVALID') return '코드가 올바르지 않습니다. 다시 시도해 주세요.';
    return err.message;
  }
  return 'OTP 처리 중 오류가 발생했습니다.';
}
