"use client"; import { useCallback, useEffect, useId, useRef, useState, type DragEvent, type ChangeEvent, } from "react"; import { AnimatePresence, LayoutGroup, motion, MotionConfig, useMotionValue, useReducedMotion, useSpring, useTransform, } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import { Cancel01Icon, File01Icon, Image01Icon, Tick02Icon, Upload04Icon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; type Phase = "idle" | "dragging" | "catching" | "uploading" | "done"; type FileMeta = { name: string; size: number; type: string; previewUrl: string | null; }; const FA = "۰۱۲۳۴۵۶۷۸۹"; function toFa(n: number | string) { return String(n).replace(/\d/g, (d) => FA[Number(d)] ?? d); } function formatBytes(bytes: number) { if (bytes < 1024) return `${toFa(bytes)} بایت`; if (bytes < 1024 * 1024) return `${toFa((bytes / 1024).toFixed(1))} کیلوبایت`; return `${toFa((bytes / (1024 * 1024)).toFixed(1))} مگابایت`; } const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; const UPLOAD_MS = 3200; const SEGMENTS = 12; function isImage(type: string) { return type.startsWith("image/"); } function OrbitDots({ active }: { active: boolean }) { return ( <> {[0, 1, 2].map((i) => ( ))} ); } function Shockwave({ fire }: { fire: boolean }) { return ( {fire ? [0, 1].map((i) => ( )) : null} ); } export default function UploadDropzone() { const reduce = useReducedMotion() ?? false; const layoutGroup = useId().replace(/:/g, ""); const inputId = useId(); const inputRef = useRef(null); const dragDepth = useRef(0); const rafRef = useRef(0); const catchTimerRef = useRef(0); const doneTimerRef = useRef(0); const shockTimerRef = useRef(0); const [phase, setPhase] = useState("idle"); const [file, setFile] = useState(null); const [progress, setProgress] = useState(0); const [shock, setShock] = useState(false); const [pctLabel, setPctLabel] = useState("۰"); const progressMv = useMotionValue(0); const progressSpring = useSpring(progressMv, { stiffness: reduce ? 380 : 36, damping: reduce ? 36 : 10, mass: reduce ? 0.35 : 1.4, }); const barWidth = useTransform( progressSpring, (v) => `${Math.min(100, Math.max(0, v))}%`, ); const displayPct = useTransform(progressSpring, (v) => toFa(Math.round(Math.min(100, Math.max(0, v)))), ); const litSegments = Math.round((progress / 100) * SEGMENTS); const clearPreviewUrl = useCallback((meta: FileMeta | null) => { if (meta?.previewUrl) URL.revokeObjectURL(meta.previewUrl); }, []); useEffect(() => { const unsub = displayPct.on("change", (v) => setPctLabel(v)); return unsub; }, [displayPct]); useEffect(() => { return () => { cancelAnimationFrame(rafRef.current); window.clearTimeout(catchTimerRef.current); window.clearTimeout(doneTimerRef.current); window.clearTimeout(shockTimerRef.current); }; }, []); useEffect(() => { progressMv.set(progress); }, [progress, progressMv]); const startUpload = useCallback(() => { cancelAnimationFrame(rafRef.current); setPhase("uploading"); setProgress(0); const start = performance.now(); const duration = reduce ? 900 : UPLOAD_MS; const tick = (now: number) => { const t = Math.min(1, (now - start) / duration); const eased = t < 0.18 ? 0.32 * (t / 0.18) ** 2 : t < 0.7 ? 0.32 + 0.58 * ((t - 0.18) / 0.52) : 0.9 + 0.1 * (1 - Math.pow(1 - (t - 0.7) / 0.3, 3)); setProgress(Math.min(100, Math.round(eased * 100))); if (t < 1) { rafRef.current = requestAnimationFrame(tick); } else { setProgress(100); doneTimerRef.current = window.setTimeout( () => setPhase("done"), reduce ? 140 : 560, ); } }; rafRef.current = requestAnimationFrame(tick); }, [reduce]); const acceptFile = useCallback( (raw: File) => { setFile((prev) => { clearPreviewUrl(prev); return { name: raw.name, size: raw.size, type: raw.type || "application/octet-stream", previewUrl: isImage(raw.type) ? URL.createObjectURL(raw) : null, }; }); setShock(true); setPhase("catching"); setProgress(0); window.clearTimeout(catchTimerRef.current); window.clearTimeout(shockTimerRef.current); shockTimerRef.current = window.setTimeout(() => setShock(false), 720); catchTimerRef.current = window.setTimeout( () => startUpload(), reduce ? 220 : 980, ); }, [clearPreviewUrl, reduce, startUpload], ); const reset = useCallback(() => { cancelAnimationFrame(rafRef.current); window.clearTimeout(catchTimerRef.current); window.clearTimeout(doneTimerRef.current); window.clearTimeout(shockTimerRef.current); setFile((prev) => { clearPreviewUrl(prev); return null; }); setProgress(0); progressMv.set(0); setShock(false); setPhase("idle"); if (inputRef.current) inputRef.current.value = ""; }, [clearPreviewUrl, progressMv]); const onDragEnter = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); dragDepth.current += 1; if (phase === "idle" || phase === "dragging") setPhase("dragging"); }; const onDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); dragDepth.current = Math.max(0, dragDepth.current - 1); if (dragDepth.current === 0 && phase === "dragging") setPhase("idle"); }; const onDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); }; const onDrop = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); dragDepth.current = 0; const next = e.dataTransfer.files?.[0]; if (next) acceptFile(next); else setPhase("idle"); }; const onInputChange = (e: ChangeEvent) => { const next = e.target.files?.[0]; if (next) acceptFile(next); }; const idleOrDrag = phase === "idle" || phase === "dragging"; const showCard = (phase === "catching" || phase === "uploading" || phase === "done") && !!file; return (

{idleOrDrag ? ( inputRef.current?.click()} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); inputRef.current?.click(); } }} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDragOver={onDragOver} onDrop={onDrop} initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -32, scale: 0.9, filter: "blur(12px)", transition: { duration: 0.38, ease: ROW_EASE }, }} className="relative flex min-h-[268px] cursor-pointer flex-col items-center justify-center gap-5 px-6 py-12 text-center focus-visible:ring-2 focus-visible:ring-ring" > {!reduce ? : null} {!reduce && phase === "idle" ? ( <> ) : null}

{phase === "dragging" ? "رها کن — می‌گیرمش" : "فایل را پرتاب کن اینجا"}

{phase === "dragging" ? "محصول، مدرک یا تصویر" : "یا لمس کن تا از دستگاه انتخاب کنی"}

{phase === "dragging" && !reduce ? ( ) : null} ) : null} {showCard && file ? ( {file.previewUrl ? ( ) : (

)} {!reduce && phase === "uploading" ? ( ) : null} {phase === "done" ? ( {!reduce ? [0, 1, 2, 3, 4, 5].map((i) => ( )) : null} ) : null}

{file.name} {formatBytes(file.size)} {phase === "catching" ? " · گرفتن فایل…" : phase === "uploading" ? " · در حال ارسال" : " · آمادهٔ استفاده"}

{phase === "catching" ? "آماده‌سازی" : phase === "uploading" ? "آپلود" : "تمام"}

{pctLabel} ٪

{!reduce && (phase === "uploading" || phase === "catching") ? ( ) : null} {!reduce && phase === "uploading" ? ( ) : null}

{Array.from({ length: SEGMENTS }, (_, i) => ( ))}

{!reduce ? (

{Array.from({ length: SEGMENTS }, (_, i) => ( ))}

) : null} {phase === "done" ? ( یکی دیگه بفرست ) : null}

) : null}

); }