import React, { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Trophy, Coins, Award, Crown, Target } from "lucide-react";
import { cn } from "../lib/utils";
import { Skeleton } from "./ui/skeleton";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";

interface LocalUser {
    username: string;
    value: string | number;
}

export interface LeaderboardData {
    topLevels: { username: string; level: number }[];
    topWealth: { username: string; balance: string }[];
    topNetWorth: { username: string; netWorth: string }[];
}

interface LeaderboardCardProps {
    data?: LeaderboardData;
    isLoading?: boolean;
    className?: string;
}

export function LeaderboardCard({ data, isLoading, className }: LeaderboardCardProps) {
    const [view, setView] = useState<"wealth" | "levels" | "networth">("wealth");

    if (isLoading) {
        return (
            <Card className={cn("glass-card border-none bg-card/40", className)}>
                <CardHeader className="flex flex-row items-center justify-between pb-2">
                    <CardTitle className="text-sm font-medium">Top Players</CardTitle>
                    <Trophy className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                    <div className="space-y-4">
                        {[1, 2, 3].map((i) => (
                            <div key={i} className="flex items-center gap-3">
                                <Skeleton className="h-8 w-8 rounded-full" />
                                <div className="space-y-1 flex-1">
                                    <Skeleton className="h-4 w-24" />
                                    <Skeleton className="h-3 w-12" />
                                </div>
                                <Skeleton className="h-4 w-16" />
                            </div>
                        ))}
                    </div>
                </CardContent>
            </Card>
        );
    }

    const currentList = view === "wealth" ? data?.topWealth : view === "networth" ? data?.topNetWorth : data?.topLevels;

    const getTitle = () => {
        switch (view) {
            case "wealth": return "Richest Users";
            case "networth": return "Highest Net Worth";
            case "levels": return "Top Levels";
        }
    }

    return (
        <Card className={cn("glass-card border-none transition-all duration-300", className)}>
            <CardHeader className="pb-2">
                <div className="flex flex-wrap items-center justify-between gap-4">
                    <CardTitle className="text-sm font-medium flex items-center gap-2 whitespace-nowrap">
                        {getTitle()}
                    </CardTitle>
                    <div className="flex bg-muted/50 rounded-lg p-0.5">
                        <Button
                            variant="ghost"
                            size="sm"
                            className={cn(
                                "h-6 px-2 text-xs rounded-md transition-all",
                                view === "wealth" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                            )}
                            onClick={() => setView("wealth")}
                        >
                            <Coins className="w-3 h-3 mr-1" />
                            Wealth
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            className={cn(
                                "h-6 px-2 text-xs rounded-md transition-all",
                                view === "levels" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                            )}
                            onClick={() => setView("levels")}
                        >
                            <Award className="w-3 h-3 mr-1" />
                            Levels
                        </Button>
                        <Button
                            variant="ghost"
                            size="sm"
                            className={cn(
                                "h-6 px-2 text-xs rounded-md transition-all",
                                view === "networth" ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
                            )}
                            onClick={() => setView("networth")}
                        >
                            <Target className="w-3 h-3 mr-1" />
                            Net Worth
                        </Button>
                    </div>
                </div>
            </CardHeader>
            <CardContent>
                <div className="space-y-4 animate-in fade-in slide-up duration-300 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar" key={view}>
                    {currentList?.map((user, index) => {
                        const isTop = index === 0;
                        const RankIcon = index === 0 ? Crown : index === 1 ? Trophy : Award;
                        const rankColor = index === 0 ? "text-yellow-500" : index === 1 ? "text-slate-400" : "text-orange-500";
                        const bgColor = index === 0 ? "bg-yellow-500/10 border-yellow-500/20" : index === 1 ? "bg-slate-400/10 border-slate-400/20" : "bg-orange-500/10 border-orange-500/20";

                        // Type guard or simple check because structure differs slightly or we can normalize
                        let valueDisplay = "";
                        if (view === "wealth") {
                            valueDisplay = `${Number((user as any).balance).toLocaleString()} AU`;
                        } else if (view === "networth") {
                            valueDisplay = `${Number((user as any).netWorth).toLocaleString()} AU`;
                        } else {
                            valueDisplay = `Lvl ${(user as any).level}`;
                        }

                        return (
                            <div key={user.username} className={cn(
                                "flex items-center gap-3 p-2 rounded-lg border transition-colors",
                                "hover:bg-muted/50 border-transparent hover:border-border/50",
                                isTop && "bg-primary/5 border-primary/10"
                            )}>
                                <div className={cn(
                                    "w-8 h-8 flex items-center justify-center rounded-full border text-xs font-bold",
                                    bgColor, rankColor
                                )}>
                                    {index + 1}
                                </div>

                                <div className="flex-1 min-w-0">
                                    <p className="text-sm font-medium truncate flex items-center gap-1.5">
                                        {user.username}
                                        {isTop && <Crown className="w-3 h-3 text-yellow-500 fill-yellow-500" />}
                                    </p>
                                </div>

                                <div className="text-right">
                                    <span className={cn(
                                        "text-xs font-bold font-mono",
                                        view === "wealth" ? "text-emerald-500" : view === "networth" ? "text-purple-500" : "text-blue-500"
                                    )}>
                                        {valueDisplay}
                                    </span>
                                </div>
                            </div>
                        );
                    })}

                    {(!currentList || currentList.length === 0) && (
                        <div className="text-center py-4 text-muted-foreground text-sm">
                            No data available
                        </div>
                    )}
                </div>
            </CardContent>
        </Card >
    );
}
