OTP Input

"use client";

import { useRef, useState, KeyboardEvent, ClipboardEvent } from "react";

interface OTPInputProps {
    length?: number;
    onComplete?: (otp: string) => void;
    className?: string;
}

export function OTPInput({ length = 6, onComplete, className = "" }: OTPInputProps) {
    const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
    const [error, setError] = useState(false);
    const inputs = useRef<(HTMLInputElement | null)[]>([]);

    const handleChange = (index: number, value: string) => {
        if (!/^\d*$/.test(value)) return;
        const newOtp = [...otp];
        newOtp[index] = value.slice(-1);
        setOtp(newOtp);
        setError(false);

        if (value && index < length - 1) {
            inputs.current[index + 1]?.focus();
        }
        if (newOtp.every(Boolean)) {
            onComplete?.(newOtp.join(""));
        }
    };

    const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
        if (e.key === "Backspace" && !otp[index] && index > 0) {
            inputs.current[index - 1]?.focus();
        }
    };

    const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
        e.preventDefault();
        const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
        const newOtp = [...otp];
        pasted.split("").forEach((char, i) => { newOtp[i] = char; });
        setOtp(newOtp);
        inputs.current[Math.min(pasted.length, length - 1)]?.focus();
        if (pasted.length === length) onComplete?.(pasted);
    };

    const isComplete = otp.every(Boolean);

    return (
        <div className={`flex flex-col items-center gap-4 ${className}`}>
            <div className="flex items-center gap-2">
                {otp.map((val, i) => (
                    <input
                        key={i}
                        ref={(el) => { inputs.current[i] = el; }}
                        type="text"
                        inputMode="numeric"
                        maxLength={1}
                        value={val}
                        onChange={(e) => handleChange(i, e.target.value)}
                        onKeyDown={(e) => handleKeyDown(i, e)}
                        onPaste={handlePaste}
                        aria-label={`Digit ${i + 1} of ${length}`}
                        className={`w-12 h-14 text-center text-xl font-bold rounded-xl border-2 bg-zinc-900 text-white transition-all duration-200 outline-none focus:scale-105 caret-transparent ${isComplete
                                ? "border-emerald-500 text-emerald-400 shadow-[0_0_15px_rgba(52,211,153,0.3)]"
                                : val
                                    ? "border-indigo-500 shadow-[0_0_10px_rgba(99,102,241,0.3)]"
                                    : "border-zinc-700 hover:border-zinc-500 focus:border-indigo-500"
                            }`}
                    />
                ))}
            </div>

            {isComplete && (
                <p className="text-emerald-400 text-sm font-medium animate-in fade-in slide-in-from-bottom-2 duration-300">
                    ✓ Code verified
                </p>
            )}
        </div>
    );
}