Two-factor verification

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "motion/react";
import { KeyRound, ShieldCheck, Smartphone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { OtpInput } from "@/components/ui/otp-input";

/** Two-factor verification: authenticator code with resend timer, backup code fallback, success state. */
export function TwoFactor() {
  const [method, setMethod] = React.useState<"app" | "backup">("app");
  const [code, setCode] = React.useState("");
  const [state, setState] = React.useState<"idle" | "checking" | "error" | "ok">("idle");
  const [backup, setBackup] = React.useState("");
  const [wait, setWait] = React.useState(30);
  const [attempt, setAttempt] = React.useState(0);

  React.useEffect(() => {
    if (wait <= 0) return;
    const t = setTimeout(() => setWait((w) => w - 1), 1000);
    return () => clearTimeout(t);
  }, [wait]);

  const verify = async (v: string) => {
    setState("checking");
    await new Promise((r) => setTimeout(r, 700));
    if (v === "424242" || v.toUpperCase() === "ABCD-EFGH") setState("ok");
    else {
      setState("error");
      setAttempt((a) => a + 1);
    }
  };

  return (
    <div className="mx-auto w-full max-w-sm rounded-xl border border-border bg-background p-6 text-center shadow-elev-2 sm:p-8">
      <AnimatePresence mode="wait" initial={false}>
        {state === "ok" ? (
          <motion.div key="ok" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}>
            <motion.span initial={{ scale: 0.4 }} animate={{ scale: 1 }} transition={{ type: "spring", bounce: 0.5 }} className="mx-auto grid size-12 place-items-center rounded-full bg-emerald-500/15 text-emerald-500"><ShieldCheck className="size-6" /></motion.span>
            <h2 className="mt-4 text-xl font-semibold">Verified</h2>
            <p className="mt-1 text-sm text-muted-foreground">Signing you in…</p>
            <Button variant="ghost" size="sm" className="mt-4" onClick={() => { setState("idle"); setCode(""); }}>Reset demo</Button>
          </motion.div>
        ) : (
          <motion.div key={method} initial={{ opacity: 0, x: 12 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -12 }}>
            <span className="mx-auto grid size-12 place-items-center rounded-full bg-muted">{method === "app" ? <Smartphone className="size-5" /> : <KeyRound className="size-5" />}</span>
            <h2 className="mt-4 text-xl font-semibold">{method === "app" ? "Enter your code" : "Use a backup code"}</h2>
            <p className="mt-1 text-sm text-muted-foreground">{method === "app" ? "Open your authenticator app. (Demo: 424242)" : "Each backup code works once. (Demo: ABCD-EFGH)"}</p>
            <div className="mt-6 flex justify-center">
              {method === "app" ? (
                <OtpInput key={attempt} value={code} onValueChange={(v) => { setCode(v); if (state === "error") setState("idle"); }} onComplete={verify} error={state === "error"} disabled={state === "checking"} />
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); verify(backup); }} className="w-full space-y-3">
                  <input value={backup} onChange={(e) => setBackup(e.target.value)} placeholder="XXXX-XXXX" aria-label="Backup code" className="h-11 w-full rounded-md border border-input bg-transparent text-center font-mono tracking-widest outline-none focus:border-foreground/40" />
                  <Button type="submit" className="w-full" loading={state === "checking"}>Verify</Button>
                </form>
              )}
            </div>
            <p className="mt-3 h-5 text-sm text-destructive" role="alert">{state === "error" ? "That code didn't work. Try again." : ""}</p>
            {method === "app" && (
              <p className="mt-2 text-sm text-muted-foreground">
                Didn&apos;t get it?{" "}
                {wait > 0 ? <span className="tabular-nums">Resend in {wait}s</span> : <button type="button" onClick={() => setWait(30)} className="font-medium text-foreground underline underline-offset-4">Resend</button>}
              </p>
            )}
            <button type="button" onClick={() => { setMethod(method === "app" ? "backup" : "app"); setState("idle"); }} className="mt-5 text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
              {method === "app" ? "Use a backup code" : "Use authenticator app"}
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default TwoFactor;