import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { MapPin, Navigation, Satellite, Crosshair, X, CheckCircle2, Map } from "lucide-react"; const SATELLITES = [ { id: 1, top: "15%", left: "15%" }, { id: 2, top: "20%", left: "85%" }, { id: 3, top: "80%", left: "50%" } ]; export default function LocationCheckInOverlayFeedback() { const [isOpen, setIsOpen] = useState(false); const [phase, setPhase] = useState<"idle" | "scanning" | "triangulating" | "success">("idle"); const [accuracy, setAccuracy] = useState(2500); const [coords, setCoords] = useState({ lat: "0.0000", lng: "0.0000" }); useEffect(() => { if (!isOpen) { setPhase("idle"); setAccuracy(2500); setCoords({ lat: "0.0000", lng: "0.0000" }); return; } setPhase("scanning"); const triangulateTimer = setTimeout(() => { setPhase("triangulating"); }, 3000); const successTimer = setTimeout(() => { setPhase("success"); }, 6000); return () => { clearTimeout(triangulateTimer); clearTimeout(successTimer); }; }, [isOpen]); useEffect(() => { let accuracyInterval: NodeJS.Timeout; if (phase === "idle" || phase === "scanning") { setAccuracy(2500); } else if (phase === "triangulating") { accuracyInterval = setInterval(() => { setAccuracy((prev) => { const next = prev - (prev * 0.15); if (next <= 2.4) { clearInterval(accuracyInterval); return 2.4; } return next; }); setCoords({ lat: (40.7128 + (Math.random() - 0.5) * 0.1).toFixed(4), lng: (-74.0060 + (Math.random() - 0.5) * 0.1).toFixed(4), }); }, 100); } else if (phase === "success") { setAccuracy(2.4); setCoords({ lat: "40.7128", lng: "-74.0060" }); } return () => { if (accuracyInterval) clearInterval(accuracyInterval); }; }, [phase]); return (

setIsOpen(true)} className="relative z-10 flex items-center gap-2 px-8 py-4 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white rounded-2xl font-bold tracking-wide border border-neutral-200 dark:border-neutral-800 transition-all shadow-xl hover:shadow-2xl" > Verify Location Check-In {isOpen && (

Check-In Point

Nexus Tower, Sector 4

{phase === "success" ? ( ) : ( )}

{phase === "scanning" && ( {[1, 2, 3].map((ring) => ( ))} )} {phase === "triangulating" && ( )} {(phase === "triangulating" || phase === "success") && SATELLITES.map((sat) => ( {phase === "triangulating" && ( )} ))}

Accuracy ± {accuracy.toFixed(1)} m

Coordinates {coords.lat}, {coords.lng}

{phase === "success" ? ( setIsOpen(false)} className="w-full py-3.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-xl font-bold tracking-wide transition-all shadow-lg shadow-emerald-500/25 flex items-center justify-center gap-2" > Confirm Check-In ) : ( {phase === "scanning" ? "Scanning Area..." : "Triangulating Signal..."} )}

)}

); }