script.js

function gbuClass(gbu) {
  if (gbu === "Good") return "pill-gbu-good";
  if (gbu === "Bad") return "pill-gbu-bad";
  if (gbu === "Ugly") return "pill-gbu-ugly";
  return "pill-gbu-mixed";
}

function renderSources(sources) {
  return sources
    .map((s) => {
      const body = s.link
        ? `${escapeHtml(s.text)} <a href="${s.link}" target="_blank" rel="noopener">source ↗</a>`
        : escapeHtml(s.text);
      return `<li>${body}</li>`;
    })
    .join("");
}

function escapeHtml(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

function renderRow(row) {
  const actsHtml = row.acts.join(" · ");
  return `
    <article class="row-card">
      <div class="row-card-head">
        <span class="pill pill-facet">${escapeHtml(row.facet)}</span>
        <span class="pill pill-tech">${escapeHtml(row.technology)}</span>
        <span class="pill ${gbuClass(row.gbu)}">${escapeHtml(row.gbu)}</span>
      </div>
      <p class="row-summary">${escapeHtml(row.summary)}</p>
      <p class="row-acts">HCI dimension: ${escapeHtml(actsHtml)}</p>
      <ul class="row-sources">${renderSources(row.sources)}</ul>
    </article>
  `;
}

function populateFilters() {
  const facetSelect = document.getElementById("filter-facet");
  const gbuSelect = document.getElementById("filter-gbu");

  const facets = [...new Set(TABLE_ROWS.map((r) => r.facet))];
  facets.forEach((f) => {
    const opt = document.createElement("option");
    opt.value = f;
    opt.textContent = f;
    facetSelect.appendChild(opt);
  });

  const gbus = ["Good", "Bad", "Ugly", "Good or Bad"];
  gbus.forEach((g) => {
    const opt = document.createElement("option");
    opt.value = g;
    opt.textContent = g;
    gbuSelect.appendChild(opt);
  });
}

function matchesGbu(rowGbu, filterGbu) {
  if (filterGbu === "all") return true;
  if (filterGbu === "Good or Bad") return rowGbu === "Good or Bad";
  // "Good" filter also surfaces mixed rows that include a good side, same for "Bad".
  if (filterGbu === "Good") return rowGbu === "Good" || rowGbu === "Good or Bad";
  if (filterGbu === "Bad") return rowGbu === "Bad" || rowGbu === "Good or Bad";
  return rowGbu === filterGbu;
}

function applyFilters() {
  const facet = document.getElementById("filter-facet").value;
  const gbu = document.getElementById("filter-gbu").value;
  const query = document.getElementById("filter-search").value.trim().toLowerCase();

  const filtered = TABLE_ROWS.filter((row) => {
    const facetOk = facet === "all" || row.facet === facet;
    const gbuOk = matchesGbu(row.gbu, gbu);
    const searchOk =
      query === "" ||
      row.summary.toLowerCase().includes(query) ||
      row.technology.toLowerCase().includes(query) ||
      row.facet.toLowerCase().includes(query);
    return facetOk && gbuOk && searchOk;
  });

  const container = document.getElementById("table-rows");
  const count = document.getElementById("result-count");
  count.textContent = `Showing ${filtered.length} of ${TABLE_ROWS.length} entries`;

  container.innerHTML = filtered.length
    ? filtered.map(renderRow).join("")
    : '<div class="no-results">No entries match these filters.</div>';
}

function initTable() {
  populateFilters();
  applyFilters();
  document.getElementById("filter-facet").addEventListener("change", applyFilters);
  document.getElementById("filter-gbu").addEventListener("change", applyFilters);
  document.getElementById("filter-search").addEventListener("input", applyFilters);
}

function initCopyCitation() {
  const btn = document.getElementById("copy-citation");
  const pre = document.getElementById("citation-text");
  if (!btn || !pre) return;
  btn.addEventListener("click", async () => {
    try {
      await navigator.clipboard.writeText(pre.textContent.trim());
      const original = btn.textContent;
      btn.textContent = "Copied!";
      setTimeout(() => (btn.textContent = original), 1500);
    } catch (e) {
      // Clipboard API unavailable; user can select and copy manually.
    }
  });
}

document.addEventListener("DOMContentLoaded", () => {
  initTable();
  initCopyCitation();
});