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

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

export default function MissionResult({ gameState, onContinue }: 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-black/90 z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
        >
            <motion.h2
                className={`text - 6xl md: text - 7xl font - bold mb - 8 ${ 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>

            <motion.button
                onClick={onContinue}
                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-4 px-8 rounded-lg text-xl 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>
    );
}