GameList/wwwroot/app.js

import { api, adminApi } from "./js/api.js";

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

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

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

async function loadState() {
  const [me, stateData] = await Promise.all([api.me(), 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 || "";
  }
  applyNameRequirementUI();
}

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

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

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

async function loadResults() {
  if (state.phase !== "Results") return;
  state.results = await 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";
  }
  applyNameRequirementUI();
}

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, allowDelete: true })));
}

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");
  if (!list) return;
  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.vote(suggestionId, score);
        toast("Saved vote");
        await loadVoteData();
      } catch (err) {
        toast(err.message, true);
      }
    });
  });
}

function renderResults() {
  const container = $("results-list");
  container.innerHTML = "";
  const table = document.createElement("table");
  table.className = "results-table";
  table.innerHTML = `
    <thead>
      <tr>
        <th>Rank</th>
        <th>Game</th>
        <th>Author</th>
        <th>Votes</th>
        <th>Avg</th>
        <th>Total</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody></tbody>
  `;
  const tbody = table.querySelector("tbody");
  state.results.forEach((r, idx) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${idx + 1}</td>
      <td class="game-cell">
         ${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ''}
         <div class="game-meta">
           <div class="title-line">${r.name}</div>
           ${r.genre ? `<div class="muted small">${r.genre}</div>` : ''}
         </div>
      </td>
      <td>${r.author ?? "—"}</td>
      <td>${r.count}</td>
      <td>${r.average.toFixed(1)}</td>
      <td>${r.total}</td>
      <td>
        ${r.youtubeUrl ? `<a class="link compact" href="${r.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ''}
      </td>
    `;
    tbody.appendChild(row);
  });
  container.appendChild(table);
  container.querySelectorAll(".clickable-thumb").forEach(img => {
    img.addEventListener("click", () => openLightbox(img.src, img.alt));
  });
}

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.setName(name);
      state.me = me;
      nameInput.dataset.userEditing = "";
      toast("Saved name");
      applyNameRequirementUI();
    } 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.createSuggestion(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 adminApi.setPhase(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(adminApi.reset, "Reset complete"));
  $("factory-reset").addEventListener("click", () => adminAction(adminApi.factoryReset, "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(fn, successMessage) {
  const adminKey = $("admin-key").value;
  try {
    await fn(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 = false, allowDelete = false }) {
  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>` : ""}
          ${allowDelete ? `<button class="chip danger-chip" data-delete="${s.id}" type="button">Delete</button>` : ""}
        </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));
  }
  if (allowDelete) {
    const del = card.querySelector("[data-delete]");
    del.addEventListener("click", async () => {
      try {
        await api.deleteSuggestion(s.id);
        toast("Suggestion deleted");
        await loadSuggestData();
      } catch (err) {
        toast(err.message, true);
      }
    });
  }
  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);
}

function applyNameRequirementUI() {
  const requiresName = !state.me?.displayName?.trim();
  const warning = $("name-warning");
  if (warning) warning.classList.toggle("hidden", !requiresName);

  const suggestForm = $("suggest-form");
  if (suggestForm) {
    suggestForm.querySelectorAll("input,textarea,button").forEach(el => {
      if (el.id === "save-name") return;
      el.disabled = requiresName;
    });
    suggestForm.classList.toggle("disabled-form", requiresName);
  }

  const voteList = $("vote-list");
  if (voteList) {
    voteList.querySelectorAll("input[type=range]").forEach(el => el.disabled = requiresName);
    voteList.classList.toggle("disabled-form", requiresName);
  }

  if (requiresName && state.phase !== "Suggest") {
    toast("Enter a name to continue.", true);
  }
}

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

main();