GameList/wwwroot/app.js

const state = {
  me: null,
  phase: null,
  counts: null,
  mySuggestions: [],
  allSuggestions: [],
  myVotes: [],
  results: [],
  adminKey: ""
};

const $ = (id) => document.getElementById(id);
const toastEl = $("toast");

function toast(msg, isError = false) {
  toastEl.textContent = msg;
  toastEl.classList.remove("hidden");
  toastEl.classList.toggle("error", isError);
  setTimeout(() => toastEl.classList.add("hidden"), 2400);
}

async function api(path, options = {}) {
  const res = await fetch(path, {
    headers: {
      "Content-Type": "application/json",
      ...(options.adminKey ? { "X-Admin-Key": options.adminKey } : {})
    },
    ...options
  });
  if (!res.ok) {
    let msg = `${res.status}`;
    try {
      const body = await res.json();
      msg = body.error || JSON.stringify(body);
    } catch (_) { /* ignore */ }
    throw new Error(msg);
  }
  return res.status === 204 ? null : res.json();
}

async function loadState() {
  const [me, stateData] = await Promise.all([
    api("/api/me"),
    api("/api/state")
  ]);
  state.me = me;
  state.phase = stateData.currentPhase;
  state.counts = stateData;
  renderPhasePill();
  renderCounts();
  const nameInput = $("name-input");
  if (nameInput && !nameInput.dataset.userEditing) {
    nameInput.value = me.displayName || "";
  }
  if ($("player-id")) {
    $("player-id").textContent = `Player ID: ${me.id}`;
  }
}

async function loadSuggestData() {
  if (state.phase !== "Suggest") return;
  state.mySuggestions = await api("/api/suggestions/mine");
  renderMySuggestions();
}

async function loadRevealData() {
  if (state.phase === "Reveal" || state.phase === "Vote" || state.phase === "Results") {
    state.allSuggestions = await api("/api/suggestions/all");
    renderAllSuggestions();
  }
}

async function loadVoteData() {
  if (state.phase !== "Vote") return;
  state.myVotes = await api("/api/votes/mine");
  renderVotes();
}

async function loadResults() {
  if (state.phase !== "Results") return;
  state.results = await api("/api/results");
  renderResults();
}

function renderPhasePill() {
  $("phase-pill").textContent = state.phase || "Loading…";
  document.querySelectorAll(".phase-view").forEach((el) => el.classList.add("hidden"));
  const viewMap = {
    Suggest: "suggest-view",
    Reveal: "reveal-view",
    Vote: "vote-view",
    Results: "results-view"
  };
  const id = viewMap[state.phase];
  if (id) $(id).classList.remove("hidden");
  const phaseSelect = $("phase-select");
  if (phaseSelect && !phaseSelect.dataset.userEditing) {
    phaseSelect.value = state.phase || "Suggest";
  }
}

function renderCounts() {
  if (!state.counts) return;
  $("counts").textContent = `Players: ${state.counts.players} • Suggestions: ${state.counts.suggestions} • Votes: ${state.counts.votes}`;
}

function renderMySuggestions() {
  const wrap = $("my-suggestions");
  if (!wrap) return;
  wrap.innerHTML = "";
  state.mySuggestions.forEach((s) => wrap.appendChild(buildCard(s, { showAuthor: false })));
}

function renderAllSuggestions() {
  const list = $("all-suggestions");
  if (!list) return;
  list.innerHTML = "";
  state.allSuggestions.forEach((s) => list.appendChild(buildCard(s, { showAuthor: true })));
}

function renderVotes() {
  const list = $("vote-list");
  list.innerHTML = "";
  const votesMap = Object.fromEntries(state.myVotes.map((v) => [v.suggestionId, v.score]));
  state.allSuggestions.forEach((s) => {
    const li = buildCard(s, { showAuthor: true });
    const current = votesMap[s.id] ?? 0;
    const footer = document.createElement("div");
    footer.className = "vote-controls";
    footer.innerHTML = `
      <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
      <span class="score" id="score-${s.id}">${current}</span>`;
    li.querySelector(".card-body").appendChild(footer);
    list.appendChild(li);
  });
  list.querySelectorAll("input[type=range]").forEach((input) => {
    input.addEventListener("input", (e) => {
      const val = Number(e.target.value);
      $("score-" + e.target.dataset.id).textContent = val;
    });
    input.addEventListener("change", async (e) => {
      const suggestionId = Number(e.target.dataset.id);
      const score = Number(e.target.value);
      try {
        await api("/api/votes", { method: "POST", body: JSON.stringify({ suggestionId, score }) });
        toast("Saved vote");
        await loadVoteData();
      } catch (err) {
        toast(err.message, true);
      }
    });
  });
}

function renderResults() {
  const list = $("results-list");
  list.innerHTML = "";
  state.results.forEach((r) => {
    const card = buildCard({
      id: r.id,
      name: r.name,
      genre: `${r.total} pts • ${r.count} votes • avg ${r.average.toFixed(1)}`,
      description: r.description || (r.author ? `By ${r.author}` : ""),
      screenshotUrl: r.screenshotUrl,
      youtubeUrl: r.youtubeUrl,
      author: r.author
    }, { showAuthor: true });
    list.appendChild(card);
  });
}

function setupHandlers() {
  const nameInput = $("name-input");
  if (nameInput) {
    ["focus", "input"].forEach(evt => {
      nameInput.addEventListener(evt, () => { nameInput.dataset.userEditing = "1"; });
    });
    nameInput.addEventListener("blur", () => { nameInput.dataset.userEditing = ""; });
  }

  $("save-name").addEventListener("click", async () => {
    const name = nameInput.value.trim();
    if (!name) return toast("Name required", true);
    try {
      const me = await api("/api/me/name", { method: "POST", body: JSON.stringify({ name }) });
      state.me = me;
      nameInput.dataset.userEditing = "";
      toast("Saved name");
    } catch (err) {
      toast(err.message, true);
    }
  });

  $("suggest-form").addEventListener("submit", async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = Object.fromEntries(new FormData(form).entries());
    if (!data.name) return toast("Name required", true);
    try {
      await api("/api/suggestions", { method: "POST", body: JSON.stringify(data) });
      form.reset();
      toast("Suggestion added");
      await loadSuggestData();
    } catch (err) {
      toast(err.message, true);
    }
  });

  $("set-phase").addEventListener("click", async () => {
    const phase = $("phase-select").value;
    const adminKey = $("admin-key").value;
    try {
      await api("/api/admin/phase", {
        method: "POST",
        body: JSON.stringify({ phase }),
        adminKey
      });
      toast("Phase updated");
      state.phase = phase;
      $("phase-select").dataset.userEditing = "";
      await refreshPhaseData();
    } catch (err) {
      toast(err.message, true);
    }
  });

  const phaseSelect = $("phase-select");
  ["focus", "input", "click"].forEach(evt => {
    phaseSelect.addEventListener(evt, () => { phaseSelect.dataset.userEditing = "1"; });
  });
  phaseSelect.addEventListener("blur", () => { phaseSelect.dataset.userEditing = ""; });

  $("reset").addEventListener("click", () => adminAction("/api/admin/reset", "Reset complete"));
  $("factory-reset").addEventListener("click", () => adminAction("/api/admin/factory-reset", "Factory reset complete"));

  const adminToggle = $("admin-toggle");
  const adminCard = $("admin-card");
  const adminClose = $("admin-close");
  if (adminToggle && adminCard && adminClose) {
    const togglePanel = (show) => adminCard.classList.toggle("hidden", !show);
    adminToggle.addEventListener("click", () => togglePanel(adminCard.classList.contains("hidden")));
    adminClose.addEventListener("click", () => togglePanel(false));
  }
}

async function adminAction(path, successMessage) {
  const adminKey = $("admin-key").value;
  try {
    await api(path, { method: "POST", adminKey });
    toast(successMessage);
    await refreshPhaseData();
  } catch (err) {
    toast(err.message, true);
  }
}

async function refreshPhaseData() {
  await loadState();
  await Promise.all([loadSuggestData(), loadRevealData(), loadVoteData(), loadResults()]);
}

function buildCard(s, { showAuthor }) {
  const card = document.createElement("article");
  card.className = "game-card";
  const hasImage = !!s.screenshotUrl;
  const visual = hasImage
    ? `<button class="card-visual" data-img="${s.screenshotUrl}" aria-label="Open screenshot" style="background-image:url('${s.screenshotUrl}')"></button>`
    : `<div class="card-visual"></div>`;
  card.innerHTML = `
    ${visual}
    <div class="card-body">
      <div class="card-title-row">
        <h3>${s.name}</h3>
        <div class="title-meta">
          ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
          ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
        </div>
      </div>
      ${s.genre ? `<p class="muted">${s.genre}</p>` : ""}
      ${s.description ? `<p>${s.description}</p>` : ""}
    </div>
  `;
  if (hasImage) {
    const btn = card.querySelector(".card-visual");
    btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
  }
  return card;
}

function openLightbox(url, title) {
  const overlay = document.createElement("div");
  overlay.className = "lightbox";
  overlay.innerHTML = `
    <div class="lightbox-content">
      <button class="lightbox-close" aria-label="Close">✕</button>
      <img src="${url}" alt="${title}" />
      <p>${title || ""}</p>
    </div>
  `;
  overlay.addEventListener("click", (e) => {
    if (e.target.classList.contains("lightbox") || e.target.classList.contains("lightbox-close")) {
      overlay.remove();
    }
  });
  document.body.appendChild(overlay);
}

async function main() {
  setupHandlers();
  try {
    await refreshPhaseData();
  } catch (err) {
    toast(err.message, true);
  }
  setInterval(refreshPhaseData, 4000);
}

main();