import { useState } from "react";
import SectionCard from "../components/SectionCard";
import { beginTotpSetup, finishTotpSetup, registerPasskey } from "../lib/auth";

export default function SecurityPage() {
  const [qr, setQr] = useState("");
  const [secret, setSecret] = useState("");
  const [token, setToken] = useState("");
  const [msg, setMsg] = useState("");
  const [err, setErr] = useState("");

  async function setupTotp() {
    setErr(""); setMsg("");
    try {
      const data = await beginTotpSetup();
      setQr(data.qrCodeDataUrl);
      setSecret(data.secretBase32);
      setMsg("TOTP-Enrollment gestartet");
    } catch (e) { setErr(e.message); }
  }
  async function verifyTotp(e) {
    e.preventDefault();
    setErr(""); setMsg("");
    try {
      await finishTotpSetup(token);
      setMsg("TOTP erfolgreich aktiviert");
    } catch (e) { setErr(e.message); }
  }
  async function setupPasskey() {
    setErr(""); setMsg("");
    try {
      await registerPasskey();
      setMsg("Passkey erfolgreich registriert");
    } catch (e) { setErr(e.message); }
  }

  return (
    <div className="stack">
      <SectionCard title="MFA & Passkeys" subtitle="WebAuthn/Passkey und TOTP vollständig am Backend verdrahtet">
        {err ? <div className="alert error">{err}</div> : null}
        {msg ? <div className="alert success">{msg}</div> : null}
        <div className="security-grid">
          <div className="glass pane">
            <h3>TOTP einrichten</h3>
            <p>QR-Code mit Authenticator-App scannen und Einmalcode verifizieren.</p>
            <button className="btn" onClick={setupTotp}>TOTP-Setup starten</button>
            {qr ? <img src={qr} alt="TOTP QR" className="qr" /> : null}
            {secret ? <code>{secret}</code> : null}
            <form className="form-grid" onSubmit={verifyTotp}>
              <label><span>Code</span><input className="input" value={token} onChange={(e) => setToken(e.target.value)} /></label>
              <button className="btn" type="submit">TOTP bestätigen</button>
            </form>
          </div>
          <div className="glass pane">
            <h3>Passkey registrieren</h3>
            <p>Plattform-Passkey oder Sicherheitsschlüssel als starken zweiten Faktor hinzufügen.</p>
            <button className="btn" onClick={setupPasskey}>Passkey registrieren</button>
            <ul className="bullet-list">
              <li>Login über WebAuthn-Challenge</li>
              <li>Zählerprüfung gegen geklonte Authenticatoren</li>
              <li>Serverseitige Challenge-Ablaufsteuerung</li>
            </ul>
          </div>
        </div>
      </SectionCard>
    </div>
  );
}
