Auth Passkey

"use client";

import { useState } from "react";
import { Fingerprint, KeyRound, Mail, ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthPasskeyProps {
  email?: string;
  /** Called when the user chooses the passkey. Resolve on success, throw on failure. */
  onPasskey?: () => Promise<void> | void;
  onFallback?: (method: "email" | "password") => void;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

/** Passkey sign-in: large animated fingerprint orb in a glass card, “Use passkey” with waiting / success / error states, and email-link or password fallbacks. */
export function AuthPasskey({ email = "amara@lumen.io", onPasskey, onFallback, className }: AuthPasskeyProps) {
  const [state, setState] = useState<"idle" | "waiting" | "ok" | "error">("idle");

  const go = async () => {
    setState("waiting");
    try {
      await onPasskey?.();
      setState("ok");
    } catch {
      setState("error");
    }
  };

  return (
    <div className={cn("grid min-h-dvh place-items-center px-4 py-12 text-da-fg", className)}>
      <main className={cn("w-full max-w-sm rounded-da-lg p-8 text-center shadow-da-lg", GLASS)}>
        <div className="relative mx-auto grid size-28 place-items-center">
          <span
            aria-hidden
            className={cn(
              "absolute inset-0 rounded-full bg-gradient-to-br from-da-primary to-da-accent opacity-30 blur-xl",
              state === "waiting" && "animate-pulse motion-reduce:animate-none",
            )}
          />
          <span
            aria-hidden
            className={cn(
              "relative grid size-24 place-items-center rounded-full text-da-primary-fg shadow-da-lg transition-colors duration-(--da-duration)",
              state === "ok" ? "bg-da-success" : state === "error" ? "bg-da-danger" : "bg-gradient-to-br from-da-primary to-da-accent",
            )}
          >
            {state === "ok" ? <ShieldCheck className="size-11" /> : <Fingerprint className="size-11" />}
          </span>
        </div>
        <h1 className="mt-6 font-da-display text-2xl font-semibold tracking-da-display">Welcome back</h1>
        <p className="mt-1 text-sm text-da-muted-fg">
          Signing in as <span className="font-semibold text-da-fg">{email}</span>
        </p>
        <button
          type="button"
          onClick={go}
          disabled={state === "waiting" || state === "ok"}
          className="da-focus da-transition mt-8 inline-flex h-12 w-full items-center justify-center gap-2 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5 disabled:opacity-70 disabled:hover:translate-y-0"
        >
          <KeyRound aria-hidden className="size-4" />
          {state === "waiting" ? "Waiting for your device…" : state === "ok" ? "Signed in" : "Sign in with passkey"}
        </button>
        <p role="status" aria-live="polite" className={cn("mt-3 min-h-5 text-sm", state === "error" ? "text-da-danger" : "text-da-muted-fg")}>
          {state === "waiting"
            ? "Use Face ID, Touch ID or your security key."
            : state === "error"
              ? "That didn’t work. Try again or use another method."
              : state === "ok"
                ? "Redirecting to your meetings…"
                : ""}
        </p>
        <div className="mt-6 border-t border-da-border-strong pt-6">
          <p className="text-xs text-da-muted-fg">Other ways to sign in</p>
          <div className="mt-3 grid grid-cols-2 gap-2">
            <button
              type="button"
              onClick={() => onFallback?.("email")}
              className="da-focus da-transition da-stroke inline-flex h-11 items-center justify-center gap-2 rounded-da-pill bg-da-surface text-sm font-semibold hover:bg-da-secondary"
            >
              <Mail aria-hidden className="size-4" /> Email link
            </button>
            <button
              type="button"
              onClick={() => onFallback?.("password")}
              className="da-focus da-transition da-stroke inline-flex h-11 items-center justify-center gap-2 rounded-da-pill bg-da-surface text-sm font-semibold hover:bg-da-secondary"
            >
              <KeyRound aria-hidden className="size-4" /> Password
            </button>
          </div>
        </div>
      </main>
    </div>
  );
}

export default AuthPasskey;