"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useId, useRef, useState } from "react"; export type StampStatus = "idle" | "windup" | "stamping" | "stamped"; /** Shared geometry — face and imprint share this box. */ const FACE = 76; const SCENE_H = 318; const PAPER_H = 210; /** Contact center inside the paper (from paper top). */ const CONTACT_TOP = 118; /** How far the stamp rises above the contact pose when idle. */ const IDLE_LIFT = 92; const WINDUP_EXTRA = 22; const WINDUP_MS = 260; const STAMP_DOWN_MS = 220; const STAMP_HOLD_MS = 260; const STAMP_UP_MS = 480; const RESET_DELAY_MS = 3000; const REDUCED_STAMP_MS = 160; const REDUCED_RESET_MS = 900; const LABELS: Record = { idle: "مهر تأیید", windup: "آماده‌سازی…", stamping: "مهر زدن…", stamped: "تأیید شد", }; const EASE_OUT = [0.22, 1, 0.36, 1] as const; const EASE_SLAM = [0.75, 0.05, 0.95, 0.4] as const; type Particle = { id: number; angle: number; dist: number; size: number; delay: number; }; function randomTilt() { return -7 + Math.random() * 14; } function makeParticles(seed: number): Particle[] { return Array.from({ length: 8 }, (_, i) => ({ id: i, angle: (Math.PI * 2 * i) / 8 + (seed % 5) * 0.08, dist: 28 + ((seed + i * 9) % 18), size: 1.5 + ((seed + i) % 3), delay: i * 0.01, })); } /** Same seal drawing for rubber face + paper imprint. */ function SealMark({ mode, uid, }: { mode: "rubber" | "ink"; uid: string; }) { const ink = mode === "ink"; const stroke = ink ? "#9f1239" : "rgba(255,228,230,0.55)"; const fill = ink ? "#9f1239" : "rgba(255,241,242,0.92)"; return ( ); } function DocumentBody() { return (

); } function InkImprint({ rotate, uid }: { rotate: number; uid: string }) { return ( ); } function InkBurst({ particles }: { particles: Particle[] }) { return (

{particles.map((p) => ( ))}

); } function StampTool({ status, reduceMotion, hovering, tilt, uid, }: { status: StampStatus; reduceMotion: boolean; hovering: boolean; tilt: number; uid: string; }) { // Contact pose = y: 0 (face sits exactly on the contact box). // Positive y moves down — we only lift with negative y. let y = -IDLE_LIFT; let rotate = -3; let scale = 1; if (status === "windup") { y = -(IDLE_LIFT + WINDUP_EXTRA); rotate = -8; scale = 1.02; } else if (status === "stamping") { y = 0; rotate = tilt; scale = 0.985; } else if (status === "stamped") { y = -IDLE_LIFT + 8; rotate = tilt * 0.35; scale = 1; } else if (hovering && !reduceMotion) { y = -(IDLE_LIFT + 8); rotate = -5; } const shadowOpacity = status === "stamping" ? 0.22 : status === "windup" ? 0.08 : 0.12; const shadowScale = status === "stamping" ? 1 : status === "windup" ? 0.75 : 0.88; return (

{/* shadow under face, locked to contact */} {/* handle stack sits above the face; face is the bottom FACE×FACE */}

{/* mushroom wood knob */}

{/* shaft */}

{/* metal collar */}

{/* rubber face — same size as imprint */}

); } export function StampApproveButton() { const uid = useId().replace(/:/g, ""); const [status, setStatus] = useState("idle"); const [tilt, setTilt] = useState(-4); const [showImprint, setShowImprint] = useState(false); const [burstKey, setBurstKey] = useState(0); const [particles, setParticles] = useState([]); const [hovering, setHovering] = useState(false); const timersRef = useRef([]); const reduceMotion = useReducedMotion() ?? false; 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 handleStamp = useCallback(() => { if (status !== "idle") return; const nextTilt = randomTilt(); const seed = Date.now(); setTilt(nextTilt); setShowImprint(false); setParticles([]); clearTimers(); if (reduceMotion) { setStatus("stamping"); schedule(() => { setShowImprint(true); setStatus("stamped"); schedule(() => { setShowImprint(false); setStatus("idle"); }, REDUCED_RESET_MS); }, REDUCED_STAMP_MS); return; } setStatus("windup"); schedule(() => setStatus("stamping"), WINDUP_MS); const impactAt = WINDUP_MS + STAMP_DOWN_MS; schedule(() => { setShowImprint(true); setParticles(makeParticles(seed)); setBurstKey((k) => k + 1); }, impactAt); schedule(() => setStatus("stamped"), impactAt + STAMP_HOLD_MS); schedule(() => { setShowImprint(false); setParticles([]); setStatus("idle"); }, impactAt + STAMP_HOLD_MS + STAMP_UP_MS + RESET_DELAY_MS); }, [clearTimers, reduceMotion, schedule, status]); const paperPress = status === "stamping" && !reduceMotion ? { scaleY: 0.988, y: 1.5 } : { scaleY: 1, y: 0 }; return (

درخواست شماره ۱۴۰۴

{/* Shared contact box: imprint + burst + stamp face align here */}

{showImprint ? ( ) : null} {particles.length > 0 ? ( ) : null}

{/* Stamp lives in scene coords; contact top matches paper's contact */}

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

); }