---
import DocLayout from "../layouts/DocLayout.astro";
import { clientI18n, locale, roots } from "../config.mjs";
import { t } from "../i18n.mjs";

const m = t(locale);
---

<DocLayout title={m.allCommentsTitle} i18nClientChrome>
  <h1 data-i18n="allCommentsTitle">{m.allCommentsTitle}</h1>
  <p class="lede" data-i18n="allCommentsLede">{m.allCommentsLede}</p>

  <div class="caf-filters">
    <input id="caf-search" type="search" placeholder={m.searchCommentsPlaceholder} data-i18n-ph="searchCommentsPlaceholder" />
    <select id="caf-status">
      <option value="active" data-i18n="stActive">{m.stActive}</option>
      <option value="open" data-i18n="stOpen">{m.stOpen}</option>
      <option value="addressed" data-i18n="filterToValidate">{m.filterToValidate}</option>
      <option value="resolved" data-i18n="stResolved">{m.stResolved}</option>
      <option value="all" data-i18n="stAll">{m.stAll}</option>
    </select>
    <select id="caf-space">
      <option value="all" data-i18n="spAll">{m.spAll}</option>
      {roots.map((r) => <option value={r.key} data-nb-root-label={clientI18n.enabled ? r.key : undefined}>{r.label}</option>)}
    </select>
    <select id="caf-hold">
      <option value="all" data-i18n="holdAll">{m.holdAll}</option>
      <option value="active" data-i18n="holdActive">{m.holdActive}</option>
      <option value="hold" data-i18n="holdOnly">{m.holdOnly}</option>
    </select>
    <span id="caf-count" class="cmt-count"></span>
  </div>

  <div id="caf-list" class="caf-list"><p class="cmt-empty" data-i18n="loading">{m.loading}</p></div>

  <div id="caf-review-toolbar" class="rev-toolbar" hidden><div id="caf-diff-toggle" class="diff-toggle"></div></div>
  <div id="caf-review" class="rev-list" hidden></div>
</DocLayout>

<script>
  import { ICONS } from "../lib/icons";
  import {
    type BlockAnchor,
    type Comment,
    type CommentAnchor,
    createApi,
    displayName,
    esc,
    fmt,
    makeRouteFor,
  } from "../lib/client/comments-client";
  import { mountReviewList } from "../lib/client/review-card";
  import { localizeField } from "../lib/i18n-content.mjs";

  const ROOTS: { key: string; label: string; path: string; labelI18n?: string | Record<string, string> }[] = JSON.parse(
    document.getElementById("notabene-roots")?.textContent || "[]",
  );
  const M: Record<string, string> = JSON.parse(
    document.getElementById("notabene-i18n")?.textContent || "{}",
  );
  const I18N = JSON.parse(document.getElementById("notabene-i18n-config")?.textContent || "null");
  // Chip = the space label in the visitor's chrome locale (per-locale `roots[].label`).
  const cLocale = document.documentElement.lang || I18N?.defaultLocale || "";
  const spaceLabel = (key: string): string => {
    const r = ROOTS.find((x) => x.key === key);
    return (r && (localizeField(r.labelI18n, cLocale, I18N?.defaultLocale || cLocale) ?? r.label)) ?? key;
  };

  const listEl = document.getElementById("caf-list")!;
  const countEl = document.getElementById("caf-count")!;
  const searchEl = document.getElementById("caf-search") as HTMLInputElement;
  const statusEl = document.getElementById("caf-status") as HTMLSelectElement;
  const spaceEl = document.getElementById("caf-space") as HTMLSelectElement;
  const holdEl = document.getElementById("caf-hold") as HTMLSelectElement;

  let all: Comment[] = [];
  const api = createApi(); // no page → global (?all=1)
  const routeFor = makeRouteFor(ROOTS, I18N ?? undefined);

  function render() {
    const q = searchEl.value.trim().toLowerCase();
    const fs = statusEl.value;
    const fsp = spaceEl.value;
    const fh = holdEl.value;
    const rows = all
      .filter((c) => {
        if (fsp !== "all" && c.space !== fsp) return false;
        if (fs === "active" && c.status === "resolved") return false;
        if (fs === "open" && c.status !== "open") return false;
        if (fs === "resolved" && c.status !== "resolved") return false;
        if (fh === "active" && c.hold) return false;
        if (fh === "hold" && !c.hold) return false;
        if (q) {
          const at =
            c.scope === "selection"
              ? (c.anchor as CommentAnchor | null)?.quote || ""
              : c.scope === "block"
                ? (c.anchor as BlockAnchor | null)?.label || ""
                : "";
          const hay = `${c.page} ${at} ${c.thread.map((t) => t.body).join(" ")}`.toLowerCase();
          if (!hay.includes(q)) return false;
        }
        return true;
      })
      .sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1));

    countEl.textContent = `${rows.length} / ${all.length}`;
    listEl.innerHTML = rows.length
      ? rows
          .map((c) => {
            const head = c.thread[0];
            return `<article class="caf-row ${c.status}${c.hold ? " held" : ""}" data-id="${c.id}" data-page="${esc(c.page)}">
              <div class="caf-row-top">
                <span class="cmt-dot ${c.status}"></span>
                <a class="caf-page" href="${routeFor(c.page)}?c=${c.id}">${esc(c.page)}</a>
                <span class="r-space ${c.space}">${esc(spaceLabel(c.space))}</span>
                ${
                  c.scope === "selection"
                    ? `<span class="caf-quote">“${esc(((c.anchor as CommentAnchor | null)?.quote || "").slice(0, 60))}”</span>`
                    : c.scope === "block"
                      ? `<span class="caf-quote">${(c.anchor as BlockAnchor | null)?.kind === "image" ? "🖼" : "📊"} ${esc(((c.anchor as BlockAnchor | null)?.label || "").slice(0, 50))}</span>`
                      : `<span class="cmt-scope">${M.scopePage}</span>`
                }
                ${c.hold ? `<span class="cmt-hold-badge">${M.onHold}</span>` : ""}
                ${c.thread.length > 1 ? `<span class="caf-replies">${c.thread.length - 1} ${M.repliesSuffix}</span>` : ""}
              </div>
              <div class="caf-body"><b>${esc(displayName(head.author))}</b> ${esc(head.body)}</div>
              ${c.resolution?.note ? `<div class="cmt-resolution">✔ ${esc(c.resolution.note)}</div>` : ""}
              <div class="caf-actions">
                <span class="cmt-ts">${fmt(c.updatedAt)}</span>
                ${c.status === "resolved" ? `<button data-act="reopen" title="${M.tReopen}" aria-label="${M.tReopen}">${ICONS.reopen}</button>` : `<button data-act="resolve" title="${M.tResolve}" aria-label="${M.tResolve}">${ICONS.check}</button>`}
                <button data-act="${c.hold ? "unhold" : "hold"}" title="${c.hold ? M.tUnhold : M.tHold}" aria-label="${c.hold ? M.tUnhold : M.tHold}">${c.hold ? ICONS.play : ICONS.pause}</button>
                <button data-act="delete" class="danger" title="${M.tDelete}" aria-label="${M.tDelete}">${ICONS.trash}</button>
              </div>
            </article>`;
          })
          .join("")
      : `<p class="cmt-empty">${M.noCommentsFilters}</p>`;
  }

  let reviewMounted = false;
  const reviewEl = document.getElementById("caf-review")!;
  const reviewToolbar = document.getElementById("caf-review-toolbar")!;
  const reviewToggle = document.getElementById("caf-diff-toggle");

  // The "to validate" (addressed) filter swaps the compact list for the shared review
  // cards (diff + approve/reject); every other filter keeps the normal list.
  function update() {
    const reviewing = statusEl.value === "addressed";
    listEl.hidden = reviewing;
    reviewEl.hidden = !reviewing;
    reviewToolbar.hidden = !reviewing;
    if (reviewing) {
      if (!reviewMounted) {
        reviewMounted = true;
        mountReviewList(reviewEl, reviewToggle, M, routeFor);
      }
    } else {
      render();
    }
  }

  async function load() {
    all = await api("GET");
    update();
  }

  for (const el of [searchEl, statusEl, spaceEl, holdEl]) el.addEventListener("input", update);

  listEl.addEventListener("click", async (e) => {
    const btn = (e.target as HTMLElement).closest("button[data-act]") as HTMLElement | null;
    if (!btn) return;
    const row = btn.closest(".caf-row") as HTMLElement;
    const id = row.dataset.id!;
    const page = row.dataset.page!;
    const act = btn.dataset.act!;
    if (act === "resolve" || act === "reopen") await api("PATCH", { page, id, status: act === "resolve" ? "resolved" : "open" });
    else if (act === "hold" || act === "unhold") await api("PATCH", { page, id, hold: act === "hold" });
    else if (act === "delete") await api("DELETE", { page, id });
    await load();
  });

  load();
</script>