const BACKEND_URL = "https://rank.intcplab.cn";

async function fetchScoresData(para, inject) {
  try {
    const response = await fetch(`${BACKEND_URL}/${para}`);
    const data = await response.json();

    const tableBody = document.getElementById(`${inject}`);
    tableBody.innerHTML = "";

    data.forEach((item, index) => {
      const row = document.createElement("tr");

      row.innerHTML = `
        <td>${item.time}</td>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.score}</td>
        <td>${item.running_time}</td>
        <td>
            <button onclick="showDetailsModal('${para}', ${index})">查看详情</button>
        </td>
        `;

      tableBody.appendChild(row);
    });

    const modal = document.getElementById("detailsModal");
    const span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
      modal.style.display = "none";
    };

    window.onclick = function (event) {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    };
  } catch (error) {
    console.error("获取数据时发生错误:", error);
  }
}

function showDetailsModal(para, index) {
  const modal = document.getElementById("detailsModal");
  const modalDetails = document.getElementById("modal-details");
  console.log(para, index);
  fetch(`${BACKEND_URL}/${para}`)
    .then((response) => response.json())
    .then((data) => {
      modalDetails.innerHTML = data[index].details + "<br><br>";
      modal.style.display = "block";
    });
}

window.onload = fetchScoresData("get_top_scores", "top-data-table-body");
window.onload = fetchScoresData("get_scores", "recent-data-table-body");