import React, { useState, useMemo } from 'react';
import { useMockStore } from '../../data/mockStore';
import { Trophy, TrendingUp, DollarSign, Target, Calendar as CalendarIcon, ChevronDown } from 'lucide-react';

const LeaderboardWidget = () => {
    const { users, salesHistory } = useMockStore();
    const [timeframe, setTimeframe] = useState('month'); // 'week', 'month', 'custom'
    const [metric, setMetric] = useState('revenue'); // 'revenue', 'volume', 'winRate'

    // Filter agents
    const agents = useMemo(() => users.filter(u => u.role === 'FIELD_AGENT'), [users]);

    // Calculate metrics based on timeframe
    const leaderboardData = useMemo(() => {
        const now = new Date();
        const startOfWeek = new Date(now.setDate(now.getDate() - now.getDay()));
        startOfWeek.setHours(0, 0, 0, 0);

        const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 1);

        return agents.map(agent => {
            const agentTxals = salesHistory.filter(tx => {
                const txDate = new Date(tx.date);
                const isAgent = tx.agentId === agent.id;

                if (!isAgent) return false;

                if (timeframe === 'week') return txDate >= startOfWeek;
                if (timeframe === 'month') return txDate >= startOfMonth;
                return true; // All time / Custom (TODO: Add custom range picker logic)
            });

            // Calculate Metrics
            const revenue = agentTxals
                .filter(tx => tx.status === 'closed_won')
                .reduce((sum, tx) => sum + tx.amount, 0);

            const volume = agentTxals
                .filter(tx => tx.status === 'closed_won')
                .length;

            const won = agentTxals.filter(tx => tx.status === 'closed_won').length;
            const lost = agentTxals.filter(tx => tx.status === 'closed_lost').length;
            const totalDeals = won + lost;
            const winRate = totalDeals > 0 ? (won / totalDeals) * 100 : 0;

            return {
                ...agent,
                revenue,
                volume,
                winRate
            };
        }).sort((a, b) => b[metric] - a[metric]);

    }, [agents, salesHistory, timeframe, metric]);

    const formatValue = (val, type) => {
        if (type === 'revenue') return `$${(val / 1000).toFixed(1)}k`;
        if (type === 'volume') return `${val} Deals`;
        if (type === 'winRate') return `${val.toFixed(0)}%`;
        return val;
    };

    return (
        <div className="mt-6 mb-2">
            <div className="flex items-center justify-between px-4 mb-3">
                <div className="flex items-center space-x-2 text-zinc-900 dark:text-white">
                    <Trophy size={16} className="text-yellow-500" />
                    <span className="text-xs font-bold uppercase tracking-wider">Top Performers</span>
                </div>

                {/* Simple Timeframe Toggle for now */}
                <div className="flex bg-zinc-100 dark:bg-white/5 rounded-lg p-0.5">
                    <button
                        onClick={() => setTimeframe('week')}
                        className={`px-2 py-0.5 text-[10px] font-bold rounded-md transition-all ${timeframe === 'week' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
                    >
                        W
                    </button>
                    <button
                        onClick={() => setTimeframe('month')}
                        className={`px-2 py-0.5 text-[10px] font-bold rounded-md transition-all ${timeframe === 'month' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
                    >
                        M
                    </button>
                </div>
            </div>

            {/* Metric Selector Tabs */}
            <div className="flex px-4 mb-4 space-x-1">
                {[
                    { id: 'revenue', icon: DollarSign, label: 'Rev' },
                    { id: 'volume', icon: Target, label: 'Vol' },
                    { id: 'winRate', icon: TrendingUp, label: 'Win%' }
                ].map(m => (
                    <button
                        key={m.id}
                        onClick={() => setMetric(m.id)}
                        className={`flex-1 flex flex-col items-center justify-center py-2 rounded-lg border text-[10px] font-bold transition-all ${metric === m.id
                            ? 'bg-blue-50 dark:bg-blue-500/10 border-blue-200 dark:border-blue-500/20 text-blue-600 dark:text-blue-300'
                            : 'bg-transparent border-transparent text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/5'}`}
                    >
                        <m.icon size={14} className="mb-0.5" />
                        {m.label}
                    </button>
                ))}
            </div>

            {/* List */}
            <div className="space-y-1 px-2">
                {leaderboardData.map((agent, index) => (
                    <div key={agent.id} className="flex items-center justify-between p-2 rounded-lg bg-white/40 dark:bg-white/5 border border-zinc-200/50 dark:border-white/5 hover:bg-white/60 dark:hover:bg-white/10 transition-all group">
                        <div className="flex items-center space-x-3">
                            <div className={`w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold ${index === 0 ? 'bg-yellow-100 text-yellow-700 border border-yellow-200' :
                                    index === 1 ? 'bg-zinc-100 text-zinc-700 border border-zinc-200' :
                                        index === 2 ? 'bg-orange-100 text-orange-700 border border-orange-200' :
                                            'bg-transparent text-zinc-400'
                                }`}>
                                {index + 1}
                            </div>
                            <div>
                                <p className="text-xs font-bold text-zinc-900 dark:text-white leading-none mb-0.5">{agent.name}</p>
                                <p className="text-[9px] text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">{agent.role.replace('_', ' ')}</p>
                            </div>
                        </div>
                        <div className="text-right">
                            <span className="text-xs font-bold font-mono text-zinc-900 dark:text-white">
                                {formatValue(agent[metric], metric)}
                            </span>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default LeaderboardWidget;
