let usuarioYaEstaEnEquipo = false;
let intervaloSala = null;
let botonAbandonarReferencia = null;

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

function comprobarSalaUsuario() {
  $("#cargandoSalas").remove();

  $.ajax({
    url: "controladores/controladorEquipoxUsuario.php",
    type: "POST",
    dataType: "json",
    data: {
      orden: "obtenerSalaUsuario",
    },

    success: function (respuesta) {
      if (respuesta.error || !respuesta.asociado) {
        usuarioYaEstaEnEquipo = false;

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

        iniciarActualizacionSalas();
      } else {
        usuarioYaEstaEnEquipo = true;

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

        cargarSalaUsuario(respuesta.idPartida);
      }
    },

    error: function (xhr, status, error) {
      usuarioYaEstaEnEquipo = false;

      if (intervaloSala) {
        clearInterval(intervaloSala);
        intervaloSala = null;
      }

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

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

      iniciarActualizacionSalas();
    },
  });
}

function cargarSalaUsuario(idPartida) {
  cargarSalaCompleta(idPartida);

  if (intervaloSala) {
    clearInterval(intervaloSala);
  }

  intervaloSala = setInterval(function () {
    actualizarSalaUsuario(idPartida);
  }, 5000);
}

function cargarSalaCompleta(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;
      }

      cargarInformacionSalaCompleta(partida);
    },

    error: function (xhr, status, error) {
      console.error("Error al obtener la sala:", error);
    },
  });
}

function cargarInformacionSalaCompleta(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 actualizarSalaUsuario(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;
      }

      cargarInformacionSala(partida);
    },

    error: function (xhr, status, error) {
      console.error("Error al actualizar la sala:", 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) {
          mostrarEquipos(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) {
        const esHost = jugador.idUsuario == partida.idUsuario;

        jugadoresHTML += `
          <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
            esHost ? "jugador-host" : ""
          }">

            <div>
              <span class="avatar">
                ${
                  esHost
                    ? '<i class="bi bi-award-fill"></i>'
                    : '<i class="bi bi-person-fill"></i>'
                }
              </span>

              ${escapeHTML(jugador.nombreUsuario)}
            </div>

            ${
              esHost
                ? `<span class="badge bg-warning text-dark ms-2">
                    HOST
                   </span>`
                : ""
            }

          </div>
        `;
      });
    } else {
      jugadoresHTML = `
        <div class="text-muted small">
          Sin jugadores
        </div>
      `;
    }

    equiposHTML += `
      <div class="equipo me-2 ms-2 p-3 border rounded">

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

        <div class="jugadores mb-2">
          ${jugadoresHTML}
        </div>

      </div>
    `;
  });

  const esHost = partida.idUsuario == idUsuarioSesion;

  let botonIniciarHTML = "";

  if (esHost) {
    botonIniciarHTML = `
      <a
        href="juego.php?idPartida=${partida.idPartida}"
        class="btn btn-success btn-lg px-4">

        <i class="bi bi-controller"></i>
        ¡Iniciar Partida!

      </a>
    `;
  }

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

      <div class="sala card p-3 shadow-sm mb-4">

        <div class="sala-header h4 text-center mb-3 text-white">
          ${escapeHTML(partida.nombrePartida)}
        </div>

        <div class="sala-body">

          <div class="equipos d-flex justify-content-around">
            ${equiposHTML}
          </div>

          <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}"
              data-es-host="${esHost}">

              Abandonar sala

            </button>

            ${esHost ? botonIniciarHTML : ""}

          </div>

        </div>

      </div>

    </div>
  `;

  contenedor.html(salaHTML);
}

$(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).text("Uniéndose...");

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

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

    success: function (respuesta) {
      if (respuesta.error) {
        alert(respuesta.error);

        boton.prop("disabled", false).text("Unirse");

        return;
      }

      usuarioYaEstaEnEquipo = true;

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

      cargarSalaUsuario(idPartida);
    },

    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).text("Unirse");
    },
  });
});

$(document).on("click", ".btn-abandonar-sala", function () {
  botonAbandonarReferencia = $(this);

  const esHost =
    $(this).data("es-host") === true ||
    $(this).data("es-host") === "true";

  const titulo = $("#modalAbandonarSalaLabel");

  const mensaje = $("#modalAbandonarSalaMensaje");

  const botonConfirmar = $("#btnConfirmarAbandonar");

  if (esHost) {
    titulo.text("¿Abandonar la sala?");

    mensaje.text(
      "Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores.",
    );

    botonConfirmar.text("Sí, terminar partida");
  } else {
    titulo.text("¿Abandonar la sala?");

    mensaje.text(
      "Si sales de la sala, perderás tu lugar en el equipo.",
    );

    botonConfirmar.text("Sí, salir");
  }

  const modal = new bootstrap.Modal(
    document.getElementById("modalAbandonarSala"),
  );

  modal.show();
});

$(document).on("click", "#btnConfirmarAbandonar", function () {
  const modalEl =
    document.getElementById("modalAbandonarSala");

  const modalInstance =
    bootstrap.Modal.getInstance(modalEl);

  const btnConfirmar = $(this);

  btnConfirmar
    .prop("disabled", true)
    .text("Saliendo...");

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

    data: {
      orden: "salirDeSala",
    },

    success: function (respuesta) {
      btnConfirmar
        .prop("disabled", false)
        .text("Sí, salir");

      if (modalInstance) {
        modalInstance.hide();
      }

      if (respuesta.error) {
        alert(respuesta.error);
        return;
      }

      usuarioYaEstaEnEquipo = false;

      if (intervaloSala) {
        clearInterval(intervaloSala);
        intervaloSala = null;
      }

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

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

      iniciarActualizacionSalas();
    },

    error: function (xhr, status, error) {
      console.error(
        "Error al salir de la sala:",
        error
      );

      alert("No se pudo salir de la sala.");

      btnConfirmar
        .prop("disabled", false)
        .text("Sí, salir");

      if (modalInstance) {
        modalInstance.hide();
      }
    },
  });
});

function escapeHTML(texto) {
  return $("<div>")
    .text(texto ?? "")
    .html();
}

function mostrarEquipos(
  partida,
  equipos,
  jugadores
) {
  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) {
        const esHost =
          jugador.idUsuario == partida.idUsuario;

        jugadoresHTML += `
          <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
            esHost ? "jugador-host" : ""
          }">

            <div>
              <span class="avatar">
                ${
                  esHost
                    ? '<i class="bi bi-award-fill"></i>'
                    : '<i class="bi bi-person-fill"></i>'
                }
              </span>

              ${escapeHTML(
                jugador.nombreUsuario
              )}
            </div>

            ${
              esHost
                ? `<span class="badge bg-warning text-dark ms-2">
                    HOST
                   </span>`
                : ""
            }

          </div>
        `;
      });
    } else {
      jugadoresHTML = `
        <div class="text-muted small">
          Sin jugadores
        </div>
      `;
    }

    equiposHTML += `
      <div class="equipo me-2 ms-2 p-3 border rounded">

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

        <div class="jugadores mb-2">
          ${jugadoresHTML}
        </div>

      </div>
    `;
  });

  $("#contenedorSalas .equipos").html(equiposHTML);
}