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

async function fetchScoresData(para, project, inject) {
  try {
    const response = await fetch(`${BACKEND_URL}/get_scores/${project}?sort_by=${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.toFixed(2)}</td>
        <td>${item.running_time}</td>
        <td>
            <button onclick="showDetailsModal('${para}', '${project}', ${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, project, index) {
  const modal = document.getElementById("detailsModal");
  const modalDetails = document.getElementById("modal-details");
  console.log(para, index);
  fetch(`${BACKEND_URL}/get_scores/${project}?sort_by=${para}`)
    .then((response) => response.json())
    .then((data) => {
      modalDetails.innerHTML = data[index].details + "<br><br>" + (data[index].hash ? `若<b>仓库设置</b>为公开，则可<a href="${data[index].hash}" target="_blank">点击查看</a>评测所对应提交<br><br>` : "");
      modal.style.display = "block";
    });
}

window.onload = fetchScoresData("score", "challenge_knn", "top-data-table-body");
window.onload = fetchScoresData("time", "challenge_knn", "recent-data-table-body");