import { UserBadge } from "@/types/models";
import { useTranslations } from "next-intl";
import { ShoppingBag, Award, Users, Trophy, Star, ShieldCheck, Zap } from "lucide-react";

const ICON_MAP: Record<string, any> = {
    "shopping-bag": ShoppingBag,
    "award": Award,
    "users": Users,
    "trophy": Trophy,
    "star": Star,
    "shield-check": ShieldCheck,
    "zap": Zap
};

const COLOR_MAP: Record<string, string> = {
    "success": "bg-emerald-100 text-emerald-600 border-emerald-200 shadow-emerald-50",
    "warning": "bg-amber-100 text-amber-600 border-amber-200 shadow-amber-50",
    "danger": "bg-rose-100 text-rose-600 border-rose-200 shadow-rose-50",
    "primary": "bg-blue-100 text-blue-600 border-blue-200 shadow-blue-50",
    "secondary": "bg-purple-100 text-purple-600 border-purple-200 shadow-purple-50",
};

export function BadgesTab({ badges }: { badges: UserBadge[] }) {
    const t = useTranslations();

    if (!badges || badges.length === 0) {
        return (
            <div className="rounded-2xl p-8 border-2 border-dashed border-gray-100 bg-gray-50/30 flex flex-col items-center justify-center text-center space-y-4" dir="rtl">
                <div className="p-4 rounded-full bg-white shadow-sm border border-gray-50 text-gray-400">
                    <Trophy className="size-10 opacity-20" />
                </div>
                <div className="space-y-1">
                    <h3 className="text-xl font-bold font-black text-gray-900">{t("profile.badges_not_found") || "No Badges Yet"}</h3>
                    <p className="text-sm text-gray-500 max-w-xs mx-auto">
                        {t("profile.no-badges-desc") || "Continue learning and interacting with the platform to unlock achievement badges!"}
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700" dir="rtl">
            {/* Header info */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div className="space-y-1 text-start">
                    <h2 className="text-2xl font-black text-gray-900 flex items-center gap-3">
                        {t("profile.badges") || "Achievements"}
                        <span className="px-2.5 py-0.5 rounded-full bg-primary-tw-50 text-primary-tw-600 text-xs font-black border border-primary-tw-100">
                            {badges.length}
                        </span>
                    </h2>
                    <p className="text-sm text-gray-500">
                        {t("profile.badges-subtitle") || "Special rewards collected during your learning journey"}
                    </p>
                </div>
            </div>

            {/* Badges Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {badges.map((badge) => {
                    const Icon = ICON_MAP[badge.icon] || Trophy;
                    const colorClasses = COLOR_MAP[badge.color] || COLOR_MAP.primary;

                    return (
                        <div 
                            key={badge.id}
                            className="group relative bg-white rounded-2xl p-6 border border-gray-100 hover:border-primary-tw-200 hover:shadow-xl hover:shadow-primary-tw-500/5 transition-all duration-300"
                        >
                            <div className="flex flex-col items-start gap-4">
                                <div className={`size-14 rounded-2xl ${colorClasses} border flex items-center justify-center shadow-lg transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6`}>
                                    <Icon className="size-7" />
                                </div>
                                <div className="space-y-1.5 overflow-hidden text-start">
                                    <h3 className="font-black text-lg text-gray-900 group-hover:text-primary-tw-600 transition-colors">
                                        {badge.name}
                                    </h3>
                                    <p className="text-sm text-gray-500 leading-relaxed line-clamp-2">
                                        {badge.description}
                                    </p>
                                </div>
                                <div className="mt-2 pt-4 border-t border-gray-50 flex items-center justify-between">
                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">
                                        {t("profile.unlocked") || "Unlocked"}
                                    </span>
                                    <span className="text-xs font-bold text-gray-600 bg-gray-50 px-2 py-0.5 rounded">
                                        {badge.unlocked_at?.split(' ')?.[0]}
                                    </span>
                                </div>
                            </div>

                            {/* Decorative background element */}
                            <div className={`absolute -top-2 -right-2 size-24 rounded-full ${colorClasses.split(' ')[0]} blur-3xl opacity-0 group-hover:opacity-20 transition-opacity duration-700 -z-10`} />
                        </div>
                    );
                })}
            </div>
        </div>
    );
}