---
/**
 * Island: the reviews panel.
 *
 * Prerendered with the counts the API already knows, so the panel occupies its final
 * space and shows real numbers with JavaScript off. Review bodies live on Nostr, so
 * the list itself hydrates from relays on load.
 *
 * Used by both a mint page and a federation page, unchanged. What is being reviewed
 * arrives as a `ReviewSubject` — which `k`, which `d`, which `u` — and nothing below
 * this line asks which ecosystem produced it. See `lib/review-subject.ts`.
 */
import type { RatingDistribution } from '@cashumints/shared';
import type { ReviewSubject } from '../lib/review-subject';
import { renderBones } from 'boneyard-js';
import WriteForm from './WriteForm.astro';
import reviewsBones from '../bones/reviews-panel.bones.json';
import { BONE_COLOR } from '../lib/skeleton';
import { useI18n } from '../i18n';
import { formatters } from '../i18n/format';
import { pageLocale } from '../i18n/paths';

interface Props {
  /**
   * What is being reviewed: the tags a review carries and the filters that find them.
   *
   * Null on the 404 page alone, which renders this panel for a mint it has not resolved
   * yet: the resolver writes the subject onto the root and tells the island to start.
   * Every prerendered page passes a real one.
   */
  subject: ReviewSubject | null;
  /** The counts the API already knows, prerendered so the panel is honest without JS. */
  reviewCount: number;
  distribution: RatingDistribution;
  /** Named in the write dialog's heading. The thing's own name, never translated. */
  name: string;
}
const { subject, reviewCount, distribution, name } = Astro.props;

const { locale } = pageLocale(Astro);
const t = useI18n(locale);
const f = formatters(t);

const dist = distribution;

/*
 * The placeholder asks about the thing being reviewed, which is the one sentence in
 * this panel that cannot be ecosystem-neutral without going vague: "how did minting and
 * melting work out" means nothing about a federation, and "how did it go" means nothing
 * about anything. One key per ecosystem, falling back to the Cashu wording for a type
 * whose own has not been written yet.
 */
const placeholderKey = `reviews.dialog.bodyPlaceholder.${subject?.type ?? 'cashu'}`;
const bodyPlaceholder = t.has(placeholderKey)
  ? t(placeholderKey)
  : t('reviews.dialog.bodyPlaceholder.cashu');
const critical = dist['1'] + dist['2'];
const fiveStar = dist['5'];

/**
 * Bones are drawn into the prerendered HTML, not by the island.
 *
 * `renderBones` is a pure string builder, so it runs here at build time just as well
 * as in the browser. Doing it here means the skeleton is on screen at first paint
 * instead of after the island's chunk has downloaded, which on a slow connection is
 * the difference between a skeleton and a second of loading text followed by a jump.
 *
 * One block per captured breakpoint, picked by media query in global.css, because
 * bone heights differ per width and the server cannot know the viewport.
 */
const boneBlocks = Object.entries(reviewsBones.breakpoints)
  .map(([width, skeleton]) => ({ width: Number(width), html: renderBones(skeleton, BONE_COLOR, false) }))
  .sort((a, b) => a.width - b.width);

// Bones stand in for reviews the API has already counted. With none counted there is
// nothing to wait for, and the empty state below is the truthful thing to prerender.
const showBoneBlocks = reviewCount > 0 && boneBlocks.length > 0;

/**
 * Without JavaScript the relays are never queried, so the bones would sit there for
 * good. Drop them and say what is actually going on.
 *
 * Emitted as raw HTML on purpose: Astro hoists every <style> it parses out of the
 * template and into the page's stylesheet, which would hide the bones for everyone.
 */
const noscriptFallback =
  `<noscript><style>[data-review-items] .by-bones{display:none}</style>` +
  `<p class="rev-status">${escapeText(t('reviews.noscript'))}</p></noscript>`;

/** This block goes in as raw HTML, so the one translated string in it is escaped. */
function escapeText(value: string): string {
  return value
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}
---

{/*
  The island's root is `data-reviews-panel`, not `data-reviews`: a mint card already
  carries that one, as its review count, and this island now looks for its root on
  every page the router brings in, not only on a mint page.
*/}
<section
  class="panel"
  aria-labelledby="reviews-title"
  data-reveal
  data-reviews-panel
  data-subject={subject ? JSON.stringify(subject) : ''}
>
  <div class="panel-head">
    <h2 class="panel-title" id="reviews-title">{t('reviews.title')}</h2>
    {/* A protocol name, not a label: NIP-87 is NIP-87 in every language. */}
    <span class="nip-badge">NIP-87</span>
    <div class="filters" role="group" aria-label={t('reviews.filter.group')}>
      <button class="filter" type="button" data-filter="all" aria-pressed="true">
        {t('reviews.filter.all')} · <span data-count="all">{f.number(reviewCount)}</span>
      </button>
      <button class="filter" type="button" data-filter="5" aria-pressed="false">
        {t('reviews.filter.five')} · <span data-count="5">{f.number(fiveStar)}</span>
      </button>
      <button class="filter" type="button" data-filter="critical" aria-pressed="false">
        {t('reviews.filter.critical')} · <span data-count="critical">{f.number(critical)}</span>
      </button>
      <button class="filter" type="button" data-filter="recent" aria-pressed="false">
        {t('reviews.filter.recent')}
      </button>
      {/*
        Not a filter but styled as one: hides reviews AND ratings from keys with no
        kind-0 profile. Hidden until the island knows how many that is; without
        JavaScript there is nothing it could hide anyway.
      */}
      <button class="filter" type="button" data-anon-toggle aria-pressed="false" hidden>
        {t('reviews.filter.hideAnon')}<span data-count="anon"></span>
      </button>
    </div>
  </div>

  {/* One line of consequence when the toggle above is on: how much is showing. */}
  <p class="anon-note" data-anon-note hidden></p>

  {/*
    Filled by the island with one line summarising every review that carried a rating
    and no words. Empty (and invisible) until the relays answer, and on a mint where
    every review has a body it stays empty.
  */}
  <div data-rating-summary></div>

  {/*
    Only the panel body is skeletoned: the header, badge, filter chips and their
    counts above are prerendered and stay put. `data-boneyard` marks the capture
    target for `pnpm bones`, which snapshots this element's single child.
  */}
  <div data-review-list data-review-count={reviewCount}>
    {/*
      `data-boneyard` only when there is something to measure.

      `pnpm bones` captures two pages, and the second is a /mint/ URL with no prerendered
      page — which now carries this panel too, with no subject and nothing in it. Marked
      as a capture target there, it would overwrite the reviews bones taken from the real
      mint page a moment earlier with the bones of an empty box.
    */}
    <div data-boneyard={subject ? 'reviews-panel' : undefined} data-boneyard-config='{"excludeSelectors":[".sr-only"]}'>
      <div data-review-items>
        {
          showBoneBlocks ? (
            <Fragment>
              <div class="by-bones by-shimmer" aria-hidden="true">
                {boneBlocks.map((block) => (
                  <div class="by-bp" data-by-bp={block.width} set:html={block.html} />
                ))}
              </div>
              <p class="sr-only" role="status">
                {t('reviews.loading', { n: reviewCount })}
              </p>
              <Fragment set:html={noscriptFallback} />
            </Fragment>
          ) : (
            <p class="rev-status" data-review-status>
              {
                reviewCount === 0
                  ? t('reviews.empty')
                  : `${t('reviews.loading', { n: reviewCount })}…`
              }
            </p>
          )
        }
      </div>
    </div>
  </div>

  <div class="load-row" data-pager hidden>
    <div class="pager" role="group" aria-label={t('common.reviewPages')}></div>
  </div>
</section>

<!--
  The write review dialog.

  A modal in the site's one modal shell (.modal, see global.css): centred, backdrop
  blurred, page locked behind it, focus trapped by the browser because it is a real
  <dialog> opened with showModal().

  Everything except the identity row is prerendered. The identity row cannot be: who
  is signing is only knowable in the browser, and asking a NIP-07 extension for a
  pubkey is a question worth asking once the reader has opened the dialog, not on
  every page load.
-->
<dialog class="modal write-dialog" data-write-dialog aria-labelledby="write-title">
  <WriteForm locale={locale} placeholder={bodyPlaceholder}>
    <div class="modal-head" slot="head">
      {/* The mint's name is data, dropped into a translated sentence. */}
      <h2 id="write-title">{t('reviews.dialog.title', { name })}</h2>
      <button type="button" class="copy-btn" data-write-close aria-label={t('common.close')}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M18 6 6 18M6 6l12 12" />
        </svg>
      </button>
    </div>
  </WriteForm>
</dialog>

<style>
  /* The write dialog's own styles live in global.css beside the other modals: the
     identity row and the status line are injected by the island, and Astro's scoped
     selectors do not reach markup added through innerHTML. */

  .load-row { padding: 16px 20px; display: flex; justify-content: center; border-top: 1px solid var(--line-soft); }
  .pager { display: flex; gap: 6px; align-items: center; font-size: 13.5px; flex-wrap: wrap; justify-content: center; }
</style>

<script>
  import { escapeHtml, wireCopyableIds } from '../lib/client';
  import { useI18n } from '../i18n/client';
  import { formatters } from '../i18n/format';
  import { enterStagger, onReady, prefersReducedMotion, scrollBehavior } from '../scripts/reveal';
  import { loadProfiles, loadReviews, safeNpub, type LoadedReview } from '../lib/reviews-client';
  import type { ReviewSubject } from '../lib/review-subject';
  // Stars, body, identity row, draft safety and publishing: shared with the
  // review-by-URL dialog the index pages open, so there is one signing flow on the site.
  import { takeFreshReview, wireWriteForm } from '../lib/write-review';
  // The card itself lives in one place: /reviews renders the identical markup from
  // the same functions.
  import {
    anchoredReviewId, applyProfiles, armReadMore, isAnon, isWritten, readHideAnon,
    revealAnchoredReview, reviewHtml, storeHideAnon, summaryHtml, wireReviewCards,
  } from '../lib/review-cards';
  import { adoptBones, armBuildSnapshot, clearBones, isBuildMode, showBones, swapBones } from '../lib/skeleton';
  import reviewsBones from '../bones/reviews-panel.bones.json';

  const setup = () => {
  wireCopyableIds();
  wireReviewCards();

  /*
   * Built here, not at module scope. `onReady` runs this again after every view
   * transition, so a reader who clicks from an English mint page to a Dutch one gets a
   * panel whose filters, empty states and dialog are all in the language they just
   * asked for, rather than the one the module happened to load in.
   */
  const t = useI18n();
  const f = formatters(t);

  const root = document.querySelector<HTMLElement>('[data-reviews-panel]');

  /*
   * The subject crosses from the page as JSON in a data attribute rather than as
   * separate attributes per field. It is one object with one meaning, the page and the
   * island are the same build, and a malformed one is a bug rather than user input —
   * but it is still parsed defensively, because a panel that threw here would take the
   * write dialog down with it.
   *
   * A function returning a const rather than a `let` assigned in a try: the closures
   * below capture it, and TypeScript will not carry a narrowing into a closure over a
   * mutable binding.
   */
  const readSubject = (): ReviewSubject | null => {
    try {
      return JSON.parse(root?.dataset['subject'] ?? 'null') as ReviewSubject | null;
    } catch {
      return null;
    }
  };

  const parsedSubject = readSubject();

  if (root && parsedSubject) {
    // Re-bound inside the guard as a non-nullable const. `load` below is a hoisted
    // function declaration, and TypeScript will not carry the guard's narrowing into
    // one of those; this is the local it can.
    const subject: ReviewSubject = parsedSubject;

    const listWrap = root.querySelector<HTMLElement>('[data-review-list]')!;
    const list = root.querySelector<HTMLElement>('[data-review-items]')!;
    const summarySlot = root.querySelector<HTMLElement>('[data-rating-summary]')!;
    const pagerWrap = root.querySelector<HTMLElement>('[data-pager]')!;
    const pager = pagerWrap.querySelector<HTMLElement>('.pager')!;

    const PAGE_SIZE = 10;
    /** Relays get this long to answer before the bones give way to the error state. */
    const RELAY_TIMEOUT_MS = 8000;
    /** How many reviews the API counted at build time. Drives whether bones are worth showing. */
    const expected = Number(listWrap.dataset['reviewCount'] ?? '0');

    let all: LoadedReview[] = [];
    /**
     * A review published from the review-by-URL dialog on an index page, on its way
     * here. Read once, at setup, so a reload does not resurrect it; merged in below
     * when the relays answer. See `takeFreshReview`.
     */
    const handedForward = takeFreshReview(subject.key);
    let filter: 'all' | '5' | 'critical' | 'recent' = 'all';
    let page = 1;
    /**
     * Hide reviews and ratings from keys with no kind-0 profile. Shared with the
     * feed page through one localStorage key, so the preference follows the reader
     * across mint pages, federation pages and /reviews alike.
     */
    let hideAnon = readHideAnon();
    /**
     * True once the kind-0 lookup has settled, either way. Before that, an
     * unresolved profile means "not looked up yet", and the empty state must not
     * claim "all reviews here are anon" about names that are still in flight.
     */
    let profilesSettled = false;
    /** True while bones are on screen, so the first real render cross-fades over them. */
    let bonesUp = false;
    /**
     * A scheduled repaint, while the outgoing list is fading.
     *
     * At most one is ever in flight: a filter changed twice in 120ms does not queue a
     * second fade, it lands on whichever filter is set when the timer runs, because
     * the paint reads the current state rather than a captured one.
     */
    let pendingPaint = 0;
    /** Set for one paint after publishing, to mark the new card as it goes in. */
    let markNewest = false;
    /**
     * Reviews published in this session, shown at the top until relays echo them back.
     *
     * Keyed by event id, holding how many relays took it: a review that only two of
     * four relays accepted says so on its card, because that is a thing the author
     * may want to act on.
     */
    const optimistic = new Map<string, { accepted: number; total: number }>();

    /* ---------- rendering ---------- */

    /**
     * The list the panel works from: everything, or everything with a resolved name.
     *
     * `isAnon` is the same test that makes a card say "Anon", so this toggle and that
     * label cannot disagree. The one exemption is a review published in this session:
     * its author's own card must not vanish under them while their kind-0 is still
     * being fetched.
     */
    function visible(): LoadedReview[] {
      if (!hideAnon) return all;
      return all.filter((r) => !isAnon(r) || optimistic.has(r.id));
    }

    function filtered(): LoadedReview[] {
      const rows = visible();
      return filter === '5' ? rows.filter((r) => r.rating === 5)
        : filter === 'critical' ? rows.filter((r) => r.rating !== null && r.rating <= 2)
        : filter === 'recent' ? rows.filter((r) => r.created_at > Date.now() / 1000 - 90 * 86400)
        : rows;
    }

    /* ---------- rating only summary ---------- */

    /**
     * One row for every rating with no comment, collapsed by default. The filter
     * counts above still count these; this only decides how much room they take.
     */
    function renderSummary(): void {
      const rows = filtered().filter((review) => !isWritten(review));
      const open = summarySlot.querySelector('details')?.open ?? false;
      summarySlot.innerHTML = summaryHtml(rows, f, open);
    }

    /** Where a copied "link to this review" points: this very page. */
    const permalink = window.location.origin + window.location.pathname;

    function renderInto(target: HTMLElement): void {
      const rows = filtered().filter(isWritten);

      if (rows.length === 0) {
        // The toggle must never leave a silently empty panel: when it alone emptied
        // the list, say so, with the way back inline. Only once the lookups have
        // settled, though: before that "all anon" would be a claim about names that
        // are still in flight.
        if (hideAnon && all.length > 0 && visible().length === 0) {
          target.innerHTML = profilesSettled
            ? `<p class="rev-status">${escapeHtml(t('reviews.allAnon', { n: all.length }))} ` +
              `<button class="rev-retry" type="button" data-anon-off>${escapeHtml(
                t('reviews.allAnonShow', { n: all.length }),
              )}</button></p>`
            : `<p class="rev-status">${escapeHtml(t('reviews.loading', { n: all.length }))}…</p>`;
          pagerWrap.hidden = true;
          return;
        }
        // With ratings but no words, "no reviews yet" would be false: the summary row
        // above is showing them. Say what is actually missing instead.
        const message =
          all.length === 0 ? t('reviews.empty')
          : filtered().length > 0 ? t('reviews.emptyWritten')
          : t('reviews.emptyFilter');
        target.innerHTML = `<p class="rev-status">${escapeHtml(message)}</p>`;
        pagerWrap.hidden = true;
        return;
      }

      const pages = Math.ceil(rows.length / PAGE_SIZE);
      page = Math.min(page, pages);
      const slice = rows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
      target.innerHTML = slice
        .map((review) =>
          reviewHtml(review, f, {
            propagating: optimistic.has(review.id),
            publishedTo: optimistic.get(review.id) ?? null,
            permalink,
          }),
        )
        .join('');
      // Long bodies clamp to six lines with a "Read more"; the measurement needs the
      // rows to be in the document, which they now are.
      armReadMore(target);

      pagerWrap.hidden = pages <= 1;
      if (pages > 1) {
        const button = (label: string, target: number, current: boolean, aria?: string) =>
          `<button class="pg${current ? ' on' : ''}" type="button" data-page="${target}"${
            aria ? ` aria-label="${aria}"` : ''
          }${current ? ' aria-current="true"' : ''}>${label}</button>`;

        // The chevrons are glyphs, not words. Only their labels are translated.
        const parts = [button('‹', Math.max(1, page - 1), false, t('common.previousPage'))];
        for (let p = 1; p <= pages; p++) parts.push(button(String(p), p, p === page));
        parts.push(button('›', Math.min(pages, page + 1), false, t('common.nextPage')));
        pager.innerHTML = parts.join('');
      }
    }

    /**
     * Draw the list. The first call after the relays answer hands over from the
     * bones; every later one redraws in place, because by then the reviews are
     * already here and there is nothing to wait for.
     */
    function paint(): void {
      renderSummary();
      if (bonesUp) {
        bonesUp = false;
        // swapBones staggers the rows in as the bones fade off them. It fills a
        // detached staging element, where the clamp cannot measure, so the rows are
        // armed here, once they are in the document.
        swapBones(list, renderInto);
        armReadMore(list);
      } else {
        renderInto(list);
        enterStagger([...list.children] as HTMLElement[]);
      }
      if (markNewest) {
        markNewest = false;
        // Published in this session: a soft amber edge for a second and a half, then
        // it is an ordinary review like every other one.
        list.querySelector<HTMLElement>('.review')?.classList.add('is-new');
      }
    }

    /**
     * Repaint, optionally letting the outgoing list fade out first.
     *
     * `animate` is for a change the reader made (a filter, a page): the old rows fade
     * out in 120ms and the new ones rise in staggered behind them, under 350ms in
     * total. Only one repaint is ever scheduled, and it draws whatever the state is
     * when it runs, so hammering the filters cannot stack or queue animations.
     */
    function render(animate = false): void {
      if (pendingPaint) return;
      if (!animate || bonesUp || prefersReducedMotion()) {
        paint();
        return;
      }
      list.classList.add('leaving');
      pendingPaint = window.setTimeout(() => {
        pendingPaint = 0;
        list.classList.remove('leaving');
        paint();
      }, 120);
    }

    const patchProfiles = (): void =>
      applyProfiles(root!, f, (pubkey) => all.find((r) => r.pubkey === pubkey));

    function updateCounts(): void {
      const set = (key: string, value: number) => {
        const el = root!.querySelector(`[data-count="${key}"]`);
        if (el) el.textContent = f.number(value);
      };
      // Counts cover every review, written or not, so the filters stay honest about
      // how many ratings a mint has even though most of them render as one line.
      // They count what the panel can currently show: with anon hidden, the hidden
      // reviews come out of every count, and the note below says how many that is.
      const rows = visible();
      set('all', rows.length);
      set('5', rows.filter((r) => r.rating === 5).length);
      set('critical', rows.filter((r) => r.rating !== null && r.rating <= 2).length);

      // The toggle itself: state, and how many reviews it hides (or would hide).
      const anonCount = all.filter((r) => isAnon(r)).length;
      const chip = root!.querySelector<HTMLButtonElement>('[data-anon-toggle]');
      if (chip) {
        chip.hidden = all.length === 0 || (anonCount === 0 && !hideAnon);
        chip.setAttribute('aria-pressed', String(hideAnon));
        const slot = chip.querySelector('[data-count="anon"]');
        if (slot) slot.textContent = ` · ${f.number(anonCount)}`;
      }

      // The community rating in the verdict strip never moves with this toggle; this
      // note is the one line that accounts for the difference.
      const note = root!.querySelector<HTMLElement>('[data-anon-note]');
      if (note) {
        note.hidden = !hideAnon || all.length === 0 || rows.length === all.length;
        if (!note.hidden) {
          note.textContent = t('reviews.anonHidden', { n: rows.length, total: all.length });
        }
      }
    }

    /** Flip the toggle, remember it, and redraw everything that counts. */
    function setHideAnon(on: boolean): void {
      if (hideAnon === on) return;
      hideAnon = on;
      storeHideAnon(on);
      page = 1;
      render(true);
      updateCounts();
    }

    /* ---------- loading ---------- */

    /** Bones never spin forever: past this the reader gets an error and a way out. */
    function withTimeout<T>(work: Promise<T>, ms: number): Promise<T> {
      return new Promise<T>((resolve, reject) => {
        const timer = window.setTimeout(() => reject(new Error('relay-timeout')), ms);
        work.then(
          (value) => {
            window.clearTimeout(timer);
            resolve(value);
          },
          (error: unknown) => {
            window.clearTimeout(timer);
            reject(error instanceof Error ? error : new Error(String(error)));
          },
        );
      });
    }

    function showRelayError(): void {
      bonesUp = false;
      clearBones(list);
      list.innerHTML =
        `<p class="rev-status error" role="status">${escapeHtml(t('reviews.relayError'))} ` +
        `<button class="rev-retry" type="button" data-review-retry>${escapeHtml(t('common.retry'))}</button></p>`;
      pagerWrap.hidden = true;
    }

    async function load(): Promise<void> {
      // Bones stand in for reviews the API has already counted. With none counted
      // the prerendered "no reviews yet" line is the truthful thing to leave up.
      // The bones are already in the prerendered HTML, so first load only has to take
      // them over. After the error state has replaced them a retry has to draw them
      // again, and that path renders from the same bone data.
      if (expected > 0) {
        const bones =
          adoptBones(list, 3) ??
          showBones(list, reviewsBones, {
            groups: 3,
            label: t('reviews.loading', { n: expected }),
          });
        bonesUp = bones !== null;
      }

      let loaded: LoadedReview[];
      try {
        loaded = await withTimeout(loadReviews(subject), RELAY_TIMEOUT_MS);
      } catch {
        showRelayError();
        return;
      }

      // The relay pool swallows per relay failures and resolves empty, so nothing
      // coming back for a mint the API counted reviews for means the relays did not
      // answer, not that the reviews are gone. Saying "no reviews yet" there would
      // be a lie the reader cannot check.
      if (loaded.length === 0 && expected > 0 && !handedForward) {
        showRelayError();
        return;
      }

      all = loaded;

      /*
       * The author arrived here from the review-by-URL dialog moments ago. Their own
       * review is on the relays but may not be in this answer yet, so it goes to the
       * top as an optimistic card — the same card, with the same "propagating" note,
       * that they would have seen had they written it on this page.
       */
      if (handedForward && !all.some((review) => review.id === handedForward.id)) {
        optimistic.set(handedForward.id, {
          accepted: handedForward.accepted,
          total: handedForward.total,
        });
        all.unshift({
          id: handedForward.id,
          pubkey: handedForward.pubkey,
          npub: safeNpub(handedForward.pubkey),
          created_at: handedForward.created_at,
          rating: handedForward.rating,
          content: handedForward.content,
          mint_url: subject.key,
          profile: null,
        });
        markNewest = true;
      }

      /*
       * A `#review-{id}` deep link: land on the page that holds the card, then
       * scroll to it once it is drawn. A shared link wins over the reader's own
       * filters for this one load, including the anon toggle: the review someone
       * sent them must not be invisible when they arrive. That override is not
       * persisted.
       */
      const anchored = anchoredReviewId();
      const anchorTarget = anchored ? all.find((r) => r.id === anchored) : undefined;
      if (anchorTarget && isWritten(anchorTarget)) {
        filter = 'all';
        if (hideAnon && isAnon(anchorTarget)) hideAnon = false;
        const rows = filtered().filter(isWritten);
        const index = rows.findIndex((r) => r.id === anchored);
        if (index >= 0) page = Math.floor(index / PAGE_SIZE) + 1;
      }

      // Rendered with npub fallbacks first: the text is what people came for, and
      // names arrive into a line that is already the right height.
      render();
      updateCounts();

      if (anchorTarget && isWritten(anchorTarget)) {
        // Next frame: the bones cross-fade has already inserted the rows, but the
        // scroll should measure the settled layout.
        window.requestAnimationFrame(() => {
          if (anchored) revealAnchoredReview(anchored, scrollBehavior());
        });
      }

      try {
        const profiles = await loadProfiles(all.map((r) => r.pubkey));
        for (const review of all) review.profile = profiles.get(review.pubkey) ?? null;
      } catch {
        // Names stay as short npubs. Nothing else changes.
      } finally {
        profilesSettled = true;
        if (hideAnon) {
          // Resolved names move reviews out of the anon bucket, so the list itself
          // changes: redraw in place, without the entrance stagger, so cards appear
          // and counts shift with nothing else flickering.
          renderSummary();
          renderInto(list);
        } else {
          patchProfiles();
        }
        updateCounts();
      }
    }

    root.addEventListener('click', (event) => {
      const target = event.target as HTMLElement;

      if (target.closest('[data-review-retry]')) {
        void load();
        return;
      }

      // The inline "Show them" in the all-anon empty state, and the chip itself.
      if (target.closest('[data-anon-off]')) {
        setHideAnon(false);
        return;
      }
      if (target.closest('[data-anon-toggle]')) {
        setHideAnon(!hideAnon);
        return;
      }

      const filterButton = target.closest<HTMLButtonElement>('[data-filter]');
      if (filterButton) {
        filter = filterButton.dataset['filter'] as typeof filter;
        page = 1;
        for (const b of root!.querySelectorAll('[data-filter]')) {
          b.setAttribute('aria-pressed', String(b === filterButton));
        }
        render(true);
        return;
      }

      const pageButton = target.closest<HTMLButtonElement>('[data-page]');
      if (pageButton) {
        page = Number(pageButton.dataset['page']);
        render(true);
        root!.scrollIntoView({ behavior: scrollBehavior(), block: 'start' });
      }
    });

    if (isBuildMode()) {
      // `pnpm bones` is measuring this panel. Relays are not involved: render the
      // fixture reviews through the same function the real ones go through, so the
      // bones Boneyard captures are the shape of a real card and stay that way when
      // the card's markup changes.
      // Imported dynamically so the fixture text never reaches a real visitor.
      void armBuildSnapshot()
        .then(() => import('../lib/skeleton-fixtures'))
        .then(({ FIXTURE_REVIEWS }) => {
          all = FIXTURE_REVIEWS;
          renderInto(list);
        });
    } else {
      void load();
    }

    /* ---------- write a review ---------- */

    /*
     * The form itself is `lib/write-review.ts`, which the review-by-URL dialog on the
     * index pages drives too. What stays here is the half that is about *this list*:
     * putting the fresh review at the top, resetting the filters so it is visible, and
     * pulsing the button that opened the dialog.
     */
    const dialog = document.querySelector<HTMLDialogElement>('[data-write-dialog]');

    if (dialog) {
      const writer = wireWriteForm({
        dialog,
        subject: () => subject,
        onProfile: (pubkey, profile) => {
          // The relays answer the publish before the kind-0 lookup answers, near enough
          // every time, so the card goes up as "Anon" and the author's name cross-fades
          // in a moment later, exactly as it does on every other card.
          for (const review of all) if (review.pubkey === pubkey) review.profile = profile;
          patchProfiles();
        },
        onPublished: (published) => {
          // Optimistic insert at the top. The relays will echo it back on next load.
          optimistic.set(published.id, { accepted: published.accepted, total: published.total });
          all.unshift({
            id: published.id,
            pubkey: published.pubkey,
            npub: safeNpub(published.pubkey),
            created_at: published.created_at,
            rating: published.rating,
            content: published.content,
            mint_url: subject.key,
            profile: null,
          });

          filter = 'all';
          page = 1;
          for (const b of root!.querySelectorAll('[data-filter]')) {
            b.setAttribute('aria-pressed', String(b.getAttribute('data-filter') === 'all'));
          }
          markNewest = true;
          render();
          updateCounts();

          // The dialog is about to close, so the confirmation belongs on the button that
          // opened it: one amber pulse, on success only.
          const trigger = document.querySelector<HTMLElement>('[data-write-open]');
          if (trigger && !prefersReducedMotion()) {
            trigger.classList.remove('did-it');
            void trigger.offsetWidth;
            trigger.classList.add('did-it');
            trigger.addEventListener('animationend', () => trigger.classList.remove('did-it'), { once: true });
          }
        },
      });

      for (const button of dialog.querySelectorAll('[data-write-close]')) {
        button.addEventListener('click', () => writer.close());
      }

      for (const trigger of document.querySelectorAll('[data-write-open]')) {
        trigger.addEventListener('click', () => writer.open());
      }
    }

  }
  };

  onReady(setup);

  /*
   * The 404 resolver renders this panel for a mint that had no subject when the page was
   * built, and dispatches this once it has one. Setup runs again and finds it.
   *
   * Safe to re-run: the first pass with no subject does nothing at all — every listener
   * and every fetch is inside the `if (root && parsedSubject)` guard — so nothing is
   * bound twice.
   */
  document.addEventListener('cashumints:subject', setup);
</script>