// Build-time pages from the wayBetter Store catalog (public/store/catalog.json, the same signed
// file the apps read; format: waybetter/docs/STORE.md) and the site's languages (locales/, i18n.ts).
// Everything public is generated here, so a new item in the catalog needs no hand-written HTML, meta
// tags or sitemap entry:
//   /store/                     the storefront: every app's items, search and filters (src/store.ts)
//   /store/themes/<id>/         one page per item (store/_item.html is the frame; pages exist only
//   /store/plugins/<id>/        in the build, and in the dev server through a middleware)
//   /store/areas/<id>/          one page per area plugin of wayBetter for X (built into the app,
//                               not in the catalog: nothing to install; areas.ts)
//   /themes/, /plugins/         wayBetter for X's galleries
//   /<lang>/…                   every page again in each language that has a catalog (English is
//                               the root); these pages too exist only in the build
//   every page's <head>         title, description, canonical, hreflang, Open Graph, Twitter card, JSON-LD (seo.ts)
//   /sitemap.xml, /robots.txt
// Cards are in the HTML, so the pages work without JavaScript. "Install in wayBetter" is a
// waybetter://install link: the app opens its install screen (name, author, source, sha256,
// permissions, code) and installs nothing until the visitor confirms there.
//
// A Store item's own words (name, description, tags, picture captions) are its author's and stay
// English on every page; on a translated page they are marked lang="en".
import { fileURLToPath } from 'node:url';
import { compilePack, coverage as packCoverage } from '../../waybetter/packages/runtime/src/stringPacks.ts';
import { execFileSync } from 'node:child_process';
import { existsSync, readFileSync } from 'node:fs';
import { posix, resolve } from 'node:path';
import type { Plugin } from 'vite';
import { localizeHtml, messageHtml, stripMarks } from './i18n-html.ts';
import { PAGE_SOURCES, clientMessages, languages, resetCatalogs, translator, type Language, type Translate } from './i18n.ts';
import { KIND_FOLDER, KIND_LABEL, absolute, headHtml, itemPath, itemSlugs, notFoundPage, robotsTxt, sitePages, sitemapXml, type Catalog, type PageMeta, type StoreItem } from './seo.ts';
import { APPS, FORGE_HOST, FRAMEWORK_REPO_URL, REPO_PUBLIC, REPO_URL, SOURCE_LANGUAGE, appInfo, repoFile, repoLinks } from './site.config.ts';
import { hasMedia, pictures, readItemMedia, type ItemMedia } from './store-media.ts';
import { AREAS_SINCE, areaFolder, areaItems, areaPath, type AreaItem } from './areas.ts';

type Item = StoreItem;

const STORE_BASE = 'https://waybetter.fyi/store/';
/** This site's app in the shared catalog (the /themes/ and /plugins/ galleries are its items). */
export const APP = 'x';
const esc = (value: unknown) => String(value ?? '').replace(/[&<>"']/g, ch => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]!);
/** Path of a store file below the site root (served from public/store by the same site). */
const local = (url: string) => (url.startsWith(STORE_BASE) ? `store/${url.slice(STORE_BASE.length)}` : url);
/** A store file as a page links it (`root` is the way to the site root); a file on another host keeps its URL. */
const href = (root: string, url: string) => (url.startsWith(STORE_BASE) ? `${root}${local(url)}` : url);
/** A store picture for an <img>: a root path, which Vite knows as a public file and rewrites for the page. */
const picture = (url: string | undefined) => (url?.startsWith(STORE_BASE) ? `/${local(url)}` : url ?? '');
export const installLink = (item: Pick<Item, 'kind' | 'url'>) => `waybetter://install?kind=${item.kind}&url=${encodeURIComponent(item.url)}`;
const fileName = (item: Item) => (item.kind === 'plugin' ? item.file! : decodeURIComponent(new URL(item.url).pathname.split('/').pop() || `${item.id}.json`));

/** What each permission is called and means, in plain words (docs/PLUGINS.md → Permissions): `site.gen.permission.<id>.label|plain`. */
const PERMISSIONS = new Set(['storage', 'ui', 'clipboard', 'account', 'users', 'commands', 'network', 'network:none']);
const permissionKey = (p: string) => `site.gen.permission.${p === 'network:none' ? 'networkNone' : p}`;
const CATEGORIES = new Set(['reading', 'writing', 'filters', 'focus', 'tools', 'dark', 'light', 'language', 'icons']);
/**
 * A description for display. A plugin header keeps at most 300 characters, so a long one reaches
 * the catalog cut mid-word: end it at the last whole word instead.
 */
const tidy = (text: string) => (/[.!?)…"”]$/.test(text.trim()) ? text.trim() : `${text.trim().replace(/\s+\S*$/, '')}…`);
const kb = (bytes: number) => (bytes < 1024 ? `${bytes} B` : `${(bytes / 1024).toFixed(1)} KB`);
const permissionTone = (p: string) => (p === 'network:none' ? 'is-ok' : p === 'account' || p === 'users' || p === 'network' ? 'is-warn' : '');

type Site = { catalog: Catalog; slugs: Map<Item, string>; dates: Map<string, string>; featured: Item[]; media: Map<Item, ItemMedia>; areaMedia: Map<string, ItemMedia> };
/**
 * What a page is written with: its language and words, the way back to that language's home
 * (`rel`: "../", "../../../"; links between pages stay inside the language) and the way to the site
 * root (`root`), where the files every language shares are (downloads, pictures).
 */
type Page = { site: Site; lang: string; dir: 'ltr' | 'rtl'; t: Translate; rel: string; root: string };

const kindLabel = (page: Page, kind: Item['kind']) => page.t(`site.gen.kind.${kind}`);
const permissionLabel = (page: Page, p: string) => (PERMISSIONS.has(p) ? page.t(`${permissionKey(p)}.label`) : p);
/** A string pack's coverage of its site's strings (the pack as published, against the app's inventory). */
const coverageCache = new Map<string, { translated: string; translatable: string } | null>();
function coverageOf(item: Item): { translated: string; translatable: string } | null {
  if (item.kind !== 'strings') return null;
  if (coverageCache.has(item.url)) return coverageCache.get(item.url)!;
  let value: { translated: string; translatable: string } | null = null;
  try {
    const here = fileURLToPath(new URL('.', import.meta.url));
    const pack = JSON.parse(readFileSync(resolve(here, 'public/store', new URL(item.url).pathname.replace(/^\/store\//, '')), 'utf8'));
    const inventory = JSON.parse(readFileSync(resolve(here, '../desktop/strings/x.web.inventory.json'), 'utf8'));
    const numbers = packCoverage(inventory, compilePack(pack, inventory)).all!;
    value = { translated: numbers.translated.toLocaleString('en-US'), translatable: numbers.translatable.toLocaleString('en-US') };
  } catch { value = null; }
  coverageCache.set(item.url, value);
  return value;
}

const category = (page: Page, id: string) => (CATEGORIES.has(id) ? page.t(`site.gen.category.${id}`) : id ? id[0]!.toUpperCase() + id.slice(1) : page.t('site.gen.category.other'));
/** Marks an item's own (English) words on a translated page. */
const own = (page: Page) => (page.lang === SOURCE_LANGUAGE ? '' : page.dir === 'rtl' ? ' lang="en" dir="ltr"' : ' lang="en"');

function permissionChips(page: Page, permissions: string[] | null | undefined): string {
  if (permissions == null) return `<li class="is-warn">${esc(page.t('site.gen.permission.legacy'))}</li>`;
  if (!permissions.length) return `<li class="is-ok">${esc(page.t('site.gen.permission.none'))}</li>`;
  return permissions.map(p => `<li class="${permissionTone(p)}">${esc(permissionLabel(page, p))}</li>`).join('');
}

const swatches = (item: Item) => (item.colors
  ? `<span class="gal-sw" aria-hidden="true">${[item.colors.bg, item.colors.surface ?? item.colors.bg, item.colors.text, item.colors.accent].map(c => `<i style="background:${esc(c)}"></i>`).join('')}</span>`
  : '');

/** Everything the "app is not installed" panel needs rides on the install link itself (src/install.ts). */
function installAttrs(page: Page, item: Item): string {
  const app = appInfo(item.apps[0] ?? APP);
  return `href="${esc(installLink(item))}" data-install data-install-name="${esc(item.name)}" data-install-file="${esc(href(page.root, item.url))}" data-install-filename="${esc(fileName(item))}"`
    + ` data-install-app="${esc(app.name)}"${app.page ? ` data-install-app-page="${esc(page.rel + app.page)}"` : ''}${app.oneClickSince ? ` data-install-since="${esc(app.oneClickSince)}"` : ''}`;
}

/**
 * An item's own picture or video (store-media.ts), which the build copies out of the Store's source:
 * `vite-ignore` keeps Vite from looking for the file among the site's own assets.
 */
const mediaUrl = (page: Page, src: string) => `${page.root}${src.slice(1)}`;
const pagePath = (site: Site, item: Item) => itemPath(item, site.slugs.get(item)!);
const pageHref = (page: Page, item: Item) => `${page.rel}${pagePath(page.site, item).slice(1)}`;

function card(page: Page, item: Item, heading: 'h2' | 'h3', extraClass = ''): string {
  const { site, t } = page;
  const link = pageHref(page, item);
  // Found by its own words, by the English labels and by this language's.
  const searchable = [...new Set([
    item.name, item.description, item.author, KIND_LABEL[item.kind], kindLabel(page, item.kind), item.category, category(page, item.category), ...item.tags,
    ...item.apps.map(app => appInfo(app).name), ...(item.permissions ?? []).flatMap(p => [p, permissionLabel(page, p)]),
  ])].join(' ').toLowerCase();
  // The item's own cover when it has one, else the preview the Store drew for it.
  const cover = site.media.get(item)?.cover;
  const shot = cover
    ? `<img vite-ignore class="gal-img" src="${esc(mediaUrl(page, cover.src))}" alt="" width="${cover.width}" height="${cover.height}" loading="lazy" decoding="async" />`
    : `<img class="gal-img" src="${esc(picture(item.preview))}" alt="" width="640" height="400" loading="lazy" decoding="async" />`;
  return `<article class="gal-card${extraClass}" id="${esc(item.kind)}-${esc(site.slugs.get(item))}" data-kind="${esc(item.kind)}" data-category="${esc(item.category)}" data-apps="${esc(item.apps.join(' '))}" data-search="${esc(searchable)}">
  <a class="gal-shot" href="${esc(link)}" tabindex="-1" aria-hidden="true">
    ${shot}
    <span class="gal-kind gal-kind-${esc(item.kind)}">${esc(kindLabel(page, item.kind))}</span>
  </a>
  <div class="gal-body">
    <header><${heading}><a href="${esc(link)}"${own(page)}>${esc(item.name)}</a></${heading}>${swatches(item)}</header>
    <p class="gal-meta">${item.author ? `${esc(t('site.gen.card.by', { author: item.author }))} · ` : ''}v${esc(item.version)} · ${esc(category(page, item.category))} · ${kb(item.size)}</p>
    <p class="gal-desc"${own(page)}>${esc(tidy(item.description))}</p>
    ${item.kind === 'plugin' ? `<ul class="gal-perms" aria-label="${esc(t('site.gen.permissions'))}">${permissionChips(page, item.permissions)}</ul>` : ''}
    <div class="gal-actions">
      <a class="btn btn-solid btn-sm" ${installAttrs(page, item)} aria-label="${esc(t('site.gen.card.installLabel', { name: item.name }))}">${esc(t('site.gen.install'))}</a>
      <a class="btn btn-ghost btn-sm" href="${esc(link)}" aria-label="${esc(t('site.gen.card.detailsLabel', { name: item.name }))}">${esc(t('site.gen.card.details'))}</a>
    </div>
  </div>
</article>`;
}

// ---- /themes/ and /plugins/ (one app's items of one kind) -----------------------------------

export function galleryHtml(page: Page, kind: 'theme' | 'plugin', app = APP): string {
  const { site, t } = page;
  const items = site.catalog.items.filter(item => item.kind === kind && item.apps.includes(app));
  const categories = [...new Set(items.map(item => item.category))].sort();
  const filters = `<div class="gal-filters" role="group" aria-label="${esc(t('site.gen.gallery.categories'))}"><button type="button" class="is-on" data-filter="all" aria-pressed="true">${esc(t('site.gen.everything'))} <span>${items.length}</span></button>${categories.map(c => `<button type="button" data-filter="${esc(c)}" aria-pressed="false">${esc(category(page, c))} <span>${items.filter(i => i.category === c).length}</span></button>`).join('')}<label class="gal-search"><span class="sr-only">${esc(t('site.gen.search'))}</span><input type="search" placeholder="${esc(t(kind === 'theme' ? 'site.gen.gallery.searchThemes' : 'site.gen.gallery.searchPlugins'))}" data-gallery-search /></label></div>`;
  return `${filters}\n<div class="gal-grid" data-gallery>${items.map(item => card(page, item, 'h2')).join('\n')}</div>\n<p class="gal-empty" data-gallery-empty hidden>${messageHtml(t, 'site.gen.gallery.empty', {}, { a1: `<a href="${page.rel}store/">`, a1End: '</a>' })}</p>`;
}

// ---- /store/ --------------------------------------------------------------------------------

function storeBar(page: Page): string {
  const { site, t } = page;
  const items = site.catalog.items;
  const count = (test: (item: Item) => boolean) => items.filter(test).length;
  const apps = [...new Set(items.flatMap(item => item.apps))].sort();
  const categories = (kind: Item['kind']) => [...new Set(items.filter(item => item.kind === kind).map(item => item.category))].sort();
  const chip = (group: string, value: string, label: string, n: number | null, extra = '') => `<button type="button" data-${group}="${esc(value)}" aria-pressed="${value === 'all'}"${extra}>${esc(label)}${n == null ? '' : ` <span>${n}</span>`}</button>`;
  return `<form class="st-bar" role="search" aria-label="${esc(t('site.gen.bar.label'))}" data-store-bar action="./" method="get">
  <label class="st-search">
    <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="5.5" /><path d="m13.5 13.5 3.5 3.5" /></svg>
    <span class="sr-only">${esc(t('site.gen.bar.search'))}</span>
    <input type="search" name="q" placeholder="${esc(t('site.gen.bar.placeholder', { count: items.length }))}" autocomplete="off" autocapitalize="off" spellcheck="false" enterkeyhint="search" data-store-search />
    <kbd aria-hidden="true">/</kbd>
  </label>
  <div class="st-filters">
    <div class="st-seg" role="group" aria-label="${esc(t('site.gen.bar.kind'))}">
      ${chip('kind', 'all', t('site.gen.bar.all'), items.length)}${chip('kind', 'theme', t('site.gen.themes'), count(i => i.kind === 'theme'))}${chip('kind', 'plugin', t('site.gen.plugins'), count(i => i.kind === 'plugin'))}
    </div>
    <div class="st-chips" role="group" aria-label="${esc(t('site.gen.bar.app'))}">
      <span class="st-chips-label" aria-hidden="true">${esc(t('site.gen.bar.app'))}</span>
      ${chip('app', 'all', t('site.gen.bar.everyApp'), null)}${apps.map(app => chip('app', app, appInfo(app).site, count(i => i.apps.includes(app)))).join('')}
    </div>
    <div class="st-chips" role="group" aria-label="${esc(t('site.gen.bar.category'))}">
      <span class="st-chips-label" aria-hidden="true">${esc(t('site.gen.bar.category'))}</span>
      ${chip('category', 'all', t('site.gen.bar.any'), null)}${(['theme', 'plugin'] as const).flatMap(kind => categories(kind).map(c => chip('category', c, category(page, c), count(i => i.kind === kind && i.category === c), ` data-for="${kind}"`))).join('')}
    </div>
  </div>
</form>`;
}

function shelf(page: Page, id: string, title: string, note: string, items: Item[]): string {
  if (!items.length) return '';
  return `<section class="st-shelf" aria-labelledby="${id}">
  <header class="st-shelf-head"><h2 class="st-h" id="${id}">${esc(title)}</h2><p>${esc(note)}</p></header>
  <div class="st-row">${items.map(item => card(page, item, 'h3', ' gal-card-feature')).join('\n')}</div>
</section>`;
}

/**
 * "Latest": the items whose files changed most recently (git). Shown only when the dates tell
 * something, i.e. not when every item carries the same one (a first import, a shallow checkout).
 */
export function latestItems(items: Item[], dateOf: (item: Item) => string | undefined, limit = 4): Item[] {
  const dated = items.filter(item => dateOf(item));
  if (dated.length < 2 || new Set(dated.map(dateOf)).size < 2) return [];
  return [...dated].sort((a, b) => dateOf(b)!.localeCompare(dateOf(a)!)).slice(0, limit);
}

const dateLabel = (date: string, lang: string) => new Date(`${date}T00:00:00Z`).toLocaleDateString(lang === SOURCE_LANGUAGE ? 'en-US' : lang, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });

// ---- /store/<kind>/<id>/ --------------------------------------------------------------------

/**
 * The top of an item page: its own cover, screenshots and video as a gallery (src/item.ts adds the
 * thumbnails' switching, the lightbox, swipe and the play button), or, for an item without media,
 * the preview the Store drew for it. Without JavaScript every picture is shown, one under the other,
 * each a link to its file, and the video has its own controls.
 */
function mediaHtml(page: Page, item: Item): string {
  const { site, t } = page;
  const media = site.media.get(item);
  if (!hasMedia(media)) {
    return `<figure class="it-shot">
            <img src="${esc(picture(item.preview))}" alt="${esc(t('site.gen.media.previewAlt', { name: item.name, kind: item.kind }))}" width="640" height="400" fetchpriority="high" />
          </figure>`;
  }
  const shots = pictures(media);
  const video = media.video;
  const slides = shots.map((shot, index) => `<figure class="it-shot it-slide${index === 0 ? ' is-on' : ''}" data-slide>
              <a class="it-zoom" href="${esc(mediaUrl(page, shot.src))}" data-lightbox aria-label="${esc(t('site.gen.media.open', { alt: shot.alt }))}">
                <img vite-ignore src="${esc(mediaUrl(page, shot.src))}" alt="${esc(shot.alt)}"${own(page)} width="${shot.width}" height="${shot.height}" ${index === 0 ? 'fetchpriority="high"' : 'loading="lazy" decoding="async"'} />
              </a>${shot.caption ? `
              <figcaption${own(page)}>${esc(shot.caption)}</figcaption>` : ''}
            </figure>`);
  if (video) {
    const label = video.caption ?? t('site.gen.media.inUse', { name: item.name });
    slides.push(`<figure class="it-shot it-slide it-video${shots.length ? '' : ' is-on'}" data-slide>
              <video vite-ignore poster="${esc(mediaUrl(page, video.poster.src))}" width="${video.width}" height="${video.height}" preload="none" playsinline muted loop controls aria-label="${esc(t('site.gen.media.video', { label }))}" data-video>
                <source vite-ignore src="${esc(mediaUrl(page, video.src))}" type="${esc(video.type)}" />
                <a href="${esc(mediaUrl(page, video.src))}">${esc(t('site.gen.media.download'))}</a>
              </video>
              <button class="it-play" type="button" data-video-play aria-label="${esc(t('site.gen.media.play', { label }))}"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" /></svg></button>${video.caption ? `
              <figcaption${own(page)}>${esc(video.caption)}</figcaption>` : ''}
            </figure>`);
  }
  const thumbs = slides.length < 2 ? '' : `<div class="it-thumbs" role="group" aria-label="${esc(t(video ? 'site.gen.media.picturesAndVideo' : 'site.gen.media.pictures', { name: item.name }))}">${[
    ...shots.map((shot, index) => `<button type="button" data-thumb aria-pressed="${index === 0}" aria-label="${esc(t('site.gen.media.pictureOf', { index: index + 1, count: shots.length, alt: shot.alt }))}"><img vite-ignore src="${esc(mediaUrl(page, shot.src))}" alt="" width="${shot.width}" height="${shot.height}" loading="lazy" decoding="async" /></button>`),
    ...(video ? [`<button type="button" class="is-video" data-thumb aria-pressed="${shots.length === 0}" aria-label="${esc(video.caption ? t('site.gen.media.video', { label: video.caption }) : t('site.gen.media.videoThumb'))}"><img vite-ignore src="${esc(mediaUrl(page, video.poster.src))}" alt="" width="${video.poster.width}" height="${video.poster.height}" loading="lazy" decoding="async" /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" /></svg></button>`] : []),
  ].join('')}</div>`;
  return `<div class="it-media" data-media>
            <div class="it-stage">
            ${slides.join('\n            ')}
            </div>
            ${thumbs}
          </div>`;
}

function itemHtml(page: Page, item: Item): string {
  const { site, t, rel, root, lang } = page;
  const th = (key: string, values: Record<string, unknown> = {}, slots: Record<string, string> = {}) => messageHtml(t, key, values, slots);
  const bold = { b1: '<b>', b1End: '</b>' };
  const app = appInfo(item.apps[0] ?? APP);
  const file = fileName(item);
  const fileHref = href(root, item.url);
  const address = absolute(`${lang === SOURCE_LANGUAGE ? '' : `/${lang}`}${pagePath(site, item)}`);
  const updated = site.dates.get(local(item.url));
  const facts: [string, string][] = [
    [t('site.gen.item.version'), esc(item.version)],
    [t('site.gen.item.author'), item.author ? esc(item.author) : `<span class="it-dim">${esc(t('site.gen.item.notStated'))}</span>`],
    [t('site.gen.item.category'), `<a href="${rel}store/?kind=${item.kind}&amp;category=${encodeURIComponent(item.category)}">${esc(category(page, item.category))}</a>`],
    [t('site.gen.item.for'), item.apps.map(id => { const info = appInfo(id); return info.page ? `<a href="${rel}${info.page}">${esc(info.name)}</a>` : esc(info.name); }).join(', ')],
    [t('site.gen.item.file'), `<code>${esc(file)}</code>`],
    [t('site.gen.item.size'), `${kb(item.size)} <span class="it-dim">${esc(t('site.gen.item.bytes', { count: item.size.toLocaleString('en-US') }))}</span>`],
    ...(updated ? [[t('site.gen.item.updated'), `<time datetime="${updated}">${esc(dateLabel(updated, lang))}</time>`] as [string, string]] : []),
    ...(item.kind === 'icons' ? [[t('site.gen.item.dataOnly'), esc(t('site.gen.item.dataOnlyIcons'))] as [string, string]] : []),
    ...(item.kind === 'strings' ? [
      [t('site.gen.item.language'), `<span lang="${esc(item.language ?? '')}">${esc(item.language ?? '')}</span>`],
      ...(coverageOf(item) ? [[t('site.gen.item.coverage'), esc(t('site.gen.item.coverageValue', coverageOf(item)!))] as [string, string]] : []),
      [t('site.gen.item.dataOnly'), esc(t('site.gen.item.dataOnlyValue'))],
    ] as [string, string][] : []),
    ...(item.license ? [[t('site.gen.item.license'), `<span${own(page)}>${esc(item.license)}</span>`] as [string, string]] : []),
    ...(item.credits ? [[t('site.gen.item.credits'), `<span${own(page)}>${esc(item.credits)}</span>`] as [string, string]] : []),
  ];
  const permissions = item.kind !== 'plugin' ? '' : `<section class="it-block" aria-labelledby="it-perms">
    <h2 class="it-h" id="it-perms">${esc(t('site.gen.item.asks'))}</h2>
    <ul class="it-perms">${item.permissions == null
    ? `<li class="is-warn"><b>${esc(t('site.gen.permission.legacy'))}</b><span>${esc(t('site.gen.item.legacyPlain'))}</span></li>`
    : !item.permissions.length
      ? `<li class="is-ok"><b>${esc(t('site.gen.permission.none'))}</b><span>${esc(t('site.gen.item.nonePlain'))}</span></li>`
      : item.permissions.map(p => `<li class="${permissionTone(p)}"><b>${esc(permissionLabel(page, p))}</b><span>${esc(PERMISSIONS.has(p) ? t(`${permissionKey(p)}.plain`) : t('site.gen.item.declares', { permission: p }))}</span></li>`).join('')}</ul>
    <p class="it-fine">${th('site.gen.item.permissionsFine')}</p>
  </section>`;
  const palette = !item.colors ? '' : `<section class="it-block" aria-labelledby="it-colors">
    <h2 class="it-h" id="it-colors">${esc(t('site.gen.item.palette'))}</h2>
    <ul class="it-palette">${([['bg', item.colors.bg], ['surface', item.colors.surface ?? item.colors.bg], ['text', item.colors.text], ['accent', item.colors.accent]] as const).map(([name, color]) => `<li><i style="background:${esc(color)}"></i><span>${esc(t(`site.gen.item.color.${name}`))}</span><code>${esc(color)}</code></li>`).join('')}</ul>
    <p class="it-fine">${th('site.gen.item.paletteFine')}</p>
  </section>`;
  const related = site.catalog.items
    .filter(other => other !== item && other.kind === item.kind && other.apps.some(id => item.apps.includes(id)))
    .sort((a, b) => Number(b.category === item.category) - Number(a.category === item.category))
    .slice(0, 3);
  const how = { a1: '<a href="#installing">', a1End: '</a>' };

  return `<section class="it-top">
        <div class="it-glow" aria-hidden="true"${item.colors ? ` style="--it-accent:${esc(item.colors.accent)}"` : ''}></div>
        <nav class="it-crumbs wrap" aria-label="${esc(t('site.gen.breadcrumb'))}">
          <ol><li><a href="${rel}store/">${esc(t('site.gen.store'))}</a></li><li><a href="${rel}store/?kind=${item.kind}">${esc(t(item.kind === 'theme' ? 'site.gen.themes' : item.kind === 'strings' ? 'site.gen.strings' : item.kind === 'icons' ? 'site.gen.icons' : 'site.gen.plugins'))}</a></li><li aria-current="page"${own(page)}>${esc(item.name)}</li></ol>
        </nav>
        <div class="wrap it-grid">
          ${mediaHtml(page, item)}
          <div class="it-head">
            <p class="kicker"><span class="kicker-dot"></span>${th('site.gen.item.kicker', { kind: kindLabel(page, item.kind), category: category(page, item.category), sites: item.apps.map(id => appInfo(id).site).join(', ') })}</p>
            <h1${own(page)}>${esc(item.name)}</h1>
            <p class="it-by">${item.author ? `${esc(t('site.gen.card.by', { author: item.author }))} &middot; ` : ''}v${esc(item.version)} &middot; ${kb(item.size)}</p>
            <p class="it-desc"${own(page)}>${esc(tidy(item.description))}</p>
            ${item.kind === 'plugin' ? `<ul class="gal-perms" aria-label="${esc(t('site.gen.permissions'))}">${permissionChips(page, item.permissions)}</ul>` : swatches(item)}
            <div class="it-actions" data-install-host>
              <a class="btn btn-brush" ${installAttrs(page, item)}>${esc(t('site.gen.item.install'))}</a>
              <a class="btn btn-ghost" href="${esc(fileHref)}" download="${esc(file)}" data-download>${esc(t('site.gen.item.download', { extension: item.kind === 'theme' ? '.json' : item.kind === 'strings' ? '.strings.json' : item.kind === 'icons' ? '.icons.json' : '.plugin.js' }))}</a>
              <a class="btn btn-ghost it-share" href="${esc(address)}" data-share data-share-title="${esc(`${item.name} · wayBetter Store`)}">${esc(t('site.gen.item.share'))}</a>
            </div>
            <p class="it-note">${app.oneClickSince ? th('site.gen.item.note', { app: app.name, version: app.oneClickSince }, how) : th('site.gen.item.noteAny', { app: app.name }, how)}</p>
            ${item.tags.length ? `<ul class="it-tags" aria-label="${esc(t('site.gen.item.tags'))}"${own(page)}>${item.tags.map(tag => `<li><a href="${rel}store/?q=${encodeURIComponent(tag)}">${esc(tag)}</a></li>`).join('')}</ul>` : ''}
          </div>
        </div>
      </section>

      <section class="it-body">
        <div class="wrap it-cols">
          <div class="it-main">
            ${permissions}${palette}
            <section class="it-block" aria-labelledby="it-source">
              <h2 class="it-h" id="it-source">${esc(t(item.kind === 'plugin' ? 'site.gen.item.code' : item.kind === 'strings' || item.kind === 'icons' ? 'site.gen.item.packFile' : 'site.gen.item.themeFile'))}</h2>
              <details class="it-src" data-source data-source-url="${esc(fileHref)}" data-source-lang="${item.kind === 'plugin' ? 'js' : 'json'}">
                <summary><span class="it-src-t">${esc(t('site.gen.item.read', { file }))}</span><span class="it-src-m">${kb(item.size)} &middot; ${esc(t('site.gen.item.exactBytes'))}</span></summary>
                <div class="code">
                  <div class="code-bar"><span class="dots" aria-hidden="true"><i></i><i></i><i></i></span><span class="file">${esc(file)}</span><a class="copy-btn it-raw" href="${esc(fileHref)}" data-source-raw>${esc(t('site.gen.item.raw'))}</a><button class="copy-btn" type="button" data-source-copy hidden>${esc(t('site.gen.copy'))}</button></div>
                  <pre tabindex="0" aria-label="${esc(file)}"><code data-source-code>${th('site.gen.item.openRaw', {}, { a1: `<a href="${esc(fileHref)}">`, a1End: '</a>' })}</code></pre>
                </div>
              </details>
            </section>

            <section class="it-block" id="installing" aria-labelledby="it-install">
              <h2 class="it-h" id="it-install">${esc(t('site.gen.item.how.title'))}</h2>
              <ol class="it-steps">
                <li>${th('site.gen.item.how.link', { kind: item.kind }, { ...bold, code1: '<code>waybetter://</code>' })}</li>
                <li>${th('site.gen.item.how.check', {}, bold)}</li>
                <li>${th(item.kind === 'plugin' ? 'site.gen.item.how.confirmPlugin' : item.kind === 'strings' ? 'site.gen.item.how.confirmStrings' : item.kind === 'icons' ? 'site.gen.item.how.confirmIcons' : 'site.gen.item.how.confirmTheme', {}, bold)}</li>
              </ol>
              <p class="it-fine">${th(item.kind === 'plugin' ? 'site.gen.item.how.finePlugin' : item.kind === 'strings' ? 'site.gen.item.how.fineStrings' : item.kind === 'icons' ? 'site.gen.item.how.fineIcons' : 'site.gen.item.how.fineTheme')} ${th('site.gen.item.how.vouched')}</p>
              <div class="it-manual">
                <h3>${esc(t('site.gen.item.manual.title'))}</h3>
                <p>${th(app.page && app.oneClickSince ? 'site.gen.item.manual.text' : 'site.gen.item.manual.textNoPage', { app: app.name, version: app.oneClickSince ?? '', file }, { a1: `<a href="${rel}${app.page ?? ''}">`, a1End: '</a>', a2: `<a href="${esc(fileHref)}" download="${esc(file)}">`, a2End: '</a>' })}</p>
              </div>
            </section>
          </div>

          <aside class="it-side" aria-label="${esc(t('site.gen.item.details'))}">
            <dl class="it-facts">${facts.map(([name, value]) => `<div><dt>${esc(name)}</dt><dd>${value}</dd></div>`).join('')}</dl>
            <div class="it-hash">
              <div class="it-hash-head"><span>SHA-256</span><button class="copy-btn" type="button" data-copy="${esc(item.sha256)}" aria-label="${esc(t('site.gen.item.copyHash', { file }))}">${esc(t('site.gen.copy'))}</button></div>
              <code>${esc(item.sha256)}</code>
              <p class="it-fine">${th('site.gen.item.hashNote', { date: site.catalog.generatedAt.slice(0, 10) }, { code1: `<code>sha256sum ${esc(file)}</code>` })}</p>
            </div>
          </aside>
        </div>
      </section>

      ${related.length ? `<section class="it-more">
        <div class="wrap">
          <header class="st-shelf-head"><h2 class="st-h">${esc(t(item.kind === 'theme' ? 'site.gen.item.moreThemes' : item.kind === 'strings' ? 'site.gen.item.moreStrings' : item.kind === 'icons' ? 'site.gen.item.moreIcons' : 'site.gen.item.morePlugins'))}</h2><p><a href="${rel}store/?kind=${item.kind}">${esc(t('site.gen.item.seeAll', { count: site.catalog.items.filter(other => other.kind === item.kind).length }))}</a></p></header>
          <div class="gal-grid">${related.map(other => card(page, other, 'h3')).join('\n')}</div>
        </div>
      </section>` : ''}`;
}

// ---- Area plugins: built into wayBetter for X (areas.ts) --------------------------------------

const areaHref = (page: Page, area: AreaItem) => `${page.rel}${areaPath(area.id).slice(1)}`;

function areaCard(page: Page, area: AreaItem, heading: 'h2' | 'h3'): string {
  const { site, t } = page;
  const link = areaHref(page, area);
  const cover = site.areaMedia.get(area.id)?.cover;
  const searchable = [...new Set([area.name, area.description, area.category, category(page, area.category), ...area.tags, ...area.features.map(feature => feature.label)])].join(' ').toLowerCase();
  return `<article class="gal-card gal-card-area" id="area-${esc(area.id)}" data-kind="area" data-category="${esc(area.category)}" data-apps="${APP}" data-search="${esc(searchable)}">
  <a class="gal-shot gal-shot-area" href="${esc(link)}" tabindex="-1" aria-hidden="true">
    ${cover ? `<img vite-ignore class="gal-img" src="${esc(mediaUrl(page, cover.src))}" alt="" width="${cover.width}" height="${cover.height}" loading="lazy" decoding="async" />` : `<span class="gal-area-name">${esc(area.name)}</span>`}
    <span class="gal-kind gal-kind-area">${esc(t('site.gen.kind.area'))}</span>
  </a>
  <div class="gal-body">
    <header><${heading}><a href="${esc(link)}">${esc(area.name)}</a></${heading}></header>
    <p class="gal-meta">${esc(t('site.gen.area.builtIn'))} · ${esc(category(page, area.category))} · ${esc(t('site.gen.area.featureCount', { count: area.features.length }))}</p>
    <p class="gal-desc">${esc(area.description)}</p>
    <div class="gal-actions">
      <a class="btn btn-ghost btn-sm" href="${esc(link)}" aria-label="${esc(t('site.gen.card.detailsLabel', { name: area.name }))}">${esc(t('site.gen.card.details'))}</a>
    </div>
  </div>
</article>`;
}

/** The shelf of area plugins on /store/ and /plugins/: built in, so counted apart from the catalog's items. */
function areaShelf(page: Page, heading: 'h2' | 'h3' = 'h3'): string {
  const areas = areaItems(page.lang);
  return `<section class="st-shelf st-areas" aria-labelledby="st-areas">
  <header class="st-shelf-head"><h2 class="st-h" id="st-areas">${esc(page.t('site.gen.areas.title', { app: appInfo(APP).name }))}</h2><p>${esc(page.t('site.gen.areas.note', { count: areas.length }))}</p></header>
  <div class="gal-grid">${areas.map(area => areaCard(page, area, heading)).join('\n')}</div>
</section>`;
}

function areaHtml(page: Page, area: AreaItem): string {
  const { site, t, rel, lang } = page;
  const th = (key: string, values: Record<string, unknown> = {}, slots: Record<string, string> = {}) => messageHtml(t, key, values, slots);
  const app = appInfo(APP);
  const address = absolute(`${lang === SOURCE_LANGUAGE ? '' : `/${lang}`}${areaPath(area.id)}`);
  const media = site.areaMedia.get(area.id);
  const facts: [string, string][] = [
    [t('site.gen.item.version'), esc(t('site.gen.area.partOf', { app: app.name, version: AREAS_SINCE }))],
    [t('site.gen.item.category'), `<a href="${rel}store/?kind=plugin&amp;category=${encodeURIComponent(area.category)}">${esc(category(page, area.category))}</a>`],
    [t('site.gen.item.for'), app.page ? `<a href="${rel}${app.page}">${esc(app.name)}</a>` : esc(app.name)],
    [t('site.gen.area.features'), esc(t('site.gen.area.featureCount', { count: area.features.length }))],
    ...(area.license ? [[t('site.gen.item.license'), `<span lang="en">${esc(area.license)}</span>`] as [string, string]] : []),
    ...(area.credits ? [[t('site.gen.item.credits'), `<span lang="en">${esc(area.credits)}</span>`] as [string, string]] : []),
  ];
  // Pictures only when the area has some; no drawn preview for something that is not a file.
  const pseudo = { name: area.name, preview: '' } as unknown as Item;
  if (media) site.media.set(pseudo, media);
  const top = media ? mediaHtml(page, pseudo) : '';
  if (media) site.media.delete(pseudo);
  const others = areaItems(lang).filter(other => other.id !== area.id).slice(0, 3);
  return `<section class="it-top">
        <div class="it-glow" aria-hidden="true"></div>
        <nav class="it-crumbs wrap" aria-label="${esc(t('site.gen.breadcrumb'))}">
          <ol><li><a href="${rel}store/">${esc(t('site.gen.store'))}</a></li><li><a href="${rel}plugins/#st-areas">${esc(t('site.gen.area.builtIn'))}</a></li><li aria-current="page">${esc(area.name)}</li></ol>
        </nav>
        <div class="wrap it-grid${top ? '' : ' it-grid-solo'}">
          ${top}
          <div class="it-head">
            <p class="kicker"><span class="kicker-dot"></span>${esc(t('site.gen.area.kicker', { app: app.name }))}</p>
            <h1>${esc(area.name)}</h1>
            <p class="it-desc">${esc(area.description)}</p>
            <p class="it-note">${esc(t('site.gen.area.note', { app: app.name, version: AREAS_SINCE }))}</p>
            <div class="it-actions">
              <a class="btn btn-brush" href="${rel}x/#download">${esc(t('site.gen.area.get', { app: app.name }))}</a>
              <a class="btn btn-ghost it-share" href="${esc(address)}" data-share data-share-title="${esc(`${area.name} · wayBetter for X`)}">${esc(t('site.gen.item.share'))}</a>
            </div>
            ${area.tags.length ? `<ul class="it-tags" aria-label="${esc(t('site.gen.item.tags'))}" lang="en">${area.tags.map(tag => `<li><a href="${rel}store/?q=${encodeURIComponent(tag)}">${esc(tag)}</a></li>`).join('')}</ul>` : ''}
          </div>
        </div>
      </section>

      <section class="it-body">
        <div class="wrap it-cols">
          <div class="it-main">
            <section class="it-block" aria-labelledby="it-features">
              <h2 class="it-h" id="it-features">${esc(t('site.gen.area.whatItDoes'))}</h2>
              <ul class="it-features">${area.features.map(feature => `<li><b>${esc(feature.label)}</b>${feature.description ? `<span>${esc(feature.description)}</span>` : ''}</li>`).join('')}</ul>
            </section>
            <section class="it-block" id="installing" aria-labelledby="it-install">
              <h2 class="it-h" id="it-install">${esc(t('site.gen.area.how.title'))}</h2>
              <ol class="it-steps">
                <li>${th('site.gen.area.how.plugins', { name: area.name }, { b1: '<b>', b1End: '</b>' })}</li>
                <li>${th('site.gen.area.how.mode', {}, { b1: '<b>', b1End: '</b>' })}</li>
              </ol>
              <p class="it-fine">${esc(t('site.gen.area.how.nothing'))}</p>
            </section>
          </div>
          <aside class="it-side" aria-label="${esc(t('site.gen.item.details'))}">
            <dl class="it-facts">${facts.map(([name, value]) => `<div><dt>${esc(name)}</dt><dd>${value}</dd></div>`).join('')}</dl>
          </aside>
        </div>
      </section>

      ${others.length ? `<section class="it-more">
        <div class="wrap">
          <header class="st-shelf-head"><h2 class="st-h">${esc(t('site.gen.areas.more'))}</h2><p><a href="${rel}plugins/#st-areas">${esc(t('site.gen.item.seeAll', { count: areaItems(lang).length }))}</a></p></header>
          <div class="gal-grid">${others.map(other => areaCard(page, other, 'h3')).join('\n')}</div>
        </div>
      </section>` : ''}`;
}

// ---- Languages --------------------------------------------------------------------------------

const GLOBE = '<svg class="lang-ico" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.25" /><path d="M2.75 10h14.5M10 2.75c2.1 2 3.2 4.5 3.2 7.25s-1.1 5.25-3.2 7.25c-2.1-2-3.2-4.5-3.2-7.25s1.1-5.25 3.2-7.25Z" /></svg>';

/**
 * The language menu (header and footer): a link to this same page in every language, each written
 * in its own name. Plain links, so it works without JavaScript; the head script (langScript)
 * remembers the choice and keeps the query and the hash.
 */
function langMenu(page: Page, all: Language[], base: string, where: 'top' | 'foot'): string {
  if (all.length < 2) return '';
  const current = all.find(language => language.code === page.lang)!;
  // The 404 page answers for any address: its links lead to each language's home (the script makes them this address).
  const target = base === '/404.html' ? '' : base.slice(1);
  const links = all.map(language => `<a href="${page.root}${language.code === SOURCE_LANGUAGE ? '' : `${language.code}/`}${target}" hreflang="${language.code}" lang="${language.code}" dir="${language.dir}" data-lang="${language.code}"${language.code === page.lang ? ' aria-current="true"' : ''}>${esc(language.name)}</a>`).join('');
  const label = page.t('site.lang.label');
  return `<details class="lang lang-${where}" data-lang-menu>
          <summary aria-label="${esc(`${label}: ${current.name}`)}" title="${esc(label)}">${GLOBE}<span class="lang-now"${where === 'top' ? ' aria-hidden="true"' : ''}>${esc(where === 'top' ? current.code.split('-')[0]!.toUpperCase() : current.name)}</span></summary>
          <div class="lang-pop" role="group" aria-label="${esc(page.t('site.lang.choose'))}">${links}</div>
        </details>`;
}

/**
 * The language script, in every page's <head>. It never runs for a visitor without JavaScript, and
 * the English pages are complete without it.
 *  - A click in the language menu is remembered (localStorage "wb.lang"), and keeps ?query and #hash.
 *  - First visit, on an English page only: when nothing is remembered and the browser's first
 *    language the site speaks is not English, go once to this same page in that language and
 *    remember it. After that, and after any choice in the menu, nothing redirects again. Crawlers
 *    are left alone, and so is a browser that cannot remember (it would be redirected every time).
 */
function langScript(page: Page, all: Language[]): string {
  if (all.length < 2) return '';
  const codes = JSON.stringify(all.map(language => language.code));
  const english = page.lang === SOURCE_LANGUAGE;
  const source = `(function(){var L=${codes},K="wb.lang",d=document,l=location,cur=${JSON.stringify(page.lang)},`
    + `r=new URL(${JSON.stringify(page.root)},d.baseURI).pathname,p=l.pathname.slice(r.length${english ? '' : '+cur.length+1'}),s;`
    + 'try{s=localStorage.getItem(K)}catch(e){}'
    + 'function to(c){return r+(c==="en"?"":c+"/")+p+l.search+l.hash}'
    + 'd.addEventListener("click",function(e){var a=e.target&&e.target.closest&&e.target.closest("a[data-lang]");if(!a)return;try{localStorage.setItem(K,a.getAttribute("data-lang"))}catch(e){}a.href=to(a.getAttribute("data-lang"))},true);'
    // The menu closes on a click outside it and on Escape.
    + 'function shut(t){var o=d.querySelectorAll("details[data-lang-menu][open]"),i;for(i=0;i<o.length;i++)if(!t||!o[i].contains(t))o[i].removeAttribute("open")}'
    + 'd.addEventListener("click",function(e){shut(e.target)});d.addEventListener("keydown",function(e){if(e.key==="Escape")shut()});'
    + (english
      ? 'if(s||navigator.webdriver||/bot|crawl|spider|slurp|preview|lighthouse|headless|fetch|monitor/i.test(navigator.userAgent))return;'
        + 'var n=navigator.languages||[navigator.language],i,t,c,m;'
        + 'for(i=0;i<n.length&&!m;i++){t=String(n[i]||"").toLowerCase().split("-");c=t[0]==="zh"?(/hant|tw|hk|mo/.test(t.slice(1).join("-"))?"zh-Hant":""):t[0]==="in"?"id":t[0];if(L.indexOf(c)>=0)m=c}'
        + 'if(!m||m==="en")return;try{localStorage.setItem(K,m)}catch(e){return}l.replace(to(m))'
      : '')
    + '})();';
  return `<script>${source}</script>`;
}

// ---- The plugin -----------------------------------------------------------------------------

const SOURCES: Record<string, string> = { '/': 'index.html', '/x/': 'x/index.html', '/store/': 'store/index.html', '/store/submit/': 'store/submit/index.html', '/themes/': 'themes/index.html', '/plugins/': 'plugins/index.html' };
const NOT_FOUND = '/404.html';

/** Last commit date (YYYY-MM-DD) of every file under the site's folder, keyed by its path in it. Empty without git. */
function gitDates(root: string): Map<string, string> {
  const dates = new Map<string, string>();
  try {
    const log = execFileSync('git', ['log', '--format=@%cs', '--name-only', '--relative', '--', '.'], { cwd: root, encoding: 'utf8', maxBuffer: 64 * 1024 * 1024, stdio: ['ignore', 'pipe', 'ignore'] });
    let date = '';
    for (const line of log.split(/\r?\n/)) {
      if (line.startsWith('@')) date = line.slice(1);
      else if (line && !dates.has(line)) dates.set(line, date);
    }
  } catch { /* not a git checkout: the sitemap falls back to the catalog and build dates */ }
  return dates;
}

/** Path back to the site root from a page ("/store/themes/nord/" → "../../../"). */
const relOf = (path: string) => '../'.repeat(path.split('/').length - 2) || './';

export function storePages(root: string): Plugin {
  // catalog.v3.json is the full list (every kind, format 3), catalog.json what every app knows (format 2): the same items, so the pages read the fuller one.
  const catalogPath = resolve(root, existsSync(resolve(root, 'public/store/catalog.v3.json')) ? 'public/store/catalog.v3.json' : 'public/store/catalog.json');
  const featuredPath = resolve(root, '../../store/featured.json');
  const itemFrame = resolve(root, 'store/_item.html');
  const localesDir = resolve(root, 'locales');
  /** The Store's source folders (store/<app>/<kind>s/<id>/), where an item's media lives. */
  const sourceRoot = resolve(root, '../../store');
  /** mediaFiles: path in the build ("store-media/x/plugins/<id>/cover.webp") → the file in the source. */
  type Loaded = { site: Site; all: Language[]; pages: Map<string, PageMeta>; sitemap: PageMeta[]; mediaFiles: Map<string, string>; items: Map<string, Item>; areas: Set<string> };
  let cache: Loaded | null = null;
  const MEDIA_TYPES: Record<string, string> = { png: 'image/png', webp: 'image/webp', jpg: 'image/jpeg', jpeg: 'image/jpeg', mp4: 'video/mp4', webm: 'video/webm' };

  const load = (): Loaded => {
    if (cache) return cache;
    const signed = JSON.parse(readFileSync(catalogPath, 'utf8')) as Omit<Catalog, 'items'> & { items: Array<Item | { kind: 'builtin' }> };
    if (signed.format !== 2 && signed.format !== 3) throw new Error('store catalog: unsupported format');
    // Built-in items (area plugins) are listed by the app's Store with their switch; the site has its own area pages (areas.ts), so they are not pages here.
    const catalog: Catalog = { ...signed, items: signed.items.filter((item): item is Item => item.kind !== 'builtin') };
    const slugs = itemSlugs(catalog.items);
    const files = gitDates(root);
    // Store files by their path below the site root ("store/themes/nord.json").
    const dates = new Map([...files].filter(([path]) => path.startsWith('public/')).map(([path, date]) => [path.slice('public/'.length), date]));
    let featured: Item[] = [];
    if (existsSync(featuredPath)) {
      const keys = JSON.parse(readFileSync(featuredPath, 'utf8')) as string[];
      featured = keys.map(key => catalog.items.find(item => item.apps.some(app => `${app}/${item.kind}/${item.id}` === key))).filter((item): item is Item => Boolean(item));
    }
    // Each item's own cover, screenshots and video, from its folder in the Store's source. They are
    // not in the signed catalog: the site shows them, the apps never fetch them.
    const media = new Map<Item, ItemMedia>();
    const mediaByPath = new Map<string, ItemMedia>();
    const mediaFiles = new Map<string, string>();
    const problems: string[] = [];
    for (const item of catalog.items) {
      for (const app of item.apps) {
        const folder = `store/${app}/${KIND_FOLDER[item.kind]}/${item.id}`;
        const read = readItemMedia(resolve(sourceRoot, app, KIND_FOLDER[item.kind], item.id), `/store-media/${app}/${KIND_FOLDER[item.kind]}/${item.id}/`, folder);
        problems.push(...read.problems);
        if (!hasMedia(read.media)) continue;
        media.set(item, read.media);
        mediaByPath.set(itemPath(item, slugs.get(item)!), read.media);
        for (const file of read.files) mediaFiles.set(file.to, file.from);
        break;
      }
    }
    if (problems.length) throw new Error(`the Store's media has problems (bun run check:store explains each):\n  ${problems.join('\n  ')}`);
    // The area plugins' own pictures (store/x/areas/<id>/), the same way.
    const areaMedia = new Map<string, ItemMedia>();
    for (const area of areaItems()) {
      const folder = `store/x/areas/${area.id}`;
      const read = readItemMedia(areaFolder(area.id), `/store-media/x/areas/${area.id}/`, folder);
      problems.push(...read.problems);
      if (!hasMedia(read.media)) continue;
      areaMedia.set(area.id, read.media);
      mediaByPath.set(areaPath(area.id), read.media);
      for (const file of read.files) mediaFiles.set(file.to, file.from);
    }
    if (problems.length) throw new Error(`the Store's media has problems (bun run check:store explains each):\n  ${problems.join('\n  ')}`);
    const site: Site = { catalog, slugs, dates, featured, media, areaMedia };
    const lastmod = new Map<string, string>();
    for (const [path, source] of Object.entries(SOURCES)) { const date = files.get(source); if (date) lastmod.set(path, date); }
    const catalogDate = catalog.generatedAt.slice(0, 10);
    for (const [path, date] of [...lastmod]) if (path !== '/' && path !== '/x/' && path !== '/store/submit/' && date < catalogDate) lastmod.set(path, catalogDate);
    const itemImages = new Set<string>();
    const items = new Map<string, Item>();
    for (const item of catalog.items) {
      const path = itemPath(item, slugs.get(item)!);
      items.set(path, item);
      const date = dates.get(local(item.url));
      if (date) lastmod.set(path, date);
      if (existsSync(resolve(root, `public/og/items/${item.kind}-${slugs.get(item)}.jpg`))) itemImages.add(path);
    }
    // Every page once per language: a translated page is as new as its English page or its catalog.
    const all = languages(root);
    const codes = all.map(language => language.code);
    const buildDate = new Date().toISOString().slice(0, 10);
    const sitemap: PageMeta[] = [];
    const pages = new Map<string, PageMeta>();
    for (const code of codes) {
      const translated = code === SOURCE_LANGUAGE ? undefined : files.get(`locales/${code}.json`);
      const dated = new Map([...lastmod].map(([path, date]) => [path, translated && translated > date ? translated : date]));
      const list = sitePages(catalog, { lastmod: dated, itemImages, media: mediaByPath, buildDate, lang: code, languages: codes, areas: areaItems(code) });
      sitemap.push(...list);
      for (const page of [...list, notFoundPage(code)]) pages.set(page.path, page);
    }
    cache = { site, all, pages, sitemap, mediaFiles, items, areas: new Set(areaItems().map(area => areaPath(area.id))) };
    return cache;
  };

  /** "/tr/store/" → the language and the page's own path; English paths have no prefix. */
  const split = (path: string): { lang: string; base: string } => {
    const first = path.split('/')[1] ?? '';
    const language = first !== SOURCE_LANGUAGE && load().all.some(entry => entry.code === first);
    return language ? { lang: first, base: path.slice(first.length + 1) } : { lang: SOURCE_LANGUAGE, base: path };
  };
  /** The HTML file a page is written from, or null when the path is not a page. */
  const sourceOf = (base: string): string | null => (load().items.has(base) || load().areas.has(base) ? itemFrame : SOURCES[base] ? resolve(root, SOURCES[base]!) : base === NOT_FOUND ? resolve(root, '404.html') : null);
  /** Pages that have no file of their own: item pages, and every page of every other language. */
  const isVirtual = (path: string): boolean => { const { lang, base } = split(path); return sourceOf(base) !== null && (lang !== SOURCE_LANGUAGE || load().items.has(base) || load().areas.has(base)); };
  /** The build's name for such a page: a file that exists only in memory. */
  const virtualId = (path: string) => resolve(root, `.${path}${path.endsWith('/') ? 'index.html' : ''}`).replace(/\\/g, '/');
  const virtualPath = (id: string) => {
    const clean = id.replace(/\\/g, '/');
    const base = root.replace(/\\/g, '/');
    if (!clean.startsWith(`${base}/`) || !clean.endsWith('.html')) return null;
    const path = clean.slice(base.length).replace(/index\.html$/, '');
    return isVirtual(path) ? path : null;
  };
  const virtualPaths = (): string[] => {
    const { all, items, areas } = load();
    const bases = [...Object.keys(SOURCES), ...items.keys(), ...areas, NOT_FOUND];
    return [...items.keys(), ...areas, ...all.filter(language => language.code !== SOURCE_LANGUAGE).flatMap(language => bases.map(base => `/${language.code}${base}`))];
  };

  /**
   * A translated page lives one folder deeper than the English page it is written from. Links
   * between pages are relative and the languages mirror each other, so they already stay inside the
   * language; everything else a page points at (scripts, styles, pictures, downloads, the API) is
   * shared and gets its path from the site root.
   */
  const rebase = (html: string, base: string, toRoot: string): string => {
    const { items, areas } = load();
    const from = base === NOT_FOUND ? '/' : base;
    return html.replace(/(\s(?:href|src|poster|data-src|data-poster-small)=")([^"]*)(")/g, (whole, before: string, raw: string, after: string) => {
      if (!raw || /^(?:[a-z][a-z0-9+.-]*:|\/|#|%)/i.test(raw)) return whole;
      const cut = raw.search(/[?#]/);
      const target = cut < 0 ? raw : raw.slice(0, cut);
      const suffix = cut < 0 ? '' : raw.slice(cut);
      if (!target) return whole;
      const path = posix.normalize(posix.join(from, target));
      const page = path.endsWith('/') ? path : `${path}/`;
      if (SOURCES[page] || items.has(page) || areas.has(page)) return whole;
      return `${before}${toRoot}${path.slice(1)}${suffix}${after}`;
    });
  };

  return {
    name: 'waybetter-store-pages',
    enforce: 'pre',
    config() {
      const input: Record<string, string> = {};
      for (const path of virtualPaths()) input[`page${path.replace(/\/$/, '').replace(/[^A-Za-z0-9]+/g, '-')}`] = virtualId(path);
      return { build: { rollupOptions: { input } } };
    },
    resolveId(id) {
      return virtualPath(id) ? id.replace(/\\/g, '/') : null;
    },
    load(id) {
      const path = virtualPath(id);
      return path ? readFileSync(sourceOf(split(path).base)!, 'utf8') : null;
    },
    configureServer(server) {
      server.watcher.add([catalogPath, featuredPath, itemFrame, sourceRoot, localesDir]);
      server.watcher.on('all', (_event, file) => {
        const changed = resolve(file);
        if ([catalogPath, featuredPath].includes(changed) || changed.startsWith(sourceRoot) || changed.startsWith(localesDir)) { cache = null; resetCatalogs(); }
      });
      // Items' media is served from the Store's source, at the address the build copies it to.
      server.middlewares.use((req, res, next) => {
        const from = load().mediaFiles.get(decodeURIComponent((req.url ?? '').split('?')[0]!.slice(1)));
        if (!from) return next();
        res.statusCode = 200;
        res.setHeader('Content-Type', MEDIA_TYPES[from.split('.').pop()!.toLowerCase()] ?? 'application/octet-stream');
        res.end(readFileSync(from));
      });
      // Item pages and translated pages have no file on disk: serve their source for their paths.
      server.middlewares.use(async (req, res, next) => {
        const path = (req.url ?? '').split('?')[0]!.replace(/index\.html$/, '');
        if (!isVirtual(path)) return next();
        try {
          const html = await server.transformIndexHtml(`${path}${path.endsWith('/') ? 'index.html' : ''}`, readFileSync(sourceOf(split(path).base)!, 'utf8'));
          res.statusCode = 200;
          res.setHeader('Content-Type', 'text/html; charset=utf-8');
          res.end(html);
        } catch (error) { next(error); }
      });
    },
    transformIndexHtml: {
      order: 'pre',
      handler(source, ctx) {
        const { site, all, pages, items } = load();
        const path = ctx.path.replace(/index\.html$/, '');
        const { lang, base } = split(path);
        const translated = lang !== SOURCE_LANGUAGE;
        // The 404 page is served at any depth and starts its links at the language's home (<base href>).
        const rel = relOf(base === NOT_FOUND ? '/' : base);
        const toRoot = translated ? `../${rel === './' ? '' : rel}` : rel;
        const language = all.find(entry => entry.code === lang)!;
        const t = translator(lang, root);
        const page: Page = { site, lang, dir: language.dir, t, rel, root: toRoot };
        const meta = pages.get(path);
        const item = items.get(base);
        const count = (kind: string, app?: string) => site.catalog.items.filter(entry => (kind === 'all' || entry.kind === kind) && (!app || entry.apps.includes(app))).length;
        const latest = latestItems(site.catalog.items, entry => site.dates.get(local(entry.url)));
        const apps = [...new Set(site.catalog.items.flatMap(entry => entry.apps))].sort().map(id => appInfo(id).name).join(', ');
        const generated = site.catalog.generatedAt.slice(0, 10);
        if (source.includes('<!-- seo -->') && !meta) throw new Error(`no meta data for ${path}: add the page to sitePages() in seo.ts`);
        // The page's own words in its language (English is what the file says), then its links.
        let html = source;
        if (translated) {
          html = localizeHtml(html, t, { themes: count('theme', APP), plugins: count('plugin', APP), items: count('all') });
          html = rebase(html, base, toRoot)
            .replace(/<html lang="en">/, `<html lang="${lang}" dir="${language.dir}">`)
            .replace('<base href="/" />', `<base href="/${lang}/" />`);
        }
        return stripMarks(html)
          .replace('<!-- seo -->', () => [headHtml(meta!), langScript(page, all), `<script type="application/json" id="wb-i18n">${JSON.stringify(clientMessages(lang, root)).replace(/</g, '\\u003c')}</script>`].filter(Boolean).join('\n    '))
          .replace('<!-- lang:top -->', () => langMenu(page, all, base, 'top'))
          .replace('<!-- lang:foot -->', () => langMenu(page, all, base, 'foot'))
          .replace('<!-- store:item -->', () => {
            if (item) return itemHtml(page, item);
            const area = areaItems(lang).find(entry => areaPath(entry.id) === base);
            return area ? areaHtml(page, area) : '';
          })
          .replace('<!-- store:areas -->', () => areaShelf(page))
          .replace('<!-- store:themes -->', () => galleryHtml(page, 'theme'))
          .replace('<!-- store:plugins -->', () => galleryHtml(page, 'plugin'))
          .replace('<!-- store:bar -->', () => storeBar(page))
          .replace('<!-- store:featured -->', () => shelf(page, 'st-featured', t('site.gen.shelf.featured'), t('site.gen.shelf.featuredNote'), site.featured))
          .replace('<!-- store:latest -->', () => shelf(page, 'st-latest', t('site.gen.shelf.latest'), t('site.gen.shelf.latestNote'), latest))
          .replace('<!-- store:grid -->', () => site.catalog.items.map(entry => card(page, entry, 'h3')).join('\n'))
          .replace('<!-- store:art -->', () => (site.featured.length ? site.featured : site.catalog.items).slice(0, 3).map((entry, index) => {
            const cover = site.media.get(entry)?.cover;
            return cover
              ? `<img vite-ignore class="st-art-${index + 1}" src="${esc(mediaUrl(page, cover.src))}" alt="" width="${cover.width}" height="${cover.height}" />`
              : `<img class="st-art-${index + 1}" src="${esc(picture(entry.preview))}" alt="" width="640" height="400" />`;
          }).join(''))
          // Counts for wayBetter for X's galleries (…:theme, …:plugin) and the whole Store (…:all, …:apps).
          .replace(/<!-- store:count:(theme|plugin) -->/g, (_, kind: string) => String(count(kind, APP)))
          .replace(/<!-- store:total:(all|theme|plugin) -->/g, (_, kind: string) => String(count(kind)))
          .replace(/<!-- store:total:apps -->/g, () => String(new Set(site.catalog.items.flatMap(entry => entry.apps)).size))
          .replace(/<!-- store:apps -->/g, () => esc(apps))
          .replace(/<!-- store:generated -->/g, () => esc(generated))
          .replace(/<!-- store:since -->/g, () => esc(APPS[APP]?.oneClickSince ?? ''))
          .replace('<!-- repo:note -->', () => (REPO_PUBLIC ? '' : `<p class="repo-note">${messageHtml(t, 'site.gen.repoNote', {}, { a1: `<a href="${FRAMEWORK_REPO_URL}">`, a1End: '</a>' })}</p>`))
          // Repository links come from site.config.ts (one constant: FORGE_URL).
          .replace(/%REPO_URL%/g, REPO_URL)
          .replace(/%FRAMEWORK_REPO_URL%/g, FRAMEWORK_REPO_URL)
          .replace(/%FORGE_HOST%/g, FORGE_HOST)
          .replace(/%REPO_FILE:([\w./-]+)%/g, (_, file: string) => repoFile(file))
          .replace(/%REPO_(PULLS|FORK|ISSUE|SIGNUP|SCHEMA|STORE_DOC)%/g, (_, key: string) => ({ PULLS: repoLinks.pulls, FORK: repoLinks.fork, ISSUE: repoLinks.newIssue, SIGNUP: repoLinks.signUp, SCHEMA: repoLinks.catalogSchema, STORE_DOC: repoLinks.frameworkStoreDoc })[key]!);
      },
    },
    generateBundle() {
      const { sitemap, mediaFiles } = load();
      // Items' media, copied to its stable address: /store-media/<app>/<kind>s/<id>/<file>.
      for (const [to, from] of mediaFiles) this.emitFile({ type: 'asset', fileName: to, source: readFileSync(from) });
      this.emitFile({ type: 'asset', fileName: 'sitemap.xml', source: sitemapXml(sitemap) });
      this.emitFile({ type: 'asset', fileName: 'robots.txt', source: robotsTxt() });
    },
  };
}