"use client";

import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
import LeaderboardRow from "@/components/app/LeaderboardRow";
import { useState } from "react";

const Leaderboards = () => {
    const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");

    const globalLeaderboard = [
        { rank: 1, username: "speedmaster_x", pb: "2:34.21", runsCount: 2341, category: "Any%" },
        { rank: 2, username: "algo_ninja", pb: "2:38.54", runsCount: 1876, category: "Any%" },
        { rank: 3, username: "clockwork", pb: "2:41.02", runsCount: 3102, category: "Any%" },
        { rank: 4, username: "fastfingers99", pb: "2:45.33", runsCount: 987, category: "Any%" },
        { rank: 5, username: "recursion_queen", pb: "2:47.89", runsCount: 1543, category: "Any%" },
        { rank: 6, username: "bitshifter", pb: "2:52.11", runsCount: 2109, category: "Any%" },
        { rank: 7, username: "nullpointer", pb: "2:54.67", runsCount: 876, category: "Any%" },
        { rank: 8, username: "stackattack", pb: "2:58.23", runsCount: 1234, category: "Any%" },
        { rank: 9, username: "looplegend", pb: "3:01.45", runsCount: 654, category: "Any%" },
        { rank: 10, username: "coderunner", pb: "3:05.78", runsCount: 1098, category: "Any%" },
    ];

    const weeklyLeaderboard = [
        { rank: 1, username: "weekly_warrior", pb: "2:51.33", runsCount: 156, category: "Any%" },
        { rank: 2, username: "speedmaster_x", pb: "2:53.12", runsCount: 89, category: "Any%" },
        { rank: 3, username: "newbie_grinder", pb: "2:58.67", runsCount: 234, category: "Any%" },
        { rank: 4, username: "algo_ninja", pb: "3:02.45", runsCount: 67, category: "Any%" },
        { rank: 5, username: "fresh_runner", pb: "3:05.89", runsCount: 45, category: "Any%" },
        { rank: 6, username: "practice_makes", pb: "3:08.12", runsCount: 112, category: "Any%" },
        { rank: 7, username: "splitmaster", pb: "3:12.34", runsCount: 78, category: "Any%" },
        { rank: 8, username: "grindtime", pb: "3:15.56", runsCount: 92, category: "Any%" },
        { rank: 9, username: "pb_hunter", pb: "3:18.90", runsCount: 56, category: "Any%" },
        { rank: 10, username: "reset_king", pb: "3:22.11", runsCount: 187, category: "Any%" },
    ];

    const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];

    return (
        <div className="min-h-screen pt-24 pb-16">
            <div className="container mx-auto px-6">
                {/* Header */}
                <div className="mb-10">
                    <h1 className="text-4xl font-bold text-foreground mb-2">Leaderboards</h1>
                    <p className="text-muted-foreground">The fastest runners in the game. Will you claim a spot?</p>
                </div>

                {/* Stats Row */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                    <div className="bg-card border border-border rounded-xl p-4 text-center">
                        <Globe className="h-5 w-5 text-primary mx-auto mb-2" />
                        <p className="text-2xl font-bold font-mono text-foreground">12,453</p>
                        <p className="text-xs text-muted-foreground">Total Runners</p>
                    </div>
                    <div className="bg-card border border-border rounded-xl p-4 text-center">
                        <Trophy className="h-5 w-5 text-gold mx-auto mb-2" />
                        <p className="text-2xl font-bold font-mono text-foreground">2:34.21</p>
                        <p className="text-xs text-muted-foreground">World Record</p>
                    </div>
                    <div className="bg-card border border-border rounded-xl p-4 text-center">
                        <TrendingUp className="h-5 w-5 text-emerald-400 mx-auto mb-2" />
                        <p className="text-2xl font-bold font-mono text-foreground">847K</p>
                        <p className="text-xs text-muted-foreground">Runs This Week</p>
                    </div>
                    <div className="bg-card border border-border rounded-xl p-4 text-center">
                        <Calendar className="h-5 w-5 text-primary mx-auto mb-2" />
                        <p className="text-2xl font-bold font-mono text-foreground">5d 12h</p>
                        <p className="text-xs text-muted-foreground">Until Reset</p>
                    </div>
                </div>

                {/* Tabs and Filters */}
                <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
                    {/* Global/Weekly Toggle */}
                    <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
                        <button
                            onClick={() => setActiveTab("global")}
                            className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${activeTab === "global"
                                ? "bg-primary text-primary-foreground"
                                : "text-muted-foreground hover:text-foreground"
                                }`}
                        >
                            <Globe className="h-4 w-4" />
                            Global
                        </button>
                        <button
                            onClick={() => setActiveTab("weekly")}
                            className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${activeTab === "weekly"
                                ? "bg-primary text-primary-foreground"
                                : "text-muted-foreground hover:text-foreground"
                                }`}
                        >
                            <Calendar className="h-4 w-4" />
                            Weekly
                        </button>
                    </div>

                    {/* Category Filter */}
                    <div className="flex gap-2 flex-wrap">
                        {categories.map((cat, i) => (
                            <button
                                key={cat}
                                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${i === 0
                                    ? "bg-primary/10 text-primary border border-primary/30"
                                    : "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
                                    }`}
                            >
                                {cat}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Leaderboard Table */}
                <div className="bg-card border border-border rounded-xl overflow-hidden">
                    <table className="w-full">
                        <thead className="bg-secondary/50">
                            <tr>
                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Rank</th>
                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Runner</th>
                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">PB</th>
                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Runs</th>
                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Category</th>
                            </tr>
                        </thead>
                        <tbody>
                            {(activeTab === "global" ? globalLeaderboard : weeklyLeaderboard).map((entry, i) => (
                                <LeaderboardRow key={entry.username} {...entry} index={i} />
                            ))}
                        </tbody>
                    </table>
                </div>

                {/* Pagination */}
                <div className="flex items-center justify-center gap-2 mt-6">
                    <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
                        Previous
                    </button>
                    {[1, 2, 3, '...', 50].map((page, i) => (
                        <button
                            key={i}
                            className={`px-3 py-1.5 rounded-lg transition-all ${page === 1
                                ? "bg-primary text-primary-foreground"
                                : "bg-secondary text-muted-foreground hover:text-foreground"
                                }`}
                        >
                            {page}
                        </button>
                    ))}
                    <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
                        Next
                    </button>
                </div>
            </div>
        </div>
    );
};

export default Leaderboards;