let usuarioYaEstaEnEquipo = false;

$(document).ready(function () {
comprobarSalaUsuario();
});

function comprobarSalaUsuario() {

$("#cargandoSalas").remove();

$.ajax({
    url: "controladores/ControladorEquipoxUsuario.php",
    type: "POST",
    dataType: "json",

    data: {
        orden: "obtenerSalaUsuario"
    },

    success: function (respuesta) {

        console.log("Sala del usuario:", respuesta);

        if (respuesta.error) {

            console.error(respuesta.error);

            usuarioYaEstaEnEquipo = false;

            cargarSalas();

            return;
        }

        if (respuesta.asociado) {

            usuarioYaEstaEnEquipo = true;

            $("#contenedorCrearSala").hide();

            cargarSalaUsuario(respuesta.idPartida);

        } else {

            usuarioYaEstaEnEquipo = false;

            cargarSalas();
        }
    },

    error: function (xhr, status, error) {

        console.error(
            "Error al comprobar la sala del usuario:",
            error
        );

        usuarioYaEstaEnEquipo = false;

        cargarSalas();
    }
});


}

function cargarSalaUsuario(idPartida) {

$.ajax({
    url: "controladores/controladorPartida.php",
    type: "POST",
    dataType: "json",

    data: {
        orden: "buscar",
        idPartida: idPartida
    },

    success: function (partida) {

        if (partida.error) {

            console.error(partida.error);

            return;
        }

        $("#contenedorSalas").empty();

        cargarInformacionSala(partida);
    },

    error: function (xhr, status, error) {

        console.error(
            "Error al obtener la sala del usuario:",
            error
        );
    }
});


}

function cargarSalas() {

$.ajax({
    url: "controladores/controladorPartida.php",
    type: "POST",
    dataType: "json",

    data: {
        orden: "listar"
    },

    success: function (partidas) {

        const contenedor = $("#contenedorSalas");

        contenedor.empty();
        contenedor.empty();

        if (!Array.isArray(partidas) || partidas.length === 0) {

            contenedor.html(`
                <div class="col-12 text-center">
                    <p class="text-muted">
                        No hay salas disponibles.
                    </p>
                </div>
            `);

            return;
        }

        partidas.forEach(function (partida) {

            cargarInformacionSala(partida);

        });
    },

    error: function (xhr, status, error) {

        console.error(
            "Error al obtener las partidas:",
            error
        );
    }
});


}

function cargarInformacionSala(partida) {

$.ajax({
    url: "controladores/controladorPartida.php",
    type: "POST",
    dataType: "json",

    data: {
        orden: "getEquipos",
        idPartida: partida.idPartida
    },

    success: function (equipos) {

        $.ajax({
            url: "controladores/controladorPartida.php",
            type: "POST",
            dataType: "json",

            data: {
                orden: "getJugadores",
                idPartida: partida.idPartida
            },

            success: function (jugadores) {

                mostrarSala(
                    partida,
                    equipos,
                    jugadores
                );
            },

            error: function (xhr, status, error) {

                console.error(
                    "Error al obtener jugadores:",
                    error
                );
            }
        });
    },

    error: function (xhr, status, error) {

        console.error(
            "Error al obtener equipos:",
            error
        );
    }
});


}

function mostrarSala(partida, equipos, jugadores) {

    const contenedor = $("#contenedorSalas");
    let equiposHTML = "";

    equipos.forEach(function (equipo) {

        const jugadoresEquipo = jugadores.filter(function (jugador) {
            return jugador.idEquipo == equipo.idEquipo;
        });

        let jugadoresHTML = "";

        if (jugadoresEquipo.length > 0) {
            jugadoresEquipo.forEach(function (jugador) {
                jugadoresHTML += `
                    <div class="jugador">
                        <span class="avatar">👤</span>
                        ${escapeHTML(jugador.nombreUsuario)}
                    </div>
                `;
            });
        } else {
            jugadoresHTML = `
                <div class="text-muted small">Sin jugadores</div>
            `;
        }

        let botonUnirseHTML = "";

        if (!usuarioYaEstaEnEquipo) {
            botonUnirseHTML = `
                <button
                    type="button"
                    class="btn btn-unirse w-100 btn-unirse-equipo mt-2"
                    data-id-partida="${partida.idPartida}"
                    data-id-equipo="${equipo.idEquipo}">
                    Unirse
                </button>
            `;
        }

        equiposHTML += `
            <div class="equipo me-2 ms-2 p-3 border rounded">
                <h6>${escapeHTML(equipo.nombreEquipo)}</h6>
                <div class="jugadores mb-2">
                    ${jugadoresHTML}
                </div>
                ${botonUnirseHTML}
            </div>
        `;
    });

    // Zona de acciones adicionales si el usuario YA está dentro de esta sala
    let accionesSalaHTML = "";
    if (usuarioYaEstaEnEquipo) {
        accionesSalaHTML = `
            <div class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
                <button type="button" class="btn btn-outline-danger btn-abandonar-sala" data-id-partida="${partida.idPartida}">
                    Abandonar sala
                </button>
                <a href="juego.php?idPartida=${partida.idPartida}" class="btn btn-success btn-lg px-4">
                    🎮 ¡Iniciar Partida!
                </a>
            </div>
        `;
    }

    const salaHTML = `
        <div class="col-12 col-md-10 col-lg-8">
            <div class="sala card p-3 shadow-sm">
                <div class="sala-header h4 text-center mb-3">
                    ${escapeHTML(partida.nombrePartida)}
                </div>
                <div class="sala-body">
                    <div class="equipos d-flex justify-content-around">
                        ${equiposHTML}
                    </div>
                    ${accionesSalaHTML}
                </div>
            </div>
        </div>
    `;

    contenedor.append(salaHTML);
}

// ======================================================
// UNIRSE A UN EQUIPO
// ======================================================

$(document).on(
"click",
".btn-unirse-equipo",
function () {

    const boton = $(this);

    const idEquipo = boton.data("id-equipo");

    const idPartida = boton.data("id-partida");


    boton.prop("disabled", true);

    boton.text("Uniéndose...");


    $.ajax({

        url: "controladores/ControladorEquipoxUsuario.php",

        type: "POST",

        dataType: "json",

        data: {
            orden: "registrarUsuarioEnEquipo",
            idEquipo: idEquipo
        },


        success: function (respuesta) {

            console.log(
                "Respuesta al unirse:",
                respuesta
            );


            if (respuesta.error) {

                alert(respuesta.error);

                boton.prop("disabled", false);

                boton.text("Unirse");

                return;
            }


            // ==========================================
            // UNIÓN CORRECTA
            // ==========================================

            usuarioYaEstaEnEquipo = true;


            // Ocultamos el botón "Crear sala"

            $("#contenedorCrearSala").hide();


            // Eliminamos las salas actuales

            $("#contenedorSalas").empty();


            // Cargamos directamente la sala
            // donde acaba de entrar el usuario

            cargarSalaUsuario(idPartida);
        },


        error: function (xhr, status, error) {

            console.error(
                "Error al unirse al equipo:",
                error
            );

            console.error(
                "Respuesta del servidor:",
                xhr.responseText
            );


            alert(
                "No se ha podido unir al equipo."
            );


            boton.prop("disabled", false);

            boton.text("Unirse");
        }
    });
}


);

// ======================================================
// ESCAPAR HTML
// ======================================================

function escapeHTML(texto) {

return $("<div>")
    .text(texto ?? "")
    .html();


}

// ======================================================
// CREAR SALA
// ======================================================

$('#btnCrearSala').on('click', function () {
	
    const nombreSala =
        $('#nombreSala').val().trim();
	
    const nombreEquipo1 =
        $('#nombreEquipo1').val().trim();
	
    const nombreEquipo2 =
        $('#nombreEquipo2').val().trim();
	
    let valido = true;
	
    $('.mensaje-error-sala').remove();
	
    $('.input-kahoot')
        .removeClass('is-invalid');
	
    if (nombreSala === '') {
	
        mostrarError(
            '#nombreSala',
            'El nombre de la sala es obligatorio.'
        );
	
        valido = false;
	
    } else if (nombreSala.length < 3) {
	
        mostrarError(
            '#nombreSala',
            'El nombre de la sala debe tener al menos 3 caracteres.'
        );
	
        valido = false;
    }
	
    if (nombreEquipo1 === '') {
	
        mostrarError(
            '#nombreEquipo1',
            'El nombre del equipo 1 es obligatorio.'
        );
	
        valido = false;
	
    } else if (nombreEquipo1.length < 2) {
	
        mostrarError(
            '#nombreEquipo1',
            'El nombre del equipo debe tener al menos 2 caracteres.'
        );
	
        valido = false;
    }
	
    if (nombreEquipo2 === '') {
	
        mostrarError(
            '#nombreEquipo2',
            'El nombre del equipo 2 es obligatorio.'
        );
	
        valido = false;
	
    } else if (nombreEquipo2.length < 2) {
	
        mostrarError(
            '#nombreEquipo2',
            'El nombre del equipo debe tener al menos 2 caracteres.'
        );
	
        valido = false;
    }
	
    if (
        nombreEquipo1 !== '' &&
        nombreEquipo2 !== '' &&
        nombreEquipo1.toLowerCase() ===
        nombreEquipo2.toLowerCase()
    ) {
	
        mostrarError(
            '#nombreEquipo2',
            'Los dos equipos deben tener nombres diferentes.'
        );
	
        valido = false;
    }
	
    if (!valido) {
        return;
    }

    // Deshabilitamos el botón mientras se crea la sala
    const boton = $('#btnCrearSala');

    boton.prop('disabled', true);
    boton.text('Creando sala...');

    $.ajax({
        url: 'controladores/controladorPartida.php', // <-- cambia esto por la ruta de tu controlador
        type: 'POST',
        dataType: 'json',
        data: {
            orden: 'crear',
            nombrePartida: nombreSala,
            nombreEquipo1: nombreEquipo1,
            nombreEquipo2: nombreEquipo2
        },

        success: function (respuesta) {

            console.log('Respuesta del servidor:', respuesta);

            if (respuesta.error) {

                alert(respuesta.error);

                boton.prop('disabled', false);
                boton.text('Crear sala');

                return;
            }

            if (respuesta.exito) {
                
                $('#modalCrearSala').modal('hide');
                location.reload();

            }
        },

        error: function (xhr, status, error) {

            console.error('Error al crear la sala:', error);
            console.error('Respuesta:', xhr.responseText);

            alert('No se ha podido crear la sala.');

            boton.prop('disabled', false);
            boton.text('Crear sala');
        }
    });
});


// ======================================================
// MOSTRAR ERROR
// ======================================================

function mostrarError(selector, mensaje) {

const input = $(selector);

input.addClass("is-invalid");


input.after(`
    <div class="mensaje-error-sala text-danger mt-1 small">

        ${mensaje}

    </div>
`);


}

// ======================================================
// QUITAR ERROR AL ESCRIBIR
// ======================================================

$(".input-kahoot").on(
"input",
function () {

    $(this).removeClass(
        "is-invalid"
    );

    $(this)
        .next(".mensaje-error-sala")
        .remove();
}


);


// ======================================================
// ABANDONAR SALA
// ======================================================
$(document).on("click", ".btn-abandonar-sala", function () {
    if (!confirm("¿Estás seguro de que deseas salir de esta sala?")) {
        return;
    }

    const boton = $(this);
    boton.prop("disabled", true).text("Saliendo...");

    $.ajax({
        url: "controladores/ControladorEquipoxUsuario.php",
        type: "POST",
        dataType: "json",
        data: {
            orden: "salirDeSala" // Asegúrate de procesar esta 'orden' en tu PHP
        },
        success: function (respuesta) {
            if (respuesta.error) {
                alert(respuesta.error);
                boton.prop("disabled", false).text("Abandonar sala");
                return;
            }

            // Restablecemos el estado y recargamos la lista completa de salas
            usuarioYaEstaEnEquipo = false;
            $("#contenedorCrearSala").show();
            cargarSalas();
        },
        error: function (xhr, status, error) {
            console.error("Error al salir de la sala:", error);
            alert("No se pudo salir de la sala.");
            boton.prop("disabled", false).text("Abandonar sala");
        }
    });
});