"use client"; import { motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useRef, useState, type ClipboardEvent, type KeyboardEvent, } from "react"; const LENGTH = 6; const DEMO_CODE = "123456"; const SHAKE_MS = 650; const ERROR_HOLD_MS = 900; const SUCCESS_HOLD_MS = 2800; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; const AR_DIGITS = "٠١٢٣٤٥٦٧٨٩"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } /** Accept Latin + Persian + Arabic-Indic digits → ASCII 0-9. */ function onlyDigits(value: string) { let out = ""; for (const ch of value) { if (ch >= "0" && ch <= "9") { out += ch; } else { const fa = FA_DIGITS.indexOf(ch); if (fa >= 0) { out += String(fa); continue; } const ar = AR_DIGITS.indexOf(ch); if (ar >= 0) out += String(ar); } if (out.length >= LENGTH) break; } return out; } type Status = "idle" | "error" | "success"; const CELL_BG = "linear-gradient(180deg, #3a3a40 0%, #1c1c1f 100%)"; const CELL_SHADOW = "inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07)"; const CELL_TONE = { idle: { background: CELL_BG, boxShadow: CELL_SHADOW, digit: "#ffffff", }, success: { background: "linear-gradient(165deg, #14532d 0%, #052e16 100%)", boxShadow: "0 0 0 2px rgba(74,222,128,0.7), 0 0 16px rgba(34,197,94,0.28)", digit: "#bbf7d0", }, error: { background: "linear-gradient(165deg, #7f1d1d 0%, #450a0a 100%)", boxShadow: "0 0 0 2px rgba(248,113,113,0.7), 0 0 16px rgba(239,68,68,0.28)", digit: "#fecaca", }, } as const; function OtpCell({ digit, index, isActive, status, popping, reduceMotion, inputRef, onFocus, onChange, onKeyDown, onPaste, }: { digit: string; index: number; isActive: boolean; status: Status; popping: boolean; reduceMotion: boolean; inputRef: (el: HTMLInputElement | null) => void; onFocus: () => void; onChange: (raw: string) => void; onKeyDown: (e: KeyboardEvent) => void; onPaste: (e: ClipboardEvent) => void; }) { const filled = digit !== ""; const tone = status === "success" || status === "error" ? CELL_TONE[status] : CELL_TONE.idle; return ( رقم {toFaDigits(index + 1)} {isActive && status === "idle" ? ( ) : null} {!filled && isActive ? ( ) : null} {filled ? ( {toFaDigits(digit)} ) : null} onChange(e.target.value)} onKeyDown={onKeyDown} onPaste={onPaste} className="absolute inset-0 z-20 size-full cursor-text opacity-0" /> ); } /** Same layout for success & error — only color / icon / copy differ. */ function StatusBadge({ kind, reduceMotion, }: { kind: "success" | "error"; reduceMotion: boolean; }) { const ok = kind === "success"; return (

{ok ? "تأیید شد" : "کد نادرست است"}

); } export function OtpCascadeForm() { const reduceMotion = useReducedMotion() ?? false; const [digits, setDigits] = useState(() => Array(LENGTH).fill("")); const [status, setStatus] = useState("idle"); const [active, setActive] = useState(0); const [popIndex, setPopIndex] = useState(null); const inputsRef = useRef>([]); const timersRef = useRef([]); const clearTimers = useCallback(() => { for (const id of timersRef.current) window.clearTimeout(id); timersRef.current = []; }, []); useEffect(() => clearTimers, [clearTimers]); const schedule = useCallback((fn: () => void, ms: number) => { const id = window.setTimeout(fn, ms); timersRef.current.push(id); }, []); const focusAt = useCallback((index: number) => { const i = Math.max(0, Math.min(LENGTH - 1, index)); setActive(i); inputsRef.current[i]?.focus(); }, []); const reset = useCallback(() => { clearTimers(); setDigits(Array(LENGTH).fill("")); setStatus("idle"); setPopIndex(null); focusAt(0); }, [clearTimers, focusAt]); const validate = useCallback( (next: string[]) => { const code = next.join(""); if (code.length < LENGTH) return; if (code === DEMO_CODE) { setStatus("success"); schedule(() => reset(), SUCCESS_HOLD_MS); return; } setStatus("error"); schedule(() => { setDigits(Array(LENGTH).fill("")); setStatus("idle"); setPopIndex(null); focusAt(0); }, reduceMotion ? 280 : ERROR_HOLD_MS + SHAKE_MS * 0.35); }, [focusAt, reduceMotion, schedule] ); const commit = useCallback( (index: number, char: string) => { if (status === "success") return; const digit = onlyDigits(char).slice(-1); if (!digit) return; setStatus("idle"); setPopIndex(index); schedule(() => setPopIndex(null), reduceMotion ? 80 : 320); let filled: string[] = []; setDigits((prev) => { filled = [...prev]; filled[index] = digit; return filled; }); if (index < LENGTH - 1) { focusAt(index + 1); } else { schedule(() => validate(filled), 50); } }, [focusAt, reduceMotion, schedule, status, validate] ); const onChange = useCallback( (index: number, raw: string) => { if (raw.length > 1) { const all = onlyDigits(raw); if (all.length > 1) { const next = Array(LENGTH) .fill("") .map((_, i) => all[i] ?? ""); setDigits(next); setStatus("idle"); const last = Math.min(all.length, LENGTH) - 1; setPopIndex(last); schedule(() => setPopIndex(null), reduceMotion ? 80 : 320); if (all.length >= LENGTH) { schedule(() => validate(next), 50); } else { focusAt(all.length); } return; } } commit(index, raw); }, [commit, focusAt, reduceMotion, schedule, validate] ); const onKeyDown = useCallback( (index: number, e: KeyboardEvent) => { // Digits via keydown — reliable for FA/EN keyboards const fromKey = onlyDigits(e.key); if (fromKey.length === 1 && e.key.length === 1) { e.preventDefault(); commit(index, fromKey); return; } if (e.key === "Backspace") { e.preventDefault(); setStatus("idle"); setDigits((prev) => { const next = [...prev]; if (next[index]) { next[index] = ""; return next; } if (index > 0) { next[index - 1] = ""; focusAt(index - 1); } return next; }); return; } if (e.key === "ArrowLeft") { e.preventDefault(); focusAt(index - 1); } else if (e.key === "ArrowRight") { e.preventDefault(); focusAt(index + 1); } }, [commit, focusAt] ); const onPaste = useCallback( (e: ClipboardEvent) => { e.preventDefault(); const all = onlyDigits(e.clipboardData.getData("text")); if (!all) return; const next = Array(LENGTH) .fill("") .map((_, i) => all[i] ?? ""); setDigits(next); setStatus("idle"); const filledCount = Math.min(all.length, LENGTH); setPopIndex(filledCount - 1); schedule(() => setPopIndex(null), reduceMotion ? 80 : 360); if (filledCount >= LENGTH) { schedule(() => validate(next), 50); } else { focusAt(filledCount); } }, [focusAt, reduceMotion, schedule, validate] ); const shakeX = status === "error" && !reduceMotion ? [0, -7, 6, -4, 2, 0] : 0; return (

تأیید هویت

{status === "success" ? "کد درست بود" : status === "error" ? "کد اشتباه است" : "کد ۶ رقمی را وارد کنید"}

{status === "success" ? "هویت شما تأیید شد" : status === "error" ? "دوباره تلاش کنید" : "کد به شمارهٔ شما پیامک شد"}

{digits.map((digit, index) => ( { inputsRef.current[index] = el; }} onFocus={() => setActive(index)} onChange={(raw) => onChange(index, raw)} onKeyDown={(e) => onKeyDown(index, e)} onPaste={onPaste} /> ))}

{status === "success" || status === "error" ? ( ) : (

کد دمو:{" "} {toFaDigits(DEMO_CODE)}

)}

{status !== "success" ? (

) : null}

); } export default function OtpCascade() { return (

); }