function BackupCodesStep({ onDone, data }) {
  const [codes, setCodes] = React.useState(null);
  const [confirmed, setConfirmed] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    fetch(`${window.__bs_api}/api/auth/mfa/backup-codes/generate`, {
      method: "POST", credentials: "include",
      headers: { "content-type": "application/json", "x-csrf-token": window.__bs_csrf },
    })
      .then((r) => r.ok ? r.json() : Promise.reject(new Error(`gen: ${r.status}`)))
      .then((b) => setCodes(b.codes))
      .catch((e) => setErr(String(e)));
  }, []);

  async function complete() {
    setBusy(true); setErr(null);
    try {
      const r = await fetch(`${window.__bs_api}/api/auth/signup/complete`, {
        method: "POST", credentials: "include",
        headers: { "content-type": "application/json", "x-csrf-token": window.__bs_csrf },
      });
      if (!r.ok) throw new Error(`complete: ${r.status}`);
      onDone();
    } catch (e) { setErr(e.message || String(e)); }
    finally { setBusy(false); }
  }

  if (!codes) return <p>Generating recovery codes…</p>;
  return (
    <div>
      <ul className="bs-backup-codes">
        {codes.map((c) => <li key={c}><code>{c}</code></li>)}
      </ul>
      <label>
        <input type="checkbox" onChange={(e) => setConfirmed(e.target.checked)} />
        {" "}I've saved these somewhere safe
      </label>
      <button disabled={!confirmed || busy} onClick={complete} className="bs-formsubmit">
        {data.primaryCta}
      </button>
      {err && <p className="bs-auth-error">{err}</p>}
    </div>
  );
}
window.BackupCodesStep = BackupCodesStep;