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

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

// =====================================================
// COMPROBAR SI EL USUARIO YA ESTÁ EN UNA SALA
// =====================================================

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) {
      console.error("Error al comprobar la sala del usuario:", error);

      usuarioYaEstaEnEquipo = false;

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

      cargarSalas();
    },
  });
}

// =====================================================
// CARGAR SALA DEL USUARIO
// =====================================================

function cargarSalaUsuario(idPartida) {
  // Primera carga completa
  cargarSalaCompleta(idPartida);

  // Evitar intervalos duplicados
  if (intervaloSala) {
    clearInterval(intervaloSala);
  }

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

// =====================================================
// CARGA COMPLETA DE LA SALA
// =====================================================

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

// =====================================================
// OBTENER EQUIPOS Y JUGADORES
// =====================================================

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

// =====================================================
// ACTUALIZAR SALA CADA 5 SEGUNDOS
// =====================================================

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

// =====================================================
// OBTENER INFORMACIÓN PARA ACTUALIZACIÓN
// =====================================================

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

// =====================================================
// MOSTRAR SALA COMPLETA
// =====================================================

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

  // IMPORTANTE:
  // El usuario está dentro de una única sala.
  // Por eso aquí SÍ queremos reemplazar.
  contenedor.html(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).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");
    },
  });
});

// =====================================================
// ABANDONAR SALA - ABRIR MODAL
// =====================================================

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

// =====================================================
// CONFIRMAR ABANDONAR SALA
// =====================================================

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

      $("#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.");

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

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

// =====================================================
// AUXILIARES
// =====================================================

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