function MfaVerifyStep({ mfaTicket }) {
  const [err, setErr] = React.useState(null);

  async function trySubmit(payload) {
    const r = await fetch(`${window.__bs_api}/api/auth/mfa/verify`, {
      method: "POST", credentials: "include",
      headers: { "content-type": "application/json", "x-csrf-token": window.__bs_csrf },
      body: JSON.stringify({ mfa_ticket: mfaTicket, ...payload }),
    });
    if (!r.ok) { setErr("Wrong code or passkey."); return; }
    location.assign("/");
  }

  async function tryPasskey() {
    setErr(null);
    const optsRes = await fetch(`${window.__bs_api}/api/auth/login/passkey/options`, {
      method: "POST", credentials: "include",
      headers: { "content-type": "application/json", "x-csrf-token": window.__bs_csrf },
      body: "{}",
    });
    const { options, challenge_key } = await optsRes.json();
    const assertion = await navigator.credentials.get({ publicKey: options });
    await trySubmit({ passkey: { challenge_key, response: assertion } });
  }

  return (
    <div className="bs-mfa-verify">
      <form onSubmit={(e) => {
        e.preventDefault();
        trySubmit({ totp_code: new FormData(e.currentTarget).get("code") });
      }}>
        <label className="bs-formfield">
          <span>6-digit code</span>
          <input name="code" required pattern="[0-9]{6}" inputMode="numeric" autoFocus />
        </label>
        <button type="submit" className="bs-formsubmit">Verify</button>
      </form>
      <button onClick={tryPasskey} className="bs-formsubmit bs-formsubmit-alt">Use a passkey</button>
      <a href="#use-backup-code" onClick={(e) => {
        e.preventDefault();
        const code = prompt("Enter one of your 8-character backup codes:");
        if (code) trySubmit({ backup_code: code.trim().toUpperCase() });
      }}>I lost everything — use a backup code</a>
      {err && <p className="bs-auth-error">{err}</p>}
    </div>
  );
}
window.MfaVerifyStep = MfaVerifyStep;