import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Progress } from "@/components/ui/progress";
import { Trophy, Star, TrendingUp } from "lucide-react";
import { useTranslation } from "react-i18next";
import {
    getLevelFromXP,
    getNextLevelXP,
    getLevelProgress,
    getRankKey
} from "@/lib/gamification";

interface LevelDetailsModalProps {
    isOpen: boolean;
    onClose: () => void;
    xp: number;
}

export function LevelDetailsModal({ isOpen, onClose, xp }: LevelDetailsModalProps) {
    const { t } = useTranslation();

    const level = getLevelFromXP(xp);
    const nextLevelXP = getNextLevelXP(level);
    const progress = getLevelProgress(xp);
    const rankKey = getRankKey(level);

    // Calculate XP needed for next level relative to current level start
    // Note: For display, we usually show Total XP / Threshold or Current Level XP / needed
    // Let's show Total XP / Next Threshold for clarity as typical in RPGs

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <Trophy className="h-5 w-5 text-yellow-500" />
                        {t("achievements.levelDetails")}
                    </DialogTitle>
                </DialogHeader>

                <div className="flex flex-col items-center py-6 space-y-6">
                    {/* Level Badge */}
                    <div className="relative">
                        <div className="h-24 w-24 rounded-full bg-gradient-to-br from-yellow-100 to-yellow-50 dark:from-yellow-900/20 dark:to-yellow-800/20 flex items-center justify-center border-4 border-yellow-200 dark:border-yellow-700">
                            <span className="text-4xl font-bold text-yellow-600 dark:text-yellow-400">
                                {level}
                            </span>
                        </div>
                        <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-yellow-500 text-white text-xs font-bold rounded-full shadow-md whitespace-nowrap">
                            {t(`gamification.level`, { level })}
                        </div>
                    </div>

                    {/* Rank Title */}
                    <div className="text-center">
                        <h3 className="text-2xl font-bold text-foreground">
                            {t(`ranks.${rankKey}`)}
                        </h3>
                        <p className="text-sm text-muted-foreground mt-1">
                            {t("achievements.xpDescription")}
                        </p>
                    </div>

                    {/* Progress Section */}
                    <div className="w-full space-y-2">
                        <div className="flex justify-between text-sm">
                            <span className="font-medium text-muted-foreground">
                                {t("gamification.currentXP", { current: xp, next: nextLevelXP })}
                            </span>
                            <span className="font-bold text-primary">
                                {Math.round(progress)}%
                            </span>
                        </div>
                        <Progress value={progress} className="h-4" />
                    </div>

                    {/* Benefits / Rewards Placeholder */}
                    <div className="w-full bg-muted/50 rounded-lg p-4 space-y-3">
                        <h4 className="font-medium text-sm flex items-center gap-2">
                            <Star className="h-4 w-4 text-primary" />
                            {t("achievements.nextReward")}
                        </h4>
                        <div className="flex items-center gap-3 text-sm text-muted-foreground">
                            <TrendingUp className="h-8 w-8 text-green-500 p-1.5 bg-green-100 dark:bg-green-900/30 rounded-md" />
                            <span>{t('achievements.unlockReward', { level: level + 1 })}</span>
                        </div>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}
