function Unlocks({ showUnlocks, setShowUnlocks, t, skins, totalWealth, currentUser, diceSkin, setDiceSkin, formatMoney, lang, Icons }) {
    if (!showUnlocks) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/95 backdrop-blur-xl">
            <div className="w-full max-w-4xl bg-slate-900 border border-white/10 rounded-[3rem] overflow-hidden shadow-2xl">
                <div className="p-8 border-b border-white/5 flex justify-between items-center">
                    <h3 className="text-2xl font-black flex items-center gap-3">
                        <div className="p-2 bg-emerald-500 rounded-lg"><Icons.Dices size={20} className="text-white" /></div>
                        {t.unlocks}
                    </h3>
                    <button onClick={() => setShowUnlocks(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors">
                        <Icons.XCircle size={24} />
                    </button>
                </div>
                <div className="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    {skins.map(skin => {
                        const isPurchasable = skin.isPurchasable;
                        const isOwnedPremium = isPurchasable && currentUser && window.App?.userProfile?.ownedSkins?.includes(skin.id);
                        const realUnlocked = isPurchasable ? isOwnedPremium : totalWealth >= skin.req;
                        const isUnlocked = realUnlocked || currentUser?.username === 'admin';
                        const isConfiscated = isPurchasable && window.App?.userProfile?.confiscatedSkins?.includes(skin.id);

                        return (
                            <div key={skin.id} className={`p-6 rounded-[2rem] border-2 transition-all relative overflow-hidden ${isConfiscated ? 'border-rose-500/30 bg-rose-500/5' : diceSkin === skin.id ? 'border-indigo-500 bg-indigo-500/5' : 'border-white/5 bg-white/[0.02]'}`}>
                                {isConfiscated && (
                                    <div className="absolute inset-0 bg-rose-950/60 flex items-center justify-center z-10 rounded-[1.8rem]">
                                        <div className="text-center">
                                            <Icons.Lock size={24} className="text-rose-500 mx-auto mb-1" />
                                            <p className="debtor-badge">{t.skinConfiscated}</p>
                                        </div>
                                    </div>
                                )}
                                <div className={`w-16 h-16 rounded-2xl mb-4 flex items-center justify-center bg-slate-950 border border-white/5 mx-auto relative ${isUnlocked && !isConfiscated ? '' : 'grayscale opacity-50'} ${skin.neon && isUnlocked ? 'neon-dice' : ''}`}>
                                    <Icons.Dices size={32} className={skin.color} />
                                    {!isUnlocked && !isPurchasable && <div className="absolute inset-0 flex items-center justify-center bg-slate-900/40 rounded-2xl"><Icons.XCircle size={20} className="text-rose-500" /></div>}
                                    <div className={`absolute inset-0 blur-2xl rounded-full ${skin.glow}`}></div>
                                </div>
                                <h4 className="text-center font-black mb-1">{skin.name}</h4>
                                <p className="text-center text-[10px] text-slate-500 font-bold mb-4 uppercase tracking-tighter">
                                    {isConfiscated ? t.skinConfiscatedDesc : isUnlocked ? (realUnlocked ? t.unlocked : (lang === 'TR' ? 'Admin Erişimi 👑' : 'Admin Access 👑')) : isPurchasable ? (lang === 'TR' ? 'Marketten Satın Al' : 'Buy from Shop') : `${t.wealthGoal}: ${formatMoney(skin.req)}`}
                                </p>
                                <button
                                    disabled={!isUnlocked || diceSkin === skin.id || isConfiscated}
                                    onClick={() => setDiceSkin(skin.id)}
                                    className={`w-full py-3 rounded-xl font-black text-sm transition-all ${diceSkin === skin.id ? 'bg-indigo-500 text-white' : isUnlocked && !isConfiscated ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-800 text-slate-600'}`}
                                >
                                    {diceSkin === skin.id ? (t.equipped || 'Equipped') : isUnlocked && !isConfiscated ? (t.equip || 'Equip') : t.locked}
                                </button>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}

window.Unlocks = Unlocks;