import { motion } from 'framer-motion';
import { GameState } from '../../../shared/types';

interface MissionResultProps {
    gameState: GameState;
    onContinue: () => void;
    isHost: boolean;
}

export default function MissionResult({ gameState, onContinue, isHost }: MissionResultProps) {
    // Obtener la última misión del historial
    const lastMission = gameState.missionHistory[gameState.missionHistory.length - 1];

    if (!lastMission) {
        return (
            <div className="fixed inset-0 flex items-center justify-center bg-black/90 z-50">
                <p className="text-white text-2xl">Cargando resultado...</p>
            </div>
        );
    }

    const { successes, fails, isSuccess } = lastMission;

    return (
        <motion.div
            className="fixed inset-0 flex flex-col items-center justify-center bg-transparent z-50 pt-8"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
        >
            <motion.h2
                className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-8 whitespace-nowrap px-4 ${isSuccess ? 'text-blue-500' : 'text-red-500'}`}
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
            >
                {isSuccess ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'}
            </motion.h2>

            <motion.div
                className="text-white text-3xl mb-8 bg-black/50 p-6 rounded-xl"
                initial={{ y: 50, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.5 }}
            >
                <p className="mb-2">✓ Éxitos: <span className="text-blue-400 font-bold">{successes}</span></p>
                <p>✗ Sabotajes: <span className="text-red-400 font-bold">{fails}</span></p>
            </motion.div>

            <motion.div
                className="text-white text-xl mb-8"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 1 }}
            >
                <p>Misión {gameState.currentRound} de 5</p>
                <p className="text-gray-400 text-sm mt-2">
                    Resistencia: {gameState.missionHistory.filter(m => m.isSuccess).length} |
                    Espías: {gameState.missionHistory.filter(m => !m.isSuccess).length}
                </p>
            </motion.div>

            {isHost ? (
                <motion.button
                    onClick={onContinue}
                    className="bg-gradient-to-r from-yellow-600 to-yellow-700 hover:from-yellow-500 hover:to-yellow-600 text-white font-bold py-4 px-8 rounded-lg text-lg shadow-lg transform transition-all hover:scale-105"
                    initial={{ y: 50, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1.5 }}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                >
                    CONTINUAR →
                </motion.button>
            ) : (
                <motion.div
                    className="text-white text-lg font-mono bg-black/50 px-6 py-3 rounded-full border border-white/20 animate-pulse"
                    initial={{ y: 50, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1.5 }}
                >
                    Esperando al comandante...
                </motion.div>
            )}
        </motion.div>
    );
}
