'use client';

import { useState, useEffect } from 'react';
import { useSocket } from '../hooks/useSocket';
import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
import GameBoard from '../components/GameBoard';
import { GameRoom } from '../../../shared/types';

// Constantes de apellidos
const SURNAMES = [
    // Franceses
    'Dubois', 'Leroy', 'Moreau', 'Petit', 'Lefebvre', 'Michel', 'Durand',
    // Británicos
    'Smith', 'Jones', 'Williams', 'Brown', 'Taylor', 'Wilson', 'Evans',
    // Americanos
    'Miller', 'Davis', 'Garcia', 'Rodriguez', 'Martinez', 'Hernandez'
];

type ViewState = 'login' | 'lobby' | 'game';

export default function Home() {
    const { isConnected, gameState, roomsList, actions, socket } = useSocket();

    // Estados locales de UI
    const [view, setView] = useState<ViewState>('login');
    const [playerName, setPlayerName] = useState('');
    // El apellido se genera al loguearse
    const [fullPlayerName, setFullPlayerName] = useState('');

    // UI Create/Join
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [createConfig, setCreateConfig] = useState({ maxPlayers: 5, password: '' });

    const [passwordPromptRoomId, setPasswordPromptRoomId] = useState<string | null>(null);
    const [joinPassword, setJoinPassword] = useState('');

    // Efecto para cambiar a vista de juego cuando el servidor nos une
    useEffect(() => {
        if (gameState?.roomId) {
            setView('game');
        } else if (view === 'game' && !gameState) {
            // Si estábamos en juego y volvemos a null, volver al lobby
            setView('lobby');
        }
    }, [gameState]);

    const handleLogin = (e: React.FormEvent) => {
        e.preventDefault();
        if (playerName) {
            // Generar apellido aleatorio
            const randomSurname = SURNAMES[Math.floor(Math.random() * SURNAMES.length)];
            setFullPlayerName(`${playerName} ${randomSurname}`);

            setView('lobby');
            actions.refreshRooms();
        }
    };

    const handleCreateGame = (e: React.FormEvent) => {
        e.preventDefault();
        actions.createGame(fullPlayerName, createConfig.maxPlayers, createConfig.password);
        setShowCreateModal(false);
    };

    const requestJoinGame = (room: GameRoom) => {
        if (room.isPrivate) {
            setPasswordPromptRoomId(room.id);
            setJoinPassword('');
        } else {
            actions.joinGame(room.id, fullPlayerName);
        }
    };

    const submitJoinPassword = () => {
        if (passwordPromptRoomId) {
            actions.joinGame(passwordPromptRoomId, fullPlayerName, joinPassword);
            setPasswordPromptRoomId(null);
        }
    };

    // --- RENDER DE JUEGO O SALA DE ESPERA ---
    if (view === 'game' && gameState && socket) {
        // ¿Estamos en fase de lobby dentro de la partida?
        if (gameState.phase === 'lobby') {
            const isHost = gameState.hostId === socket.id;
            // Podríamos obtener maxPlayers del array players si no lo tenemos en gameState,
            // pero lo ideal sería tenerlo. Por ahora asumimos que si ya estamos dentro,
            // sabemos cuantos somos.
            // NOTA: GameState no tiene maxPlayers explicitamente, pero podemos deducirlo o añadirlo.
            // Por simplicidad, usaremos el length para validar minimo.

            return (
                <main className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-zinc-900 font-mono text-gray-200">
                    <div className="absolute inset-0 z-0 opacity-40">
                        <Image src="/assets/images/ui/bg_game.png" alt="War Room" fill className="object-cover" />
                        <div className="absolute inset-0 bg-black/70" />
                    </div>

                    <div className="z-10 bg-black/80 p-8 rounded border border-white/20 max-w-2xl w-full mx-4 backdrop-blur-md">
                        <div className="text-center mb-8">
                            <h2 className="text-3xl font-bold text-yellow-500 mb-2 uppercase tracking-widest">Sala de Espera</h2>
                            <p className="text-gray-400">Operación en curso. Esperando activación...</p>
                        </div>

                        <div className="grid grid-cols-2 gap-4 mb-8">
                            {gameState.players.map(player => (
                                <div key={player.id} className="bg-white/5 p-3 rounded flex items-center gap-3 border border-white/10">
                                    <div className={`w-3 h-3 rounded-full ${player.id === socket.id ? 'bg-green-500 shadow-green-500/50 shadow-lg' : 'bg-gray-500'}`} />
                                    <span className={player.id === socket.id ? 'font-bold text-white' : 'text-gray-300'}>
                                        {player.name}
                                    </span>
                                    {player.id === gameState.hostId && (
                                        <span className="text-[10px] bg-yellow-900/50 text-yellow-500 px-2 py-0.5 rounded ml-auto">HOST</span>
                                    )}
                                </div>
                            ))}
                            {/* Rellenar huecos vacíos visualmente si quisieramos */}
                        </div>

                        <div className="flex flex-col items-center gap-4 border-t border-white/10 pt-6">
                            {isHost ? (
                                <>
                                    <p className="text-sm text-gray-400 mb-2">
                                        Jugadores: <span className="text-white font-bold">{gameState.players.length}</span>
                                        {gameState.players.length < 5 && <span className="text-red-400 ml-2">(Mínimo 5 requeridos)</span>}
                                    </p>
                                    <button
                                        onClick={() => actions.startGame()}
                                        disabled={gameState.players.length < 5}
                                        className="w-full max-w-md bg-yellow-600 hover:bg-yellow-500 disabled:bg-gray-700 disabled:cursor-not-allowed text-white font-bold py-4 rounded uppercase tracking-[0.2em] transition-all shadow-lg"
                                    >
                                        INICIAR MISIÓN
                                    </button>
                                </>
                            ) : (
                                <div className="text-center animate-pulse">
                                    <p className="text-yellow-500 font-bold uppercase tracking-wider">Esperando al Comandante...</p>
                                    <p className="text-xs text-gray-500 mt-2">La misión comenzará cuando el líder dé la orden.</p>
                                </div>
                            )}
                        </div>
                    </div>
                </main>
            );
        }

        return (
            <GameBoard
                gameState={gameState}
                currentPlayerId={socket.id}
                actions={actions}
            />
        );
    }

    return (
        <main className="relative min-h-screen flex flex-col items-center overflow-hidden bg-zinc-900 font-mono text-gray-200">

            {/* FONDO COMÚN LOBBY/LOGIN */}
            <div className="absolute inset-0 z-0 opacity-40">
                <Image
                    src="/assets/images/ui/bg_lobby.png"
                    alt="Lobby Background"
                    fill
                    className="object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent" />
            </div>

            {/* HEADER / LOGO */}
            <div className="z-10 w-full p-4 flex justify-between items-center max-w-6xl">
                <div className="flex items-center gap-4">
                    <Image src="/assets/images/ui/logo.png" alt="Logo" width={150} height={50} className="object-contain filter drop-shadow hidden md:block" />
                    <h1 className="text-2xl font-bold tracking-widest uppercase text-yellow-600">
                        Francia Ocupada
                    </h1>
                </div>
                {view === 'lobby' && (
                    <div className="flex items-center gap-4 bg-black/50 px-4 py-2 rounded border border-white/10">
                        <span className="text-sm text-gray-400">AGENTE:</span>
                        <span className="font-bold text-yellow-500">{fullPlayerName}</span>
                    </div>
                )}
            </div>

            <div className="z-10 w-full flex-1 flex flex-col items-center justify-center p-4">
                <AnimatePresence mode="wait">

                    {/* --- PANTALLA DE LOGIN --- */}
                    {view === 'login' && (
                        <motion.form
                            key="login-form"
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            exit={{ opacity: 0, y: -20 }}
                            onSubmit={handleLogin}
                            className="bg-black/80 p-8 rounded border border-white/20 shadow-2xl max-w-md w-full backdrop-blur-md"
                        >
                            <h2 className="text-xl text-center mb-6 uppercase tracking-[0.2em] text-white">Identificación</h2>

                            <div className="space-y-4">
                                <div>
                                    <label className="text-xs uppercase text-gray-500 block mb-1">Nombre en Clave</label>
                                    <input
                                        required
                                        value={playerName}
                                        onChange={e => setPlayerName(e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 p-3 rounded text-white focus:outline-none focus:border-yellow-500 transition-colors"
                                        placeholder="Ej: Agente"
                                    />
                                </div>
                                {/* APELLIDO ELIMINADO - SE GENERA AUTOMÁTICAMENTE */}

                                <button
                                    type="submit"
                                    className="w-full bg-yellow-700 hover:bg-yellow-600 text-white font-bold py-3 mt-4 rounded uppercase tracking-wider transition-all"
                                >
                                    Acceder al Cuartel
                                </button>
                            </div>
                        </motion.form>
                    )}

                    {/* --- PANTALLA DE LOBBY (LISTA DE SALAS) --- */}
                    {view === 'lobby' && (
                        <motion.div
                            key="lobby-list"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            className="w-full max-w-5xl"
                        >
                            <div className="flex justify-between items-end mb-6 border-b border-white/20 pb-4">
                                <div>
                                    <h2 className="text-3xl font-light text-white">MISIONES ACTIVAS</h2>
                                    <p className="text-gray-400 text-sm mt-1">Selecciona una operación o inicia una nueva.</p>
                                </div>
                                <button
                                    onClick={() => setShowCreateModal(true)}
                                    className="bg-blue-800 hover:bg-blue-700 text-white px-6 py-2 rounded uppercase text-sm font-bold tracking-wider shadow-lg border border-blue-600 transition-all"
                                >
                                    + Crear Operación
                                </button>
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                {roomsList.length === 0 ? (
                                    <div className="col-span-full py-20 text-center text-gray-500 bg-black/30 rounded border border-white/5 border-dashed">
                                        No hay misiones activas en este momento.
                                    </div>
                                ) : (
                                    roomsList.map((room) => (
                                        <motion.div
                                            key={room.id}
                                            initial={{ scale: 0.95, opacity: 0 }}
                                            animate={{ scale: 1, opacity: 1 }}
                                            className="bg-black/60 border border-white/10 p-5 rounded hover:border-yellow-700/50 transition-colors group relative overflow-hidden"
                                        >
                                            <div className="absolute top-0 right-0 p-2">
                                                {room.isPrivate ? (
                                                    <span title="Privada" className="text-red-400">🔒</span>
                                                ) : (
                                                    <span title="Pública" className="text-green-400/50">🔓</span>
                                                )}
                                            </div>

                                            <h3 className="text-xl font-bold text-yellow-500 mb-1 group-hover:text-yellow-400 transition-colors">
                                                {room.name}
                                            </h3>

                                            <div className="text-sm text-gray-400 mb-4 flex gap-2">
                                                <span className="bg-white/10 px-2 py-0.5 rounded textxs">
                                                    HOST:
                                                </span>
                                                <span className="text-white">{room.hostId.substring(0, 6)}...</span>
                                            </div>

                                            <div className="flex justify-between items-center mt-4">
                                                <div className="flex items-end gap-1">
                                                    <span className="text-3xl font-bold text-white">{room.currentPlayers}</span>
                                                    <span className="text-sm text-gray-500 mb-1">/ {room.maxPlayers}</span>
                                                </div>

                                                <button
                                                    disabled={room.currentPlayers >= room.maxPlayers || room.status !== 'waiting'}
                                                    onClick={() => requestJoinGame(room)}
                                                    className="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded text-xs uppercase font-bold transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                                                >
                                                    {room.status === 'playing' ? 'EN CURSO' : (room.currentPlayers >= room.maxPlayers ? 'LLENA' : 'UNIRSE')}
                                                </button>
                                            </div>

                                            {/* Barra de progreso visual */}
                                            <div className="absolute bottom-0 left-0 h-1 bg-yellow-900/40 w-full">
                                                <div
                                                    className="h-full bg-yellow-600 transition-all duration-500"
                                                    style={{ width: `${(room.currentPlayers / room.maxPlayers) * 100}%` }}
                                                />
                                            </div>
                                        </motion.div>
                                    ))
                                )}
                            </div>
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>

            {/* --- MODALES --- */}

            {/* Modal Crear */}
            {showCreateModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
                    <motion.div
                        initial={{ scale: 0.9 }} animate={{ scale: 1 }}
                        className="bg-zinc-800 p-6 rounded border border-white/20 w-full max-w-sm shadow-2xl"
                    >
                        <h3 className="text-lg font-bold text-white mb-4 uppercase">Configurar Operación</h3>
                        <form onSubmit={handleCreateGame} className="space-y-4">
                            <div>
                                <label className="block text-xs uppercase text-gray-400 mb-1">Nº Jugadores</label>
                                <select
                                    value={createConfig.maxPlayers}
                                    onChange={e => setCreateConfig({ ...createConfig, maxPlayers: Number(e.target.value) })}
                                    className="w-full bg-black/40 border border-white/10 p-2 rounded text-white"
                                >
                                    {[5, 6, 7, 8, 9, 10].map(n => (
                                        <option key={n} value={n}>{n} Jugadores</option>
                                    ))}
                                </select>
                            </div>
                            <div>
                                <label className="block text-xs uppercase text-gray-400 mb-1">Contraseña (Opcional)</label>
                                <input
                                    type="password"
                                    value={createConfig.password}
                                    onChange={e => setCreateConfig({ ...createConfig, password: e.target.value })}
                                    className="w-full bg-black/40 border border-white/10 p-2 rounded text-white font-mono"
                                    placeholder="Dejar vacío para pública"
                                />
                            </div>
                            <div className="flex gap-2 mt-6">
                                <button type="button" onClick={() => setShowCreateModal(false)} className="flex-1 py-2 text-gray-400 hover:text-white transition-colors">Cancelar</button>
                                <button type="submit" className="flex-1 py-2 bg-yellow-700 hover:bg-yellow-600 text-white rounded font-bold uppercase">Crear</button>
                            </div>
                        </form>
                    </motion.div>
                </div>
            )}

            {/* Modal Password */}
            {passwordPromptRoomId && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
                    <motion.div
                        initial={{ scale: 0.9 }} animate={{ scale: 1 }}
                        className="bg-zinc-800 p-6 rounded border border-red-900/50 w-full max-w-sm shadow-2xl"
                    >
                        <h3 className="text-lg font-bold text-red-400 mb-2 uppercase flex items-center gap-2">
                            🔒 Acceso Restringido
                        </h3>
                        <p className="text-xs text-gray-400 mb-4">Esta operación es clasificada. Introduce la clave de acceso.</p>

                        <input
                            type="password"
                            autoFocus
                            value={joinPassword}
                            onChange={e => setJoinPassword(e.target.value)}
                            onKeyDown={e => e.key === 'Enter' && submitJoinPassword()}
                            className="w-full bg-black/40 border border-red-900/30 p-2 rounded text-white font-mono mb-4 focus:border-red-500 outline-none"
                            placeholder="Clave de acceso..."
                        />

                        <div className="flex gap-2">
                            <button onClick={() => setPasswordPromptRoomId(null)} className="flex-1 py-2 text-gray-400 hover:text-white">Cancelar</button>
                            <button onClick={submitJoinPassword} className="flex-1 py-2 bg-red-900 hover:bg-red-800 text-white rounded font-bold uppercase">Acceder</button>
                        </div>
                    </motion.div>
                </div>
            )}

            <div className="absolute bottom-2 right-4 text-[10px] text-gray-600 font-mono">
                {isConnected ? <span className="text-green-900">● CONEXIÓN SEGURA</span> : <span className="text-red-900">● BUSCANDO SEÑAL...</span>}
            </div>
        </main>
    );
}