OTP Input

"use client";

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

export interface OtpInputProps {
  label?: string;
  length?: number;
  /** Called once every digit is filled. */
  onComplete?: (code: string) => void;
  error?: string;
  className?: string;
}

export function OtpInput({ label = "Verification code", length = 6, onComplete, error, className }: OtpInputProps) {
  const [digits, setDigits] = useState<string[]>(() => Array.from({ length }, () => ""));
  const refs = useRef<(HTMLInputElement | null)[]>([]);
  const groupId = useId();

  function update(next: string[]) {
    setDigits(next);
    if (next.every((d) => d !== "")) onComplete?.(next.join(""));
  }

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

  function onKeyDown(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();
  }

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

  return (
    <div className={cn("flex flex-col gap-3", className)}>
      <p id={`${groupId}-label`} className="font-da-mono text-xs font-bold tracking-da-label uppercase">
        {label}
      </p>
      <div role="group" aria-labelledby={`${groupId}-label`} aria-describedby={error ? `${groupId}-error` : undefined} className="flex gap-2 sm:gap-3">
        {digits.map((d, i) => (
          <input
            key={i}
            ref={(el) => {
              refs.current[i] = el;
            }}
            value={d}
            onChange={(e) => setAt(i, e.target.value)}
            onKeyDown={(e) => onKeyDown(i, e)}
            onPaste={onPaste}
            onFocus={(e) => e.target.select()}
            inputMode="numeric"
            autoComplete={i === 0 ? "one-time-code" : "off"}
            aria-label={`Digit ${i + 1} of ${length}`}
            aria-invalid={error ? true : undefined}
            className={cn(
              "da-stroke da-transition size-12 bg-da-input text-center font-da-display text-2xl text-da-fg shadow-da-sm outline-none sm:size-14",
              "focus:translate-x-[3px] focus:translate-y-[3px] focus:bg-da-primary focus:text-da-primary-fg focus:shadow-none",
              d && "bg-da-surface",
              error && "[--da-border:var(--da-danger)]",
              length === 6 && i === 2 && "mr-2 sm:mr-4",
            )}
          />
        ))}
      </div>
      {error && (
        <p id={`${groupId}-error`} className="text-sm font-bold">
          ! {error}
        </p>
      )}
    </div>
  );
}

export default OtpInput;