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

interface VictoryScreenProps {
    gameState: GameState;
    isHost: boolean;
    onRestart: () => void;
    onFinalize: () => void;
}

export default function VictoryScreen({ gameState, isHost, onRestart, onFinalize }: VictoryScreenProps) {
    const [timeLeft, setTimeLeft] = useState(30);
    const isNazisWin = gameState.winner === Faction.ALEMANES;

    // Timer de 30 segundos
    useEffect(() => {
        const timer = setInterval(() => {
            setTimeLeft(prev => {
                if (prev <= 1) {
                    // Se acabó el tiempo, finalizar automáticamente
                    onFinalize();
                    return 0;
                }
                return prev - 1;
            });
        }, 1000);

        return () => clearInterval(timer);
    }, [onFinalize]);

    return (
        <motion.div
            className="fixed inset-0 flex flex-col items-center justify-center z-50 relative"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
        >
            {/* Título de victoria */}
            <motion.div
                className="text-center mb-12 relative z-10"
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
            >
                <h1 className={`text-[4rem] md:text-[4.5rem] font-bold mb-4 drop-shadow-[0_4px_8px_rgba(0,0,0,0.9)] ${isNazisWin ? 'text-red-600' : 'text-blue-500'}`}>
                    {isNazisWin ? '¡VICTORIA NAZI!' : '¡VICTORIA ALIADA!'}
                </h1>
                <p className="text-3xl text-white drop-shadow-[0_4px_8px_rgba(0,0,0,0.9)] font-bold">
                    {isNazisWin ? 'Los Nazis han conquistado Francia' : 'La Resistencia ha triunfado'}
                </p>
            </motion.div>

            {/* Información del juego */}
            <motion.div
                className="bg-black/70 p-8 rounded-xl border-2 border-white/30 mb-8 max-w-2xl relative z-10 backdrop-blur-sm"
                initial={{ y: 50, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.5 }}
            >
                <div className="grid grid-cols-2 gap-6 text-center">
                    <div>
                        <p className="text-gray-300 text-sm uppercase mb-2 font-bold">Misiones Exitosas</p>
                        <p className="text-4xl font-bold text-blue-400">
                            {gameState.questResults.filter(r => r === true).length}
                        </p>
                    </div>
                    <div>
                        <p className="text-gray-300 text-sm uppercase mb-2 font-bold">Misiones Fracasadas</p>
                        <p className="text-4xl font-bold text-red-400">
                            {gameState.questResults.filter(r => r === false).length}
                        </p>
                    </div>
                </div>
            </motion.div>

            {/* Botones para el host */}
            {isHost ? (
                <motion.div
                    className="flex flex-col items-center gap-4 relative z-10"
                    initial={{ y: 50, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1 }}
                >
                    <p className="text-yellow-400 font-bold text-2xl mb-2 drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)] bg-black/50 px-6 py-2 rounded-full">
                        ⏱️ Tiempo restante: {timeLeft}s
                    </p>
                    <div className="flex gap-6">
                        <motion.button
                            onClick={onRestart}
                            className="bg-green-600 hover:bg-green-500 text-white font-bold py-3 px-6 rounded-xl text-lg shadow-2xl border-2 border-green-400"
                            whileHover={{ scale: 1.1 }}
                            whileTap={{ scale: 0.95 }}
                        >
                            🔄 NUEVA PARTIDA
                        </motion.button>
                        <motion.button
                            onClick={onFinalize}
                            className="bg-red-600 hover:bg-red-500 text-white font-bold py-3 px-6 rounded-xl text-lg shadow-2xl border-2 border-red-400"
                            whileHover={{ scale: 1.1 }}
                            whileTap={{ scale: 0.95 }}
                        >
                            ❌ TERMINAR
                        </motion.button>
                    </div>
                    <p className="text-white text-base mt-2 bg-black/60 px-6 py-2 rounded-full drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)]">
                        Si no decides, la partida terminará automáticamente
                    </p>
                </motion.div>
            ) : (
                <motion.div
                    className="text-center relative z-10"
                    initial={{ y: 50, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1 }}
                >
                    <p className="text-white text-2xl font-mono bg-black/50 px-8 py-4 rounded-full border border-white/20 animate-pulse">
                        Esperando decisión del comandante...
                    </p>
                    <p className="text-gray-500 text-sm mt-4">
                        Tiempo restante: {timeLeft}s
                    </p>
                </motion.div>
            )}
        </motion.div>
    );
}
