Auth Verify

"use client";

import { useEffect, useRef, useState, type ClipboardEvent, type KeyboardEvent } from "react";
import { ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthVerifyProps {
  brand?: string;
  brandHref?: string;
  /** Masked destination, e.g. phone or authenticator. */
  destination?: string;
  length?: number;
  /** Code considered valid in the demo; omit to accept any complete code. */
  expectedCode?: string;
  onVerify?: (code: string) => void;
  className?: string;
}

function LedgerlyMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 28 28" className={cn("size-7 shrink-0", className)}>
      <rect width="28" height="28" rx="7" fill="var(--da-primary)" />
      <path d="M8 8v12h12" stroke="var(--da-primary-fg)" strokeWidth="2.6" fill="none" strokeLinecap="round" />
      <path d="M13 15h7M13 11h7" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" opacity=".7" />
    </svg>
  );
}

/** Two-factor verification screen: shield icon, 6 separate digit boxes (auto-advance, backspace, paste support), error/success states, resend with 30s countdown and “use a recovery code” link. */
export function AuthVerify({
  brand = "Ledgerly",
  brandHref = "/",
  destination = "your authenticator app",
  length = 6,
  expectedCode = "482913",
  onVerify,
  className,
}: AuthVerifyProps) {
  const [digits, setDigits] = useState<string[]>(Array(length).fill(""));
  const [state, setState] = useState<"idle" | "error" | "ok">("idle");
  const [wait, setWait] = useState(30);
  const refs = useRef<(HTMLInputElement | null)[]>([]);
  useEffect(() => {
    if (wait <= 0) return;
    const t = setTimeout(() => setWait(wait - 1), 1000);
    return () => clearTimeout(t);
  }, [wait]);
  const check = (next: string[]) => {
    const code = next.join("");
    if (code.length < length) return setState("idle");
    const ok = !expectedCode || code === expectedCode;
    setState(ok ? "ok" : "error");
    if (ok) onVerify?.(code);
  };
  const set = (i: number, v: string) => {
    const d = v.replace(/\D/g, "").slice(-1);
    const next = [...digits];
    next[i] = d;
    setDigits(next);
    if (d && i < length - 1) refs.current[i + 1]?.focus();
    check(next);
  };
  const key = (i: number, e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Backspace" && !digits[i] && i > 0) refs.current[i - 1]?.focus();
    if (e.key === "ArrowLeft" && i > 0) refs.current[i - 1]?.focus();
    if (e.key === "ArrowRight" && i < length - 1) refs.current[i + 1]?.focus();
  };
  const paste = (e: ClipboardEvent<HTMLInputElement>) => {
    const p = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
    if (!p) return;
    e.preventDefault();
    const next = Array.from({ length }, (_, i) => p[i] ?? "");
    setDigits(next);
    refs.current[Math.min(p.length, length - 1)]?.focus();
    check(next);
  };
  return (
    <main className={cn("grid min-h-dvh place-items-center bg-da-surface-2 px-4 py-12 text-da-fg", className)}>
      <div className="w-full max-w-md">
        <a href={brandHref} className="da-focus mx-auto flex w-fit items-center gap-2 rounded-da-sm font-da-display text-lg font-extrabold">
          <LedgerlyMark />
          {brand}
        </a>
        <div className="da-stroke mt-8 rounded-da-lg bg-da-surface p-6 text-center text-da-surface-fg shadow-da-md sm:p-8">
          <span aria-hidden className="mx-auto grid size-12 place-items-center rounded-full bg-da-accent text-da-accent-fg">
            <ShieldCheck className="size-6" />
          </span>
          <h1 className="mt-4 font-da-display text-xl font-bold">Two-step verification</h1>
          <p className="mt-1.5 text-sm text-da-muted-fg">
            Enter the {length}-digit code from {destination}.
          </p>
          <fieldset className="mt-6">
            <legend className="sr-only">Verification code</legend>
            <div className="flex justify-center gap-2">
              {digits.map((d, i) => (
                <input
                  key={i}
                  ref={(el) => {
                    refs.current[i] = el;
                  }}
                  value={d}
                  inputMode="numeric"
                  autoComplete={i === 0 ? "one-time-code" : "off"}
                  maxLength={2}
                  aria-label={`Digit ${i + 1} of ${length}`}
                  aria-invalid={state === "error" ? true : undefined}
                  onChange={(e) => set(i, e.target.value)}
                  onKeyDown={(e) => key(i, e)}
                  onPaste={paste}
                  onFocus={(e) => e.target.select()}
                  className={cn(
                    "da-stroke da-transition size-11 rounded-da-md bg-da-surface text-center font-da-mono text-lg shadow-da-sm outline-none focus:border-da-primary focus:ring-3 focus:ring-da-ring/25 sm:size-12",
                    i === length / 2 - 1 && "mr-2",
                    state === "error" && "border-da-danger",
                    state === "ok" && "border-da-success",
                  )}
                />
              ))}
            </div>
          </fieldset>
          <p role="status" className={cn("mt-4 min-h-5 text-sm font-medium", state === "error" ? "text-da-danger" : "text-da-success")}>
            {state === "error" ? "That code didn’t match. Try again." : state === "ok" ? "Verified — signing you in…" : ""}
          </p>
          <p className="mt-4 text-sm text-da-muted-fg">
            Didn’t get a code?{" "}
            {wait > 0 ? (
              <span>Resend in {wait}s</span>
            ) : (
              <button type="button" onClick={() => setWait(30)} className="da-focus rounded-da-sm font-semibold text-da-primary hover:underline">
                Resend code
              </button>
            )}
          </p>
        </div>
        <p className="mt-6 text-center text-sm">
          <a href="#recovery" className="da-focus rounded-da-sm font-medium text-da-muted-fg hover:text-da-fg hover:underline">
            Use a recovery code instead
          </a>
        </p>
      </div>
    </main>
  );
}

export default AuthVerify;