import type { LeaderboardMember } from "@/lib/discord";

interface LeaderboardViewProps {
    leaderboardData: LeaderboardMember[];
    currentUserRank?: LeaderboardMember;
    currentUserId?: string;
}

export default function LeaderboardView({
    leaderboardData,
    currentUserRank,
    currentUserId,
}: LeaderboardViewProps) {
    return (
        <>
            <div className="mb-6 sm:mb-8">
                <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4 sm:mb-6">
                    Leaderboard
                </h2>
                {currentUserRank && (
                    <div className="bg-white/5 border border-white/10 rounded-xl sm:rounded-2xl p-4 sm:p-6 flex flex-col md:flex-row items-center justify-between backdrop-blur-md shadow-2xl relative overflow-hidden group">
                        {/* Background Glow */}
                        <div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:bg-blue-500/10 transition-all duration-700"></div>

                        <div className="flex items-center gap-4 sm:gap-6 relative z-10 mb-4 md:mb-0">
                            {currentUserRank.avatar ? (
                                <img
                                    src={currentUserRank.avatar}
                                    alt={currentUserRank.username}
                                    className="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-white/10 shadow-lg"
                                />
                            ) : (
                                <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold text-2xl sm:text-3xl border-4 border-white/10 shadow-lg">
                                    {currentUserRank.username.charAt(0).toUpperCase()}
                                </div>
                            )}
                            <div className="flex flex-col">
                                <span className="text-xl sm:text-2xl font-bold text-white">
                                    {currentUserRank.username}
                                </span>
                            </div>
                        </div>

                        <div className="flex bg-black/20 rounded-xl p-3 sm:p-4 gap-4 sm:gap-8 md:gap-16 border border-white/5 relative z-10 w-full md:w-auto justify-center">
                            <div className="text-center">
                                <p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
                                    Rank
                                </p>
                                <p className="text-2xl sm:text-3xl font-black text-white">
                                    #{currentUserRank.rank}
                                </p>
                            </div>
                            <div className="w-px bg-white/10"></div>
                            <div className="text-center">
                                <p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
                                    Level
                                </p>
                                <p className="text-2xl sm:text-3xl font-black text-yellow-500">
                                    {currentUserRank.level}
                                </p>
                            </div>
                            <div className="w-px bg-white/10"></div>
                            <div className="text-center">
                                <p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
                                    Total XP
                                </p>
                                <p className="text-2xl sm:text-3xl font-black text-blue-400">
                                    {currentUserRank.xp.toLocaleString()}
                                </p>
                            </div>
                        </div>
                    </div>
                )}
            </div>

            <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-xl sm:rounded-2xl overflow-hidden shadow-xl">
                {/* Mobile Card View */}
                <div className="block sm:hidden">
                    {leaderboardData.length > 0 ? (
                        <div className="divide-y divide-white/5">
                            {leaderboardData.map((member) => {
                                const isCurrentUser = member.user_id === currentUserId;
                                let rankColor = "text-blue-400";
                                if (member.rank === 1)
                                    rankColor = "text-yellow-400";
                                if (member.rank === 2)
                                    rankColor = "text-gray-300";
                                if (member.rank === 3)
                                    rankColor = "text-orange-400";

                                return (
                                    <div
                                        key={member.user_id}
                                        className={`p-4 ${isCurrentUser
                                                ? "bg-blue-600/20"
                                                : ""
                                            }`}
                                    >
                                        <div className="flex items-center gap-3">
                                            <span
                                                className={`font-mono font-bold text-lg w-10 ${rankColor}`}
                                            >
                                                #{member.rank}
                                            </span>
                                            {member.avatar ? (
                                                <img
                                                    src={member.avatar}
                                                    alt=""
                                                    className="w-10 h-10 rounded-full bg-gray-700 shadow-md"
                                                />
                                            ) : (
                                                <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">
                                                    {member.username
                                                        .charAt(0)
                                                        .toUpperCase()}
                                                </div>
                                            )}
                                            <div className="flex-1 min-w-0">
                                                <p
                                                    className={`font-semibold truncate ${isCurrentUser
                                                            ? "text-blue-200"
                                                            : "text-white"
                                                        }`}
                                                >
                                                    {member.username}
                                                </p>
                                                {isCurrentUser && (
                                                    <span className="text-xs text-blue-400">
                                                        You
                                                    </span>
                                                )}
                                            </div>
                                            <div className="text-right">
                                                <p className="font-bold text-yellow-500">
                                                    Lv. {member.level}
                                                </p>
                                                <p className="text-xs text-gray-500 font-mono">
                                                    {member.xp.toLocaleString()} XP
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    ) : (
                        <div className="p-12 text-center text-gray-500">
                            Setup leveling system to see the leaderboard
                        </div>
                    )}
                </div>

                {/* Desktop Table View */}
                <div className="hidden sm:block overflow-x-auto">
                    <table className="w-full text-left border-collapse">
                        <thead>
                            <tr className="border-b border-white/10 text-gray-400 text-sm uppercase tracking-wider bg-white/5">
                                <th className="p-4 pl-6">Rank</th>
                                <th className="p-4">User</th>
                                <th className="p-4 text-right">Level</th>
                                <th className="p-4 pr-6 text-right">XP</th>
                            </tr>
                        </thead>
                        <tbody className="text-gray-300">
                            {leaderboardData.length > 0 ? (
                                leaderboardData.map((member) => {
                                    const isCurrentUser =
                                        member.user_id === currentUserId;
                                    let rankColor = "text-blue-400";
                                    if (member.rank === 1)
                                        rankColor =
                                            "text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]";
                                    if (member.rank === 2)
                                        rankColor =
                                            "text-gray-300 drop-shadow-[0_0_10px_rgba(209,213,219,0.5)]";
                                    if (member.rank === 3)
                                        rankColor =
                                            "text-orange-400 drop-shadow-[0_0_10px_rgba(251,146,60,0.5)]";

                                    return (
                                        <tr
                                            key={member.user_id}
                                            className={`border-b border-white/5 transition-all ${isCurrentUser
                                                    ? "bg-blue-600/20 hover:bg-blue-600/30"
                                                    : "hover:bg-white/5"
                                                }`}
                                        >
                                            <td
                                                className={`p-4 pl-6 font-mono font-bold text-lg ${rankColor}`}
                                            >
                                                #{member.rank}
                                            </td>
                                            <td className="p-4">
                                                <div className="flex items-center gap-4">
                                                    {member.avatar ? (
                                                        <img
                                                            src={member.avatar}
                                                            alt=""
                                                            className="w-10 h-10 rounded-full bg-gray-700 shadow-md"
                                                        />
                                                    ) : (
                                                        <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold text-lg">
                                                            {member.username
                                                                .charAt(0)
                                                                .toUpperCase()}
                                                        </div>
                                                    )}
                                                    <div className="flex flex-col">
                                                        <span
                                                            className={`font-semibold text-lg ${isCurrentUser
                                                                    ? "text-blue-200"
                                                                    : "text-white"
                                                                }`}
                                                        >
                                                            {member.username}
                                                        </span>
                                                        {isCurrentUser && (
                                                            <span className="text-xs text-blue-400 font-medium">
                                                                You
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                            </td>
                                            <td className="p-4 text-right font-bold text-yellow-500 text-lg">
                                                {member.level}
                                            </td>
                                            <td className="p-4 pr-6 text-right text-gray-500 font-mono">
                                                {member.xp.toLocaleString()}
                                            </td>
                                        </tr>
                                    );
                                })
                            ) : (
                                <tr>
                                    <td
                                        colSpan={4}
                                        className="p-12 text-center text-gray-500 text-lg"
                                    >
                                        Setup leveling system to see the leaderboard
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </>
    );
}