const leaderboardFile = "leaderboard.json";

// 🔹 Buka popup leaderboard
function openLeaderboard() {
  document.getElementById("leaderboardPopup").style.display = "flex";
  loadLeaderboard();
}

// 🔹 Tutup popup leaderboard
function closeLeaderboard() {
  document.getElementById("leaderboardPopup").style.display = "none";
}


// 🔹 Muat leaderboard dari JSON
async function loadLeaderboard() {
  const difficulty = localStorage.getItem("difficulty") || "easy"; 

  try {
    const res = await fetch(leaderboardFile + "?v=" + Date.now());
    const data = await res.json();

    // Ambil list sesuai difficulty
    let list = data[difficulty] || [];
    
    // Urutkan score dari paling tinggi
    list.sort((a, b) => b.score - a.score);

    const tbody = document.getElementById("leaderboard-body");
    tbody.innerHTML = "";

    newOrder.length = 0;
    list.forEach((p, i) => {
      newOrder.push(p.name);

      let movementClass = "";
      if (previousOrder.length > 0) {
        const oldIndex = previousOrder.indexOf(p.name);
        if (oldIndex !== -1) {
          if (oldIndex > i) movementClass = "rank-up";     
          if (oldIndex < i) movementClass = "rank-down";   
        }
      }

      tbody.innerHTML += `
        <tr class="${movementClass}">
          <td class="rank">#${i + 1}</td>
          <td>${p.name}</td>
          <td>${p.score}</td>
        </tr>`;
    });

    highlightTab(difficulty);

    // Simpan posisi lama → jadi perbandingan load berikutnya
    localStorage.setItem("prev_ranking", JSON.stringify(newOrder));

  } catch (error) {
    document.getElementById("leaderboard-body").innerHTML =
      `<tr><td colspan="3">⚠ Gagal memuat leaderboard</td></tr>`;
  }
}


// 🔹 Menyimpan skor ke leaderboard.json
async function saveScore(name, score, difficulty) {
  const res = await fetch(leaderboardFile);
  let data = await res.json();
  let board = data[difficulty];

  const player = board.find(e => e.name.toLowerCase() === name.toLowerCase());

  if (player) {
    if (score > player.score) player.score = score;
  } else {
    board.push({ name, score });
  }

  await fetch(leaderboardFile, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data, null, 2),
  });
}


const difficulty = localStorage.getItem("difficulty") || "easy";
localStorage.setItem("playerName", username);

let previousOrder = JSON.parse(localStorage.getItem("prev_ranking") || "[]");
let newOrder = [];

function highlightTab(diff) {
  document.querySelectorAll(".difficulty-tabs button").forEach(btn => btn.classList.remove("active"));
  document.getElementById("tab-" + diff).classList.add("active");
}

function changeDifficulty(diff) {
  localStorage.setItem("difficulty", diff);
  previousOrder = JSON.parse(localStorage.getItem("prev_ranking")) || [];
  loadLeaderboard();
  highlightTab(diff);
}