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

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

    // ==========================================
    // AJAX
    // ==========================================

    $.ajax({
      method: "POST",
      url: "controladores/controladorPartida.php",
      data: {
        nombrePartida: nombreSala,
        nombreEquipo1: nombreEquipo1,
        nombreEquipo2: nombreEquipo2,
        orden: "crear",
      },
    }).done(function (respuesta) {
      console.log(respuesta);

      respuesta = JSON.parse(respuesta);

      if (respuesta.error) {
        alert(respuesta.error);
      } else {
        console.log("Sala creada correctamente");
        console.log("ID partida:", respuesta.idPartida);
        console.log("ID equipo 1:", respuesta.idEquipo1);
        console.log("ID equipo 2:", respuesta.idEquipo2);

        // Cerramos el modal
        $("#modalCrearSala").modal("hide");

        // Aquí posteriormente podemos mandar al usuario
        // a la página de la sala
        //
        // window.location.href =
        //     'sala.php?id=' + respuesta.idPartida;
      }
    });
  });

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