"use client";

import { useState } from "react";
import { Menu, X, Trophy, ArrowBigUp } from "lucide-react";
import LevelingEditor from "@/components/LevelingEditor";
import type { Guild, LeaderboardMember } from "@/lib/discord";

type TabType = "leaderboard" | "leveling";

interface DashboardContentProps {
    currentGuild: Guild;
    leaderboardData: LeaderboardMember[];
    currentUserRank?: LeaderboardMember;
    currentUserId?: string;
}

export default function DashboardContent({
    currentGuild,
    leaderboardData,
    currentUserRank,
    currentUserId,
}: DashboardContentProps) {
    const [activeTab, setActiveTab] = useState<TabType>("leaderboard");
    const [sidebarOpen, setSidebarOpen] = useState(false);

    const menuItems = [
        { id: "leaderboard" as TabType, label: "Leaderboard", icon: Trophy },
        { id: "leveling" as TabType, label: "Leveling", icon: ArrowBigUp },
    ];

    const handleTabChange = (tab: TabType) => {
        setActiveTab(tab);
        setSidebarOpen(false);
    };

    return (
        <div className="flex flex-1 pt-16 sm:pt-20 h-screen overflow-hidden">
            {/* Mobile Menu Button */}
            <button
                onClick={() => setSidebarOpen(!sidebarOpen)}
                className="fixed bottom-4 right-4 z-50 lg:hidden p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all"
            >
                {sidebarOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>

            {/* Mobile Sidebar Overlay */}
            {sidebarOpen && (
                <div
                    className="fixed inset-0 bg-black/60 z-40 lg:hidden backdrop-blur-sm"
                    onClick={() => setSidebarOpen(false)}
                />
            )}

            {/* Sidebar */}
            <div
                className={`fixed lg:relative inset-y-0 left-0 z-40 w-64 flex-shrink-0 bg-black/90 lg:bg-black/20 border-r border-white/10 overflow-y-auto backdrop-blur-md lg:backdrop-blur-sm transform transition-transform duration-300 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
                    }`}
            >
                <div className="p-4 space-y-2 pt-20 lg:pt-4">
                    {menuItems.map((item) => {
                        const Icon = item.icon;
                        const isActive = activeTab === item.id;

                        return (
                            <button
                                key={item.id}
                                onClick={() => handleTabChange(item.id)}
                                className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 ${isActive
                                    ? "bg-blue-600/20 text-blue-400 border border-blue-600/30"
                                    : "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
                                    }`}
                            >
                                <Icon className="w-5 h-5" />
                                {item.label}
                            </button>
                        );
                    })}
                </div>
            </div>

            {/* Main Area */}
            <div className="flex-1 overflow-y-auto bg-transparent p-4 sm:p-6 lg:p-8">
                <div className="max-w-5xl mx-auto">
                    {activeTab === "leaderboard" && (
                        <LeaderboardView
                            leaderboardData={leaderboardData}
                            currentUserRank={currentUserRank}
                            currentUserId={currentUserId}
                        />
                    )}

                    {activeTab === "leveling" && (
                        <LevelingEditor guildId={currentGuild.id} />
                    )}
                </div>
            </div>
        </div>
    );
}

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

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>
        </>
    );
}