// =====================================================
// VARIABLES
// =====================================================

let intervaloBuscadorSalas = null;
let cargandoSalas = false;


// =====================================================
// INICIAR ACTUALIZACIÓN AUTOMÁTICA
// =====================================================

function iniciarActualizacionSalas() {
  // Evitar crear varios intervalos
  if (intervaloBuscadorSalas) {
    clearInterval(intervaloBuscadorSalas);
  }

  // Primera carga
  cargarSalas();

  // Actualizar cada 5 segundos
  intervaloBuscadorSalas = setInterval(function () {
    // Si el usuario está dentro de una sala,
    // no necesitamos actualizar el buscador.
    if (!usuarioYaEstaEnEquipo) {
      cargarSalas();
    }
  }, 5000);
}


// =====================================================
// CARGAR LISTA DE SALAS
// =====================================================

function cargarSalas() {
  // Evitar peticiones simultáneas
  if (cargandoSalas) {
    return;
  }

  cargandoSalas = true;

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

    data: {
      orden: "listar",
    },

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

      // =================================================
      // NO HAY SALAS
      // =================================================

      if (
        !Array.isArray(partidas) ||
        partidas.length === 0
      ) {
        // Ocultamos/eliminamos únicamente las salas
        $(".sala-item").remove();

        if ($("#mensajeSinSalas").length === 0) {
          contenedor.append(`
            <div
              id="mensajeSinSalas"
              class="col-12 text-center">

              <p class="text-muted">
                No hay salas disponibles actualmente.
              </p>

            </div>
          `);
        }

        return;
      }


      // =================================================
      // HAY SALAS
      // =================================================

      // Eliminar mensaje de "no hay salas"
      $("#mensajeSinSalas").remove();


      // =================================================
      // OBTENER IDS DE LAS SALAS ACTUALES
      // =================================================

      const idsPartidas = partidas.map(function (partida) {
        return String(partida.idPartida);
      });


      // =================================================
      // ELIMINAR SALAS QUE YA NO EXISTEN
      // =================================================

      $(".sala-item").each(function () {
        const idPartida = String(
          $(this).data("id-partida")
        );

        if (!idsPartidas.includes(idPartida)) {
          $(this).remove();
        }
      });


      // =================================================
      // ACTUALIZAR / CREAR CADA SALA
      // =================================================

      partidas.forEach(function (partida) {
        cargarSalaBuscador(partida);
      });
    },

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

    complete: function () {
      cargandoSalas = false;
    },
  });
}


// =====================================================
// CARGAR INFORMACIÓN DE UNA SALA
// =====================================================

function cargarSalaBuscador(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) {
          actualizarSalaBuscador(
            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 UNA SALA
// =====================================================

function actualizarSalaBuscador(
  partida,
  equipos,
  jugadores
) {
  const selectorSala =
    `.sala-item[data-id-partida="${partida.idPartida}"]`;

  const salaExistente = $(selectorSala);


  // ===================================================
  // SI LA SALA NO EXISTE → CREARLA
  // ===================================================

  if (salaExistente.length === 0) {
    crearSalaBuscador(
      partida,
      equipos,
      jugadores
    );

    return;
  }


  // ===================================================
  // LA SALA YA EXISTE
  // ===================================================
  //
  // NO TOCAMOS LA TARJETA COMPLETA.
  //
  // Solo actualizamos .equipos
  //


  const equiposHTML =
    generarEquiposHTML(
      partida,
      equipos,
      jugadores
    );


  salaExistente
    .find(".equipos")
    .html(equiposHTML);
}


// =====================================================
// CREAR UNA SALA NUEVA
// =====================================================

function crearSalaBuscador(
  partida,
  equipos,
  jugadores
) {
  const equiposHTML =
    generarEquiposHTML(
      partida,
      equipos,
      jugadores
    );


  const salaHTML = `
    <div
      class="col-12 col-md-10 col-lg-8 sala-item"
      data-id-partida="${partida.idPartida}">

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

        <!-- =========================================
             CABECERA
        ========================================== -->

        <div
          class="sala-header h4 text-center mb-3 text-white">

          ${escapeHTML(
            partida.nombrePartida
          )}

        </div>


        <!-- =========================================
             CUERPO
        ========================================== -->

        <div class="sala-body">

          <!-- ESTA ES LA PARTE QUE SE ACTUALIZA -->

          <div class="equipos d-flex justify-content-around">

            ${equiposHTML}

          </div>

        </div>

      </div>

    </div>
  `;


  $("#contenedorSalas").append(
    salaHTML
  );
}


// =====================================================
// GENERAR HTML DE EQUIPOS Y JUGADORES
// =====================================================

function generarEquiposHTML(
  partida,
  equipos,
  jugadores
) {
  let equiposHTML = "";


  equipos.forEach(function (equipo) {
    // -----------------------------------------------
    // JUGADORES DE ESTE EQUIPO
    // -----------------------------------------------

    const jugadoresEquipo =
      jugadores.filter(
        function (jugador) {
          return (
            jugador.idEquipo ==
            equipo.idEquipo
          );
        }
      );


    let jugadoresHTML = "";


    // -----------------------------------------------
    // MOSTRAR JUGADORES
    // -----------------------------------------------

    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">

              <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
    // -----------------------------------------------

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


    // -----------------------------------------------
    // EQUIPO
    // -----------------------------------------------

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


  return equiposHTML;
}


// =====================================================
// CREAR SALA
// =====================================================

$("#btnCrearSala").on(
  "click",
  function () {
    const nombreSala =
      $("#nombreSala").val().trim();

    const nombreEquipo1 =
      $("#nombreEquipo1").val().trim();

    const nombreEquipo2 =
      $("#nombreEquipo2").val().trim();


    let valido = true;


    // -----------------------------------------------
    // LIMPIAR ERRORES
    // -----------------------------------------------

    $(".mensaje-error-sala").remove();

    $(".input-kahoot")
      .removeClass("is-invalid");


    // -----------------------------------------------
    // VALIDAR NOMBRE DE SALA
    // -----------------------------------------------

    if (
      nombreSala === "" ||
      nombreSala.length < 3
    ) {
      mostrarError(
        "#nombreSala",
        "El nombre de la sala debe tener al menos 3 caracteres."
      );

      valido = false;
    }


    // -----------------------------------------------
    // VALIDAR EQUIPO 1
    // -----------------------------------------------

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

      valido = false;
    }


    // -----------------------------------------------
    // VALIDAR EQUIPO 2
    // -----------------------------------------------

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

      valido = false;
    }


    // -----------------------------------------------
    // COMPROBAR NOMBRES IGUALES
    // -----------------------------------------------

    if (
      nombreEquipo1 !== "" &&
      nombreEquipo2 !== "" &&
      nombreEquipo1.toLowerCase() ===
        nombreEquipo2.toLowerCase()
    ) {
      mostrarError(
        "#nombreEquipo2",
        "Los dos equipos deben tener nombres diferentes."
      );

      valido = false;
    }


    // -----------------------------------------------
    // SI HAY ERRORES
    // -----------------------------------------------

    if (!valido) {
      return;
    }


    // -----------------------------------------------
    // BOTÓN
    // -----------------------------------------------

    const boton = $("#btnCrearSala");

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


    // -----------------------------------------------
    // PETICIÓN
    // -----------------------------------------------

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


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


// =====================================================
// LIMPIAR ERRORES AL ESCRIBIR
// =====================================================

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

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