const { motion, AnimatePresence } = window.Motion || window.framerMotion || { motion: { div: 'div' }, AnimatePresence: ({ children }) => <>{children}</> };

function Leaderboard({ showLeaderboard, setShowLeaderboard, t, lastRank, playerName, lbLoading, lbError, leaderboard, fetchLeaderboard, sortBy, setSortBy, sortOrder, setSortOrder, currentUser, lastSubmissionTime, getBalanceColor, formatMoney, lang, Icons }) {
    if (!showLeaderboard) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/95 backdrop-blur-xl" onClick={(e) => { if (e.target === e.currentTarget) setShowLeaderboard(false); }}>
            <div className="w-full max-w-3xl bg-slate-900 border border-white/10 rounded-[3rem] overflow-hidden shadow-2xl">
                <div className="p-8 border-b border-white/5 bg-gradient-to-r from-amber-500/5 via-transparent to-indigo-500/5">
                    <div className="flex justify-between items-center">
                        <h3 className="text-2xl font-black flex items-center gap-3">
                            <div className="p-2.5 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl shadow-lg shadow-amber-500/20">
                                <Icons.Trophy size={22} className="text-white" />
                            </div>
                            {t.leaderboard}
                        </h3>
                        <button onClick={() => setShowLeaderboard(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
                            <Icons.XCircle size={24} />
                        </button>
                    </div>
                    {lastRank && playerName && (
                        <div className="mt-4 flex items-center gap-3 bg-indigo-500/10 border border-indigo-500/20 rounded-2xl px-5 py-3">
                            <Icons.User size={16} className="text-indigo-400" />
                            <span className="text-sm font-bold text-indigo-300">{t.yourRank}: <span className="text-white font-black text-lg">#{lastRank}</span></span>
                        </div>
                    )}
                </div>
                <div className="p-8">
                    {lbLoading ? (
                        <div className="flex flex-col items-center justify-center py-16 gap-4">
                            <Icons.Loader size={40} className="text-indigo-400" />
                            <p className="text-slate-500 font-bold">{t.loading}</p>
                        </div>
                    ) : lbError ? (
                        <div className="flex flex-col items-center justify-center py-16 gap-4">
                            <Icons.XCircle size={40} className="text-rose-500" />
                            <p className="text-rose-400 font-bold">{lbError}</p>
                            <button onClick={fetchLeaderboard} className="px-6 py-2 bg-white/5 hover:bg-white/10 rounded-xl text-sm font-bold text-slate-300 transition-colors border border-white/10">{lang === 'TR' ? 'Tekrar Dene' : 'Retry'}</button>
                        </div>
                    ) : leaderboard.length === 0 ? (
                        <div className="flex flex-col items-center justify-center py-16 gap-4">
                            <Icons.Dices size={40} className="text-slate-600" />
                            <p className="text-slate-500 font-bold">{t.noData}</p>
                        </div>
                    ) : (
                        <>
                            <div className="grid grid-cols-12 text-[10px] font-black text-slate-500 uppercase tracking-widest mb-4 px-6">
                                <span className="col-span-1">{t.rank}</span>
                                <button onClick={() => { if (sortBy === 'name') setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc'); else { setSortBy('name'); setSortOrder('asc'); } }} className="col-span-3 text-left flex items-center gap-1 hover:text-white transition-colors uppercase">
                                    {t.player} {sortBy === 'name' && (sortOrder === 'desc' ? '↓' : '↑')}
                                </button>
                                <button onClick={() => { if (sortBy === 'score') setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc'); else { setSortBy('score'); setSortOrder('desc'); } }} className="col-span-3 text-right flex items-center justify-end gap-1 hover:text-white transition-colors uppercase pr-4">
                                    {lang === 'TR' ? 'SERVET' : 'WEALTH'} {sortBy === 'score' && (sortOrder === 'desc' ? '↓' : '↑')}
                                </button>
                                <button onClick={() => { if (sortBy === 'totalGames') setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc'); else { setSortBy('totalGames'); setSortOrder('desc'); } }} className="col-span-2 text-center flex items-center justify-center gap-1 hover:text-white transition-colors uppercase">
                                    {lang === 'TR' ? 'OYUN' : 'PLAYS'} {sortBy === 'totalGames' && (sortOrder === 'desc' ? '↓' : '↑')}
                                </button>
                                <button onClick={() => { if (sortBy === 'winRate') setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc'); else { setSortBy('winRate'); setSortOrder('desc'); } }} className="col-span-1 text-center flex items-center justify-center gap-1 hover:text-white transition-colors uppercase">
                                    % {sortBy === 'winRate' && (sortOrder === 'desc' ? '↓' : '↑')}
                                </button>
                                <button onClick={() => { if (sortBy === 'xp') setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc'); else { setSortBy('xp'); setSortOrder('desc'); } }} className="col-span-2 text-right flex items-center justify-end gap-1 hover:text-white transition-colors uppercase">
                                    XP {sortBy === 'xp' && (sortOrder === 'desc' ? '↓' : '↑')}
                                </button>
                            </div>
                            <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
                                {[...leaderboard].sort((a, b) => {
                                    const factor = sortOrder === 'desc' ? 1 : -1;
                                    if (typeof a[sortBy] === 'string') return a[sortBy].localeCompare(b[sortBy]) * factor;
                                    return (b[sortBy] - a[sortBy]) * factor;
                                }).map((entry, i) => {
                                    const isMe = currentUser && entry.name === currentUser.username;
                                    const isNew = lastSubmissionTime === entry.date;
                                    const rankColors = [
                                        'bg-gradient-to-r from-amber-500/15 to-amber-500/5 border-amber-500/30',
                                        'bg-gradient-to-r from-slate-400/10 to-slate-400/5 border-slate-400/20',
                                        'bg-gradient-to-r from-orange-700/10 to-orange-700/5 border-orange-700/20'
                                    ];
                                    const rankTextColors = ['text-amber-400', 'text-slate-300', 'text-orange-500'];
                                    let rowStyle = i < 3 ? rankColors[i] : isMe ? 'bg-indigo-500/10 border-indigo-500/20' : 'bg-white/[0.02] border-transparent hover:bg-white/[0.05]';

                                    if (entry.isDebtor) rowStyle = 'bg-rose-500/5 border-rose-500/15 hover:bg-rose-500/10';

                                    if (isNew) rowStyle += ' ring-2 ring-indigo-400/50 scale-[1.02] z-10 relative';

                                    return (
                                        <div key={i} className={`lb-row-enter grid grid-cols-12 p-4 rounded-2xl border transition-all items-center ${rowStyle}`} style={{ animationDelay: `${i * 30}ms` }}>
                                            <span className={`col-span-1 font-black flex items-center gap-1 text-[11px] ${((sortBy === 'score' || sortBy === 'rank') && entry.globalRank <= 3 && sortOrder === 'desc') ? rankTextColors[entry.globalRank - 1] : isMe ? 'text-indigo-400' : entry.isDebtor ? 'text-rose-500' : 'text-slate-600'}`}>
                                                {(entry.globalRank === 1 && sortBy === 'score') && <Icons.Crown size={12} className="text-amber-400" />}
                                                #{entry.globalRank}
                                            </span>
                                            <span className={`col-span-3 font-bold truncate flex items-center gap-1.5 text-xs ${entry.isDebtor ? 'debtor-name' : isMe ? 'text-indigo-300' : 'text-white'}`}>
                                                {isMe && <span className="w-1.5 h-1.5 bg-indigo-400 rounded-full flex-shrink-0 animate-pulse"></span>}
                                                <span className="truncate">{entry.name}</span>
                                                {entry.isDebtor && <span className="debtor-badge flex-shrink-0">{lang === 'TR' ? 'BORÇLU' : 'DEBTOR'}</span>}
                                                {entry.title && !entry.isDebtor && <span className="title-badge flex-shrink-0">{entry.title}</span>}
                                            </span>
                                            <span className={`col-span-3 text-right font-black text-xs ${getBalanceColor(entry.name.toLowerCase() === 'admin' ? Infinity : entry.score)} pr-4`}>
                                                {formatMoney(entry.name.toLowerCase() === 'admin' ? Infinity : entry.score)}
                                            </span>
                                            <span className="col-span-2 text-center font-bold text-slate-400 text-[10px]">{entry.totalGames || 0}</span>
                                            <span className="col-span-1 text-center font-black text-emerald-400 text-[11px]">{Math.round(entry.winRate || 0)}%</span>
                                            <span className="col-span-2 text-right font-black text-indigo-400 text-[10px]">
                                                {entry.name.toLowerCase() === 'admin' ? '∞' : (entry.xp || 0).toLocaleString()}
                                            </span>
                                        </div>
                                    );
                                })}
                            </div>
                        </>
                    )}
                </div>
            </div>
        </div>
    );
}

window.Leaderboard = Leaderboard;