import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { useNavigate } from 'react-router-dom'; import { useAuth } from '../context/AuthContext'; import { useMockStore } from '../data/mockStore'; import { GamificationProvider, useGamification } from '../context/GamificationContext'; import { useGamification as useOldGamification } from '../hooks/useGamification'; import { useTheme } from '../context/ThemeContext'; import FloatingXPManager from '../components/ProCanvas/gamification/FloatingXPManager'; import LevelUpModal from '../components/ProCanvas/gamification/LevelUpModal'; import profilePic from '../assets/images/Profile_Pic_1_Agent.png'; import { Trophy, Flame, Target, Star, Gift, Camera, Map as MapIcon, Users, Crosshair, Award, MapPin, CheckCircle, ChevronRight, X, Home, Shield, Lock, ClipboardList, Handshake, DoorOpen, UserPlus, Zap, Activity, TrendingUp, Hexagon, Calendar } from 'lucide-react'; /* * ========================================== * UTILS & THEME * ========================================== */ const C = { gold: '#FFD700', neon: '#AAFF00', blue: '#3B82F6', fire: '#FF4500', cyan: '#00E5FF', purple: '#B388FF', glass: 'rgba(24, 24, 27, 0.65)', border: 'rgba(255, 255, 255, 0.08)' }; // CountUp Component for animated numbers (0 to end) const CountUp = ({ to, suffix = "", duration = 1500 }) => { const [count, setCount] = useState(0); useEffect(() => { let start = 0; const end = parseInt(to, 10); if (isNaN(end)) return; let startTime = null; const animate = (timestamp) => { if (!startTime) startTime = timestamp; const progress = timestamp - startTime; const percentage = Math.min(progress / duration, 1); const ease = 1 - Math.pow(1 - percentage, 4); setCount(Math.floor(start + (end - start) * ease)); if (percentage < 1) { requestAnimationFrame(animate); } else { setCount(end); } }; requestAnimationFrame(animate); }, [to, duration]); return <>{count.toLocaleString()}{suffix}; }; const useMonthResetCountdown = () => { const [timeLeft, setTimeLeft] = useState(''); useEffect(() => { const updateTimer = () => { const now = new Date(); const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); const diff = endOfMonth - now; const d = Math.floor(diff / (1000 * 60 * 60 * 24)); const h = Math.floor((diff / (1000 * 60 * 60)) % 24); const m = Math.floor((diff / 1000 / 60) % 60); const s = Math.floor((diff / 1000) % 60); setTimeLeft(`${d}d ${h}h ${m}m ${s}s`); }; updateTimer(); const interval = setInterval(updateTimer, 1000); return () => clearInterval(interval); }, []); return timeLeft; }; const LOG_ACTIONS = [ { key: 'knock', label: 'Door Knocked', icon: DoorOpen, color: C.cyan }, { key: 'lead', label: 'Lead Gained', icon: UserPlus, color: C.neon }, { key: 'appt', label: 'Appointment', icon: Target, color: C.gold }, { key: 'meeting', label: 'Client Meet', icon: Handshake, color: C.purple }, ]; /* * ========================================== * PREMIUM COMPONENTS (SPORTS UI) * ========================================== */ // Hexagonal level badge (Like FIFA overall rating) const HexLevelBadge = ({ level, color = C.gold, size = 100, mobileSize = 85 }) => (
OVR
); // Fut-style Player Card const OperatorCard = ({ user, gamestate }) => { const { theme } = useTheme(); const isDark = theme === 'dark'; return ( {/* Card Background (Elite Gold Theme) */}
{/* Glossy overlay */}
{/* Dynamic Light rays */} {/* Inner Content Container */}
{/* Header Row: OVR and 3 Badges */}
{/* Player Cutout / Photo */}
{/* Name & Title Board */}

{user.name}

{gamestate.currentTitle || 'LVL 12 - FIELD RUNNER'}
KNK
LED
APT
STR
{/* Bottom Card Flare */}
); }; // Sleek Glass Panel (base container for UI) function GlassPanel({ children, className = '', accentColor = 'transparent', title, icon: Icon, extra }) { const { theme } = useTheme(); const isDark = theme === 'dark'; const hasAccent = accentColor !== 'transparent'; return (
{/* Dark mode: subtle accent glow line at top */} {isDark && hasAccent && (
)} {/* Header */} {(title || Icon || extra) && ( isDark ? (
{Icon && }

{title}

{extra &&
{extra}
}
) : (
{Icon && }

{title}

{extra &&
{extra}
}
) )}
{children}
); } // Progress Bar (Sleek, bright energy bar) const EnergyBar = ({ current, max, color = C.neon, label }) => { const pct = Math.min((current / max) * 100, 100); return (
{label && (
{label} / {max}
)}
); }; /* * ========================================== * MODALS * ========================================== */ const LogActionModal = ({ actionKey, onClose, gs }) => { const action = LOG_ACTIONS.find(a => a.key === actionKey) || LOG_ACTIONS[0]; const Icon = action.icon; const [xpReward, setXpReward] = useState(actionKey === 'knock' ? 10 : actionKey === 'lead' ? 50 : 150); const handleSubmit = (e) => { e.preventDefault(); const coords = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; if (actionKey === 'knock') gs.logKnock(xpReward > 10, coords); else if (actionKey === 'lead' || actionKey === 'meeting') gs.logLead(coords); else if (actionKey === 'appt') gs.logInspection(coords); onClose(); }; return (

Log {action.label}

Gain XP instantly
{actionKey === 'knock' && ( <>