import React, { useState, useEffect } from 'react';
import profilePic from '../assets/images/Profile_Pic_1_Agent.png';
import { motion, AnimatePresence } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import {
    Flame, Target, Crosshair, Trophy, Shield, Zap, Star, Medal, Map, Activity, Home,
    Users, TrendingUp, CheckCircle, Lock, Award, Calendar, Camera, ChevronRight, Swords,
    X, ClipboardList, Handshake, DoorOpen, UserPlus
} from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { useMockStore } from '../data/mockStore';
import { useGamification as useOldGamification } from '../hooks/useGamification';
import { GamificationProvider, useGamification } from '../context/GamificationContext';
import FloatingXPManager from '../components/ProCanvas/gamification/FloatingXPManager';
import LevelUpModal from '../components/ProCanvas/gamification/LevelUpModal';
import { AnimatedCounter } from '../components/AnimatedCounter';
import { SpotlightCard } from '../components/SpotlightCard';

// ═══════════════════════════════════════════════════════════════════
// DESIGN TOKENS
// ═══════════════════════════════════════════════════════════════════
const C = {
    gold: '#fda913', neon: '#AAFF00', fire: '#ff4500', blue: '#3b82f6',
    cyan: '#06b6d4', green: '#22c55e', pink: '#ec4899', purple: '#a855f7',
};

// ── Pixel-art SVGs ──
const PixelTrophy = ({ size = 20, color = C.gold, className = '' }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
        <path d="M7 4h10v2h2v4h-2v2h-2v2h-2v2h2v2H9v-2h2v-2H9v-2H7V6H5V4h2z" fill={color} opacity="0.9" />
        <path d="M9 18h6v2H9z" fill={color} opacity="0.6" />
    </svg>
);
const PixelFlame = ({ size = 20, color = C.fire }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <path d="M11 2h2v2h2v2h2v4h-2v2h-2v2h-2v-2H9v-2H7V6h2V4h2V2z" fill={color} opacity="0.9" />
        <path d="M11 14h2v2h2v4H9v-4h2v-2z" fill={C.gold} opacity="0.7" />
    </svg>
);
const PixelBolt = ({ size = 18, color = C.neon }) => (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
        <path d="M8 0h4v2h-2v2h-2v2h4v2h-2v2h-2v2h-2v2H4v-2h2v-2h2V8H4V6h2V4h2V0z" fill={color} opacity="0.9" />
    </svg>
);
const PixelStar = ({ size = 16, color = C.gold }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
        <path d="M7 0h2v4h4v2h-4v4H7V6H3V4h4V0z" fill={color} opacity="0.85" />
    </svg>
);

// ── Corner brackets decoration (like old design) ──
const CornerBrackets = ({ color = C.gold, thickness = 2 }) => (
    <>
        <div className="absolute top-0 left-0 w-5 h-5 pointer-events-none z-20" style={{
            borderTop: `${thickness}px solid ${color}55`, borderLeft: `${thickness}px solid ${color}55`, borderTopLeftRadius: '6px',
        }} />
        <div className="absolute top-0 right-0 w-5 h-5 pointer-events-none z-20" style={{
            borderTop: `${thickness}px solid ${color}55`, borderRight: `${thickness}px solid ${color}55`, borderTopRightRadius: '6px',
        }} />
        <div className="absolute bottom-0 left-0 w-5 h-5 pointer-events-none z-20" style={{
            borderBottom: `${thickness}px solid ${color}55`, borderLeft: `${thickness}px solid ${color}55`, borderBottomLeftRadius: '6px',
        }} />
        <div className="absolute bottom-0 right-0 w-5 h-5 pointer-events-none z-20" style={{
            borderBottom: `${thickness}px solid ${color}55`, borderRight: `${thickness}px solid ${color}55`, borderBottomRightRadius: '6px',
        }} />
    </>
);

// ── Animated floating dots ──
const FloatingDots = ({ color = C.gold, count = 5 }) => (
    <div className="absolute inset-0 overflow-hidden pointer-events-none z-0 opacity-15">
        {Array.from({ length: count }).map((_, i) => (
            <motion.div key={i} className="absolute rounded-full"
                style={{ width: 3 + (i % 3) * 2, height: 3 + (i % 3) * 2, background: color, left: `${10 + i * 16}%`, top: `${15 + (i * 19) % 60}%` }}
                animate={{ y: [0, -10, 0], opacity: [0.2, 0.7, 0.2] }}
                transition={{ repeat: Infinity, duration: 2.5 + i * 0.4, delay: i * 0.3, ease: 'easeInOut' }}
            />
        ))}
    </div>
);

// Pulse ring — smoother timing
const PulseRing = ({ color = C.fire, size = 56 }) => (
    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
        {[0, 1, 2].map(i => (
            <motion.div key={i} className="absolute rounded-full"
                style={{ width: size, height: size, border: `1.5px solid ${color}` }}
                animate={{ scale: [1, 2.6], opacity: [0.4, 0] }}
                transition={{ duration: 3, delay: i * 0.9, repeat: Infinity, ease: 'easeInOut' }}
            />
        ))}
    </div>
);

// Grid pattern overlay
const GridPattern = ({ color = C.gold, opacity = 0.06 }) => (
    <div className="absolute inset-0 pointer-events-none z-0 rounded-[inherit]"
        style={{
            opacity,
            backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
            backgroundSize: '24px 24px',
        }}
    />
);

// CRT scanlines
const ScanlineOverlay = () => (
    <div className="absolute inset-0 pointer-events-none z-30 rounded-[inherit]"
        style={{ background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px)' }}
    />
);

// ═══════════════════════════════════════════════════════════════════
// GAME CARD — the main card primitive (chunky, with corner brackets)
// ═══════════════════════════════════════════════════════════════════
const GameCard = ({ children, className = '', accent = C.gold, scanlines = false, brackets = true, spotlightColor, glow = false, ...props }) => (
    <SpotlightCard
        className={`relative overflow-hidden group ${className}`}
        spotlightColor={spotlightColor || accent + '30'}
        {...props}
    >
        {/* Top accent line */}
        <div className="absolute top-0 inset-x-0 h-[2px] z-20" style={{ background: `linear-gradient(90deg, transparent 10%, ${accent}, transparent 90%)` }} />
        {/* Bottom accent line */}
        <div className="absolute bottom-0 inset-x-0 h-[2px] z-20" style={{ background: `linear-gradient(90deg, ${C.neon}00, ${C.cyan}44, ${C.neon}44, ${C.gold}44, ${C.fire}00)` }} />
        {brackets && <CornerBrackets color={accent} />}
        {scanlines && <ScanlineOverlay />}
        <div className="relative z-10 p-6 md:p-7 lg:p-8 flex flex-col h-full">{children}</div>
    </SpotlightCard>
);

// ── Section header — big, bold, like the old design ──
const SectionHeader = ({ icon: Icon, pixelIcon: PIcon, title, color = C.gold, extra = null, size = 'lg' }) => (
    <div className="flex items-center justify-between mb-5">
        <div className="flex items-center gap-3">
            {PIcon ? <PIcon size={size === 'lg' ? 28 : 22} color={color} /> : (
                <div className={`${size === 'lg' ? 'w-10 h-10' : 'w-8 h-8'} rounded-xl flex items-center justify-center`} style={{ background: color + '18' }}>
                    <Icon size={size === 'lg' ? 22 : 16} style={{ color }} />
                </div>
            )}
            <h2 className={`font-['Barlow_Condensed'] font-black ${size === 'lg' ? 'text-xl md:text-2xl' : 'text-base md:text-lg'} tracking-wider uppercase text-zinc-900 dark:text-white`}>
                {title}
            </h2>
        </div>
        {extra}
    </div>
);

// ── Progress bar — thick and glowing ──
const ProgressBar = ({ progress, goal, color = C.gold, height = 'h-4', showLabel = true, label = '' }) => {
    const pct = Math.min((progress / goal) * 100, 100);
    return (
        <div className="w-full">
            {showLabel && (
                <div className="flex items-center justify-between mb-2">
                    {label && <span className="text-xs font-['Barlow_Condensed'] font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">{label}</span>}
                    <span className="text-sm font-mono font-bold text-zinc-900 dark:text-white ml-auto"><AnimatedCounter to={progress} /> / {goal}</span>
                </div>
            )}
            <div className={`${height} w-full rounded-full relative overflow-hidden bg-zinc-200 dark:bg-white/[0.06]`}>
                <motion.div initial={{ width: 0 }} animate={{ width: `${pct}%` }}
                    transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
                    className="absolute top-0 left-0 h-full rounded-full"
                    style={{ background: `linear-gradient(90deg, ${color}88, ${color})`, boxShadow: `0 0 16px ${color}66, 0 0 6px ${color}44` }}
                />
                <motion.div initial={{ left: '0%' }} animate={{ left: `${Math.max(pct - 1, 0)}%` }}
                    transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
                    className="absolute top-0 w-3 h-full rounded-full"
                    style={{ background: 'white', boxShadow: `0 0 10px ${color}`, opacity: pct > 3 ? 0.9 : 0 }}
                />
            </div>
        </div>
    );
};

// ── Stagger entrance ──
const containerV = { hidden: {}, show: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } } };
const itemV = { hidden: { opacity: 0, y: 28 }, show: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 240, damping: 22 } } };

// ═══════════════════════════════════════════════════════════════════
// HOOKS
// ═══════════════════════════════════════════════════════════════════
const useMonthResetCountdown = () => {
    const [t, setT] = useState('');
    useEffect(() => {
        const calc = () => {
            const now = new Date(), end = new Date(now.getFullYear(), now.getMonth() + 1, 1);
            const diff = end - now; if (diff <= 0) { setT('Resetting...'); return; }
            setT(`${Math.floor(diff / 86400000)}d ${String(Math.floor((diff % 86400000) / 3600000)).padStart(2, '0')}h ${String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')}m`);
        };
        calc(); const id = setInterval(calc, 60000); return () => clearInterval(id);
    }, []); return t;
};

// ═══════════════════════════════════════════════════════════════════
// CONFIG
// ═══════════════════════════════════════════════════════════════════
const RANK_TIERS = {
    'Rookie': { color: '#CD7F32' }, 'Field Runner': { color: '#A8A9AD' },
    'Roof Warrior': { color: '#fda913' }, 'Territory Titan': { color: '#A855F7' },
    'Legendary Closer': { color: '#AAFF00' },
};
const RANK_ORDER = ['Rookie', 'Field Runner', 'Roof Warrior', 'Territory Titan', 'Legendary Closer'];
const nextRank = (c) => { const i = RANK_ORDER.indexOf(c); return i >= 0 && i < RANK_ORDER.length - 1 ? RANK_ORDER[i + 1] : 'MAX RANK'; };

// ═══════════════════════════════════════════════════════════════════
// 1. OPERATOR PROFILE — big chunky player card
// ═══════════════════════════════════════════════════════════════════
const OperatorProfile = ({ gamestate, user, badges = [], className = '' }) => {
    const tier = RANK_TIERS[gamestate.currentTitle] || RANK_TIERS['Field Runner'];
    const initials = user.name.split(' ').map(n => n[0]).join('').slice(0, 2);
    const BADGE_ICONS_MAP = { Hunter: Crosshair, Storm: Zap, Star: Star, Master: Map };
    const BADGE_COLORS_MAP = { Hunter: C.fire, Storm: C.gold, Star: C.pink, Master: C.green };
    const topBadges = badges.filter(b => b.status === 'unlocked').slice(0, 3);

    return (
        <GameCard accent={tier.color} scanlines className={className} spotlightColor={tier.color + '22'}>
            <FloatingDots color={tier.color} count={6} />
            <div className="flex flex-col items-center text-center gap-5 relative flex-1">
                {/* Card-game style photo frame */}
                <div className="relative mt-2">
                    {/* Outer decorative frame */}
                    <motion.div className="relative" style={{ transform: 'rotate(-2deg)' }}
                        whileHover={{ rotate: 0, scale: 1.05 }} transition={{ type: 'spring', stiffness: 300, damping: 20 }}>
                        {/* Frame background with gradient border */}
                        <div className="absolute -inset-2 rounded-2xl z-0"
                            style={{ background: `linear-gradient(135deg, ${tier.color}, ${C.gold}88, ${tier.color}44)`, opacity: 0.7 }} />
                        <div className="absolute -inset-1.5 rounded-xl bg-zinc-950 dark:bg-zinc-950 z-0" />
                        {/* Inner card with photo */}
                        <div className="relative z-10 w-32 h-36 md:w-36 md:h-40 rounded-xl overflow-hidden"
                            style={{ border: `2px solid ${tier.color}88`, boxShadow: `0 0 24px ${tier.color}33, inset 0 0 20px rgba(0,0,0,0.3)` }}>
                            {user.profilePhoto ? (
                                <img src={user.profilePhoto} alt={user.name} className="w-full h-full object-cover object-top" />
                            ) : (
                                <div className="w-full h-full flex items-center justify-center bg-zinc-900">
                                    <span className="font-['Barlow_Condensed'] font-bold text-5xl" style={{ color: tier.color }}>{initials}</span>
                                </div>
                            )}
                            {/* Holographic shimmer overlay */}
                            <motion.div className="absolute inset-0 pointer-events-none"
                                style={{ background: `linear-gradient(115deg, transparent 30%, ${tier.color}15 45%, transparent 55%)` }}
                                animate={{ x: ['-100%', '200%'] }}
                                transition={{ repeat: Infinity, duration: 3.5, ease: 'linear', repeatDelay: 2 }} />
                        </div>
                        {/* Corner star accents on frame */}
                        <PixelStar size={12} color={tier.color} className="absolute -top-1 -left-1 z-20" />
                        <PixelStar size={10} color={tier.color} className="absolute -bottom-1 -right-1 z-20 opacity-60" />
                    </motion.div>
                    {/* Streak badge */}
                    {gamestate.streak > 0 && (
                        <motion.div className="absolute -top-4 -right-5 flex items-center gap-1 rounded-full px-2.5 py-1 z-30"
                            style={{ background: '#18181b', border: `2px solid ${C.fire}`, boxShadow: `0 0 14px ${C.fire}55` }}
                            animate={{ scale: [1, 1.08, 1] }} transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}>
                            <PixelFlame size={16} />
                            <span className="font-['Barlow_Condensed'] font-black text-sm" style={{ color: C.fire }}>{gamestate.streak}</span>
                        </motion.div>
                    )}
                </div>

                {/* Name & Rank */}
                <div className="w-full">
                    <h2 className="font-['Barlow_Condensed'] font-black text-2xl uppercase leading-none tracking-tight text-zinc-900 dark:text-white">{user.name.toUpperCase()}</h2>
                    <p className="font-['Barlow_Condensed'] font-bold text-sm uppercase tracking-widest mt-1.5" style={{ color: tier.color }}>
                        LVL {gamestate.level} — {gamestate.currentTitle}
                    </p>
                </div>

                {/* XP Bar */}
                <div className="w-full">
                    <ProgressBar progress={gamestate.xp} goal={gamestate.nextLevelXP || 1} color={C.gold} height="h-4" label="XP" />
                    <p className="text-[10px] text-zinc-500 text-right mt-1 font-mono">→ {nextRank(gamestate.currentTitle)}</p>
                </div>

                {/* Quick Stats */}
                <div className="w-full grid grid-cols-3 gap-3 mt-1">
                    {[
                        { icon: Home, val: gamestate.dailyQuests?.knocks?.current || 18, lbl: 'Knocked', color: C.neon },
                        { icon: Users, val: gamestate.dailyQuests?.leads?.current || 6, lbl: 'Leads', color: C.gold },
                        { icon: Calendar, val: gamestate.dailyQuests?.inspections?.current || 3, lbl: 'Appts', color: C.cyan },
                    ].map(({ icon: I, val, lbl, color }) => (
                        <div key={lbl} className="rounded-xl py-3 text-center bg-zinc-100 dark:bg-white/[0.04] border border-zinc-200 dark:border-white/[0.06]">
                            <I size={16} className="mx-auto mb-1.5" style={{ color }} />
                            <p className="font-['Barlow_Condensed'] font-black text-xl leading-none text-zinc-900 dark:text-white"><AnimatedCounter to={val} /></p>
                            <p className="font-['Barlow_Condensed'] text-[10px] uppercase tracking-wider text-zinc-500 mt-1">{lbl}</p>
                        </div>
                    ))}
                </div>

                {/* Top 3 Badges */}
                {topBadges.length > 0 && (
                    <div className="w-full pt-4 border-t border-zinc-200 dark:border-white/[0.06]">
                        <p className="font-['Barlow_Condensed'] text-[10px] uppercase tracking-widest text-zinc-500 mb-3">Top Badges</p>
                        <div className="flex justify-center gap-3">
                            {topBadges.map((b, i) => {
                                const key = Object.keys(BADGE_ICONS_MAP).find(k => b.id?.includes(k));
                                const Icon = key ? BADGE_ICONS_MAP[key] : Shield;
                                const bColor = key ? BADGE_COLORS_MAP[key] : C.cyan;
                                return (
                                    <motion.div key={i} whileHover={{ scale: 1.15, y: -3 }}
                                        className="w-12 h-12 rounded-full flex items-center justify-center"
                                        style={{ background: bColor + '18', border: `2px solid ${bColor}55`, boxShadow: `0 0 10px ${bColor}22` }}>
                                        <Icon size={18} style={{ color: bColor }} />
                                    </motion.div>
                                );
                            })}
                        </div>
                    </div>
                )}
            </div>
        </GameCard>
    );
};

// ═══════════════════════════════════════════════════════════════════
// 2. DAILY MISSIONS — like the old design, chunky quest list
// ═══════════════════════════════════════════════════════════════════
const DailyMissions = ({ gamestate, role, className = '' }) => {
    const navigate = useNavigate();
    const weeklyKnocks = gamestate.weeklyChallenge?.knocks || { current: 140, target: 150 };
    const dailyQuests = [
        { icon: Home, label: 'Door Knocks', current: gamestate.dailyQuests?.knocks?.current || 18, target: gamestate.dailyQuests?.knocks?.target || 20, color: C.blue },
        { icon: Users, label: 'New Leads', current: gamestate.dailyQuests?.leads?.current || 4, target: gamestate.dailyQuests?.leads?.target || 5, color: C.neon },
        { icon: Calendar, label: 'Inspections', current: gamestate.dailyQuests?.inspections?.current || 0, target: gamestate.dailyQuests?.inspections?.target || 1, color: C.gold },
    ];

    return (
        <GameCard accent={C.neon} className={className} spotlightColor="rgba(170,255,0,0.12)">
            <FloatingDots color={C.neon} count={4} />
            <SectionHeader pixelIcon={PixelBolt} title="Daily Missions" color={C.neon} />

            {/* Weekly Challenge */}
            <div className="rounded-xl p-5 mb-5 relative overflow-hidden bg-zinc-100 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/[0.06]">
                <div className="flex items-center gap-2 mb-4">
                    <Target size={16} style={{ color: C.gold }} />
                    <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-wider" style={{ color: C.gold }}>Weekly Challenge</span>
                </div>
                <ProgressBar progress={weeklyKnocks.current} goal={weeklyKnocks.target} color={C.gold} height="h-4" label="Total Knocks" />
            </div>

            {/* Daily Quests */}
            <div className="rounded-xl p-5 relative overflow-hidden bg-zinc-100 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/[0.06]">
                <div className="flex items-center gap-2 mb-4">
                    <PixelBolt size={16} color={C.neon} />
                    <span className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-wider" style={{ color: C.neon }}>Daily Quests</span>
                </div>
                <div className="space-y-5">
                    {dailyQuests.map(({ icon: I, label, current, target, color }) => (
                        <div key={label}>
                            <div className="flex items-center gap-3 mb-2">
                                <I size={16} style={{ color }} />
                                <span className="font-['Barlow_Condensed'] font-bold text-sm text-zinc-700 dark:text-white/80">{label}</span>
                                <span className="ml-auto font-mono font-bold text-sm text-zinc-900 dark:text-white"><AnimatedCounter to={current} /> / {target}</span>
                            </div>
                            <ProgressBar progress={current} goal={target} color={color} height="h-3" showLabel={false} />
                        </div>
                    ))}
                </div>
            </div>

            {/* CTA Button — smooth pulsing glow */}
            <motion.button
                whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }}
                animate={{ boxShadow: [`0 0 15px ${C.neon}33`, `0 0 35px ${C.neon}66`, `0 0 15px ${C.neon}33`] }}
                transition={{ boxShadow: { repeat: Infinity, duration: 2, ease: 'easeInOut' } }}
                onClick={() => navigate('/emp/fa/maps')}
                className="w-full mt-6 py-4 rounded-xl font-['Barlow_Condensed'] font-black text-lg uppercase tracking-wider flex items-center justify-center gap-3 cursor-pointer"
                style={{ background: C.neon, color: '#09090b', border: `2px solid ${C.neon}88` }}>
                Hit The Map <ChevronRight size={20} />
            </motion.button>
        </GameCard>
    );
};

// ═══════════════════════════════════════════════════════════════════
// 3. SHOWDOWN & STREAK — side by side stat cards
// ═══════════════════════════════════════════════════════════════════
const ShowdownCard = ({ gamestate }) => (
    <GameCard accent={C.gold} scanlines className="h-full">
        <SectionHeader pixelIcon={PixelTrophy} title="Showdown" color={C.gold} size="sm"
            extra={<span className="text-[10px] font-mono px-2.5 py-1 rounded-full bg-white/5 text-zinc-400">Neighborhood</span>} />
        <div className="flex-1 flex flex-col justify-center items-center text-center py-4 relative">
            <div className="relative mb-3">
                <PixelTrophy size={48} color={C.gold} />
                <motion.div className="absolute -top-2 -right-2" animate={{ rotate: [0, 20, -20, 0] }}
                    transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}>
                    <PixelStar size={18} color={C.gold} />
                </motion.div>
            </div>
            <p className="font-['Barlow_Condensed'] font-black text-5xl leading-none text-white">1<sup className="text-xl text-zinc-400">ST</sup></p>
            <p className="font-['Barlow_Condensed'] text-base text-zinc-400 mt-2"><AnimatedCounter to={gamestate.dailyQuests?.knocks?.current || 18} /> Leads Today</p>
        </div>
        <div className="flex items-center justify-between mt-auto pt-4 border-t border-white/[0.06]">
            <div className="flex gap-1">{[1, 2, 3, 4, 5].map(s => <Star key={s} size={16} className={s <= 4 ? 'fill-current' : ''} style={{ color: s <= 4 ? C.gold : 'rgb(63 63 70)' }} />)}</div>
            <span className="text-xs font-['Barlow_Condensed'] font-bold px-3 py-1 rounded-full" style={{ background: C.green + '18', color: C.green }}>+250 XP</span>
        </div>
    </GameCard>
);

const StreakCard = ({ gamestate }) => (
    <GameCard accent={C.fire} spotlightColor="rgba(255,69,0,0.12)" className="h-full">
        <SectionHeader pixelIcon={PixelFlame} title="Hot Streak" color={C.fire} size="sm" />
        <div className="flex-1 flex flex-col justify-center items-center text-center py-4">
            <div className="relative mb-2">
                <PulseRing color={C.fire} size={72} />
                <motion.div animate={{ y: [0, -8, 0], scale: [1, 1.06, 1] }}
                    transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}>
                    <PixelFlame size={52} />
                </motion.div>
            </div>
            <p className="font-['Barlow_Condensed'] font-bold text-sm text-zinc-500 dark:text-zinc-400 mt-3">Current Streak</p>
            <p className="font-['Barlow_Condensed'] font-black text-4xl" style={{ color: C.gold }}>
                <AnimatedCounter to={gamestate.streak || 5} /> Days
            </p>
            <p className="text-[10px] font-mono text-zinc-500 dark:text-zinc-600 mt-1">Personal Best: 14 Days</p>
        </div>
        <div className="flex items-center justify-between mt-auto pt-4 border-t border-zinc-200 dark:border-white/[0.06]">
            <div className="flex gap-1">{[1, 2, 3, 4, 5].map(s => <PixelStar key={s} size={14} color={s <= (gamestate.streak || 5) ? C.gold : 'rgb(63 63 70)'} />)}</div>
            <span className="text-xs font-['Barlow_Condensed'] font-bold px-3 py-1 rounded-full" style={{ background: C.green + '18', color: C.green }}>+50 XP</span>
        </div>
    </GameCard>
);

// ═══════════════════════════════════════════════════════════════════
// 4. REWARDS & CHECKPOINTS — named stages with reward labels
// ═══════════════════════════════════════════════════════════════════
const STAGE_NAMES = ['Daily Grind', 'Door Warrior', 'Lead Machine', 'Closer Mode', 'Legend Run'];
const STAGE_REWARDS = ['+500 XP Boost', '$25 Gift Card', '$50 Cash Bonus', '???', '???'];

const RewardsCheckpoints = ({ stages, className = '' }) => {
    const completedCount = stages.filter(s => s.status === 'completed').length;
    const totalPct = stages.length > 0 ? (completedCount / stages.length) * 100 : 0;
    const activeStage = stages.find(s => s.status === 'in-progress') || stages[completedCount] || stages[0];

    return (
        <GameCard accent={C.gold} className={className} spotlightColor="rgba(253,169,19,0.10)">
            <SectionHeader icon={Award} title="Rewards & Checkpoints" color={C.gold}
                extra={<span className="text-sm font-mono" style={{ color: C.gold }}>{Math.round(totalPct)}%</span>} />

            {/* Stage timeline */}
            <div className="flex items-start justify-between relative mb-6">
                {/* Connecting line through all stages */}
                <div className="absolute top-5 left-[10%] right-[10%] h-[3px] rounded-full" style={{ background: 'rgba(255,255,255,0.06)' }} />
                <div className="absolute top-5 left-[10%] h-[3px] rounded-full transition-all duration-1000" style={{
                    width: `${Math.min(completedCount / Math.max(stages.length - 1, 1) * 80, 80)}%`,
                    background: `linear-gradient(90deg, ${C.gold}, ${C.neon})`,
                    boxShadow: `0 0 10px ${C.gold}66`,
                }} />

                {stages.map((stage, idx) => {
                    const done = stage.status === 'completed', active = stage.status === 'in-progress';
                    const stageColor = done ? C.gold : active ? C.neon : 'rgb(63 63 70)';
                    const stageName = STAGE_NAMES[idx] || `Stage ${idx + 1}`;
                    const stageReward = STAGE_REWARDS[idx] || '???';

                    return (
                        <div key={stage.id} className="flex flex-col items-center text-center relative z-10" style={{ width: `${100 / stages.length}%` }}>
                            <motion.div whileHover={{ scale: 1.15 }}
                                className="w-10 h-10 rounded-full flex items-center justify-center mb-2"
                                style={{
                                    background: done ? C.gold : active ? 'rgba(170,255,0,0.15)' : '#18181b',
                                    border: `2.5px solid ${done ? C.gold : active ? C.neon : 'rgba(255,255,255,0.1)'}`,
                                    color: done ? '#09090b' : active ? C.neon : 'rgb(82 82 91)',
                                    boxShadow: done ? `0 0 12px ${C.gold}44` : active ? `0 0 12px ${C.neon}33` : 'none',
                                }}>
                                {done ? <CheckCircle size={18} /> : !done && !active ? <Lock size={14} /> :
                                    <span className="font-['Barlow_Condensed'] font-bold text-sm">{idx + 1}</span>}
                            </motion.div>
                            <p className="font-['Barlow_Condensed'] font-bold text-[10px] uppercase tracking-wider" style={{ color: stageColor }}>{stageName}</p>
                            {done && <p className="text-[8px] font-mono text-zinc-500 mt-0.5">
                                {stage.progress?.current || 0}/{stage.progress?.target || 0} ✓
                            </p>}
                        </div>
                    );
                })}
            </div>

            {/* Reward tiles */}
            <div className="grid grid-cols-5 gap-3">
                {stages.map((stage, idx) => {
                    const done = stage.status === 'completed', active = stage.status === 'in-progress';
                    const stageReward = stage.reward?.name || STAGE_REWARDS[idx] || '???';
                    return (
                        <div key={`reward-${stage.id}`} className="rounded-xl py-3 px-2 text-center"
                            style={{
                                background: done ? C.gold + '12' : active ? C.neon + '10' : 'rgba(255,255,255,0.02)',
                                border: `1px solid ${done ? C.gold + '44' : active ? C.neon + '33' : 'rgba(255,255,255,0.05)'}`,
                            }}>
                            <Award size={14} className="mx-auto mb-1" style={{ color: done ? C.gold : active ? C.neon : 'rgb(63 63 70)' }} />
                            <p className="font-['Barlow_Condensed'] font-bold text-[9px] leading-tight" style={{ color: done ? C.gold : active ? C.neon : 'rgb(82 82 91)' }}>
                                {stageReward}
                            </p>
                        </div>
                    );
                })}
            </div>
        </GameCard>
    );
};

// ═══════════════════════════════════════════════════════════════════
// 5. BADGES & ACHIEVEMENTS — tall badge cards with descriptions
// ═══════════════════════════════════════════════════════════════════
const BADGE_ICONS = { Hunter: Crosshair, Storm: Zap, Star: Star, Master: Map };
const BADGE_COLORS = { Hunter: C.fire, Storm: C.gold, Star: C.pink, Master: C.green };

const BadgesAchievements = ({ badges, className = '' }) => (
    <GameCard accent={C.gold} className={className}>
        <SectionHeader icon={Medal} title="Badges & Achievements" color={C.gold} />
        <div className="grid grid-cols-5 gap-4">
            {badges.map((badge, idx) => {
                const unlocked = badge.status === 'unlocked';
                const key = Object.keys(BADGE_ICONS).find(k => badge.id?.includes(k)) || null;
                const Icon = key ? BADGE_ICONS[key] : Shield;
                const color = key ? BADGE_COLORS[key] : C.cyan;
                return (
                    <motion.div key={idx} whileHover={unlocked ? { scale: 1.05, y: -4 } : {}}
                        className="rounded-xl p-4 flex flex-col items-center text-center cursor-default min-h-[160px] relative overflow-hidden"
                        style={{
                            background: unlocked ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
                            border: `1.5px solid ${unlocked ? color + '55' : 'rgba(255,255,255,0.06)'}`,
                            opacity: unlocked ? 1 : 0.35,
                        }}>
                        {unlocked && (
                            <motion.div className="absolute top-2 right-2 z-10"
                                animate={{ scale: [1, 1.2, 1] }} transition={{ repeat: Infinity, duration: 2 }}>
                                <CheckCircle size={12} style={{ color }} />
                            </motion.div>
                        )}
                        <div className="w-14 h-14 rounded-full flex items-center justify-center mb-3 relative"
                            style={{
                                background: unlocked ? color + '18' : 'transparent',
                                boxShadow: unlocked ? `0 0 20px ${color}22` : 'none',
                            }}>
                            {unlocked && <div className="absolute inset-0 rounded-full" style={{ boxShadow: `0 0 20px ${color}33`, animation: 'pulse 2s ease-in-out infinite' }} />}
                            <Icon size={24} style={{ color: unlocked ? color : 'rgb(63 63 70)' }} />
                        </div>
                        <span className="font-['Barlow_Condensed'] font-black text-xs leading-tight text-white mb-1">{badge.title}</span>
                        <span className="text-[9px] font-mono leading-tight mt-auto" style={{ color: unlocked ? color : 'rgb(82 82 91)' }}>
                            {unlocked ? (badge.progressText || 'UNLOCKED') : badge.criteria}
                        </span>
                    </motion.div>
                );
            })}
        </div>
    </GameCard>
);

// ═══════════════════════════════════════════════════════════════════
// 6. LEADERBOARD — full-width, chunky rows
// ═══════════════════════════════════════════════════════════════════
const Leaderboard = ({ className = '' }) => {
    const { leaderboard } = useGamification();
    const countdown = useMonthResetCountdown();

    return (
        <GameCard accent={C.gold} className={className} spotlightColor="rgba(253,169,19,0.08)">
            <GridPattern color={C.gold} opacity={0.05} />
            <SectionHeader pixelIcon={PixelTrophy} title="Leaderboard" color={C.gold}
                extra={<div className="flex flex-col items-end">
                    <span className="text-[9px] font-mono uppercase tracking-widest text-zinc-500 dark:text-zinc-600">Resets in</span>
                    <span className="text-sm font-mono font-bold" style={{ color: C.gold }}>{countdown}</span>
                </div>} />
            <motion.ul layout className="flex flex-col gap-2">
                <AnimatePresence>
                    {leaderboard.map((agent, i) => {
                        const isUser = agent.isUser, rank = i + 1, isTop3 = rank <= 3;
                        const medalColor = rank === 1 ? C.gold : rank === 2 ? '#A8A9AD' : rank === 3 ? '#CD7F32' : null;
                        return (
                            <motion.li key={agent.id} layout
                                initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}
                                transition={{ type: 'spring', stiffness: 300, damping: 30, delay: i * 0.05 }}
                                className="flex items-center justify-between px-5 py-3.5 rounded-xl relative overflow-hidden"
                                style={{ background: isUser ? C.blue + '15' : isTop3 ? 'rgba(255,255,255,0.03)' : 'transparent', border: isUser ? `1px solid ${C.blue}33` : '1px solid transparent' }}>
                                {isTop3 && (
                                    <motion.div className="absolute inset-0 pointer-events-none"
                                        style={{ background: `linear-gradient(90deg, transparent, ${medalColor}0C, transparent)` }}
                                        animate={{ x: ['-100%', '200%'] }} transition={{ repeat: Infinity, duration: 4.5, ease: 'linear', delay: i * 1.2 }} />
                                )}
                                <div className="flex items-center gap-3 flex-1 min-w-0 relative z-10">
                                    {isTop3 ? (
                                        <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ background: medalColor + '22' }}>
                                            <PixelTrophy size={16} color={medalColor} />
                                        </div>
                                    ) : <span className="w-8 text-center font-mono font-bold text-sm text-zinc-500 dark:text-zinc-600">{rank}.</span>}
                                    <div className="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10"
                                        style={{ color: isUser ? C.blue : 'rgb(161 161 170)' }}>
                                        {agent.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
                                    </div>
                                    <span className="font-['Barlow_Condensed'] font-bold text-base truncate" style={{ color: isUser ? C.blue : undefined }}>
                                        <span className={isUser ? '' : 'text-zinc-900 dark:text-white'}>{agent.name}</span>
                                    </span>
                                </div>
                                <span className="font-mono font-bold text-base flex-shrink-0 relative z-10" style={{ color: isUser ? C.blue : undefined }}>
                                    <span className={isUser ? '' : 'text-zinc-900 dark:text-white'}><AnimatedCounter to={agent.points} /></span>
                                </span>
                            </motion.li>
                        );
                    })}
                </AnimatePresence>
            </motion.ul>
        </GameCard>
    );
};

// ═══════════════════════════════════════════════════════════════════
// 7. ADMIN / OWNER WIDGETS
// ═══════════════════════════════════════════════════════════════════
const AdminCommandCenter = ({ className = '' }) => (
    <GameCard accent={C.cyan} className={className} scanlines>
        <SectionHeader icon={Activity} title="Command Center" color={C.cyan}
            extra={<span className="text-[10px] font-mono text-zinc-600 uppercase tracking-wider">Season Ops</span>} />
        <div className="grid grid-cols-3 gap-5">
            {[
                { label: 'Active Squads', value: 12, sub: 'All Online', color: C.cyan },
                { label: 'Doors Today', value: 1432, sub: '+14% vs Yesterday', color: C.gold },
                { label: 'Approval Queue', value: 8, sub: 'Needs Review', color: C.fire },
            ].map(({ label, value, sub, color }) => (
                <div key={label} className="rounded-xl p-5 text-center bg-zinc-100 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/[0.06]">
                    <p className="text-[10px] font-mono uppercase tracking-wider text-zinc-600 mb-2">{label}</p>
                    <p className="font-['Barlow_Condensed'] font-black text-4xl" style={{ color }}><AnimatedCounter to={value} /></p>
                    <p className="text-[10px] font-mono mt-1" style={{ color: C.green }}>{sub}</p>
                </div>
            ))}
        </div>
    </GameCard>
);

const OwnerROIDashboard = ({ className = '' }) => (
    <GameCard accent={C.gold} className={className}>
        <SectionHeader icon={TrendingUp} title="Executive ROI" color={C.gold}
            extra={<span className="text-sm font-mono" style={{ color: C.fire }}>Cost YTD: $<AnimatedCounter to={12450} /></span>} />
        <div className="grid grid-cols-4 gap-4">
            {[
                { label: 'Participation', value: '92%', color: C.green },
                { label: 'Prize Fund', value: '68%', color: C.gold },
                { label: 'Conversion Lift', value: '+24%', color: C.green },
                { label: 'Revenue', value: '$1.2M', color: C.gold },
            ].map(({ label, value, color }) => (
                <div key={label} className="rounded-xl p-5 text-center bg-white/[0.03] border border-white/[0.06]">
                    <p className="text-[10px] font-mono uppercase tracking-wider text-zinc-600 mb-2">{label}</p>
                    <p className="font-['Barlow_Condensed'] font-black text-3xl" style={{ color }}>{value}</p>
                </div>
            ))}
        </div>
    </GameCard>
);

// ═══════════════════════════════════════════════════════════════════
// 8. LOG ACTION CARD + MODAL
// ═══════════════════════════════════════════════════════════════════
const LOG_ACTIONS = [
    {
        key: 'knock', label: 'Door Knocked', icon: DoorOpen, color: C.cyan,
        fields: [
            { name: 'address', label: 'Address', type: 'text', placeholder: '123 Main St' },
            { name: 'outcome', label: 'Outcome', type: 'select', options: ['Interested', 'Not Home', 'Not Interested', 'Follow Up'] },
            { name: 'notes', label: 'Notes', type: 'textarea', placeholder: 'Any details...' },
        ]
    },
    {
        key: 'lead', label: 'Lead Gained', icon: UserPlus, color: C.neon,
        fields: [
            { name: 'name', label: 'Contact Name', type: 'text', placeholder: 'John Doe' },
            { name: 'phone', label: 'Phone', type: 'text', placeholder: '(555) 123-4567' },
            { name: 'email', label: 'Email', type: 'text', placeholder: 'john@example.com' },
            { name: 'address', label: 'Property Address', type: 'text', placeholder: '456 Oak Ave' },
            { name: 'notes', label: 'Notes', type: 'textarea', placeholder: 'Lead source & details...' },
        ]
    },
    {
        key: 'appt', label: 'Appointment Set', icon: Calendar, color: C.gold,
        fields: [
            { name: 'clientName', label: 'Client Name', type: 'text', placeholder: 'Jane Smith' },
            { name: 'date', label: 'Date & Time', type: 'datetime-local' },
            { name: 'address', label: 'Address', type: 'text', placeholder: '789 Pine Rd' },
            { name: 'type', label: 'Type', type: 'select', options: ['Roof Inspection', 'Estimate', 'Follow Up', 'Other'] },
            { name: 'notes', label: 'Notes', type: 'textarea', placeholder: 'Meeting details...' },
        ]
    },
    {
        key: 'meeting', label: 'Client Meeting', icon: Handshake, color: C.purple,
        fields: [
            { name: 'clientName', label: 'Client Name', type: 'text', placeholder: 'Client name' },
            { name: 'outcome', label: 'Outcome', type: 'select', options: ['Deal Closed', 'Follow Up Needed', 'Proposal Sent', 'No Deal'] },
            { name: 'followUp', label: 'Follow-up Date', type: 'date' },
            { name: 'notes', label: 'Notes', type: 'textarea', placeholder: 'Meeting summary...' },
        ]
    },
];

const LogActionCard = ({ className = '', onAction }) => (
    <GameCard accent={C.purple} className={className} spotlightColor="rgba(168,85,247,0.10)">
        <SectionHeader icon={ClipboardList} title="Log Action" color={C.purple} />
        <div className="grid grid-cols-2 gap-3 flex-1">
            {LOG_ACTIONS.map(({ key, label, icon: I, color }) => (
                <motion.button key={key} whileHover={{ scale: 1.05, y: -2 }} whileTap={{ scale: 0.93 }}
                    onClick={() => onAction(key)}
                    className="rounded-xl p-4 flex flex-col items-center justify-center gap-2.5 cursor-pointer bg-zinc-100 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/[0.06] hover:border-white/15 transition-colors">
                    <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ background: color + '15', boxShadow: `0 0 12px ${color}11` }}>
                        <I size={22} style={{ color }} />
                    </div>
                    <span className="font-['Barlow_Condensed'] font-bold text-xs uppercase tracking-wider text-zinc-500 dark:text-zinc-400">{label}</span>
                </motion.button>
            ))}
        </div>
    </GameCard>
);

const LogActionModal = ({ actionKey, onClose }) => {
    const config = LOG_ACTIONS.find(a => a.key === actionKey);
    const [form, setForm] = useState({});
    if (!config) return null;
    const Icon = config.icon;

    const handleSubmit = (e) => {
        e.preventDefault();
        // In production: dispatch to API
        onClose();
    };

    return (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4"
            onClick={onClose}>
            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
            <motion.div initial={{ scale: 0.9, opacity: 0, y: 30 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.9, opacity: 0, y: 30 }}
                transition={{ type: 'spring', stiffness: 300, damping: 25 }}
                onClick={e => e.stopPropagation()}
                className="relative w-full max-w-lg rounded-2xl overflow-hidden bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-white/10 shadow-2xl">
                {/* Header */}
                <div className="p-6 pb-4 flex items-center justify-between" style={{ borderBottom: `2px solid ${config.color}33` }}>
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: config.color + '18' }}>
                            <Icon size={22} style={{ color: config.color }} />
                        </div>
                        <h3 className="font-['Barlow_Condensed'] font-black text-xl uppercase tracking-wider text-zinc-900 dark:text-white">{config.label}</h3>
                    </div>
                    <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={onClose}
                        className="w-8 h-8 rounded-lg flex items-center justify-center bg-white/5 hover:bg-white/10 transition-colors">
                        <X size={18} className="text-zinc-500" />
                    </motion.button>
                </div>
                {/* Form */}
                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                    {config.fields.map(field => (
                        <div key={field.name}>
                            <label className="block font-['Barlow_Condensed'] font-bold text-xs uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-1.5">{field.label}</label>
                            {field.type === 'select' ? (
                                <select value={form[field.name] || ''} onChange={e => setForm(p => ({ ...p, [field.name]: e.target.value }))}
                                    className="w-full rounded-xl px-4 py-3 bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-white/[0.08] text-zinc-900 dark:text-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring)] [&>option]:bg-white [&>option]:dark:bg-zinc-900 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                                    style={{ '--ring': config.color + '55' }}>
                                    <option value="" className="bg-white dark:bg-zinc-900 text-zinc-500 dark:text-zinc-400">Select...</option>
                                    {field.options.map(o => <option key={o} value={o} className="bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white">{o}</option>)}
                                </select>
                            ) : field.type === 'textarea' ? (
                                <textarea rows={3} value={form[field.name] || ''} onChange={e => setForm(p => ({ ...p, [field.name]: e.target.value }))}
                                    placeholder={field.placeholder}
                                    className="w-full rounded-xl px-4 py-3 bg-zinc-100 dark:bg-white/[0.04] border border-zinc-200 dark:border-white/[0.08] text-zinc-900 dark:text-white font-mono text-sm placeholder:text-zinc-400 dark:placeholder:text-zinc-600 focus:outline-none focus:ring-2 resize-none"
                                    style={{ '--ring': config.color + '55', focusRingColor: config.color + '55' }} />
                            ) : (
                                <input type={field.type} value={form[field.name] || ''} onChange={e => setForm(p => ({ ...p, [field.name]: e.target.value }))}
                                    placeholder={field.placeholder}
                                    className="w-full rounded-xl px-4 py-3 bg-zinc-100 dark:bg-white/[0.04] border border-zinc-200 dark:border-white/[0.08] text-zinc-900 dark:text-white font-mono text-sm placeholder:text-zinc-400 dark:placeholder:text-zinc-600 focus:outline-none focus:ring-2"
                                    style={{ '--ring': config.color + '55' }} />
                            )}
                        </div>
                    ))}
                    <motion.button type="submit" whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.97 }}
                        className="w-full mt-2 py-3.5 rounded-xl font-['Barlow_Condensed'] font-black text-base uppercase tracking-wider cursor-pointer"
                        style={{ background: config.color, color: '#09090b', boxShadow: `0 0 16px ${config.color}44` }}>
                        Log {config.label}
                    </motion.button>
                </form>
            </motion.div>
        </motion.div>
    );
};

// ═══════════════════════════════════════════════════════════════════
// 9. CHALLENGES MODAL
// ═══════════════════════════════════════════════════════════════════
const ChallengesModal = ({ onClose, gamestate }) => {
    const challenges = [
        { title: 'Weekly Knock Target', desc: 'Hit 150 doors this week', current: gamestate.weeklyChallenge?.knocks?.current || 140, target: 150, color: C.gold, reward: '+500 XP', icon: Home },
        { title: 'Daily Lead Master', desc: 'Generate 5 leads today', current: gamestate.dailyQuests?.leads?.current || 4, target: 5, color: C.neon, reward: '+100 XP', icon: UserPlus },
        { title: 'Inspection Sprint', desc: 'Complete 1 inspection today', current: gamestate.dailyQuests?.inspections?.current || 0, target: 1, color: C.cyan, reward: '+75 XP', icon: Calendar },
        { title: 'Door Warrior', desc: 'Knock 20 doors in a single day', current: gamestate.dailyQuests?.knocks?.current || 18, target: 20, color: C.blue, reward: '+200 XP', icon: DoorOpen },
        { title: 'Streak Keeper', desc: 'Maintain your streak for 7 days', current: gamestate.streak || 5, target: 7, color: C.fire, reward: '+300 XP', icon: Flame },
        { title: 'Photo Hunter', desc: 'Upload 5 roof photos today', current: 3, target: 5, color: C.green, reward: '+150 XP', icon: Camera },
    ];

    return (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4"
            onClick={onClose}>
            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
            <motion.div initial={{ scale: 0.9, opacity: 0, y: 30 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.9, opacity: 0, y: 30 }}
                transition={{ type: 'spring', stiffness: 300, damping: 25 }}
                onClick={e => e.stopPropagation()}
                className="relative w-full max-w-2xl max-h-[80vh] rounded-2xl overflow-hidden bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-white/10 shadow-2xl flex flex-col">
                {/* Header */}
                <div className="p-6 pb-4 flex items-center justify-between flex-shrink-0" style={{ borderBottom: `2px solid ${C.neon}33` }}>
                    <div className="flex items-center gap-3">
                        <PixelBolt size={28} color={C.neon} />
                        <h3 className="font-['Barlow_Condensed'] font-black text-2xl uppercase tracking-wider text-zinc-900 dark:text-white">Active Challenges</h3>
                    </div>
                    <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={onClose}
                        className="w-8 h-8 rounded-lg flex items-center justify-center bg-white/5 hover:bg-white/10 transition-colors">
                        <X size={18} className="text-zinc-500" />
                    </motion.button>
                </div>
                {/* Content */}
                <div className="p-6 overflow-y-auto space-y-4 flex-1">
                    {challenges.map((ch, idx) => {
                        const pct = Math.min((ch.current / ch.target) * 100, 100);
                        const done = pct >= 100;
                        const Icon = ch.icon;
                        return (
                            <motion.div key={idx} initial={{ opacity: 0, x: -15 }} animate={{ opacity: 1, x: 0 }}
                                transition={{ delay: idx * 0.06 }}
                                className="rounded-xl p-5 relative overflow-hidden bg-zinc-100 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/[0.06]">
                                <div className="flex items-start justify-between mb-3">
                                    <div className="flex items-center gap-3">
                                        <div className="w-9 h-9 rounded-lg flex items-center justify-center" style={{ background: ch.color + '15' }}>
                                            <Icon size={18} style={{ color: ch.color }} />
                                        </div>
                                        <div>
                                            <p className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-wider text-zinc-900 dark:text-white">{ch.title}</p>
                                            <p className="text-[11px] font-mono text-zinc-500">{ch.desc}</p>
                                        </div>
                                    </div>
                                    <span className="text-xs font-['Barlow_Condensed'] font-bold px-2.5 py-1 rounded-full flex-shrink-0"
                                        style={{ background: done ? C.green + '18' : ch.color + '12', color: done ? C.green : ch.color }}>
                                        {done ? '✓ DONE' : ch.reward}
                                    </span>
                                </div>
                                <ProgressBar progress={ch.current} goal={ch.target} color={ch.color} height="h-3" showLabel={false} />
                                <div className="flex justify-between mt-1.5">
                                    <span className="text-[10px] font-mono text-zinc-500">{ch.current} / {ch.target}</span>
                                    <span className="text-[10px] font-mono font-bold" style={{ color: ch.color }}>{Math.round(pct)}%</span>
                                </div>
                            </motion.div>
                        );
                    })}
                </div>
            </motion.div>
        </motion.div>
    );
};

// ═══════════════════════════════════════════════════════════════════
// 10. ACHIEVEMENTS MODAL
// ═══════════════════════════════════════════════════════════════════
const BADGE_ICONS_GLOBAL = { Hunter: Crosshair, Storm: Zap, Star: Star, Master: Map };
const BADGE_COLORS_GLOBAL = { Hunter: C.fire, Storm: C.gold, Star: C.pink, Master: C.green };

const AchievementsModal = ({ onClose, badges }) => (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
        className="fixed inset-0 z-50 flex items-center justify-center p-4"
        onClick={onClose}>
        <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
        <motion.div initial={{ scale: 0.9, opacity: 0, y: 30 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.9, opacity: 0, y: 30 }}
            transition={{ type: 'spring', stiffness: 300, damping: 25 }}
            onClick={e => e.stopPropagation()}
            className="relative w-full max-w-2xl max-h-[80vh] rounded-2xl overflow-hidden bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-white/10 shadow-2xl flex flex-col">
            {/* Header */}
            <div className="p-6 pb-4 flex items-center justify-between flex-shrink-0" style={{ borderBottom: `2px solid ${C.gold}33` }}>
                <div className="flex items-center gap-3">
                    <PixelTrophy size={28} color={C.gold} />
                    <h3 className="font-['Barlow_Condensed'] font-black text-2xl uppercase tracking-wider text-zinc-900 dark:text-white">All Achievements</h3>
                    <span className="text-xs font-mono px-2 py-0.5 rounded-full bg-zinc-200 dark:bg-white/5 text-zinc-600 dark:text-zinc-400">
                        {badges.filter(b => b.status === 'unlocked').length}/{badges.length} Unlocked
                    </span>
                </div>
                <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={onClose}
                    className="w-8 h-8 rounded-lg flex items-center justify-center bg-white/5 hover:bg-white/10 transition-colors">
                    <X size={18} className="text-zinc-500" />
                </motion.button>
            </div>
            {/* Content */}
            <div className="p-6 overflow-y-auto space-y-3 flex-1">
                {badges.map((badge, idx) => {
                    const unlocked = badge.status === 'unlocked';
                    const key = Object.keys(BADGE_ICONS_GLOBAL).find(k => badge.id?.includes(k));
                    const Icon = key ? BADGE_ICONS_GLOBAL[key] : Shield;
                    const color = key ? BADGE_COLORS_GLOBAL[key] : C.cyan;
                    return (
                        <motion.div key={idx} initial={{ opacity: 0, x: -15 }} animate={{ opacity: 1, x: 0 }}
                            transition={{ delay: idx * 0.05 }}
                            className="rounded-xl p-5 flex items-center gap-4 relative overflow-hidden"
                            style={{
                                background: unlocked ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
                                border: `1.5px solid ${unlocked ? color + '44' : 'rgba(255,255,255,0.06)'}`,
                                opacity: unlocked ? 1 : 0.5,
                            }}>
                            <div className="w-14 h-14 rounded-full flex items-center justify-center flex-shrink-0"
                                style={{ background: unlocked ? color + '18' : 'rgba(255,255,255,0.03)', boxShadow: unlocked ? `0 0 16px ${color}22` : 'none' }}>
                                <Icon size={26} style={{ color: unlocked ? color : 'rgb(82 82 91)' }} />
                            </div>
                            <div className="flex-1 min-w-0">
                                <div className="flex items-center gap-2">
                                    <p className="font-['Barlow_Condensed'] font-black text-sm uppercase tracking-wider text-zinc-900 dark:text-white">{badge.title}</p>
                                    {unlocked && <CheckCircle size={14} style={{ color }} />}
                                </div>
                                <p className="text-xs font-mono text-zinc-500 mt-0.5">{badge.criteria || 'Complete the challenge to unlock'}</p>
                                {badge.progressText && <p className="text-[10px] font-mono mt-0.5" style={{ color }}>{badge.progressText}</p>}
                            </div>
                            <span className="text-xs font-['Barlow_Condensed'] font-bold px-3 py-1 rounded-full flex-shrink-0"
                                style={{ background: unlocked ? color + '15' : 'rgba(255,255,255,0.03)', color: unlocked ? color : 'rgb(82 82 91)' }}>
                                {unlocked ? 'UNLOCKED' : 'LOCKED'}
                            </span>
                        </motion.div>
                    );
                })}
            </div>
        </motion.div>
    </motion.div>
);

// ═══════════════════════════════════════════════════════════════════
// MAIN LAYOUT — two-column bento, no bottom ribbon
// ═══════════════════════════════════════════════════════════════════
function ProCanvasContent() {
    const { user } = useAuth();
    const { users } = useMockStore();
    const role = user?.role || 'FIELD_AGENT';

    const mockDbUser = {
        ...(users.find(u => u.email === user?.email) || users.find(u => u.roles?.includes('FIELD_AGENT')) || users.find(u => u.type === 'employee') || {
            name: user?.name || 'Agent Unknown', empId: 'OP-00', xp: 12450, doorsKnocked: 342, leadsGained: 45,
            appointmentsSet: 18, streakDays: 5, achievements: ['Hot Spot Hunter', 'Storm Chaser'],
        }),
        profilePhoto: profilePic,
    };

    const oldGamestate = useOldGamification(mockDbUser);
    const gs = useGamification();

    // Modal state
    const [logAction, setLogAction] = useState(null);       // 'knock' | 'lead' | 'appt' | 'meeting' | null
    const [showChallenges, setShowChallenges] = useState(false);
    const [showAchievements, setShowAchievements] = useState(false);

    if (!oldGamestate || !gs) return (
        <div className="min-h-screen flex items-center justify-center bg-[#09090b]">
            <motion.div animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 1.5, ease: 'linear' }}>
                <PixelBolt size={44} color={C.gold} />
            </motion.div>
        </div>
    );

    return (
        <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white selection:bg-[#fda913]/30 relative pb-8">
            {/* Ambient glows */}
            <div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
                <div className="absolute top-[-15%] left-[-10%] w-[55%] h-[55%] bg-purple-200/30 dark:bg-purple-900/10 rounded-full blur-[140px]" />
                <div className="absolute bottom-[-15%] right-[-10%] w-[55%] h-[55%] bg-blue-200/30 dark:bg-blue-900/10 rounded-full blur-[140px]" />
                <motion.div className="absolute top-[20%] right-[15%] w-[30%] h-[30%] rounded-full blur-[120px]"
                    style={{ background: `${C.gold}06` }}
                    animate={{ opacity: [0.3, 0.7, 0.3] }} transition={{ repeat: Infinity, duration: 5, ease: 'easeInOut' }} />
            </div>

            <FloatingXPManager />
            <LevelUpModal />

            {/* ── Modals ── */}
            <AnimatePresence>
                {logAction && <LogActionModal actionKey={logAction} onClose={() => setLogAction(null)} />}
                {showChallenges && <ChallengesModal onClose={() => setShowChallenges(false)} gamestate={gs} />}
                {showAchievements && <AchievementsModal onClose={() => setShowAchievements(false)} badges={oldGamestate.badges} />}
            </AnimatePresence>

            <div className="relative z-10 p-4 md:p-6 lg:p-8 max-w-[1650px] mx-auto">
                <motion.div variants={containerV} initial="hidden" animate="show" className="space-y-6">

                    {/* ══ HEADER ══ */}
                    <motion.header variants={itemV} className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 border-b border-zinc-200 dark:border-white/5">
                        <div className="flex items-center gap-3">
                            <PixelBolt size={32} color={C.gold} />
                            <h1 className="font-['Barlow_Condensed'] font-black text-3xl tracking-tight text-zinc-900 dark:text-white">
                                LynkedUp <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#fda913] to-[#AAFF00]">Pro Canvas</span>
                            </h1>
                        </div>
                        <div className="flex items-center gap-3">
                            {[{ label: 'Leaderboard', color: C.gold, onClick: () => { const el = document.getElementById('procanvas-leaderboard'); el?.scrollIntoView({ behavior: 'smooth' }); } },
                            { label: 'Challenges', color: C.neon, onClick: () => setShowChallenges(true) },
                            { label: 'Achievements', color: C.gold, onClick: () => setShowAchievements(true) },
                            ].map((tab, i) => (
                                <motion.button key={tab.label} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
                                    onClick={tab.onClick}
                                    className="font-['Barlow_Condensed'] font-bold text-xs uppercase tracking-wider px-4 py-2 rounded-lg transition-all cursor-pointer"
                                    style={{ background: tab.color + '18', color: tab.color, border: `1px solid ${tab.color}33` }}>
                                    {tab.label}
                                </motion.button>
                            ))}
                            <div className="flex items-center gap-2.5 ml-3 pl-4 border-l border-zinc-200 dark:border-white/10">
                                <div className="w-9 h-9 rounded-full overflow-hidden" style={{ border: `2px solid ${C.gold}` }}>
                                    <img src={mockDbUser.profilePhoto} alt="" className="w-full h-full object-cover" />
                                </div>
                                <div>
                                    <p className="font-['Barlow_Condensed'] font-bold text-sm leading-none text-zinc-900 dark:text-white/90">{mockDbUser.name?.split(' ')[0]}</p>
                                    <p className="font-mono font-bold text-xs" style={{ color: C.gold }}><AnimatedCounter to={gs.xp} /> XP</p>
                                </div>
                            </div>
                        </div>
                    </motion.header>

                    {/* ══ TWO-COLUMN LAYOUT ══ */}
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">

                        {/* Left: Player Card + Daily Missions (sticky sidebar, 4 cols) */}
                        <motion.div variants={itemV} className="lg:col-span-4 flex flex-col gap-6 lg:sticky lg:top-6 lg:self-start">
                            <OperatorProfile gamestate={gs} user={mockDbUser} badges={oldGamestate.badges} />
                            <LogActionCard onAction={setLogAction} />
                            <DailyMissions gamestate={gs} role={role} />
                        </motion.div>

                        {/* Right: Main content (8 cols) */}
                        <div className="lg:col-span-8 flex flex-col gap-6">

                            {/* Showdown + Streak (side by side) */}
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <motion.div variants={itemV}><ShowdownCard gamestate={gs} /></motion.div>
                                <motion.div variants={itemV}><StreakCard gamestate={gs} /></motion.div>
                            </div>

                            {/* Rewards & Checkpoints (full width) */}
                            <motion.div variants={itemV}>
                                <RewardsCheckpoints stages={oldGamestate.stages} />
                            </motion.div>

                            {/* Badges & Achievements (full width, clickable) */}
                            <motion.div variants={itemV} onClick={() => setShowAchievements(true)} className="cursor-pointer">
                                <BadgesAchievements badges={oldGamestate.badges} />
                            </motion.div>

                            {/* Leaderboard (full width) */}
                            <motion.div variants={itemV} id="procanvas-leaderboard">
                                <Leaderboard />
                            </motion.div>

                            {/* Admin/Owner */}
                            {role === 'OWNER' && <motion.div variants={itemV}><OwnerROIDashboard /></motion.div>}
                            {(role === 'ADMIN' || role === 'OWNER') && <motion.div variants={itemV}><AdminCommandCenter /></motion.div>}
                        </div>
                    </div>
                </motion.div>
            </div>
        </div>
    );
}

export default function ProCanvas() {
    return (
        <GamificationProvider>
            <ProCanvasContent />
        </GamificationProvider>
    );
}