let usuarioYaEstaEnEquipo = false;

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

// 1. Comprobar si el usuario actual ya pertenece a 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(); // Ocultar "Crear Sala" si ya pertenece a una
        cargarSalaUsuario(respuesta.idPartida);
      }
    },
    error: function (xhr, status, error) {
      console.error("Error al comprobar la sala del usuario:", error);
      usuarioYaEstaEnEquipo = false;
      cargarSalas();
    },
  });
}

// 2. Cargar únicamente la sala en la que está metido el usuario
let intervaloSala = null;

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

  // Evitamos crear varios intervalos
  if (intervaloSala) {
    clearInterval(intervaloSala);
  }

  intervaloSala = setInterval(() => {
    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) {
          // AQUÍ hacemos la primera construcción completa
          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 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, true);
    },
    error: function (xhr, status, error) {
      console.error("Error al obtener la sala:", error);
    },
  });
}

// 3. Cargar la lista completa de todas las salas
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 actualmente.</p>
          </div>
        `);
        return;
      }

      partidas.forEach(function (partida) {
        cargarInformacionSalaCompleta(partida);
      });
    },
    error: function (xhr, status, error) {
      console.error("Error al obtener las partidas:", error);
    },
  });
}

// 4. Obtener equipos y jugadores asociados a una sala concreta
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);
    },
  });
}

// 5. Renderizar el HTML de la sala y botones según estado
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>`;
    }

    // Botón "Unirse" solo visible si NO pertenece a ningún equipo
    let botonUnirseHTML = "";
    if (!usuarioYaEstaEnEquipo) {
      botonUnirseHTML = `
        <button type="button" class="btn-unirse w-100 btn-unirse-equipo mt-2"
                data-id-partida="${partida.idPartida}"
                data-id-equipo="${equipo.idEquipo}">
          Unirse
        </button>
      `;
    }

    equiposHTML += `
      <div class="equipo me-2 ms-2 p-3 border rounded">
        <h6>${escapeHTML(equipo.nombreEquipo)}</h6>
        <div class="jugadores mb-2">
          ${jugadoresHTML}
        </div>
        ${botonUnirseHTML}
      </div>
    `;
  });

  // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
  // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
  let accionesSalaHTML = "";

  if (usuarioYaEstaEnEquipo) {
    const esHost = partida.idUsuario == idUsuarioSesion;
    let botonIniciarHTML = "";

    // Solo el host puede iniciar la partida
    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>
    `;
    }

    accionesSalaHTML = `
    <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>

      ${botonIniciarHTML}

    </div>
  `;
  }

  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>
          ${accionesSalaHTML}
        </div>
      </div>
    </div>
  `;

  contenedor.append(salaHTML);
}

// 6. Evento: 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");
    },
  });
});

// 7. Evento: Abandonar Sala
// Guardamos temporalmente el botón presionado
let botonAbandonarReferencia = null;

// A. Al hacer clic en el botón "Abandonar sala" de la tarjeta, abrimos el 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();
});

// B. Al hacer clic en "Sí, salir" dentro del modal Kahoot
$(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;
      }

      // Restablecemos la interfaz a la lista completa de salas
      usuarioYaEstaEnEquipo = false;
      $("#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();
      }
    },
  });
});
// 8. Evento: Crear Sala
$("#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 === "" || nombreSala.length < 3) {
    mostrarError(
      "#nombreSala",
      "El nombre de la sala debe tener al menos 3 caracteres.",
    );
    valido = false;
  }

  if (nombreEquipo1 === "" || nombreEquipo1.length < 2) {
    mostrarError(
      "#nombreEquipo1",
      "El nombre del equipo debe tener al menos 2 caracteres.",
    );
    valido = false;
  }

  if (nombreEquipo2 === "" || 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;

  const boton = $("#btnCrearSala");
  boton.prop("disabled", true).text("Creando sala...");

  $.ajax({
    url: "controladores/controladorPartida.php",
    type: "POST",
    dataType: "json",
    data: {
      orden: "crear",
      nombrePartida: nombreSala,
      nombreEquipo1: nombreEquipo1,
      nombreEquipo2: nombreEquipo2,
    },
    success: function (respuesta) {
      if (respuesta.error) {
        alert(respuesta.error);
        boton.prop("disabled", false).text("Crear sala");
        return;
      }

      if (respuesta.exito) {
        $("#modalCrearSala").modal("hide");
        location.reload();
      }
    },
    error: function (xhr, status, error) {
      console.error("Error al crear la sala:", error);
      alert("No se ha podido crear la sala.");
      boton.prop("disabled", false).text("Crear sala");
    },
  });
});

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

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

$(document).on("input", ".input-kahoot", function () {
  $(this).removeClass("is-invalid");
  $(this).next(".mensaje-error-sala").remove();
});

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

  // IMPORTANTE:
  // Solo modificamos .equipos
  $("#contenedorSalas .equipos").html(equiposHTML);
}