const updateLeaderboard = () => {
  const rows = document.querySelectorAll('table#leaderboard > tbody > tr');

  rows.forEach(row => {
    row.remove();
  });

  fetch('/api/leaderboard')
    .then(response => response.json())
    .then(data => {
      const tbody = document.querySelector('table#leaderboard > tbody');
      data.sort((a, b) => b.grade - a.grade);

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

        const nameCell = document.createElement('td');
        nameCell.textContent = entry.user;
        row.appendChild(nameCell);

        const scoreCell = document.createElement('td');
        scoreCell.textContent = entry.grade;
        row.appendChild(scoreCell);

        const timeCell = document.createElement('td');
        timeCell.textContent = entry.lastTest;
        row.appendChild(timeCell);

        if(entry.lastResult) {
          timeCell.classList.add('success');
        } else if (!entry.lastResult && entry.lastTest){
          timeCell.classList.add('fail');
        }

        tbody.appendChild(row);
      });
    })
    .catch(error => {
      console.error('Error fetching leaderboard data:', error);
    });
};

document.addEventListener('DOMContentLoaded', () => {
  setInterval(updateLeaderboard, 5000);
});