import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
import { GameState, GamePhase, Player, GAME_CONFIG } from '../../../shared/types';

interface GameBoardProps {
    gameState: GameState;
    currentPlayerId: string;
    actions: any;
}

export default function GameBoard({ gameState, currentPlayerId, actions }: GameBoardProps) {
    const [selectedTeam, setSelectedTeam] = useState<string[]>([]);

    // Hooks para FASE REVEAL ROLE
    const [revealCard, setRevealCard] = useState(false);

    // Timer para avanzar automáticamente en REVEAL_ROLE
    useEffect(() => {
        if (gameState.phase === 'reveal_role' as any) {
            const timer = setTimeout(() => {
                actions.finishReveal();
            }, 10000);
            return () => clearTimeout(timer);
        }
    }, [gameState.phase, actions]);

    const currentPlayer = gameState.players.find(p => p.id === currentPlayerId);
    const isLeader = currentPlayer?.isLeader;
    const config = GAME_CONFIG[gameState.players.length as keyof typeof GAME_CONFIG];
    const currentQuestSize = config?.quests[gameState.currentRound - 1];

    // Manejar selección de equipo
    const toggleTeamSelection = (playerId: string) => {
        if (selectedTeam.includes(playerId)) {
            setSelectedTeam(selectedTeam.filter(id => id !== playerId));
        } else {
            if (selectedTeam.length < currentQuestSize) {
                setSelectedTeam([...selectedTeam, playerId]);
            }
        }
    };

    // Coordenadas porcentuales de los hexágonos de misión en el mapa
    const missionCoords = [
        { left: '12%', top: '55%' }, // Misión 1
        { left: '28%', top: '15%' }, // Misión 2
        { left: '52%', top: '25%' }, // Misión 3
        { left: '42%', top: '70%' }, // Misión 4
        { left: '82%', top: '40%' }, // Misión 5
    ];

    // --- UI/Efectos para FASES TEMPRANAS ---
    const isHost = gameState.hostId === currentPlayerId;

    // FASE INTRO
    if (gameState.phase === 'intro' as any) {
        return (
            <div className="relative w-full h-screen flex flex-col items-center justify-center bg-black overflow-hidden text-white">
                <div className="absolute inset-0 z-0">
                    <Image src="/assets/images/ui/bg_intro.png" alt="Battlefield" fill className="object-cover" />
                    <div className="absolute inset-0 bg-black/40" />
                </div>

                <h1 className="z-10 text-5xl font-bold uppercase tracking-[0.3em] mb-8 text-yellow-500 drop-shadow-lg text-center">
                    Guerra Total
                </h1>

                {/* Audio Auto-Play */}
                <audio
                    src="/assets/audio/Intro.ogg"
                    autoPlay
                    onEnded={() => isHost && actions.finishIntro()}
                />

                {isHost && (
                    <button
                        onClick={() => actions.finishIntro()}
                        className="z-10 bg-white/20 hover:bg-white/40 border border-white px-6 py-2 rounded text-sm uppercase tracking-widest backdrop-blur-sm transition-all"
                    >
                        Omitir Introducción
                    </button>
                )}
            </div>
        );
    }

    // FASE REVEAL ROLE NO HOOKS HERE

    if (gameState.phase === 'reveal_role' as any) {
        // Determinar imagen basada en el rol
        // Mapeo básico: 
        // Merlin -> good_merlin.png
        // Percival -> good_percival.png
        // Servant -> good_soldier_X.png (random)
        // Assassin -> evil_assassin.png
        // Morgana -> evil_morgana.png
        // Mordred -> evil_mordred.png
        // Oberon -> evil_oberon.png
        // Minion -> evil_minion_X.png

        let roleImage = '/assets/images/characters/good_soldier_1.png'; // Default

        const role = currentPlayer?.role;
        if (role === 'merlin') roleImage = '/assets/images/characters/good_merlin.png';
        else if (role === 'assassin') roleImage = '/assets/images/characters/evil_assassin.png';
        else if (role === 'percival') roleImage = '/assets/images/characters/good_percival.png';
        else if (role === 'morgana') roleImage = '/assets/images/characters/evil_morgana.png';
        else if (role === 'mordred') roleImage = '/assets/images/characters/evil_mordred.png';
        else if (role === 'oberon') roleImage = '/assets/images/characters/evil_oberon.png';
        else if (role === 'loyal_servant') {
            // Random soldier 1-5
            const idx = (currentPlayerId.charCodeAt(0) % 5) + 1;
            roleImage = `/assets/images/characters/good_soldier_${idx}.png`;
        }
        else if (role === 'minion') {
            // Random minion 1-3
            const idx = (currentPlayerId.charCodeAt(0) % 3) + 1;
            roleImage = `/assets/images/characters/evil_minion_${idx}.png`;
        }

        return (
            <div className="relative w-full h-screen flex flex-col items-center justify-center bg-black overflow-hidden text-white font-mono">
                {/* FONDO (Mismo que Roll Call) */}
                <div className="absolute inset-0 z-0">
                    <Image src="/assets/images/ui/bg_roll_call.png" alt="Resistance HQ" fill className="object-cover" />
                    <div className="absolute inset-0 bg-black/70" />
                </div>

                <div className="z-10 flex flex-col items-center gap-8">
                    <h2 className="text-2xl uppercase tracking-[0.2em] text-gray-300">
                        Tu Identidad Secreta
                    </h2>

                    <p className="text-sm text-gray-400 mb-4 animate-pulse">
                        Desliza hacia arriba para revelar
                    </p>

                    <div className="relative w-64 h-96 perspective-1000">
                        {/* Carta Revelada (Fondo) */}
                        <div className="absolute inset-0 w-full h-full rounded-xl overflow-hidden shadow-2xl border-4 border-yellow-600 bg-gray-900 flex items-center justify-center">
                            <Image
                                src={roleImage}
                                alt="Role"
                                fill
                                className="object-cover"
                            />
                            <div className="absolute bottom-0 w-full bg-black/80 text-center py-2 font-bold text-yellow-500 uppercase">
                                {role?.replace('_', ' ')}
                            </div>
                        </div>

                        {/* Reverso de Carta (Draggable) */}
                        <motion.div
                            drag="y"
                            dragConstraints={{ top: -300, bottom: 0 }}
                            dragElastic={0.2}
                            onDragEnd={(e, info) => {
                                // Reducir umbral a -50 para facilitar
                                if (info.offset.y < -50) {
                                    setRevealCard(true);
                                }
                            }}
                            whileHover={{ scale: 1.02 }}
                            whileTap={{ scale: 0.98, cursor: 'grabbing' }}
                            animate={revealCard ? { y: -1000, opacity: 0 } : { y: 0, opacity: 1 }}
                            className="absolute inset-0 w-full h-full rounded-xl overflow-hidden shadow-2xl z-20 cursor-grab active:cursor-grabbing hover:ring-2 hover:ring-white/50 transition-all"
                        >
                            <Image
                                src="/assets/images/characters/card_back.png"
                                alt="Card Back"
                                fill
                                className="object-cover pointer-events-none" // Importante: pointer-events-none en la imagen para que no capture el drag
                            />
                        </motion.div>
                    </div>


                </div>
            </div>
        );
    }

    // FASE ROLL CALL
    if (gameState.phase === 'roll_call' as any) {
        return (
            <div className="relative w-full h-screen flex flex-col items-center justify-center bg-black overflow-hidden text-white font-mono">
                <div className="absolute inset-0 z-0">
                    <Image src="/assets/images/ui/bg_roll_call.png" alt="Resistance HQ" fill className="object-cover" />
                    <div className="absolute inset-0 bg-black/70" />
                </div>

                <div className="z-10 w-full max-w-5xl px-4">
                    <h2 className="text-3xl text-center mb-12 uppercase tracking-[0.2em] text-gray-300 border-b border-gray-600 pb-4">
                        Pasando Lista...
                    </h2>

                    {isHost && (
                        <audio
                            src="/assets/audio/Rondas.ogg"
                            autoPlay
                            onEnded={() => actions.finishRollCall()} // Host avanza cuando acaba audio
                        />
                    )}

                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
                        {gameState.players.map((p, i) => {
                            // Asignar avatar determinista basado en charCode
                            const avatarIdx = (p.name.length % 3) + 1;
                            return (
                                <motion.div
                                    key={p.id}
                                    initial={{ opacity: 0, scale: 0.8 }}
                                    animate={{ opacity: 1, scale: 1 }}
                                    transition={{ delay: i * 0.3 }} // Aparecen uno a uno
                                    className="flex flex-col items-center gap-3"
                                >
                                    <div className="w-32 h-32 rounded-full border-4 border-gray-400 overflow-hidden relative shadow-2xl bg-black">
                                        <Image
                                            src={`/assets/images/characters/avatar_${avatarIdx}.png`}
                                            alt="Avatar"
                                            fill
                                            className="object-cover grayscale contrast-125"
                                        />
                                    </div>
                                    <div className="bg-black/80 px-4 py-1 rounded border border-white/20 text-xl font-bold text-yellow-500 uppercase">
                                        {p.name}
                                    </div>
                                </motion.div>
                            );
                        })}
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="relative w-full h-screen flex flex-col items-center overflow-hidden">
            <div className="absolute inset-0 z-0 opacity-40">
                <Image src="/assets/images/ui/bg_game.png" alt="Game Background" fill className="object-cover" />
                <div className="absolute inset-0 bg-black/60" />
            </div>

            <div className="relative z-10 w-full flex flex-col items-center">

                {/* --- MAPA TÁCTICO (TABLERO) --- */}
                <div className="relative w-full max-w-5xl aspect-video mt-4 shadow-2xl border-4 border-gray-800 rounded-lg overflow-hidden bg-[#2a2a2a]">
                    <Image
                        src="/assets/images/ui/board_map.jpg"
                        alt="Tactical Map"
                        fill
                        className="object-contain"
                    />

                    {/* TOKENS SOBRE EL MAPA */}
                    {missionCoords.map((coord, idx) => {
                        const result = gameState.questResults[idx];
                        const isCurrent = gameState.currentRound === idx + 1;

                        return (
                            <div
                                key={idx}
                                className="absolute w-[12%] aspect-square flex items-center justify-center transform -translate-x-1/2 -translate-y-1/2"
                                style={{ left: coord.left, top: coord.top }}
                            >
                                {/* Marcador de Ronda Actual */}
                                {isCurrent && (
                                    <motion.div
                                        layoutId="round-marker"
                                        className="absolute inset-0 z-10"
                                        initial={{ scale: 1.5, opacity: 0 }}
                                        animate={{ scale: 1, opacity: 1 }}
                                        transition={{ type: "spring", stiffness: 300, damping: 20 }}
                                    >
                                        <Image
                                            src="/assets/images/tokens/marker_round.png"
                                            alt="Current Round"
                                            fill
                                            className="object-contain drop-shadow-lg"
                                        />
                                    </motion.div>
                                )}

                                {/* Resultado de Misión (Éxito/Fracaso) */}
                                {result === true && (
                                    <motion.div
                                        initial={{ scale: 0 }} animate={{ scale: 1 }}
                                        className="absolute inset-0 z-20"
                                    >
                                        <Image src="/assets/images/tokens/marker_score_blue.png" alt="Success" fill className="object-contain drop-shadow-lg" />
                                    </motion.div>
                                )}
                                {result === false && (
                                    <motion.div
                                        initial={{ scale: 0 }} animate={{ scale: 1 }}
                                        className="absolute inset-0 z-20"
                                    >
                                        <Image src="/assets/images/tokens/marker_score_red.png" alt="Fail" fill className="object-contain drop-shadow-lg" />
                                    </motion.div>
                                )}
                            </div>
                        );
                    })}

                    {/* TRACK DE VOTOS FALLIDOS (Pequeño indicador en la esquina inferior izquierda del mapa) */}
                    <div className="absolute bottom-[5%] left-[2%] bg-black/60 p-2 rounded border border-white/20">
                        <div className="text-[10px] text-gray-300 uppercase mb-1 text-center">Votos Rechazados</div>
                        <div className="flex gap-1">
                            {[...Array(5)].map((_, i) => (
                                <div key={i} className={`w-3 h-3 rounded-full border border-gray-500 ${i < gameState.failedVotesCount ? 'bg-red-500' : 'bg-transparent'}`} />
                            ))}
                        </div>
                    </div>
                </div>

                {/* --- ÁREA DE JUEGO (CARTAS Y ACCIONES) --- */}
                <div className="flex-1 w-full max-w-6xl relative mt-4 px-4">
                    <AnimatePresence mode="wait">

                        {/* FASE: VOTACIÓN DE LÍDER */}
                        {gameState.phase === 'vote_leader' as any && (
                            <motion.div
                                key="vote-leader"
                                initial={{ opacity: 0, scale: 0.9 }}
                                animate={{ opacity: 1, scale: 1 }}
                                className="flex flex-col items-center gap-6"
                            >
                                <div className="bg-black/80 p-4 rounded text-white text-center border border-yellow-500/50 relative">
                                    <h3 className="text-xl font-mono mb-2 text-yellow-500 uppercase tracking-widest">
                                        Confirmar Líder
                                    </h3>
                                    <div className="text-2xl font-bold mb-2">
                                        ¿Aceptas a <span className="text-yellow-400">{gameState.players.find(p => p.id === gameState.currentLeaderId)?.name}</span> como Líder?
                                    </div>

                                    {/* Timer */}
                                    {!gameState.leaderVotes?.[currentPlayerId] && (
                                        <VotingTimer onTimeout={() => actions.voteLeader(null)} />
                                    )}
                                </div>

                                {gameState.leaderVotes?.[currentPlayerId] === undefined ? (
                                    <div className="flex gap-8">
                                        <button onClick={() => actions.voteLeader(true)} className="group">
                                            <div className="w-40 h-60 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-green-500 transition-all transform group-hover:-translate-y-4 relative overflow-hidden">
                                                <Image src="/assets/images/tokens/accept_leader.png" alt="Accept Leader" fill className="object-contain" />
                                            </div>
                                            <span className="block text-center text-white mt-2 font-bold bg-green-600 px-2 rounded uppercase tracking-widest">ACEPTAR</span>
                                        </button>
                                        <button onClick={() => actions.voteLeader(false)} className="group">
                                            <div className="w-40 h-60 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-red-500 transition-all transform group-hover:-translate-y-4 relative overflow-hidden">
                                                <Image src="/assets/images/tokens/deny_leader.png" alt="Deny Leader" fill className="object-contain" />
                                            </div>
                                            <span className="block text-center text-white mt-2 font-bold bg-red-600 px-2 rounded uppercase tracking-widest">RECHAZAR</span>
                                        </button>
                                    </div>
                                ) : (
                                    <div className="text-white text-xl font-mono animate-pulse bg-black/50 px-6 py-3 rounded-full border border-white/20">
                                        VOTO REGISTRADO. ESPERANDO AL RESTO...
                                    </div>
                                )}
                            </motion.div>
                        )}

                        {/* FASE: CONSTRUCCIÓN DE EQUIPO */}
                        {gameState.phase === GamePhase.TEAM_BUILDING && (
                            <motion.div
                                key="team-building"
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                exit={{ opacity: 0, y: -20 }}
                                className="bg-paper-bg text-black p-6 rounded shadow-2xl rotate-1 max-w-md w-full text-center"
                            >
                                <h2 className="text-2xl font-bold font-mono mb-2 uppercase text-resistance-blue">
                                    {isLeader ? 'TU TURNO: ELIGE EQUIPO' : `ESPERANDO AL LÍDER...`}
                                </h2>
                                <p className="mb-4 font-serif italic text-gray-700">
                                    Se necesitan <span className="font-bold text-red-700">{currentQuestSize} agentes</span> para esta misión.
                                </p>

                                {isLeader && (
                                    <button
                                        onClick={() => actions.proposeTeam(selectedTeam)}
                                        disabled={selectedTeam.length !== currentQuestSize}
                                        className="w-full bg-resistance-blue text-white font-bold py-3 px-4 rounded hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed uppercase tracking-widest"
                                    >
                                        Proponer Equipo
                                    </button>
                                )}
                            </motion.div>
                        )}

                        {/* FASE: VOTACIÓN DE EQUIPO */}
                        {gameState.phase === GamePhase.VOTING_TEAM && (
                            <motion.div
                                key="voting"
                                initial={{ scale: 0.8, opacity: 0 }}
                                animate={{ scale: 1, opacity: 1 }}
                                className="flex flex-col items-center gap-6"
                            >
                                <div className="bg-black/80 p-4 rounded text-white text-center border border-white/20">
                                    <h3 className="text-xl font-mono mb-2 text-yellow-500">PROPUESTA DE MISIÓN</h3>
                                    <div className="flex gap-2 justify-center">
                                        {gameState.proposedTeam.map(id => {
                                            const p = gameState.players.find(pl => pl.id === id);
                                            return (
                                                <div key={id} className="bg-white/10 px-3 py-1 rounded text-sm">
                                                    {p?.name}
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>

                                {!currentPlayer?.hasVoted ? (
                                    <div className="flex gap-8">
                                        <button onClick={() => actions.voteTeam(true)} className="group">
                                            <div className="w-32 h-48 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-green-500 transition-all transform group-hover:-translate-y-4">
                                                <Image src="/assets/images/tokens/vote_approve.png" alt="Approve" width={100} height={100} />
                                            </div>
                                            <span className="block text-center text-white mt-2 font-bold bg-green-600 px-2 rounded">APROBAR</span>
                                        </button>
                                        <button onClick={() => actions.voteTeam(false)} className="group">
                                            <div className="w-32 h-48 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-red-500 transition-all transform group-hover:-translate-y-4">
                                                <Image src="/assets/images/tokens/vote_reject.png" alt="Reject" width={100} height={100} />
                                            </div>
                                            <span className="block text-center text-white mt-2 font-bold bg-red-600 px-2 rounded">RECHAZAR</span>
                                        </button>
                                    </div>
                                ) : (
                                    <div className="text-white text-xl font-mono animate-pulse">
                                        VOTO REGISTRADO. ESPERANDO AL RESTO...
                                    </div>
                                )}
                            </motion.div>
                        )}

                        {/* FASE: MISIÓN */}
                        {gameState.phase === GamePhase.MISSION && (
                            <motion.div key="mission" className="text-center">
                                {gameState.proposedTeam.includes(currentPlayerId) ? (
                                    <div className="flex flex-col items-center gap-6">
                                        <h2 className="text-3xl font-bold text-white mb-4 drop-shadow-lg">¡ESTÁS EN LA MISIÓN!</h2>
                                        <div className="flex gap-8">
                                            <button onClick={() => actions.voteMission(true)} className="group">
                                                <div className="w-40 h-60 bg-blue-900 rounded-lg shadow-2xl border-2 border-blue-400 flex flex-col items-center justify-center p-4 transform transition-transform hover:scale-105">
                                                    <Image src="/assets/images/tokens/mission_success.png" alt="Success" width={120} height={120} />
                                                    <span className="mt-4 text-blue-200 font-bold tracking-widest">ÉXITO</span>
                                                </div>
                                            </button>

                                            {/* Solo los malos pueden sabotear */}
                                            {currentPlayer?.faction === 'spies' && (
                                                <button onClick={() => actions.voteMission(false)} className="group">
                                                    <div className="w-40 h-60 bg-red-900 rounded-lg shadow-2xl border-2 border-red-400 flex flex-col items-center justify-center p-4 transform transition-transform hover:scale-105">
                                                        <Image src="/assets/images/tokens/mission_fail.png" alt="Fail" width={120} height={120} />
                                                        <span className="mt-4 text-red-200 font-bold tracking-widest">SABOTAJE</span>
                                                    </div>
                                                </button>
                                            )}
                                        </div>
                                    </div>
                                ) : (
                                    <div className="text-white text-2xl font-mono bg-black/50 p-6 rounded">
                                        La misión está en curso...<br />
                                        <span className="text-sm text-gray-400">Rezando por el éxito.</span>
                                    </div>
                                )}
                            </motion.div>
                        )}

                        {/* FASE: REVELACIÓN DE CARTAS */}
                        {gameState.phase === 'mission_reveal' as any && (
                            <MissionReveal
                                votes={gameState.revealedVotes || []}
                                onComplete={() => isHost && actions.finishMissionReveal()}
                            />
                        )}

                        {/* FASE: RESULTADO DE MISIÓN */}
                        {gameState.phase === 'mission_result' as any && (
                            <MissionResult
                                gameState={gameState}
                                onContinue={() => isHost && actions.finishMissionResult()}
                            />
                        )}

                    </AnimatePresence>
                </div>

                {/* JUGADORES (TIENDA DE CAMPAÑA) */}
                <div className="z-10 w-full overflow-x-auto pb-4">
                    <div className="flex justify-center gap-4 min-w-max px-4">
                        {gameState.players.map((player) => {
                            const isSelected = selectedTeam.includes(player.id);
                            const isMe = player.id === currentPlayerId;

                            // Avatar logic
                            const avatarSrc = `/assets/images/characters/${player.avatar}`;

                            return (
                                <div
                                    key={player.id}
                                    onClick={() => isLeader && gameState.phase === GamePhase.TEAM_BUILDING && toggleTeamSelection(player.id)}
                                    className={`
                  relative flex flex-col items-center cursor-pointer transition-all duration-300
                  ${isSelected ? 'scale-110' : 'scale-100 opacity-80 hover:opacity-100'}
                `}
                                >
                                    {/* Avatar */}
                                    <div className={`
                  w-16 h-16 rounded-full border-2 overflow-hidden relative shadow-lg bg-black
                  ${isSelected ? 'border-yellow-400 ring-4 ring-yellow-400/30' : 'border-gray-400'}
                  ${player.isLeader ? 'ring-2 ring-white' : ''}
                `}>
                                        <Image
                                            src={avatarSrc}
                                            alt={player.name}
                                            fill
                                            className="object-cover"
                                        />

                                        {/* Icono de Líder */}
                                        {player.isLeader && (
                                            <div className="absolute bottom-0 right-0 bg-yellow-500 rounded-full p-1 w-6 h-6 flex items-center justify-center text-xs text-black font-bold border border-white z-10">
                                                L
                                            </div>
                                        )}
                                    </div>

                                    {/* Nombre */}
                                    <span className={`mt-2 text-xs font-mono px-2 py-0.5 rounded ${isMe ? 'bg-blue-600 text-white' : 'bg-black/50 text-gray-300'}`}>
                                        {player.name}
                                    </span>
                            );
                        })}
                    </div>
                </div>

                {/* HISTÓRICO DE MISIONES (Esquina superior derecha) */}
                {gameState.missionHistory.length > 0 && (
                    <div className="absolute top-4 right-4 bg-black/80 p-3 rounded-lg border border-white/20 backdrop-blur-sm">
                        <div className="text-[10px] text-gray-400 uppercase mb-2 text-center font-bold tracking-wider">Historial</div>
                        <div className="flex gap-2">
                            {gameState.missionHistory.map((mission, idx) => (
                                <div
                                    key={idx}
                                    className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 ${
                                        mission.isSuccess
                                            ? 'bg-blue-600 border-blue-400 text-white'
                                            : 'bg-red-600 border-red-400 text-white'
                                    }`}
                                    title={`Misión ${mission.round}: ${mission.isSuccess ? 'Éxito' : 'Fracaso'} (${mission.successes}✓ ${mission.fails}✗)`}
                                >
                                    {mission.round}
                                </div>
                            ))}
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}


// Subcomponente para el Timer de Votación
function VotingTimer({ onTimeout }: { onTimeout: () => void }) {
    const [timeLeft, setTimeLeft] = useState(10);

    useEffect(() => {
        if (timeLeft <= 0) {
            onTimeout();
            return;
        }
        const interval = setInterval(() => setTimeLeft(t => t - 1), 1000);
        return () => clearInterval(interval);
    }, [timeLeft, onTimeout]);

    return (
        <div className="absolute top-4 right-4 bg-red-600/80 text-white w-16 h-16 rounded-full flex items-center justify-center border-4 border-red-400 animate-pulse text-2xl font-bold font-mono">
            {timeLeft}
        </div>
    );
}

// Componente para revelar cartas una a una
function MissionReveal({ votes, onComplete }: { votes: boolean[], onComplete: () => void }) {
    const [revealedCount, setRevealedCount] = useState(0);

    useEffect(() => {
        if (revealedCount < votes.length) {
            const timer = setTimeout(() => {
                setRevealedCount(c => c + 1);
            }, 2000); // 2 segundos entre carta y carta
            return () => clearTimeout(timer);
        } else if (revealedCount === votes.length && votes.length > 0) {
            // Todas reveladas, esperar 2s más y avanzar
            const timer = setTimeout(() => {
                onComplete();
            }, 2000);
            return () => clearTimeout(timer);
        }
    }, [revealedCount, votes.length, onComplete]);

    return (
        <motion.div
            key="mission-reveal"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="flex flex-col items-center gap-8"
        >
            <h2 className="text-3xl font-bold text-white uppercase tracking-widest">
                Revelando Votos...
            </h2>

            <div className="flex gap-4 flex-wrap justify-center">
                {votes.slice(0, revealedCount).map((vote, idx) => (
                    <motion.div
                        key={idx}
                        initial={{ scale: 0, rotateY: 180 }}
                        animate={{ scale: 1, rotateY: 0 }}
                        transition={{ type: "spring", stiffness: 200 }}
                        className="relative w-32 h-48"
                    >
                        <Image
                            src={vote ? "/assets/images/tokens/mission_success.png" : "/assets/images/tokens/mission_fail.png"}
                            alt={vote ? "Éxito" : "Sabotaje"}
                            fill
                            className="object-contain drop-shadow-2xl"
                        />
                    </motion.div>
                ))}
            </div>

            <div className="text-white text-lg font-mono">
                {revealedCount} / {votes.length} cartas reveladas
            </div>
        </motion.div>
    );
}

// Componente para mostrar el resultado de la misión
function MissionResult({ gameState, onContinue }: { gameState: any, onContinue: () => void }) {
    const currentMission = gameState.missionHistory[gameState.missionHistory.length - 1];
    const isHost = gameState.hostId === gameState.players[0]?.id; // Simplificado

    useEffect(() => {
        // Auto-avanzar después de 5 segundos
        const timer = setTimeout(() => {
            onContinue();
        }, 5000);
        return () => clearTimeout(timer);
    }, [onContinue]);

    if (!currentMission) return null;

    const { isSuccess, successes, fails, team, round } = currentMission;

    return (
        <motion.div
            key="mission-result"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.8, opacity: 0 }}
            className="flex flex-col items-center gap-6 p-8 bg-black/90 rounded-xl border-4 max-w-2xl mx-auto"
            style={{ borderColor: isSuccess ? '#3b82f6' : '#ef4444' }}
        >
            {/* Título */}
            <div className="text-center">
                <h2 className="text-5xl font-bold mb-2 uppercase tracking-widest" style={{ color: isSuccess ? '#3b82f6' : '#ef4444' }}>
                    {isSuccess ? '✓ MISIÓN EXITOSA' : '✗ MISIÓN FALLIDA'}
                </h2>
                <p className="text-gray-400 text-lg">Misión #{round}</p>
            </div>

            {/* Estadísticas */}
            <div className="flex gap-8 text-center">
                <div className="bg-blue-900/30 p-4 rounded-lg border border-blue-500/50">
                    <div className="text-4xl font-bold text-blue-400">{successes}</div>
                    <div className="text-sm text-gray-300 uppercase">Éxitos</div>
                </div>
                <div className="bg-red-900/30 p-4 rounded-lg border border-red-500/50">
                    <div className="text-4xl font-bold text-red-400">{fails}</div>
                    <div className="text-sm text-gray-300 uppercase">Sabotajes</div>
                </div>
            </div>

            {/* Equipo */}
            <div className="w-full">
                <h3 className="text-xl text-white mb-3 text-center uppercase tracking-wider">Equipo de Misión:</h3>
                <div className="flex gap-3 justify-center flex-wrap">
                    {team.map((playerId: string) => {
                        const player = gameState.players.find((p: any) => p.id === playerId);
                        return (
                            <div key={playerId} className="bg-white/10 px-4 py-2 rounded-full border border-white/20 text-white text-sm font-mono">
                                {player?.name || 'Desconocido'}
                            </div>
                        );
                    })}
                </div>
            </div>

            {/* Mensaje */}
            <div className="text-center text-gray-300 text-sm animate-pulse">
                Continuando en breve...
            </div>
        </motion.div>
    );
}