// results.js — results page logic

document.addEventListener("DOMContentLoaded", () => {
  const state = Storage.getGameState();
  const name  = Storage.getPlayerName();

  document.getElementById("results-player").textContent = name;

  if (!state) {
    document.getElementById("results-title").textContent = "No game found.";
    document.getElementById("total-score").textContent   = "—";
    return;
  }

  const { scores, totalScore, countries } = state;

  // Determine emoji and title based on average score
  const avg = totalScore / 3;
  let emoji = "🌍";
  let title = "Not bad!";
  if (avg >= 85)      { emoji = "🔥"; title = "Incredible!"; }
  else if (avg >= 70) { emoji = "🎉"; title = "Well done!"; }
  else if (avg >= 50) { emoji = "👏"; title = "Good effort!"; }
  else                { emoji = "😅"; title = "Keep practising!"; }

  document.getElementById("results-emoji").textContent = emoji;
  document.getElementById("results-title").textContent  = title;
  document.getElementById("total-score").textContent    = totalScore;

  // Grade badge
  const grade   = Scoring.getGrade(avg);
  const gradeEl = document.getElementById("total-grade");
  gradeEl.textContent = `Grade ${grade.label}`;

  // Round breakdown rows
  const rowsContainer = document.getElementById("round-rows");
  (scores || []).forEach((score, index) => {
    const row = document.createElement("div");
    row.className = "round-row";
    row.innerHTML = `
      <span class="round-row__label">Round ${index + 1}</span>
      <div class="round-row__bar-wrap">
        <div class="round-row__bar" style="width:0%" data-target="${score}"></div>
      </div>
      <span class="round-row__score">${score}%</span>
    `;
    rowsContainer.appendChild(row);
  });

  // Animate score bars on next frame so CSS transition fires
  requestAnimationFrame(() => {
    document.querySelectorAll(".round-row__bar").forEach((bar) => {
      bar.style.width = `${bar.dataset.target}%`;
    });
  });

  // Country tags
  const tagsContainer = document.getElementById("countries-row");
  (countries || []).forEach((country) => {
    const tag = document.createElement("span");
    tag.className   = "country-tag";
    tag.textContent = country;
    tagsContainer.appendChild(tag);
  });
});