window.OneMoreDice = function OneMoreDice({
    t,
    round,
    balance,
    currentDice,
    currentImpact,
    isRolling,
    rollDice,
    skins,
    diceSkin,
    formatMoney,
    getBalanceColor,
    history
}) {
    const Icons = window.Icons;
    const motion = window.Motion?.motion || window.Motion || { p: 'p', div: 'div' };
    const AnimatePresence = window.Motion?.AnimatePresence || (({ children }) => <>{children}</>);
    
    // Animated Balance Counter Logic
    const [displayBalance, setDisplayBalance] = React.useState(balance);
    React.useEffect(() => {
        let start = displayBalance;
        const end = balance;
        const duration = 800;
        const startTime = performance.now();
        
        const animate = (currentTime) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
            const current = Math.floor(start + (end - start) * easeProgress);
            setDisplayBalance(current);
            if (progress < 1) requestAnimationFrame(animate);
        };
        requestAnimationFrame(animate);
    }, [balance]);

    return (
        <div className="w-full max-w-5xl grid grid-cols-1 lg:grid-cols-4 gap-8">
            <div className="lg:col-span-3 flex flex-col gap-6">
                <div className="glass-card rounded-[2rem] p-6 flex flex-col sm:flex-row justify-between items-center gap-6 shadow-xl relative overflow-hidden">
                    <div className="absolute top-0 left-0 w-1 h-full bg-indigo-500"></div>
                    <div className="text-center sm:text-left">
                        <p className="text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] mb-1">{t.round}</p>
                        <div className="overflow-hidden">
                            <motion.p 
                                key={round}
                                initial={{ y: 20, opacity: 0 }}
                                animate={{ y: 0, opacity: 1 }}
                                className="text-3xl font-black text-white"
                            >
                                {round} <span className="text-slate-600 text-xl font-bold">/ {(window.GAME_CONFIG?.oneMoreDice?.TOTAL_ROUNDS || 10)}</span>
                            </motion.p>
                        </div>
                    </div>
                    <div className="text-center group cursor-default">
                        <p className="text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] mb-1">{t.multiplier}</p>
                        <p className={`text-2xl font-black transition-all duration-300 ${round > Math.floor((window.GAME_CONFIG?.oneMoreDice?.TOTAL_ROUNDS || 10) * 0.7) ? 'text-amber-400 scale-105' : 'text-indigo-400'}`}>
                            {formatMoney((window.GAME_CONFIG?.oneMoreDice?.STARTING_MULTIPLIER || 5000) * (1 + (round - 1) * (window.GAME_CONFIG?.oneMoreDice?.MULTIPLIER_GROWTH_RATE || 1)))}
                        </p>
                    </div>
                    <div className="text-center sm:text-right">
                        <p className="text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] mb-1">{t.balance}</p>
                        <motion.p 
                            animate={balance !== displayBalance ? { scale: [1, 1.05, 1], y: [0, -2, 0] } : {}}
                            className={`text-4xl font-black tracking-tighter transition-colors duration-500 ${getBalanceColor(balance)} drop-shadow-[0_0_15px_rgba(255,255,255,0.1)]`}
                        >
                            {formatMoney(displayBalance)}
                        </motion.p>
                    </div>
                </div>

                <div className="glass-card rounded-[2.5rem] p-10 flex flex-col items-center justify-center min-h-[400px] shadow-2xl relative overflow-hidden group">
                    <div className={`absolute inset-0 opacity-10 transition-colors duration-1000 ${currentImpact > 0 ? 'bg-emerald-500' : currentImpact < 0 ? 'bg-rose-500' : 'bg-transparent'}`}></div>

                    <div className="relative z-10 flex flex-col items-center w-full">
                        {currentDice === null ? (
                            <div className="text-center space-y-8">
                                <div className="w-32 h-32 mx-auto bg-slate-800/50 rounded-[2rem] flex items-center justify-center shadow-inner border border-white/5 relative">
                                    {(() => {
                                        const currentSkin = (skins && skins.find(s => s.id === diceSkin)) || { color: 'text-slate-600', glow: '' };
                                        return (
                                            <>
                                                <Icons.Dices size={64} className={currentSkin.color} />
                                                <div className={`absolute inset-0 blur-2xl rounded-full ${currentSkin.glow}`}></div>
                                            </>
                                        );
                                    })()}
                                </div>
                                <button
                                    onClick={rollDice}
                                    disabled={isRolling}
                                    className="px-10 py-5 rounded-2xl bg-white text-slate-950 hover:bg-slate-100 font-black text-xl shadow-xl transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:pointer-events-none relative overflow-hidden group"
                                >
                                    <div className="absolute inset-0 bg-slate-950/5 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700 pointer-events-none"></div>
                                    {t.rollDice}
                                </button>
                            </div>
                        ) : (
                            <div className="text-center space-y-6 w-full">
                                <p className="text-slate-500 font-black tracking-[0.3em] uppercase text-[10px]">{isRolling ? t.rolling : t.diceResult}</p>
                                <div className={`text-8xl font-black italic tracking-tighter ${isRolling ? 'text-white animate-dice' : getBalanceColor(currentImpact)}`}>
                                    {currentDice}
                                </div>
                                {!isRolling && currentImpact !== null && (
                                    <div className="animate-bounce">
                                        {currentImpact !== 0 ? (
                                            <p className={`text-2xl font-black flex items-center justify-center gap-3 ${getBalanceColor(currentImpact)}`}>
                                                {currentImpact > 0 ? '+' : ''}{formatMoney(currentImpact)}
                                            </p>
                                        ) : (
                                            <p className="text-xl font-bold text-slate-500">{t.neutral}</p>
                                        )}
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                </div>
            </div>

            <div className="glass-card rounded-[2.5rem] p-6 shadow-xl flex flex-col h-full lg:max-h-[600px]">
                <h3 className="text-lg font-black mb-6 flex items-center gap-3 text-white uppercase tracking-tighter">
                    <Icons.Dices size={18} className="text-indigo-400" /> {t.history}
                </h3>
                <div className="flex-1 overflow-y-auto pr-2 space-y-3 custom-scrollbar">
                    {history.length === 0 ? (
                        <div className="h-full flex flex-col items-center justify-center text-slate-600">
                            <p className="text-center italic text-xs">{t.noHistory}</p>
                        </div>
                    ) : (
                        history.slice().reverse().map((h, idx) => (
                            <div key={idx} className="bg-white/[0.03] rounded-2xl p-4 border border-white/5 flex flex-col gap-3 group hover:bg-white/[0.05] transition-colors overflow-hidden">
                                <div className="flex justify-between items-center text-slate-500 text-[10px] font-black uppercase tracking-wider">
                                    <span>{t.round} {h.round}</span>
                                    <span className="bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[9px] border border-white/5">D{h.dice}</span>
                                </div>
                                <div className="flex justify-between items-center gap-2">
                                    <span className="text-[10px] text-slate-600 font-bold uppercase tracking-tighter truncate max-w-[120px]">Mltp: {formatMoney(h.multiplier)}</span>
                                    <div className={`text-md font-black whitespace-nowrap ${getBalanceColor(h.impact)}`}>
                                        {h.impact > 0 ? '+' : ''}{formatMoney(h.impact)}
                                    </div>
                                </div>
                            </div>
                        ))
                    )}
                </div>
            </div>
        </div>
    );
};