// results.js - results page logic

import { getGrade } from "./scoring.js";
import { getGameState, getPlayerName } from "./storage.js";

document.addEventListener("DOMContentLoaded", () => {
	const state = getGameState();
	const name = 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;

	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;

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

	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);
	});

	requestAnimationFrame(() => {
		document.querySelectorAll(".round-row__bar").forEach((bar) => {
			bar.style.width = `${bar.dataset.target}%`;
		});
	});

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