import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Loader2, Trophy, Medal } from "lucide-react";

interface LeaderboardUser {
    id: string;
    username: string;
    xp: number;
    level: number;
}

export default function LeaderboardPage() {
    const { t } = useTranslation();
    const { data: leaderboard, isLoading } = useQuery<LeaderboardUser[]>({
        queryKey: ["/api/leaderboard"],
    });

    if (isLoading) {
        return (
            <div className="flex h-[50vh] items-center justify-center">
                <Loader2 className="h-8 w-8 animate-spin text-primary" />
            </div>
        );
    }

    return (
        <div className="space-y-6 max-w-4xl mx-auto p-4 md:p-8">
            <div className="flex items-center gap-3">
                <div className="bg-yellow-500/20 p-3 rounded-xl">
                    <Trophy className="h-8 w-8 text-yellow-500" />
                </div>
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">{t('leaderboardPage.title')}</h1>
                    <p className="text-muted-foreground">{t('leaderboardPage.subtitle')}</p>
                </div>
            </div>

            <Card className="border-border/50 shadow-sm">
                <CardHeader>
                    <CardTitle>{t('leaderboardPage.globalRankings')}</CardTitle>
                    <CardDescription>{t('leaderboardPage.globalRankingsDesc')}</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="space-y-2">
                        {leaderboard?.map((user, index) => (
                            <div
                                key={user.id}
                                className={`flex items-center justify-between p-4 rounded-lg border ${index === 0 ? 'bg-yellow-500/10 border-yellow-500/50' :
                                    index === 1 ? 'bg-slate-400/10 border-slate-400/50' :
                                        index === 2 ? 'bg-amber-700/10 border-amber-700/50' :
                                            'bg-card hover:bg-accent/50 transition-colors'
                                    }`}
                            >
                                <div className="flex items-center gap-4">
                                    <div className={`flex items-center justify-center w-8 h-8 rounded-full font-bold ${index < 3 ? 'text-foreground' : 'text-muted-foreground'
                                        }`}>
                                        {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#${index + 1}`}
                                    </div>
                                    <div className="flex flex-col">
                                        <span className="font-semibold text-lg">{user.username}</span>
                                        <span className="text-xs text-muted-foreground">{t('gamification.level', { level: user.level })}</span>
                                    </div>
                                </div>
                                <div className="flex items-center gap-2">
                                    <span className="font-mono font-bold text-lg text-primary">{user.xp}</span>
                                    <span className="text-xs text-muted-foreground uppercase tracking-wider">{t('leaderboardPage.xp')}</span>
                                </div>
                            </div>
                        ))}

                        {leaderboard?.length === 0 && (
                            <div className="text-center py-8 text-muted-foreground">
                                {t('leaderboardPage.noUsers')}
                            </div>
                        )}
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}

