Column title_{lang} · nullable|string|max:255}> { setPair(lang, "title", e.target.value); clearErr(`title_${lang}`); clearErr("translations"); }} onBlur={lang === "en" ? maybeGenerateSlug : undefined} /> Column content_{lang} · nullable|string. The player-facing API renders it as HTML.}>

{ setPair(lang, "content", e.target.value); clearErr("translations"); }} />
          </HfqField>
        </div>

<div className="hfq-hint hfq-hint--block">
          <b>Rule:</b> at least one language must carry <b>both</b> a title and content
          (<code>StoreFaqRequest::withValidator</code> L39-55). Currently satisfied by{" "}
          {complete.length ? <b>{complete.map(hfqLangName).join(", ")}</b> : <b className="hfq-danger">no language</b>}.
          {baseLang && <> The legacy <code>title</code>/<code>content</code> columns will be written from <b>{hfqLangName(baseLang)}</b> — the first language with both.</>}
          {" "}Missing languages fall back at read time: requested → English → the legacy column → any language that has something.
        </div>
      </HfqPanel>

<div className="hfq-savebar">
        <button className="btn btn--secondary" onClick={onCancel} disabled={busy}>Cancel</button>
        {/* Disabled while the save is in flight. A fan-out is N sequential
            writes, so a second click during the first one would start a second
            fan-out over rows the first is still creating. */}
        <button className="btn btn--primary" onClick={save} disabled={busy}>
          <Icon name="check" size={13} /> {busy ? "Saving…" : (isNew ? `Create${skinIds.length > 1 ? ` on ${skinIds.length} skins` : ""}` : "Save changes")}
        </button>
      </div>
    </>
  );
};

/* ================================================================== *
 * FAQ Category create / edit — GET /faq/categories/create and
 * /faq/categories/{id}/edit. storeCategory/updateCategory pass the raw
 * validated array to the service; there is no DTO on this write path.
 * ================================================================== */
const HfqCatEditor = ({ row, contextSkinId, db, skins, busy, onCancel, onSaved }) => {
  const isNew = !row;
  const [skinIds, setSkinIds] = hfqUseState(isNew ? [Number(contextSkinId)] : [Number(row.skin_id)]);
  const [slug, setSlug] = hfqUseState(isNew ? "" : row.slug);
  const [isActive, setIsActive] = hfqUseState(isNew ? true : !!row.is_active);
  const [n, setN] = hfqUseState(() => {
    const base = hfqBlankN();
    if (!isNew) HFQ_LANG_CODES.forEach(c => { base[c] = row.n[c] || ""; });
    return base;
  });
  const [errs, setErrs] = hfqUseState({});
  const clearErr = (k) => setErrs(x => { const nx = { ...x }; delete nx[k]; return nx; });

const filled = HFQ_LANG_CODES.filter(c => String(n[c] || "").trim());

/* categories/create.blade.php:143-155 slugs client-side from the EN name on blur — lowercase,
     strip non-word, spaces → dashes — and, unlike the FAQ screen, never asks the server whether the
     result is free. Known-bug policy: the same uniqueness pass runs here (and the fan-out preview
     shows the per-skin result) instead of letting the operator discover the clash on submit. */
  const maybeSlug = () => {
    if (slug.trim()) return;
    const name = String(n.en || "").trim();
    if (!name) return;
    const next = hfqUniqueSlug(db, "cat", name, isNew ? (skinIds[0] != null ? skinIds[0] : contextSkinId) : row.skin_id, isNew ? null : row.id);
    if (next) { setSlug(next); clearErr("slug"); }
  };

setErrs(e);
    if (Object.keys(e).length) { hrsToast("The form has errors", Object.values(e)[0]); return; }

onSaved({ slug: slug.trim(), is_active: isActive ? 1 : 0, n: { ...n } }, { skinIds: isNew ? skinIds.slice() : [row.skin_id] });
  };

return (
    <>
      <div className="hfq-sub">
        <button className="btn btn--ghost btn--sm" onClick={onCancel}>
          <Icon name="chevron_left" size={13} /> Back to categories{/* label inferred — backend.faq_back_to_categories */}
        </button>
        {!isNew && (
          <span className="hfq-crumb">
            <b>#{row.id}</b>
            <code>{row.slug}</code>
            <span className="chip chip--neutral">{hfqSkinName(skins, row.skin_id)}</span>
            <HfqActive on={row.is_active} />
            <span className="hfq-muted">{hfqFaqCount(row)} FAQ(s)</span>
          </span>
        )}
      </div>

<Explainer compact title={isNew ? "Creating a category, in plain English" : "Editing a category, in plain English"}
        bullets={isNew ? [
          <>A category is just a per-skin label with twelve name columns. One submit writes <b>one category row per selected skin</b>, each with its own id — categories are never shared between skins.</>,
          <>The slug is auto-filled from the English name and must be unique <b>within a skin</b>. On the real platform that uniqueness is only checked when you press Save (this screen checks as you type — see the code comment).</>,
          <>A category cannot be deleted while any FAQ points at it, so creating one is cheap and removing one may not be.</>,
        ] : [
          <>Update touches this row only, and the skin is fixed — the edit form has no skin field.</>,
          <>Disabling a category does <b>not</b> hide the FAQs inside it; it only marks the category. The FAQ list's Category filter keeps offering disabled categories on purpose.</>,
          <>There is no audit trail on this screen: no events, no listeners, no <code>*_logs</code> table.</>,
        ]} />

<HfqPanel title="Data" sub={isNew ? "Where the category is created and how it is addressed" : "Identity of this category"}>
        {isNew ? (
          <HfqField label="Skins" required error={errs.skin_ids} inferred
            hint={<><code>skin_ids[]</code> · <code>required|array|min:1</code>, each <code>exists:skins,id</code>.</>}>
            <HfqSkinPicker skins={skins} value={skinIds} onChange={(v) => { setSkinIds(v); clearErr("skin_ids"); }} invalid={!!errs.skin_ids} />
          </HfqField>
        ) : (
          <HfqField label="Skin" hint={<>Fixed after creation — <code>updateCategory</code> accepts no skin change.</>}>
            <div className="hfq-static"><span className="chip chip--neutral">{hfqSkinName(skins, row.skin_id)}</span> <span className="hfq-muted">#{row.skin_id}</span></div>
          </HfqField>
        )}

<HfqField label="Slug" required htmlFor="hfq-cslug" error={errs.slug}
          hint={<><code>required|string|max:255</code> on create (<code>nullable</code> in the update rules, still <code>required</code> in the HTML), unique per skin. Auto-filled from the English name when left empty.</>}>
          <input id="hfq-cslug" className={`input hfq-w-full${errs.slug ? " hfq-invalid" : ""}`} maxLength={255}
            value={slug} placeholder="payments"
            onChange={e => { setSlug(e.target.value); clearErr("slug"); }} />
        </HfqField>

<HfqField label="Status" hint={<><code>is_active</code> · <code>boolean</code>. New categories start checked.</>}>
          <Toggle value={isActive} onChange={setIsActive} onLabel="Active" offLabel="Disabled" size="sm" />
        </HfqField>

{isNew && <HfqFanout kind="cat" skinIds={skinIds} slug={slug.trim()} categoryId="" contextSkinId={contextSkinId} db={db} skins={skins} />}
      </HfqPanel>

<HfqPanel title="Names" sub="Twelve flat name columns — all optional, at least one required"
        actions={<span className="hfq-langsum"><b>{filled.length}</b> of {HFQ_LANGS.length} filled</span>}>
        {errs.name_en && <div className="hfq-err"><Icon name="alert" size={13} /> {errs.name_en}</div>}
        <div className="hfq-namegrid">
          {HFQ_LANGS.map(l => (
            <div key={l.code} className={`hfq-namecell${String(n[l.code] || "").trim() ? " hfq-namecell--on" : ""}`}>
              <label className="hfq-label hfq-label--sm" htmlFor={`hfq-n-${l.code}`}>
                <span className="hfq-langcode">{l.code.toUpperCase()}</span> {l.name}
              </label>
              <input id={`hfq-n-${l.code}`} className={`input input--sm hfq-w-full${errs[`name_${l.code}`] ? " hfq-invalid" : ""}`}
                maxLength={255} value={n[l.code]}
                onChange={e => { setN(x => ({ ...x, [l.code]: e.target.value })); clearErr(`name_${l.code}`); clearErr("name_en"); }}
                onBlur={l.code === "en" ? maybeSlug : undefined} />
              {errs[`name_${l.code}`] && <div className="hfq-fielderr">{errs[`name_${l.code}`]}</div>}
            </div>
          ))}
        </div>
        <div className="hfq-hint hfq-hint--block">
          Column <code>name_<lang></code> · <code>nullable|string|max:255</code> each. The list and the FAQ pickers read
          the English name with the same fallback chain the FAQs use, and sort on <code>name_en</code> — a category with no
          English name sorts to the top and shows its fallback.
        </div>
      </HfqPanel>

/* ================================================================== *
 * SCREEN 1 — CMS ▾ → FAQ · admin.faq.index · GET /faq
 * ================================================================== */
const HostCmsFaq = () => {
  window.useLocale && window.useLocale();

/* Defaults: the skin filter defaults to the FIRST available skin (FaqController.php:44-46) — it is
     never "all skins"; everything else defaults empty/all. WHICH skin is first is now the
     database's answer, so it cannot be known before the brands load. Empty until then, and the
     effect below picks it up once. */
  const [skinId, setSkinId] = hfqUseState("");
  const { db, skins, version: dbv, loading, error, retry, feeds, truncated, totals } = hfqUseDb(skinId);
  const save = useHrsSave(feeds);

hfqUseEffect(() => {
    if (!skinId && skins.length) setSkinId(String(skins[0].id));
  }, [skins]);

const [draft, setDraft] = hfqUseState({ search: "", category_id: "", is_active: "" });
  const [applied, setApplied] = hfqUseState({ search: "", category_id: "", is_active: "" });
  const [page, setPage] = hfqUseState(0);
  const [view, setView] = hfqUseState({ name: "list" });    // list | create | edit
  const [del, setDel] = hfqUseState(null);

const cats = hfqUseMemo(() => hfqCatsForSkin(db, skinId), [db, dbv, skinId]);

const rows = hfqUseMemo(() => {
    const list = db.faqs.filter(f => String(f.skin_id) === String(skinId));
    return list
      .filter(f => hfqMatchesSearch(f, applied.search))
      .filter(f => !applied.category_id || String(f.category_id) === String(applied.category_id))
      /* FaqController.php:54-59 keeps is_active='0' alive through a custom array_filter callback, so
         "Disabled" really does filter instead of being dropped as an empty value. */
      .filter(f => applied.is_active === "" || String(f.is_active) === String(applied.is_active))
      .sort((a, b) => (a.created_at < b.created_at ? 1 : a.created_at > b.created_at ? -1 : b.id - a.id));  // fixed created_at DESC
  }, [db, dbv, skinId, applied]);

const pageCount = Math.max(1, Math.ceil(rows.length / HFQ_PER_PAGE));
  const safePage = Math.min(page, pageCount - 1);
  const paged = rows.slice(safePage * HFQ_PER_PAGE, safePage * HFQ_PER_PAGE + HFQ_PER_PAGE);

/* Skin / Category / Status auto-submit on change (the real selects carry an onchange submit);
     only the free-text Search waits for the Apply button — hence the draft/applied split. */
  const commit = (patch) => { const next = { ...draft, ...patch }; setDraft(next); setApplied(next); setPage(0); };
  const onChange = (k, v) => {
    if (k === "skin_id") {
      /* The real page just re-submits with whatever category_id is still in the query string, which
         then matches nothing on the new skin. Cleared here because the option no longer exists in
         the list the new skin renders. */
      setSkinId(v);
      commit({ category_id: "" });
      return;
    }
    if (k === "search") { setDraft(d => ({ ...d, search: v })); return; }
    commit({ [k]: v });
  };

const FIELDS = [
    { key: "search", label: "Search", type: "text", icon: "search", grow: true, placeholder: "Title or content, any language…",
      tip: <>LIKE <code>%term%</code> across <b>all twelve</b> <code>title_*</code> columns <b>and</b> all twelve <code>content_*</code> columns (<code>FaqRepository</code> L73-82) — a Hungarian answer matches even when you are reading the English list.</> },
    /* defaultValue = the first available skin, exactly as FaqController.php:44-46 picks it — so the
       shell's pill/"Clear all" affordances reset to the real default instead of to an empty skin. */
    { key: "skin_id", label: "Skin", type: "select", icon: "flag", width: 190,
      defaultValue: skins.length ? String(skins[0].id) : "",
      options: skins.map(s => ({ value: String(s.id), label: s.name })),
      tip: <>Options come from <code>Auth::user()->getSkins()</code> — every skin for super admin, own skin + <code>multiple_skins</code> otherwise. There is no "all skins" option: the list always shows exactly one skin, defaulting to the first available one.</> },
    { key: "category_id", label: "Category", type: "select", icon: "tag", width: 200, placeholder: "All categories",
      options: cats.map(c => ({ value: String(c.id), label: `${hfqCatName(c, "en")}${c.is_active ? "" : " — disabled"}` })),
      tip: <>Every category of the selected skin, <b>active and inactive</b>, ordered by <code>name_en</code>.</> },
    { key: "is_active", label: "Status", type: "select", icon: "shield", width: 160, placeholder: "All",
      options: [{ value: "1", label: "Active" }, { value: "0", label: "Disabled" }] },
  ];

/* DIVERGENCE (known-bug policy): destroy() redirects without skin_id, so the real platform drops
     the operator back onto the first skin's list after every delete. The selected skin is kept here. */
  // 
  const doDeleteFaq = (row) => {
    /* SOFT delete: `faqs` carries deleted_at, so sb.remove stamps it and the row
       and all twelve of its translations survive. That is deliberate — a FAQ
       deleted by mistake is recoverable, and the translations are the expensive
       part to recreate. The child rows are NOT stamped (they have no deleted_at)
       and do not need to be: the read resource filters on the parent. */
    save.run(() => window.sb.remove("faqs", row.id), {
      done: `FAQ "${hfqFaqTitle(row, "en") || row.slug}" deleted`,
      fail: `FAQ #${row.id} was not deleted`,
    }).then(() => setDel(null));
  };

/* CREATE IS A FAN-OUT AND A FAN-OUT IS NOT ATOMIC HERE.
     isystem loops the submitted skin_ids inside ONE database transaction, so
     either every skin gets the FAQ or none does. app_write() takes one resource
     per call, so this is N sequential inserts and then N translation batches —
     an interruption partway leaves some skins with the FAQ and some without.

Not hidden: the toast reports exactly which skins were written and which
     were not, and the list refreshes from the database so what is on screen is
     what is stored.
     UNCLEAR-FAQ-1: whether a multi-skin content create deserves its own RPC to
     regain the transaction. It is not a money path, and a partial fan-out is
     visible and re-runnable, so it is recorded rather than guessed at. */
  const saveFaq = (payload, meta) => {
    save.run(async () => {
      const targets = view.name === "create" ? meta.skinIds : [view.row.skin_id];
      const ok = [], bad = [], partial = [];

for (const sid of targets) {
        const body = {
          skin_id: Number(sid),
          slug: payload.slug,
          category_id: payload.category_id,
          active: !!payload.is_active,
        };
        /* Clearing a column needs no object storage, so removal is wired while
           upload is not — see HFQ_NO_UPLOAD. Sent only when the operator asked,
           so a save that touches nothing image-related leaves both alone. */
        if (meta.rmThumb) body.thumbnail_url = null;
        if (meta.rmImage) body.image_url = null;
        let parentId, res;
        if (view.name === "create") {
          res = await window.sb.create("faqs", body);
          parentId = res && res.ok && res.data ? res.data.id : null;
        } else {
          /* skin_id is NOT sent on update — the edit form carries no skin field
             and faqs.skin_id cannot change, exactly as isystem has it. */
          delete body.skin_id;
          res = await window.sb.update("faqs", view.row.id, body);
          parentId = view.row.id;
        }
        if (!res || !res.ok || !parentId) {
          bad.push(`${hfqSkinName(skins, sid)}: ${(res && res.error && res.error.message) || "refused"}`);
          continue;
        }

if (bad.length || partial.length) {
        return { ok: false, error: { kind: "server", message:
          [ok.length ? `Saved: ${ok.join(", ")}.` : "Nothing saved.",
           bad.length ? `Refused: ${bad.join(" · ")}.` : "",
           partial.length ? `PARTIAL: ${partial.join(" · ")}.` : ""].filter(Boolean).join(" ") } };
      }
      return { ok: true, data: ok, meta: {} };
    }, {
      done: view.name === "create"
        ? `FAQ created on ${meta.skinIds.length} skin${meta.skinIds.length === 1 ? "" : "s"}`
        : `FAQ #${view.row.id} saved`,
      fail: view.name === "create" ? "The FAQ was not created everywhere" : "The FAQ was not fully saved",
    }).then(res => { if (res && res.ok) { setView({ name: "list" }); setPage(0); } });
  };

/* ---- editors ---- */
  if (view.name === "create" || view.name === "edit") {
    return (
      <HrsShell
        title={view.name === "create" ? "New FAQ" : `Edit FAQ #${view.row.id}`}
        subtitle={view.name === "create"
          ? "GET /faq/create → POST /faq — one row per selected skin"
          : `GET /faq/${view.row.id}/edit → PUT /faq/${view.row.id}`}
        gate={<>Same as the list: <b>no permission check of any kind</b>. <code>StoreFaqRequest</code> and <code>UpdateFaqRequest</code> both return <code>authorize(): true</code>, and the controller adds nothing.</>}>
        <HfqFaqEditor row={view.name === "edit" ? view.row : null} contextSkinId={skinId} db={db}
          skins={skins} busy={save.busy}
          onCancel={() => setView({ name: "list" })} onSaved={saveFaq} />
      </HrsShell>
    );
  }

/* ---- list ---- */
  const columns = [
    { key: "id", label: "ID", width: 84, render: r => <span className="hfq-id">{r.id}</span> },
    /* backend.faq_thumbnail — label inferred */
    { key: "thumbnail_path", label: "Thumbnail", width: 96, render: r => <HfqThumb path={r.thumbnail_path} /> },
    { key: "title", label: "Title", render: r => (
      <button className="hfq-rowlink" title="Edit" onClick={(e) => { e.stopPropagation(); setView({ name: "edit", row: r }); }}>
        <span className="hfq-rowlink__t">{hfqFaqTitle(r, "en") || <i>untitled</i>}</span>
        <span className="hfq-rowlink__s">{r.slug}</span>
      </button>
    ) },
    { key: "category_id", label: "Category", width: 180, render: r => {
      const c = db.cats.find(x => String(x.id) === String(r.category_id));
      return c ? <span className="hfq-cat">{hfqCatName(c, "en")}</span> : <span className="hfq-dash">—</span>;
    } },
    { key: "is_active", label: "Status", width: 120, render: r => <HfqActive on={r.is_active} /> },
    /* backend.created — label inferred */
    { key: "created_at", label: "Created", width: 170, render: r => <span className="hfq-when">{hfqDate(r.created_at)}</span> },
    { key: "_acts", label: "Actions", align: "center", width: 110, render: r => (
      <div className="hfq-acts">
        <button className="hfq-act hfq-act--edit" title="Edit" onClick={(e) => { e.stopPropagation(); setView({ name: "edit", row: r }); }}><Icon name="edit" size={13} /></button>
        <button className="hfq-act hfq-act--danger" title="Delete" onClick={(e) => { e.stopPropagation(); setDel(r); }}><Icon name="trash" size={13} /></button>
      </div>
    ) },
  ];

const filterActive = applied.search || applied.category_id || applied.is_active !== "";

return (
    <HrsShell
      title="FAQ"
      subtitle="Player-facing help entries, per skin, in up to twelve languages"
      gate={<>
        <b>There is no permission gate on this screen.</b> The only thing in front of{" "}
        <code>GET /faq</code> and its create/store/edit/update/destroy siblings is the route middleware —{" "}
        <code>admin</code> + <code>adminsettings</code> and <code>auth</code> + <code>admin</code> + <code>2fa</code> + <code>g2fa</code>.
        {" "}<code>Admin\FaqController</code> performs no check at all (its CMS siblings <code>BlogController</code> and{" "}
        <code>SlideshowsController</code> both <code>abort(404)</code> here), and all four FormRequests return <code>authorize(): true</code>.{" "}
      </>}
      gateNote={<>
        What <i>is</i> gated is the sidebar <b>link</b>: <code>$can_manage_cms</code> ={" "}
        <code>isadmin()</code> · or skin admin + <code>enable_cms</code> · or customer care +{" "}
        <code>support_cms_banners</code>. That hides a menu item, it does not protect a URL — any authenticated,
        2FA'd back-office user who types <code>/faq</code> gets in. The one real limit is data scoping:
        every query runs against <code>Auth::user()->getSkins()</code>.
      </>}
      explainer={{ title: "What this screen is, in plain English", bullets: [
        <>One row per FAQ <b>per skin</b>. Translations are twelve flat column pairs on the row (<code>title_en</code>…<code>content_pt_br</code>), all optional; readers fall back requested language → English → the legacy column → any language that has something.</>,
        <><b>Creating fans out.</b> One submit writes one row per selected skin inside a single transaction — the create form shows exactly which rows it will write before you press Save. Editing never fans out: a row's skin is fixed for life.</>,
        <>The list is always scoped to <b>one skin</b> (there is no "all skins" view) and is fixed-sorted by <b>newest first</b>; no column is sortable and there is no export.</>,
        <>Deleting unlinks the stored thumbnail and image first, then the row. There is no audit log, no events and no cache on this feature — the change is immediately live for players, because the same <code>FaqService</code> serves the frontend API.</>,
      ] }}
      actions={
        <button className="hrs-btn hrs-btn--filters" onClick={() => setView({ name: "create" })}>
          <Icon name="plus" size={14} /> New FAQ{/* label inferred */}
        </button>
      }>

<HrsFilters
        fields={FIELDS}
        values={{ ...draft, skin_id: String(skinId) }}
        onChange={onChange}
        onSearch={(v) => { setApplied({ search: v.search || "", category_id: v.category_id || "", is_active: v.is_active == null ? "" : v.is_active }); setPage(0); }}
        /* Reset returns every filter to its documented default — including the skin, whose default
           is the first available one rather than "none". */
        onReset={() => { const empty = { search: "", category_id: "", is_active: "" }; setDraft(empty); setApplied(empty); setSkinId(skins.length ? String(skins[0].id) : ""); setPage(0); }}
        resultLabel={hrsInt(rows.length)} />

<HfqStatusChips value={applied.is_active} onChange={(v) => commit({ is_active: v })} />

{/* THE SEARCH IS A CLIENT FILTER AND ISYSTEM'S IS NOT.
          isystem LIKEs %term% across twenty-four flat columns in the query, so
          it searches the whole table. Here the text lives in faq_translations,
          one row per language, and PostgREST cannot filter a parent by an
          embedded child's contents — so the search runs over what was fetched.
          For every brand under HFQ_FETCH_MAX those are the same answer. When
          they are not, this says so rather than quietly returning a subset. */}
      {truncated.length > 0 && (
        <div className="hfq-err">
          <Icon name="alert" size={13} /> This brand has more {truncated.join(" and ")} than the {hrsInt(HFQ_FETCH_MAX)} this
          screen fetches{totals.faqs != null ? ` (${hrsInt(totals.faqs)} FAQs in total)` : ""}. The list and the search below
          cover the fetched rows only.
        </div>
      )}

{/* HrsAsync takes a state object and a render function, which does not fit
          a table that already owns its own empty state and its own card layout.
          The two states it would supply are supplied directly instead — same
          components, same look, no second empty. */}
      {loading ? <HrsSkeleton rows={6} cols={7} /> : error ? <HrsError error={error} onRetry={retry} /> : (
      <HrsTable
        columns={columns} rows={paged} rowKey="id"
        onRowClick={(r) => setView({ name: "edit", row: r })}
        empty={filterActive
          ? "No FAQ matches these filters on this skin."
          : `No FAQs on ${hfqSkinName(skins, skinId)} yet — create one with New FAQ (it can be fanned out to several skins at once).`}
        renderCard={r => (
          <>
            <div className="hrs-card__top">
              <b>{hfqFaqTitle(r, "en") || "untitled"}</b>
              <HfqActive on={r.is_active} />
            </div>
            <div className="hfq-card__sub"><code>{r.slug}</code> · #{r.id}</div>
            <div className="hrs-card__grid">
              <span>Category</span><b>{(() => { const c = db.cats.find(x => String(x.id) === String(r.category_id)); return c ? hfqCatName(c, "en") : "—"; })()}</b>
              <span>Created</span><b>{hfqDate(r.created_at)}</b>
              <span>Thumbnail</span><b>{r.thumbnail_path ? r.thumbnail_path.split("/").pop() : "—"}</b>
            </div>
            <div className="hfq-card__acts">
              <button className="btn btn--secondary btn--sm" onClick={(e) => { e.stopPropagation(); setView({ name: "edit", row: r }); }}><Icon name="edit" size={12} /> Edit</button>
              <button className="btn btn--ghost btn--sm hfq-card__del" onClick={(e) => { e.stopPropagation(); setDel(r); }}><Icon name="trash" size={12} /> Delete</button>
            </div>
          </>
        )} />

)}

{/* 15 per page, hardcoded in the controller — the real footer is a Prev/Next pair with
          "Showing x–y of N · Page a / b" and no page-size control, so no onPageSize here. */}
      <HrsPager page={safePage} pageSize={HFQ_PER_PAGE} total={rows.length} onPage={setPage} />

{del && (
        <HfqDeleteDialog
          title="Delete FAQ"
          question={<>Are you sure?</>}
          detail={<>
            <b>{hfqFaqTitle(del, "en") || del.slug}</b> (<code>{del.slug}</code>, id {del.id}) on <b>{hfqSkinName(skins, del.skin_id)}</b>.{" "}
            <code>DELETE /faq/{del.id}</code> unlinks the stored thumbnail and image from the public disk first, then removes the row
            (<code>FaqService</code> L199-212). No permission is checked, nothing is logged, and the entry disappears from the player-facing
            API immediately. Only this row is affected — copies of the same FAQ on other skins are separate rows.
          </>}
          onClose={() => setDel(null)}
          onConfirm={() => doDeleteFaq(del)} />
      )}
    </HrsShell>
  );
};

/* ================================================================== *
 * SCREEN 2 — CMS ▾ → FAQ Categories · admin.faq.categories.index
 * GET /faq/categories
 * ================================================================== */
const HostCmsFaqCategories = () => {
  window.useLocale && window.useLocale();

const [skinId, setSkinId] = hfqUseState("");
  const { db, skins, version: dbv, loading, error, retry, feeds, truncated } = hfqUseDb(skinId);
  const save = useHrsSave(feeds);

hfqUseEffect(() => {
    if (!skinId && skins.length) setSkinId(String(skins[0].id));
  }, [skins]);

const [view, setView] = hfqUseState({ name: "list" });
  const [del, setDel] = hfqUseState(null);

const rows = hfqUseMemo(() => hfqCatsForSkin(db, skinId), [db, dbv, skinId]);   // ORDER BY name_en ASC, unpaginated

const FIELDS = [
    { key: "skin_id", label: "Skin", type: "select", icon: "flag", width: 220,
      defaultValue: skins.length ? String(skins[0].id) : "",
      options: skins.map(s => ({ value: String(s.id), label: s.name })),
      tip: <>The only filter on this screen — no search, no status, no category filter. Options come from <code>Auth::user()->getSkins()</code>, defaulting to the first available skin.</> },
  ];

/* Same fan-out caveat as the FAQ screen: N inserts, not one transaction, and
     the toast names every skin that did and did not get the row. */
  const saveCat = (payload, meta) => {
    save.run(async () => {
      const targets = view.name === "create" ? meta.skinIds : [view.row.skin_id];
      const ok = [], bad = [], partial = [];

for (const sid of targets) {
        const body = { skin_id: Number(sid), slug: payload.slug, active: !!payload.is_active };
        let parentId, res;
        if (view.name === "create") {
          res = await window.sb.create("faqCategories", body);
          parentId = res && res.ok && res.data ? res.data.id : null;
        } else {
          delete body.skin_id;
          res = await window.sb.update("faqCategories", view.row.id, body);
          parentId = view.row.id;
        }
        if (!res || !res.ok || !parentId) {
          bad.push(`${hfqSkinName(skins, sid)}: ${(res && res.error && res.error.message) || "refused"}`);
          continue;
        }

if (bad.length || partial.length) {
        return { ok: false, error: { kind: "server", message:
          [ok.length ? `Saved: ${ok.join(", ")}.` : "Nothing saved.",
           bad.length ? `Refused: ${bad.join(" · ")}.` : "",
           partial.length ? `PARTIAL: ${partial.join(" · ")}.` : ""].filter(Boolean).join(" ") } };
      }
      return { ok: true, data: ok, meta: {} };
    }, {
      done: view.name === "create"
        ? `Category created on ${meta.skinIds.length} skin${meta.skinIds.length === 1 ? "" : "s"}`
        : `Category #${view.row.id} saved`,
      fail: view.name === "create" ? "The category was not created everywhere" : "The category was not fully saved",
    }).then(res => { if (res && res.ok) setView({ name: "list" }); });
  };

/* SOFT delete — faq_categories carries deleted_at, "because a category with
     posts under it must not vanish" (042). The FAQs filed under it keep their
     category_id pointing at a soft-deleted row, which is why the confirm below
     shows the count first. */
  const doDeleteCat = (row) => {
    save.run(() => window.sb.remove("faqCategories", row.id), {
      done: `Category "${hfqCatName(row, "en") || row.slug}" deleted`,
      fail: `Category #${row.id} was not deleted`,
    }).then(() => setDel(null));
  };

if (view.name === "create" || view.name === "edit") {
    return (
      <HrsShell
        title={view.name === "create" ? "New FAQ category" : `Edit category #${view.row.id}`}
        subtitle={view.name === "create"
          ? "GET /faq/categories/create → POST /faq/categories — one row per selected skin"
          : `GET /faq/categories/${view.row.id}/edit → PUT /faq/categories/${view.row.id}`}
        gate={<>Same as the list: <b>no permission check of any kind</b> — <code>StoreFaqCategoryRequest</code> and <code>UpdateFaqCategoryRequest</code> both return <code>authorize(): true</code>.</>}>
        <HfqCatEditor row={view.name === "edit" ? view.row : null} contextSkinId={skinId} db={db}
          skins={skins} busy={save.busy}
          onCancel={() => setView({ name: "list" })} onSaved={saveCat} />
      </HrsShell>
    );
  }

return (
    <HrsShell
      title="FAQ Categories"
      subtitle="Per-skin grouping for FAQ entries — twelve name columns, no content of its own"
      gate={<>
        <b>There is no permission gate on this screen either.</b> <code>GET /faq/categories</code> and its
        create/store/edit/update/destroy siblings sit behind the route middleware only —{" "}
        <code>admin</code> + <code>adminsettings</code> and <code>auth</code> + <code>admin</code> + <code>2fa</code> + <code>g2fa</code>.
        {" "}<code>Admin\FaqController::categoriesIndex</code> is the same class that serves the FAQ list and checks nothing;
        both category FormRequests return <code>authorize(): true</code>.{" "}
      </>}
      gateNote={<>
        The sidebar link is gated by <code>$can_manage_cms</code> (<code>isadmin()</code> · skin admin +{" "}
        <code>enable_cms</code> · customer care + <code>support_cms_banners</code>) and nothing else; the URL is open to any
        authenticated back-office user. Data is scoped to <code>Auth::user()->getSkins()</code>. Cosmetic but real: in the
        non-admin sidebar variant this very entry is <b>malformed HTML</b> — its <code></a></li></code> are missing
        (sidebar.blade.php L671-674) and only browser error-recovery keeps the menu intact.
      </>}
      explainer={{ title: "What this screen is, in plain English", bullets: [
        <>A category is a label that belongs to <b>one skin</b>. The same name on two skins is two independent rows with two ids — which is why creating one fans out across the skins you tick.</>,
        <>Categories carry <b>no content</b>: twelve optional <code>name_<lang></code> columns, a slug that must be unique within its skin, and an active flag. At least one language name is required.</>,
        <>The list is <b>unpaginated</b> and fixed-sorted by <code>name_en</code>. Skin is its only filter — no search, no status filter.</>,
        <><b>Delete is blocked while the category holds FAQs.</b> The button is disabled in the list and the service refuses it anyway ("Cannot delete category with existing FAQs"). Empty the category — or move its FAQs — first.</>,
      ] }}
      actions={
        <button className="hrs-btn hrs-btn--filters" onClick={() => setView({ name: "create" })}>
          <Icon name="plus" size={14} /> New category{/* label inferred */}
        </button>
      }>

<HrsFilters
        fields={FIELDS}
        values={{ skin_id: String(skinId) }}
        onChange={(k, v) => { if (k === "skin_id") setSkinId(v); }}
        resultLabel={hrsInt(rows.length)} />

{truncated.indexOf("categories") !== -1 && (
        <div className="hfq-err">
          <Icon name="alert" size={13} /> This brand has more categories than the {hrsInt(HFQ_FETCH_MAX)} this screen
          fetches. The list below covers the fetched rows only.
        </div>
      )}

{loading ? <HrsSkeleton rows={6} cols={5} /> : error ? <HrsError error={error} onRetry={retry} /> : (
      <HrsTable
        columns={columns} rows={rows} rowKey="id"
        onRowClick={(r) => setView({ name: "edit", row: r })}
        empty={`No categories on ${hfqSkinName(skins, skinId)} yet — FAQs there can still be saved without one (the Category column shows "—").`}
        renderCard={r => {
          const n = hfqFaqCount(r);
          return (
            <>
              <div className="hrs-card__top">
                <b>{hfqCatName(r, "en") || "unnamed"}</b>
                <HfqActive on={r.is_active} />
              </div>
              <div className="hfq-card__sub"><code>{r.slug}</code> · #{r.id}</div>
              <div className="hrs-card__grid">
                <span>FAQs</span><b>{hrsInt(n)}</b>
                <span>Languages</span><b>{HFQ_LANG_CODES.filter(c => String(r.n[c] || "").trim()).length} of {HFQ_LANGS.length}</b>
              </div>
              <div className="hfq-card__acts">
                <button className="btn btn--secondary btn--sm" onClick={(e) => { e.stopPropagation(); setView({ name: "edit", row: r }); }}><Icon name="edit" size={12} /> Edit</button>
                <button className="btn btn--ghost btn--sm hfq-card__del" disabled={!!n}
                  title={n ? "Category has FAQs" : "Delete"}
                  onClick={(e) => { e.stopPropagation(); if (!n) setDel(r); }}><Icon name="trash" size={12} /> Delete</button>
              </div>
            </>
          );
        }} />
      )}

{del && (
        <HfqDeleteDialog
          title="Delete category"
          question={<>Are you sure?</>}
          blocked={hfqFaqCount(del) ? "Cannot delete category with existing FAQs" : null}
          detail={<>
            <b>{hfqCatName(del, "en") || del.slug}</b> (<code>{del.slug}</code>, id {del.id}) on <b>{hfqSkinName(skins, del.skin_id)}</b> —{" "}
            <b>{hrsInt(hfqFaqCount(del))}</b> FAQ(s) point at it. <code>DELETE /faq/categories/{del.id}</code> removes the
            category row only; it never touches FAQs, which is exactly why the platform refuses the delete while any still
            reference it (<code>FaqService::deleteCategory</code> L322-325). Copies of this category on other skins are separate rows
            and are unaffected.
          </>}
          onClose={() => setDel(null)}
          onConfirm={() => doDeleteCat(del)} />
      )}
    </HrsShell>
  );
};

window.HostCmsFaq = HostCmsFaq;
window.HostCmsFaqCategories = HostCmsFaqCategories;