$(document).ready(function () {

    cargarSalas();

    function cargarSalas() {

        $.ajax({
            url: 'controladores/controladorPartida.php',
            type: 'POST',
            dataType: 'json',
            data: {
                orden: 'listar'
            },

            success: function (partidas) {

                const contenedor =
                    $('#contenedorSalas');

                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) {

                        crearSala(
                            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 crearSala(
        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>
                `;

            }

            equiposHTML += `

                <div class="equipo">

                    <h6>
                        ${escapeHTML(
                            equipo.nombreEquipo
                        )}
                    </h6>

                    <div class="jugadores">

                        ${jugadoresHTML}

                    </div>

                    <button
                        type="button"
                        class="btn btn-unirse w-100 btn-unirse-equipo"
                        data-id-partida="${partida.idPartida}"
                        data-id-equipo="${equipo.idEquipo}">

                        Unirse

                    </button>

                </div>

            `;

        });

        const salaHTML = `

            <div class="col-12 col-md-10 col-lg-8">

                <div class="sala">

                    <div class="sala-header">

                        ${escapeHTML(
                            partida.nombrePartida
                        )}

                    </div>

                    <div class="sala-body">

                        <div class="equipos">

                            ${equiposHTML}

                        </div>

                    </div>

                </div>

            </div>

        `;

        contenedor.append(salaHTML);

    }

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

            const boton = $(this);

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

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

            boton.prop('disabled', true);

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

            $.ajax({

                url:
                    'controladores/controladorPartida.php',

                type: 'POST',

                dataType: 'json',

                data: {

                    orden: 'registrarEquipo',

                    idPartida: idPartida,

                    idEquipo: idEquipo

                },

                success: function (respuesta) {

                    if (respuesta.error) {

                        alert(respuesta.error);

                        boton.prop(
                            'disabled',
                            false
                        );

                        boton.text('Unirse');

                        return;
                    }

                    cargarSalas();

                },

                error: function (
                    xhr,
                    status,
                    error
                ) {

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

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

                    boton.prop(
                        'disabled',
                        false
                    );

                    boton.text('Unirse');

                }

            });

        }
    );

    function escapeHTML(texto) {

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

    }

    $('#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;
        }

        console.log('Datos válidos:');

        console.log({
            nombreSala: nombreSala,
            nombreEquipo1: nombreEquipo1,
            nombreEquipo2: nombreEquipo2
        });

    });

    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>
        `);
    }

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

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

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

    });

});