Auth Verify

"use client";

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

export interface AuthVerifyProps {
  email?: string;
  length?: number;
  /** Called when all digits are entered; throw to show an error and clear. */
  onComplete?: (code: string) => void | Promise<void>;
  onResend?: () => void;
  /** Seconds before “Resend” is available. */
  cooldown?: number;
  backHref?: string;
  className?: string;
}

/** Email verification screen: 6 single-digit boxes with auto-advance, paste support, backspace navigation, auto-submit and a resend cooldown. */
export function AuthVerify({ email = "maya@acme.io", length = 6, onComplete, onResend, cooldown = 30, backHref = "#login", className }: AuthVerifyProps) {
  const id = useId();
  const [digits, setDigits] = useState<string[]>(() => Array(length).fill(""));
  const [status, setStatus] = useState<"idle" | "checking" | "error" | "ok">("idle");
  const [left, setLeft] = useState(cooldown);
  const refs = useRef<(HTMLInputElement | null)[]>([]);

  useEffect(() => {
    if (left <= 0) return;
    const t = window.setTimeout(() => setLeft((l) => l - 1), 1000);
    return () => window.clearTimeout(t);
  }, [left]);

  const commit = async (next: string[]) => {
    setDigits(next);
    if (next.every(Boolean)) {
      setStatus("checking");
      try {
        await onComplete?.(next.join(""));
        setStatus("ok");
      } catch {
        setStatus("error");
        setDigits(Array(length).fill(""));
        refs.current[0]?.focus();
      }
    } else if (status === "error") setStatus("idle");
  };

  const onChange = (i: number, v: string) => {
    const d = v.replace(/\D/g, "").slice(-1);
    const next = [...digits];
    next[i] = d;
    if (d && i < length - 1) refs.current[i + 1]?.focus();
    void commit(next);
  };

  const onKey = (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 onPaste = (e: ClipboardEvent<HTMLInputElement>) => {
    const text = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
    if (!text) return;
    e.preventDefault();
    const next = Array.from({ length }, (_, i) => text[i] ?? "");
    refs.current[Math.min(text.length, length - 1)]?.focus();
    void commit(next);
  };

  return (
    <div className={cn("grid min-h-dvh place-items-center bg-da-bg px-4 py-12 text-da-fg", className)}>
      <main className="w-full max-w-sm text-center">
        <span aria-hidden className="mx-auto grid size-12 place-items-center rounded-full bg-da-accent text-da-accent-fg">
          <MailCheck className="size-5" />
        </span>
        <h1 className="mt-5 text-xl font-semibold tracking-da-display">Check your email</h1>
        <p className="mt-2 text-sm text-da-muted-fg">
          We sent a {length}-digit code to <span className="font-medium text-da-fg">{email}</span>. It expires in 10 minutes.
        </p>
        <fieldset className="mt-8" aria-describedby={`${id}-status`}>
          <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}
                onChange={(e) => onChange(i, e.target.value)}
                onKeyDown={(e) => onKey(i, e)}
                onPaste={onPaste}
                onFocus={(e) => e.currentTarget.select()}
                inputMode="numeric"
                autoComplete={i === 0 ? "one-time-code" : "off"}
                aria-label={`Digit ${i + 1} of ${length}`}
                aria-invalid={status === "error"}
                disabled={status === "checking" || status === "ok"}
                className={cn(
                  "da-focus da-transition size-11 rounded-da-md border bg-da-input text-center font-da-mono text-lg font-medium sm:size-12",
                  i === length / 2 && "ml-2",
                  status === "error" ? "border-da-danger" : status === "ok" ? "border-da-success" : "border-da-border focus:border-da-primary",
                )}
              />
            ))}
          </div>
        </fieldset>
        <p
          id={`${id}-status`}
          aria-live="polite"
          className={cn("mt-4 min-h-5 text-[13px]", status === "error" ? "text-da-danger" : status === "ok" ? "text-da-success" : "text-da-muted-fg")}
        >
          {status === "checking" ? "Verifying…" : status === "error" ? "That code didn’t work. Try again." : status === "ok" ? "Verified — redirecting…" : ""}
        </p>
        <p className="mt-6 text-[13px] text-da-muted-fg">
          Didn’t get it?{" "}
          <button
            type="button"
            disabled={left > 0}
            onClick={() => {
              onResend?.();
              setLeft(cooldown);
            }}
            className="da-focus rounded-da-sm font-medium text-da-fg hover:underline disabled:font-normal disabled:text-da-muted-fg disabled:no-underline"
          >
            {left > 0 ? `Resend in ${left}s` : "Resend code"}
          </button>
        </p>
        <a href={backHref} className="da-focus mt-8 inline-block rounded-da-sm text-[13px] text-da-muted-fg hover:text-da-fg">
          ← Use a different email
        </a>
      </main>
    </div>
  );
}

export default AuthVerify;