window.CardPath = function CardPath({
    t,
    cpStep,
    cpRounds,
    cpPot,
    cpStatus,
    cpRevealing,
    cpDeck,
    cpSelection,
    cpKeptIds,
    cpDiscardedIds,
    cpKeepChoice,
    cpRemovingIds,
    cpVanishIds,
    cpRevealedIds,
    cpRemovedCards,
    handleCardSelect,
    confirmKeepChoice,
    formatMoney,
    diceSkin,
    skins,
    lang,
    adminStats,
    isAdmin
}) {
    const Icons = window.Icons;
    const _m = window.Motion?.motion || window.Motion || window.framerMotion || { div: 'div', h3: 'h3', p: 'p', span: 'span', button: 'button' };
    const { AnimatePresence, motion } = window.Motion || { AnimatePresence: (({ children }) => children), motion: _m };


    const [showAdminInsights, setShowAdminInsights] = React.useState(false);
    
    const currentSkin = (skins && skins.find(s => s.id === diceSkin)) || { id: 'default', color: 'text-indigo-400', glow: 'bg-indigo-500/5' };

    // Animated Pot Counter Logic
    const [displayPot, setDisplayPot] = React.useState(cpPot);
    const lastEndValue = React.useRef(cpPot);

    React.useEffect(() => {
        if (cpPot === lastEndValue.current) return;
        
        let start = displayPot;
        const end = cpPot;
        lastEndValue.current = end;
        
        const duration = 800; // ms
        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);
            setDisplayPot(current);
            if (progress < 1) requestAnimationFrame(animate);
        };
        requestAnimationFrame(animate);
    }, [cpPot]);

    const skinColorClass = currentSkin.id === 'gold' ? 'border-amber-500/50 text-amber-400 shadow-[0_0_20px_rgba(245,158,11,0.2)]' : 
                          currentSkin.id === 'platinum' ? 'border-cyan-500/50 text-cyan-400 shadow-[0_0_20px_rgba(34,211,238,0.2)]' : 
                          'border-indigo-500/50 text-indigo-400 shadow-[0_0_20px_rgba(99,102,241,0.2)]';

    const activeCards = cpDeck.filter(card => {
        const isKept = cpKeptIds.includes(card.id);
        const isDiscarded = cpDiscardedIds.includes(card.id);
        const isRemoved = (cpRemovedCards || []).some(rc => rc.id === card.id);
        const isBeingRemoved = (cpRemovingIds || []).includes(card.id);
        const isVanishing = (cpVanishIds || []).includes(card.id);
        return !isKept && !isDiscarded && !isRemoved && !isBeingRemoved && !isVanishing;
    });

    return (
        <div className="w-full max-w-[1700px] grid grid-cols-1 lg:grid-cols-12 gap-4 px-4 py-1">
            {/* Left Sidebar: Narrower & Taller */}
            <div className="lg:col-span-2 flex flex-col gap-4 order-2 lg:order-1">
                <div className="glass-card rounded-[2rem] p-5 shadow-xl flex flex-col h-[650px] border border-white/5 bg-slate-900/60 sticky top-2">
                    <h3 className="text-xs font-black mb-4 flex items-center gap-3 text-white uppercase tracking-widest opacity-80">
                        <Icons.Activity size={16} className="text-indigo-400" /> {t.analysis || (lang === 'TR' ? 'ANALİZ' : 'STATS')}
                    </h3>
                    <div className="flex-1 overflow-y-auto pr-2 space-y-1 custom-scrollbar mb-4">
                        {(() => {
                            const remainingValues = activeCards.map(card => card.v).sort((a, b) => b - a);
                            const counts = {};
                            remainingValues.forEach(v => counts[v] = (counts[v] || 0) + 1);
                            const uniqueValues = Object.keys(counts).map(Number).sort((a, b) => b - a);

                            return uniqueValues.map((val, idx) => (
                                <div key={idx} className="flex items-center justify-between p-2 bg-white/[0.03] border border-white/5 rounded-xl hover:bg-white/[0.06] transition-colors group">
                                    <div className="flex items-center gap-2">
                                        {val > 0 ? <Icons.TrendingUp size={12} className="text-emerald-500" /> : 
                                         val < 0 ? <Icons.TrendingDown size={12} className="text-rose-500" /> : 
                                         <Icons.Meh size={12} className="text-slate-500" />}
                                        <span className={`text-[12px] font-black ${val > 0 ? 'text-emerald-400' : val < 0 ? 'text-rose-400' : 'text-slate-400'}`}>
                                            {formatMoney(val)}
                                        </span>
                                    </div>
                                    {counts[val] > 1 && (
                                        <span className="text-[9px] font-black bg-white/10 text-white/50 px-1 py-0.5 rounded-md group-hover:bg-indigo-500/20 group-hover:text-indigo-300 transition-colors">
                                            x{counts[val]}
                                        </span>
                                    )}
                                </div>
                            ));
                        })()}
                    </div>
                        {(() => {
                            if (!cpRemovedCards || cpRemovedCards.length === 0) return null;
                            return (
                                <div className="mt-4 pt-3 border-t border-white/10">
                                    <p className="text-[10px] font-black text-amber-500/50 uppercase tracking-widest text-center mb-2">
                                        {t.removedList || 'REMOVED'}
                                    </p>
                                    <div className="flex flex-wrap justify-center gap-1">
                                        {cpRemovedCards.map((card, idx) => (
                                            <div key={idx} className="px-1.5 py-0.5 bg-rose-500/10 border border-rose-500/20 rounded text-[9px] font-black text-rose-500 line-through opacity-50">
                                                {formatMoney(card.v)}
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            );
                        })()}

                        <div className="mt-auto pt-3 border-t border-white/10">
                        <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest text-center mb-2">
                            {t.probability || (lang === 'TR' ? 'ŞANS ORANI' : 'PROBABILITY')}
                        </p>
                        <div className="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden flex shadow-inner">
                            {(() => {
                                const remaining = activeCards.map(c => c.v);
                                const total = remaining.length || 1;
                                const positive = remaining.filter(v => v > 0).length;
                                const neutral = remaining.filter(v => v === 0).length;
                                const p1 = (positive / total) * 100;
                                const p2 = (neutral / total) * 100;
                                return (
                                    <>
                                        <div style={{ width: `${p1}%` }} className="h-full bg-emerald-500"></div>
                                        <div style={{ width: `${p2}%` }} className="h-full bg-slate-500"></div>
                                        <div className="flex-1 h-full bg-rose-500"></div>
                                    </>
                                );
                            })()}
                        </div>
                    </div>
                </div>
            </div>

            {/* Main Content: 8-8-4 Layout */}
            <div className="lg:col-span-10 flex flex-col gap-3 order-1 lg:order-2">
                {/* Header Stats: Super compact */}
                <div className="glass-card rounded-[1.5rem] py-2 px-6 flex justify-between items-center shadow-xl relative overflow-hidden bg-slate-900/80">
                    <div className={`absolute top-0 left-0 w-1 h-full ${currentSkin.id === 'gold' ? 'bg-amber-500' : currentSkin.id === 'platinum' ? 'bg-cyan-500' : 'bg-indigo-500'}`}></div>
                    <div className="flex items-center gap-16">
                        <div>
                            <p className="text-slate-500 text-xs font-black uppercase tracking-[0.2em] mb-2">{t.step}</p>
                            <AnimatePresence mode="wait">
                                <motion.p key={cpStep} initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="text-5xl font-black text-white tracking-tighter tabular-nums">
                                    {cpStep}<span className="text-slate-600 text-2xl font-bold opacity-30 ml-2">/ {cpRounds}</span>
                                </motion.p>
                            </AnimatePresence>
                        </div>
                        <div className="h-16 w-px bg-white/10"></div>
                        <div className="relative">
                            <p className="text-slate-500 text-xs font-black uppercase tracking-[0.2em] mb-2">{t.pot || 'Session Pot'}</p>
                            <AnimatePresence>
                                <motion.p 
                                    key={cpPot}
                                    initial={{ scale: 1.2, filter: 'brightness(2)' }}
                                    animate={{ scale: 1, filter: 'brightness(1)' }}
                                    className={`text-5xl font-black transition-all duration-300 tracking-tighter tabular-nums ${cpPot > 0 ? 'text-teal-400 drop-shadow-[0_0_20px_rgba(45,212,191,0.4)]' : cpPot < 0 ? 'text-rose-500 drop-shadow-[0_0_20px_rgba(244,63,94,0.4)]' : 'text-slate-400'}`}
                                >
                                    {formatMoney(displayPot)}
                                </motion.p>
                            </AnimatePresence>
                        </div>
                    </div>
                    <div className="flex items-center gap-6">
                        <div className="text-right">
                            <p className="text-slate-500 text-[9px] font-black uppercase tracking-[0.2em] mb-0.5">{t.cardsRemaining || 'Cards'}</p>
                            <p className={`text-2xl font-black ${currentSkin.id === 'gold' ? 'text-amber-400' : currentSkin.id === 'platinum' ? 'text-cyan-400' : 'text-indigo-400'}`}>
                                {activeCards.length}
                            </p>
                        </div>
                    </div>
                </div>

                {/* Game Board: Maximum compaction */}
                <div className="glass-card rounded-[2rem] pt-6 pb-8 px-8 shadow-[0_40px_100px_rgba(0,0,0,0.5)] relative overflow-hidden flex flex-col items-center bg-slate-900/40 border border-white/5">
                    <div className="w-full flex justify-between items-center mb-4 px-2">
                        <div className="flex flex-col">
                            <p className="text-lg font-black text-white uppercase tracking-tighter">
                                {cpStatus === 'revealing' ? (t.revealingCards || 'KARTLAR AÇILIYOR...') : 
                                cpStatus === 'final' ? (t.finalCardSelection || 'SON KARTI SEÇ') : 
                                cpSelection.length < 2 ? (t.selectTwoCards || '2 KART SEÇ') : (t.decideWhichToKeep || 'HANGİSİNİ TUTACAKSIN?')}
                            </p>
                            {cpStatus === 'selecting' && (
                                <p className="text-[9px] text-slate-500 font-bold uppercase tracking-widest">
                                    {t.cardPathHint}
                                </p>
                            )}
                        </div>
                        
                        {((cpSelection.length === 2 || (cpStatus === 'final' && cpSelection.length === 1)) && cpStatus !== 'revealing') && (
                            <motion.button
                                initial={{ opacity: 0, x: 20 }}
                                animate={{ opacity: 1, x: 0 }}
                                onClick={confirmKeepChoice}
                                className="px-8 py-3 rounded-xl bg-white text-slate-950 font-black text-[10px] uppercase tracking-widest shadow-2xl hover:scale-105 active:scale-95 transition-all flex items-center gap-2 hover:shadow-[0_0_40px_rgba(255,255,255,0.2)]"
                            >
                                {t.confirmReveal || 'KARARI ONAYLA'}
                                <Icons.Play size={14} />
                            </motion.button>
                        )}
                    </div>

                    <div className="flex flex-col gap-2 w-full">
                        {(() => {
                            const boardCards = cpDeck.filter(card => {
                                const isKept = cpKeptIds.includes(card.id);
                                const isDiscarded = cpDiscardedIds.includes(card.id);
                                return !isKept && !isDiscarded;
                            });
                            const totalCount = boardCards.length;
                            const cols = 8;
                            const lastRowCount = totalCount % cols || cols;
                            const lastRowStart = totalCount - lastRowCount;
                            const lastRowOffset = lastRowCount < cols ? Math.floor((cols - lastRowCount) / 2) + 1 : 1;

                            return (
                                <div 
                                    className="grid gap-6 w-full py-4"
                                    style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}
                                >
                                    {boardCards.map((card, idx) => {
                                    const { v: val, id: i } = card;
                                    const isRemoving = cpRemovingIds?.includes(i);
                                    const isVanishing = cpVanishIds?.includes(i);
                                    const isSelected = cpSelection.includes(i);
                                    const isTargetKept = cpKeepChoice === i;
                                    const isTargetDiscarded = isSelected && cpKeepChoice !== null && cpKeepChoice !== i;

                                    const shouldShowContent = (cpStatus === 'revealing' && (
                                        (cpRevealing === 'discarded' && isTargetDiscarded) ||
                                        (cpRevealing === 'kept' && (isTargetKept || isTargetDiscarded))
                                    )) || (cpStatus === 'removing' && cpRevealedIds.includes(i));

                                    const isRevealedByItem = cpStatus === 'removing' && cpRevealedIds.includes(i);

                                    // Fly-Away Animation logic for discarded card
                                    const isFlyingAway = (cpRevealing === 'kept' && isTargetDiscarded) || isVanishing;

                                    // Special layout for the last row to be centered
                                    const isLastRow = idx >= lastRowStart;
                                    
                                    // Skin color application
                                    let borderColor = 'border-white/10';
                                    let ringColor = '';
                                    let helpIconColor = 'text-slate-800 transition-colors group-hover:text-slate-600';

                                    if (isSelected || (cpStatus === 'removing' && isRemoving)) {
                                        if (isTargetKept || isRemoving) {
                                            borderColor = isRemoving ? 'border-amber-500' : 'border-emerald-500';
                                            ringColor = isRemoving ? 'ring-6 ring-amber-500/20' : 'ring-6 ring-emerald-500/20 shadow-[0_10px_40px_rgba(16,185,129,0.3)]';
                                        } else {
                                            borderColor = 'border-rose-400 border-dashed';
                                        }
                                    } else {
                                        // Skin influence on default cards
                                        if (currentSkin.id === 'gold') borderColor = 'border-amber-500/20 group-hover:border-amber-500/50';
                                        else if (currentSkin.id === 'platinum') borderColor = 'border-cyan-500/20 group-hover:border-cyan-500/50';
                                        else borderColor = 'border-white/10 hover:border-white/30';
                                        
                                        if (currentSkin.id === 'gold') helpIconColor = 'text-amber-900/50 group-hover:text-amber-500/50';
                                        else if (currentSkin.id === 'platinum') helpIconColor = 'text-cyan-900/50 group-hover:text-cyan-500/50';
                                    }

                                    return (
                                        <motion.div
                                            key={i}
                                            layout
                                            initial={{ scale: 0, opacity: 0 }}
                                            animate={isFlyingAway ? { 
                                                rotate: [0, 15, -15, 45], 
                                                scale: [1, 1.1, 0.8, 0], 
                                                opacity: 0,
                                                transition: { duration: 0.8, ease: "easeIn" }
                                            } : { scale: 1, opacity: 1 }}
                                            onClick={() => cpStatus !== 'removing' && handleCardSelect(i)}
                                            whileHover={(cpStatus !== 'revealing' && cpStatus !== 'removing') ? { scale: 1.05, y: -8, rotate: isSelected ? 0 : (idx % 2 === 0 ? 1 : -1) } : {}}
                                            className={`aspect-[3/4.2] rounded-2xl border-2 transition-all p-3 flex flex-col items-center justify-center cursor-pointer group relative overflow-visible scale-110
                                                ${shouldShowContent ? (isTargetKept ? 'bg-emerald-500/20 border-emerald-500 shadow-[0_0_30px_rgba(16,185,129,0.3)] scale-[1.2] z-20' : 'bg-rose-500/20 border-rose-500 scale-95 opacity-80') : 
                                                isSelected ? `bg-slate-900/20 ${borderColor} ${ringColor}` : 
                                                `bg-slate-900 ${borderColor} hover:bg-slate-800/80`}
                                            `}
                                            style={isLastRow && idx === lastRowStart ? { gridColumnStart: lastRowOffset } : {}}
                                        >
                                            <AnimatePresence mode="wait">
                                                {shouldShowContent ? (
                                                    <motion.div 
                                                        key="content" 
                                                        initial={{ rotateY: 90, opacity: 0, scale: 0.8 }} 
                                                        animate={{ rotateY: 0, opacity: 1, scale: 1 }} 
                                                        className="flex flex-col items-center justify-center"
                                                    >
                                                        {val > 0 ? <Icons.TrendingUp size={52} className="text-emerald-400 mb-2" /> : 
                                                        val < 0 ? <Icons.TrendingDown size={52} className={`${isRevealedByItem ? 'text-amber-400 animate-pulse' : 'text-rose-500'} mb-2`} /> : 
                                                        <Icons.Meh size={52} className="text-slate-400 mb-2" />}
                                                        <p className={`text-2xl font-black tabular-nums tracking-tighter ${val > 0 ? 'text-emerald-400' : val < 0 ? (isRevealedByItem ? 'text-amber-400' : 'text-rose-500') : 'text-slate-400'}`}>
                                                            {formatMoney(val)}
                                                        </p>
                                                        {isRevealedByItem && (
                                                            <div className="absolute inset-0 bg-rose-500/10 animate-pulse pointer-events-none rounded-2xl"></div>
                                                        )}
                                                    </motion.div>
                                                ) : (
                                                    <motion.div key="back" className="flex flex-col items-center">
                                                        <Icons.HelpCircle size={40} className={helpIconColor} />
                                                    </motion.div>
                                                )}
                                            </AnimatePresence>

                                            {isSelected && cpStatus !== 'revealing' && (
                                                <div className={`absolute -top-5 left-1/2 -translate-x-1/2 px-3.5 py-1.5 rounded-xl font-black text-[11px] uppercase tracking-widest shadow-2xl whitespace-nowrap z-30 ring-2 ring-white/10
                                                    ${isTargetKept ? 'bg-emerald-500 text-slate-950' : 'bg-rose-500 text-white'}
                                                `}>
                                                    {isTargetKept ? (t.keepLabel || 'TUTULAN') : (t.discardLabel || 'ATILAN')}
                                                </div>
                                            )}
                                        </motion.div>
                                    );
                                })}
                                </div>
                            );
                        })()}
                    </div>
                </div>
            </div>
        </div>
    );
};