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

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