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

function cargarRanking() {
  $.ajax({
    url: "controladores/controladorUsuario.php",
    type: "POST",
    data: { orden: "obtenerRanking" },
    dataType: "json",
    success: function (response) {
      if (response.exito && response.ranking.length > 0) {
        renderizarTablaRanking(response.ranking);
      } else {
        $("#ranking-container").html(`
                    <div class="alert alert-info my-3">
                        <i class="fa-solid fa-info-circle me-2"></i>Aún no hay partidas registradas para mostrar el ranking.
                    </div>
                `);
      }
    },
    error: function () {
      $("#ranking-container").html(`
                <div class="alert alert-danger my-3">
                    <i class="fa-solid fa-exclamation-triangle me-2"></i>Error al cargar la clasificación.
                </div>
            `);
    },
  });
}

function renderizarTablaRanking(jugadores) {
  let html = `
        <div class="table-responsive">
            <table class="table table-striped table-hover align-middle mb-0 text-center">
                <thead class="table-dark">
                    <tr>
                        <th scope="col" style="width: 10%;">#</th>
                        <th scope="col" class="text-start" style="width: 30%;"><i class="fa-solid fa-user"></i> <br> Jugador</th>
                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-trophy text-warning me-1"></i> <br> Victorias</th>
                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-xmark text-danger me-1"></i> <br> Derrotas</th>
                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-bullseye text-success me-1"></i> <br> Aciertos</th>
                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-medal text-info me-1"></i> <br> Efectividad</th>
                    </tr>
                </thead>
                <tbody>
    `;

  jugadores.forEach((jugador, index) => {
    let posicion = index + 1;
    let medalla = "";

    // Medallas para el Top 3
    if (posicion === 1) {
      medalla =
        '<i class="fa-solid fa-medal text-warning fa-lg" title="1º Puesto"></i>';
    } else if (posicion === 2) {
      medalla =
        '<i class="fa-solid fa-medal text-secondary fa-lg" title="2º Puesto"></i>';
    } else if (posicion === 3) {
      medalla =
        '<i class="fa-solid fa-medal text-brown fa-lg" style="color: #cd7f32;" title="3º Puesto"></i>';
    } else {
      medalla = `<span class="fw-bold text-muted">${posicion}</span>`;
    }

    let avatarImg = jugador.avatar
      ? jugador.avatar
      : "img/avatars/defaultProfile.jpeg";

    html += `
            <tr>
                <td class="fw-bold fs-5">${medalla}</td>
                <td class="text-start fw-bold">
                    <img src="${avatarImg}" alt="Avatar" class="rounded-circle me-2 border" style="width: 32px; height: 32px; object-fit: cover;">
                    ${escapeHtml(jugador.nombreUsuario)}
                </td>
                <td><span class="badge bg-success rounded-pill px-3 py-2 fs-6">${jugador.victorias}</span></td>
                <td><span class="badge bg-danger rounded-pill px-3 py-2 fs-6">${jugador.derrotas}</span></td>
                <td class="fw-bold text-primary fs-6">${jugador.aciertos}</td>
                <td>
                    <span class="badge bg-info text-dark rounded-pill px-2 py-1">${jugador.porcentajeVictoria}%</span>
                </td>
            </tr>
        `;
  });

  html += `
                </tbody>
            </table>
        </div>
    `;

  $("#ranking-container")
    .removeClass("text-center p-4 ranking-placeholder")
    .html(html);
}

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