import { Trophy, Flame } from 'lucide-react';
import { Progress } from "@/components/ui/progress";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import {
    getLevelFromXP,
    getNextLevelXP,
    getLevelProgress,
    getRankKey
} from "@/lib/gamification";
import { LevelDetailsModal } from './LevelDetailsModal';

interface GamificationBarProps {
    xp: number;
    level: number; // Keeping prop for backwards compat, but should calculate from XP usually
    streak: number;
}

export function GamificationBar({ xp, streak }: GamificationBarProps) {
    const { t } = useTranslation();
    const [isModalOpen, setIsModalOpen] = useState(false);

    // Use centralized logic
    const computedLevel = getLevelFromXP(xp);
    const nextLevelXP = getNextLevelXP(computedLevel);
    const progress = getLevelProgress(xp);
    const rankKey = getRankKey(computedLevel);

    return (
        <>
            <div
                className="p-4 border-b bg-sidebar-accent/10 cursor-pointer hover:bg-sidebar-accent/20 transition-colors"
                onClick={() => setIsModalOpen(true)}
            >
                <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                        <div className="bg-yellow-500/20 p-1 rounded-md text-yellow-600">
                            <Trophy className="size-4" />
                        </div>
                        <div>
                            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                                {t('gamification.level', { level: computedLevel })}
                            </span>
                            <div className="text-sm font-bold">
                                {t(`ranks.${rankKey}`)}
                            </div>
                        </div>
                    </div>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <div className="flex items-center gap-1.5 px-2 py-1 bg-orange-500/10 rounded-md border border-orange-500/20 cursor-help">
                                <Flame className="w-4 h-4 text-orange-500 fill-orange-500" />
                                <span className="text-sm font-bold text-orange-600 dark:text-orange-400">{streak}</span>
                            </div>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>{t('gamification.streakTooltip', 'Log in daily to increase your streak!')}</p>
                            <p className="text-xs text-muted-foreground mt-1">{t('gamification.streakBonus', 'Weekly & Monthly bonuses available.')}</p>
                        </TooltipContent>
                    </Tooltip>
                </div>

                <div className="space-y-1">
                    <div className="flex justify-between text-xs text-muted-foreground">
                        <span>{t('gamification.xp', { count: xp })}</span>
                        <span>{t('gamification.nextLevel', { count: nextLevelXP })}</span>
                    </div>
                    <Progress value={progress} className="h-2 bg-slate-200" />
                </div>
            </div>

            <LevelDetailsModal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                xp={xp}
            />
        </>
    );
}

