let usuarioYaEstaEnEquipo = false;

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

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

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

    data: {
      orden: "obtenerSalaUsuario",
    },

    success: function (respuesta) {
      console.log("Sala del usuario:", respuesta);

      if (respuesta.error) {
        console.error(respuesta.error);

        usuarioYaEstaEnEquipo = false;

        cargarSalas();

        return;
      }

      if (respuesta.asociado) {
        usuarioYaEstaEnEquipo = true;

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

        cargarSalaUsuario(respuesta.idPartida);
      } else {
        usuarioYaEstaEnEquipo = false;

        cargarSalas();
      }
    },

    error: function (xhr, status, error) {
      console.error("Error al comprobar la sala del usuario:", error);

      usuarioYaEstaEnEquipo = false;

      cargarSalas();
    },
  });
}

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

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

      cargarInformacionSala(partida);
    },

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

function cargarSalas() {
  $.ajax({
    url: "controladores/controladorPartida.php",
    type: "POST",
    dataType: "json",

    data: {
      orden: "listar",
    },

    success: function (partidas) {
      const contenedor = $("#contenedorSalas");

      contenedor.empty();
      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>
        `;
    }

    let botonUnirseHTML = "";

    if (!usuarioYaEstaEnEquipo) {
      botonUnirseHTML = `
            <button
                type="button"
                class="btn btn-unirse w-100 btn-unirse-equipo"
                data-id-partida="${partida.idPartida}"
                data-id-equipo="${equipo.idEquipo}">

                Unirse

            </button>
        `;
    }

    equiposHTML += `
        <div class="equipo">

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

            <div class="jugadores">

                ${jugadoresHTML}

            </div>

            ${botonUnirseHTML}

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

// ======================================================
// 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);

  boton.text("Uniéndose...");

  $.ajax({
    url: "controladores/ControladorEquipoxUsuario.php",

    type: "POST",

    dataType: "json",

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

    success: function (respuesta) {
      console.log("Respuesta al unirse:", respuesta);

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

        boton.prop("disabled", false);

        boton.text("Unirse");

        return;
      }

      // ==========================================
      // UNIÓN CORRECTA
      // ==========================================

      usuarioYaEstaEnEquipo = true;

      // Ocultamos el botón "Crear sala"

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

      // Eliminamos las salas actuales

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

      // Cargamos directamente la sala
      // donde acaba de entrar el usuario

      cargarSalaUsuario(idPartida);
    },

    error: function (xhr, status, error) {
      console.error("Error al unirse al equipo:", error);

      console.error("Respuesta del servidor:", xhr.responseText);

      alert("No se ha podido unir al equipo.");

      boton.prop("disabled", false);

      boton.text("Unirse");
    },
  });
});

// ======================================================
// ESCAPAR HTML
// ======================================================

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

// ======================================================
// 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 === "") {
    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;
  }

  // Deshabilitamos el botón mientras se crea la sala
  const boton = $("#btnCrearSala");

  boton.prop("disabled", true);
  boton.text("Creando sala...");

  $.ajax({
    url: "controladores/controladorPartida.php", // <-- cambia esto por la ruta de tu controlador
    type: "POST",
    dataType: "json",
    data: {
      orden: "crear",
      nombrePartida: nombreSala,
      nombreEquipo1: nombreEquipo1,
      nombreEquipo2: nombreEquipo2,
    },

    success: function (respuesta) {
      console.log("Respuesta del servidor:", respuesta);

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

        boton.prop("disabled", false);
        boton.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);
      console.error("Respuesta:", xhr.responseText);

      alert("No se ha podido crear la sala.");

      boton.prop("disabled", false);
      boton.text("Crear sala");
    },
  });
});

// ======================================================
// MOSTRAR ERROR
// ======================================================

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

// ======================================================
// QUITAR ERROR AL ESCRIBIR
// ======================================================

$(".input-kahoot").on("input", function () {
  $(this).removeClass("is-invalid");

  $(this).next(".mensaje-error-sala").remove();
});