/**
 * Inspector - the Data tab (M6).
 *
 * Binding nodes to WordPress's dynamic data is what lets one design serve a blog, a portfolio
 * or a product library rather than a single fixed page.
 *
 * One principle: list the candidate fields for the context, and never make the user assemble an
 * expression. Asking someone to type `post.thumbnail.url` pushes implementation detail onto
 * them, and one wrong letter produces blankness with no hint whatsoever.
 */
import { Fragment } from 'react';
import { Section, Field, Seg, Select, Num, Str, Empty } from './controls.jsx';
import { useSelectedNode, useStoreChange } from './useStore.js';
import { availableFields, bindableProps, groupFieldsFor } from './bindings.js';
import { __, sprintf } from './i18n.js';

export default function DataPanel({ store, cfg }) {
  const node = useSelectedNode(store);
  useStoreChange(store, ['props', 'structure']);

  if (!node) return <Empty>{__('Select an element on the canvas or in the layer tree.', 'aumframe')}</Empty>;

  return (
    <>
      <BindingSection store={store} node={node} cfg={cfg} />
      <ConditionSection store={store} node={node} cfg={cfg} />
      {node.type === 'Repeater' && <RepeaterSection store={store} node={node} />}
      <QueriesSection store={store} cfg={cfg} />
    </>
  );
}

/* Bindings */

function BindingSection({ store, node, cfg }) {
  const props = bindableProps(node.type);
  if (!props.length) {
    return (
      <Section title={__('Binding', 'aumframe')}>
        <p className="af-field-hint">
          {__('This kind of element has no property to bind data to. To repeat a whole block over data, use “Loop”.', 'aumframe')}
        </p>
      </Section>
    );
  }

  const { scope, fields } = availableFields(store, node.id, cfg);

  return (
    <Section title={__('Binding', 'aumframe')} right={scope ? <span className="af-sec-meta">{scope}</span> : null}>
      {!fields.length && (
        <p className="af-field-hint">
          {__('This template has no data context. Put the node inside a “Loop”, or change the template to a single/archive type.', 'aumframe')}
        </p>
      )}

      {!!fields.length && props.map((prop) => {
        const current = node.bindings?.[prop.key]?.expr || '';
        const usable = fields.filter((f) => prop.accepts.includes(f.type));
        if (!usable.length) return null;
  // The fallback value lives on the node's own props (`props.content` / `props.src` …)
        const propName = prop.key.split('.').pop();
        const fallback = node.props?.[propName] ?? '';
        return (
          <Fragment key={prop.key}>
            <Field
              label={prop.label}
              overridden={!!current}
              onClear={() => store.setBinding(node.id, prop.key, null)}
            >
              <Select
                value={current}
                placeholder={__('Not bound (uses the content you typed)', 'aumframe')}
                options={usable.map((f) => ({ value: f.path, label: sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), f.label, f.path) }))}
                onChange={(v) => store.setBinding(node.id, prop.key, v)}
              />
            </Field>

            {            /*
              The fallback value — **not a "bake-time preview" but the line the front end will
              genuinely show**. The hint here used to say "the value typed below is only a bake
              preview", which was wrong, and probably the reason authors left every fallback as an
              empty string.

              When it shows: whenever the binding **cannot resolve in that context**. The classic
              case is one archive template serving two kinds of URL — a title bound to `term.name`
              shows "Terra" on `/collections/terra/` and, on `/finishes/` (which has no term), shows
              exactly what is typed here.

              Which is why it belongs to the data panel rather than "double-click the node on the
              canvas" — the canvas now renders with real data, so this line never appears there.
            */}
            {!!current && (
              <Field
                label={__('Show when there is nothing', 'aumframe')}
                hint={__('On pages where this binding resolves to nothing, the front end shows what you put here. Leave it empty and that spot is simply blank.', 'aumframe')}
              >
                <Str
                  value={fallback}
                  placeholder={propName === 'src'
                    ? __('URL of a fallback image', 'aumframe')
                    : __('A sentence that still makes sense with no data', 'aumframe')}
                  onChange={(v) => store.patchProps(node.id, { [propName]: v })}
                />
              </Field>
            )}
          </Fragment>
        );
      })}
    </Section>
  );
}

/* Conditional display */

const OPS = [
  { value: 'notEmpty',  label: __('Show when it has a value', 'aumframe') },
  { value: 'empty',     label: __('Show when it is empty', 'aumframe') },
  { value: 'equals',    label: __('Equals', 'aumframe') },
  { value: 'notEquals', label: __('Does not equal', 'aumframe') },
  { value: 'contains',  label: __('Contains', 'aumframe') },
];

/**
 * Conditional display.
 *
 * Typical uses: hide the image area when there is no cover, reveal a promo badge only when there
 * is a discount, show "nothing found" when a search comes back empty. The test happens on the
 * front end, against each row's own data — ten cards in a loop are tested ten times, not once.
 *
 * On the canvas the node is always shown, or an element whose condition is false could neither
 * be selected nor edited.
 */
function ConditionSection({ store, node, cfg }) {
  const cond = node.condition || {};
  const { scope, fields } = availableFields(store, node.id, cfg);
  const on = !!cond.expr;
  const needsValue = ['equals', 'notEquals', 'contains'].includes(cond.op || 'notEmpty');

  if (!fields.length) {
    return (
      <Section title={__('Conditional display', 'aumframe')}>
        <p className="af-field-hint">
          {__('This node has no data context, so there is no field to test. Put it inside a “Loop”, or change the template to a single/archive type.', 'aumframe')}
        </p>
      </Section>
    );
  }

  return (
    <Section title={__('Conditional display', 'aumframe')} right={scope ? <span className="af-sec-meta">{scope}</span> : null}>
      <Field
        label={__('Let a field decide whether it shows', 'aumframe')}
        overridden={on}
        onClear={() => store.setCondition(node.id, null)}
        hint={on ? __('The canvas keeps showing it so you can still edit it; only the front end hides it.', 'aumframe') : null}
      >
        <Select
          value={cond.expr || ''}
          placeholder={__('Always show', 'aumframe')}
          options={fields.map((f) => ({ value: f.path, label: sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), f.label, f.path) }))}
          onChange={(v) => store.setCondition(node.id, v ? { ...cond, expr: v, op: cond.op || 'notEmpty' } : null)}
        />
      </Field>

      {on && (
        <Field label={__('Condition', 'aumframe')}>
          <Select
            value={cond.op || 'notEmpty'}
            options={OPS}
            onChange={(v) => store.setCondition(node.id, { ...cond, op: v })}
          />
        </Field>
      )}

      {on && needsValue && (
        <Field label={__('Compared with', 'aumframe')}>
          <Str value={cond.value || ''} onChange={(v) => store.setCondition(node.id, { ...cond, value: v })} />
        </Field>
      )}
    </Section>
  );
}

/* Queries */

const ORDERBY = [
  { value: 'date', label: __('Publish date', 'aumframe') },
  { value: 'title', label: __('Title', 'aumframe') },
  { value: 'menu_order', label: __('Manual order', 'aumframe') },
  { value: 'rand', label: __('Random', 'aumframe') },
  { value: 'comment_count', label: __('Comment count', 'aumframe') },
  // 1.7.78: sort by a custom field (an event's date, a publication's edition) — the key is the filtered field,
  // or a separate one chosen below
  { value: 'meta', label: __('Custom field', 'aumframe') },
];

/**
 * The custom fields a query can filter or sort on, from the content type's binding paths. A scalar field is one
 * bare `post.meta.<key>` path; a date field (theme 2.0.73) is a bundle of sub-paths (`.long` / `.day` / `.iso`…)
 * with no bare path, so the key is read off `.iso` and the type is noted — picking it defaults the compare to a
 * date compare. Structured fields (image / file / reference / group) are not offered: they are not comparable.
 */
function metaFilterFields(ptDef) {
  const out = [];
  const seen = new Set();
  for (const f of ptDef?.fields || []) {
    const path = f.path || '';
    let m = /^post\.meta\.([^.]+)$/.exec(path);
    let type = f.type || 'text';
    if (m) {
      if (!['text', 'toggle', 'select', 'number'].includes(type)) continue;
    } else {
      m = /^post\.meta\.([^.]+)\.iso$/.exec(path);
      if (!m) continue;
      type = 'date';
    }
    if (seen.has(m[1])) continue;
    seen.add(m[1]);
    out.push({ value: m[1], label: String(f.label || m[1]).replace(/ · .*$/, ''), type });
  }
  return out;
}

function describeQuery(id, q) {
  const src = q?.source || 'content';
  const what = {
    content: __('content', 'aumframe'),
    main: __('this page’s query', 'aumframe'),
    terms: __('terms', 'aumframe'),
    field: __('a field', 'aumframe'),
    breadcrumb: __('breadcrumb', 'aumframe'),
    menu: __('menu', 'aumframe'),
  }[src] || src;
  const bits = [what];
  if (q?.postType) bits.push(q.postType);
  if (q?.taxonomy) bits.push(q.taxonomy);
  if (q?.limit) bits.push(sprintf(/* translators: %d: Maximum number of items the query returns. */ __('%d max', 'aumframe'), q.limit));
  return sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), id, bits.join(' · '));
}

function RepeaterSection({ store, node }) {
  const queries = store.getQueries();
  const ids = Object.keys(queries);
  const props = node.props || {};

  return (
    <Section title={__('Loop source', 'aumframe')}>
      {!ids.length ? (
        <p className="af-field-hint">
          {__('This loop has nothing to repeat over yet. Make a query under “Data queries” below, then come back and pick it here.', 'aumframe')}
        </p>
      ) : (
        <Field
          label={__('Repeat over', 'aumframe')}
          hint={__('With no query picked, the loop renders nothing at all — not an empty box, nothing. That is the usual reason a list is missing from the front end.', 'aumframe')}
        >
          <Select
            value={props.queryId || ''}
            placeholder={__('Not set — this loop renders nothing', 'aumframe')}
            options={ids.map((id) => ({ value: id, label: describeQuery(id, queries[id]) }))}
            onChange={(v) => store.patchProps(node.id, { queryId: v || undefined })}
          />
        </Field>
      )}

      <Field
        label={__('Name for one row', 'aumframe')}
        hint={__('What a single item is called inside this loop. Bindings on the children read that name, so renaming it after you have bound things means binding them again.', 'aumframe')}
      >
        <Str
          value={props.as || ''}
          placeholder="item"
          onChange={(v) => store.patchProps(node.id, { as: v || undefined })}
        />
      </Field>
    </Section>
  );
}

function QueriesSection({ store, cfg }) {
  const queries = store.getQueries();
  const ids = Object.keys(queries);
  const site = cfg?.siteData || {};
  const postTypes = site.postTypes || [];
  const taxonomies = site.taxonomies || [];
  // Repeaters usable as a loop source (spec tables, galleries…) — determined by the content type
  // this template is bound to
  const groupFields = groupFieldsFor(site, cfg?.rules, cfg?.kind);

  return (
    <Section
      title={__('Data queries', 'aumframe')}
      right={(
        <button type="button" className="af-btn" onClick={() => store.addQuery()}>
          {'＋ '}{__('New', 'aumframe')}
        </button>
      )}
    >
      {!ids.length && (
        <p className="af-field-hint">
          {__('A query defines which content to fetch. Create one, then point a “Loop” at it.', 'aumframe')}
        </p>
      )}

      {ids.map((id) => (
        <QueryEditor
          key={id}
          id={id}
          q={queries[id]}
          /*
            Row aliases from other queries. A nested loop has to name "that outer row", and the
            alias is a name the author chose — typing it by hand is yet another entrance to "one
            wrong letter, silent blankness on the front end".
 */
          outerAliases={ids
            .filter((other) => other !== id && queries[other]?.as)
            .map((other) => ({
              value: queries[other].as,
              label: sprintf(/* translators: 1: Name the other query is exposed under. 2: Its query ID. */ __('%1$s · query %2$s', 'aumframe'), queries[other].as, other),
            }))}
          postTypes={postTypes}
          taxonomies={taxonomies}
          groupFields={groupFields}
          onPatch={(delta) => store.setQuery(id, delta)}
          onRemove={() => store.setQuery(id, null)}
        />
      ))}
    </Section>
  );
}

/**
 * The editor for one query.
 *
 * Content types and taxonomies always come from the list of what is **actually registered on the
 * site** (see SiteData on the PHP side), never typed: one wrong letter in `product_cat` produces an
 * empty list, and the front end reports nothing. But values outside the list still have to stay
 * visible (a deactivated plugin, a conditionally registered CPT), so there is a uniform "(no longer
 * available)" fallback entry rather than letting the select quietly fall back to its first option.
 */
function QueryEditor({ id, q, postTypes, taxonomies, groupFields, outerAliases = [], onPatch, onRemove }) {
  const postType = q.postType || 'post';
  const knownPt = postTypes.some((p) => p.name === postType);

  // List only the taxonomies attached to this content type — offering `category` for products is
  // noise
  const usableTax = taxonomies.filter((t) => (t.postTypes || []).includes(postType));
  const tax = q.taxonomy || '';
  const taxDef = taxonomies.find((t) => t.name === tax);
  const knownTax = !tax || !!taxDef;

  /*
   * `terms` has two shapes (1.7.73): a list of slugs under `taxonomy` (what these chips edit), or a
   * map `{ product_cat: ['keycaps'], feel: ['linear'] }` — one clause per taxonomy, combined with AND, which a
   * kit writes for cross-taxonomy lists ("keycap sets in this layout"). The map is shown read-only here rather
   * than flattened into the chips: flattening would silently drop every taxonomy but one on the next edit.
 */
  const termsIsMap = !!q.terms && !Array.isArray(q.terms) && typeof q.terms === 'object';
  const selected = termsIsMap ? [] : (q.terms || []);
  const termList = taxDef?.terms || [];
  const unselected = termList.filter((t) => !selected.includes(t.slug));

  const setTerms = (next) => onPatch({ terms: next.length ? next : null });

  return (
    <div className="af-query">
      <div className="af-query-head">
        <strong>{id}</strong>
        <button type="button" className="af-list-del" title={__('Delete this query', 'aumframe')} onClick={onRemove}>×</button>
      </div>

      {      /*
        The data source. A search results page **must** use "this page's query" — a custom query
        cannot express "what the user searched for". An archive page using it also paginates
        correctly (a custom query bypasses the main query, and the symptom is "page two is identical
        to page one").
      */}
      <Field
        label={__('Data source', 'aumframe')}
        hint={
          q.source === 'main'
            ? __('Uses this page’s own query results. Search result pages must use it, and archives need it to paginate.', 'aumframe')
            : q.source === 'field'
              ? __('Loops over a “repeating group” field on this piece of content — a spec table, a gallery.', 'aumframe')
              : q.source === 'breadcrumb'
                ? __('The path to the current page, one row per level. The last level carries no link — a page should not link to itself.', 'aumframe')
                : __('You choose what to fetch. A featured list on the home page works like this.', 'aumframe')
        }
      >
        <Seg
          value={['main', 'field', 'terms', 'breadcrumb'].includes(q.source) ? q.source : 'custom'}
          options={[
            { value: 'custom', label: __('Content', 'aumframe') },
            { value: 'terms', label: __('Terms', 'aumframe') },
            { value: 'main', label: __('This page’s query', 'aumframe') },
            { value: 'field', label: __('A field on this content', 'aumframe') },
            { value: 'breadcrumb', label: __('Breadcrumb', 'aumframe') },
          ]}
          onChange={(v) => onPatch({ source: v === 'custom' ? null : v })}
        />
      </Field>

      {      /*
        Lists the terms themselves (name, cover image, link), not the content within them.
        Sections like "browse by series" run on this — otherwise the series have to be hard-coded
        into the layout, and the homepage loses a block every time the client adds one.
      */}
      {q.source === 'terms' && (<>
        <Field label={__('Which taxonomy', 'aumframe')}>
          <Select
            value={q.taxonomy || ''}
            placeholder={__('Pick a taxonomy', 'aumframe')}
            options={[
              ...taxonomies.map((t) => ({ value: t.name, label: sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), t.label, t.name) })),
              ...(q.taxonomy && !taxonomies.some((t) => t.name === q.taxonomy)
                ? [{ value: q.taxonomy, label: sprintf(/* translators: %s: Name of a post type, taxonomy, field or colour that the site no longer has. */ __('%s (gone)', 'aumframe'), q.taxonomy) }] : []),
            ]}
            onChange={(v) => onPatch({ taxonomy: v || null })}
          />
        </Field>
        <Field label={__('How many', 'aumframe')}>
          <Num value={q.limit ?? 12} min={1} max={100} onChange={(v) => onPatch({ limit: v ?? 12 })} />
        </Field>
        {        /*
          Depth. A real product catalogue page is three levels deep (top-level group → sub-category
          → product), and without this only a flat single level can be listed — so the layout loses
          a block every time the client adds a category.
        */}
        <Field
          label={__('Level', 'aumframe')}
          hint={q.parentOf
            ? __('Takes the level below the term on the outer row.', 'aumframe')
            : (q.parent === '' ? __('Lists only terms that have no parent.', 'aumframe') : null)}
        >
          <Seg
            value={q.parentOf ? 'ofOuter' : (q.parent === '' ? 'top' : (q.parent ? 'under' : 'all'))}
            options={[
              { value: 'all', label: __('All', 'aumframe') },
              { value: 'top', label: __('Top level only', 'aumframe') },
              { value: 'under', label: __('Under one term', 'aumframe') },
              ...(outerAliases.length ? [{ value: 'ofOuter', label: __('Under the outer row', 'aumframe') }] : []),
            ]}
            onChange={(v) => onPatch({
              parent: v === 'top' ? '' : (v === 'under' ? (taxDef?.terms?.[0]?.slug || '') : null),
              parentOf: v === 'ofOuter' ? (outerAliases[0]?.value || null) : null,
            })}
          />
        </Field>

        {q.parent !== '' && q.parent != null && (
          <Field label={__('Under which term', 'aumframe')}>
            <Select
              value={q.parent || ''}
              placeholder={__('Pick a term', 'aumframe')}
              options={(taxDef?.terms || []).map((t) => ({ value: t.slug, label: t.name }))}
              onChange={(v) => onPatch({ parent: v || null })}
            />
          </Field>
        )}

        {q.parentOf && (
          <Field label={__('Which loop is the outer one', 'aumframe')}>
            <Select
              value={q.parentOf}
              options={outerAliases}
              onChange={(v) => onPatch({ parentOf: v || null })}
            />
          </Field>
        )}

        <Field label={__('Empty terms', 'aumframe')} hint={__('Whether to list terms that have no content at all.', 'aumframe')}>
          <Seg
            value={q.hideEmpty ? 'hide' : 'show'}
            options={[
              { value: 'show', label: __('List them', 'aumframe') },
              { value: 'hide', label: __('Hide them', 'aumframe') },
            ]}
            onChange={(v) => onPatch({ hideEmpty: v === 'hide' ? 1 : null })}
          />
        </Field>
      </>)}

      {      /*
        Looping a repeater. **The path is never typed** — for the same reason as content types and
        taxonomies: one wrong letter in `post.meta.spces` produces an empty list, and the front end
        reports nothing.
      */}
      {q.source === 'field' && (
        <Field
          label={__('Which field', 'aumframe')}
          hint={groupFields?.length ? null : __('The content type this template is bound to has no “repeating group” field — add one under “Content model”.', 'aumframe')}
        >
          <Select
            value={q.field || ''}
            placeholder={__('Pick a repeating group', 'aumframe')}
            options={[
              ...(groupFields || []).map((f) => ({ value: f.path, label: sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), f.label, f.path) })),
              ...(q.field && !(groupFields || []).some((f) => f.path === q.field)
                ? [{ value: q.field, label: sprintf(/* translators: %s: Name of a post type, taxonomy, field or colour that the site no longer has. */ __('%s (gone)', 'aumframe'), q.field) }]
                : []),
            ]}
            onChange={(v) => onPatch({ field: v || null })}
          />
        </Field>
      )}

      {!['main', 'field', 'terms', 'breadcrumb'].includes(q.source) && (<>
      <Field label={__('Content type', 'aumframe')}>
        <Select
          value={postType}
          options={[
            ...postTypes.map((p) => ({ value: p.name, label: sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), p.label, p.name) })),
            ...(knownPt ? [] : [{ value: postType, label: sprintf(/* translators: %s: Name of a post type, taxonomy, field or colour that the site no longer has. */ __('%s (gone)', 'aumframe'), postType) }]),
          ]}
          onChange={(v) => onPatch({ postType: v || 'post', taxonomy: null, terms: null })}
        />
      </Field>

      <Field label={__('How many', 'aumframe')}>
        <Num value={q.limit ?? 6} min={1} max={100} onChange={(v) => onPatch({ limit: v ?? 6 })} />
      </Field>

      <Field label={__('Order by', 'aumframe')}>
        <Select value={q.orderby || 'date'} options={ORDERBY} onChange={(v) => onPatch({ orderby: v })} />
      </Field>

      {q.orderby === 'meta' && (() => {
        const ptDef = postTypes.find((p) => p.name === postType);
        const fields = metaFilterFields(ptDef);
        const current = q.orderMeta || q.meta?.key || '';
        return (
          <Field
            label={__('Which field', 'aumframe')}
            hint={__('Leave it on the filtered field to sort by the same one (an event date, say). Dates sort correctly when stored as YYYY-MM-DD.', 'aumframe')}
          >
            {fields.length ? (
              <Select value={current} placeholder={__('Same as the filter', 'aumframe')} options={fields} onChange={(v) => onPatch({ orderMeta: v || null })} />
            ) : (
              <Str value={current} placeholder={__('field key', 'aumframe')} mono onChange={(v) => onPatch({ orderMeta: v || null })} />
            )}
          </Field>
        );
      })()}

      <Field label={__('Direction', 'aumframe')}>
        <Seg
          value={(q.order || 'DESC').toUpperCase()}
          options={[
            { value: 'DESC', label: __('Descending', 'aumframe') },
            { value: 'ASC', label: __('Ascending', 'aumframe') },
          ]}
          onChange={(v) => onPatch({ order: v })}
        />
      </Field>

      {      /*
        Restricted to the terms of **the outer loop's current row**.
        Layouts like "list products grouped by category" (catalogue pages, a library grouped by
        type) run on this — without it the inner loop can only query "some hard-coded category" and
        cannot reach the outer row at all.
      */}
      {!!outerAliases.length && (
        <Field
          label={__('Follow the outer term', 'aumframe')}
          hint={q.inTermOf ? __('Fetches only content under the outer row’s term; when the outer row gives no term this section comes out empty.', 'aumframe') : null}
        >
          <Select
            value={q.inTermOf || ''}
            placeholder={__('Do not follow', 'aumframe')}
            options={outerAliases}
            onChange={(v) => onPatch({ inTermOf: v || null })}
          />
        </Field>
      )}

      {!!q.inTermOf && (
        <Field
          label={__('Include child terms', 'aumframe')}
          hint={__('When the outer term has a level below it, whether to count that content too.', 'aumframe')}
        >
          <Seg
            value={q.includeChildren ? 'yes' : 'no'}
            options={[
              { value: 'no', label: __('Exclude', 'aumframe') },
              { value: 'yes', label: __('Include', 'aumframe') },
            ]}
            onChange={(v) => onPatch({ includeChildren: v === 'yes' ? 1 : null })}
          />
        </Field>
      )}

      {termsIsMap && (
        <Field
          label={__('Filter by taxonomy', 'aumframe')}
          hint={__('Set in the template as several taxonomies combined with AND. Edit it in the template’s source; this panel edits one taxonomy at a time.', 'aumframe')}
        >
          <div className="af-chips">
            {Object.entries(q.terms).map(([taxName, slugs]) => (
              <span key={taxName} className="af-chip">{`${taxName} = ${(Array.isArray(slugs) ? slugs : [slugs]).join(', ')}`}</span>
            ))}
          </div>
        </Field>
      )}

      {!termsIsMap && (
      <Field
        label={__('Filter by taxonomy', 'aumframe')}
        hint={usableTax.length
          ? (q.inTermOf ? __('Combined with the outer term: only content that is under the outer row’s term and matches this filter.', 'aumframe') : null)
          : __('This content type has no public taxonomy attached.', 'aumframe')}
      >
        <Select
          value={tax}
          placeholder={__('No filter', 'aumframe')}
          options={[
            ...usableTax.map((t) => ({ value: t.name, label: sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), t.label, t.name) })),
            ...(knownTax ? [] : [{ value: tax, label: sprintf(/* translators: %s: Name of a post type, taxonomy, field or colour that the site no longer has. */ __('%s (gone)', 'aumframe'), tax) }]),
          ]}
          onChange={(v) => onPatch({ taxonomy: v || null, terms: null })}
        />
      </Field>
      )}

      {!termsIsMap && !!tax && (
        <Field
          label={__('Choose terms', 'aumframe')}
          hint={taxDef?.truncated
            ? sprintf(/* translators: %d: Number of terms shown. */ __('Too many terms — only the first %d are listed.', 'aumframe'), termList.length)
            : null}
        >
          <div className="af-chips">
            {selected.map((slug) => {
              const known = termList.some((t) => t.slug === slug);
              return (
                <button
                  type="button"
                  key={slug}
                  className={'af-chip' + (known ? '' : ' is-stale')}
                  title={known
                    ? __('Click to remove', 'aumframe')
                    : __('This term no longer exists · click to remove', 'aumframe')}
                  onClick={() => setTerms(selected.filter((s) => s !== slug))}
                >
                  {termList.find((t) => t.slug === slug)?.name || slug}
                  {!known && ` ${__('(gone)', 'aumframe')}`}
                  <span className="af-chip-x">×</span>
                </button>
              );
            })}
          </div>

          {!!unselected.length && (
            <Select
              value=""
              placeholder={`＋ ${__('Add a term', 'aumframe')}`}
              options={unselected.map((t) => ({ value: t.slug, label: `${t.name} (${t.count})` }))}
              onChange={(v) => v && setTerms([...selected, v])}
            />
          )}
          {!selected.length && (
            <p className="af-field-hint">
              {__('Selecting none means no term filter at all — the taxonomy alone decides.', 'aumframe')}
            </p>
          )}
        </Field>
      )}

      {      /*
        Exclude the current post. A "related content" section at the bottom of a single template
        inevitably needs this — without it the first card is the post you are already reading, and
        clicking it lands on the same page.
      */}
      <Field
        label={__('Exclude the current post', 'aumframe')}
        hint={__('Turn this on when you build “related content” in a single-post template.', 'aumframe')}
      >
        <Seg
          value={q.notCurrent ? 'on' : 'off'}
          options={[
            { value: 'off', label: __('Keep it', 'aumframe') },
            { value: 'on', label: __('Exclude it', 'aumframe') },
          ]}
          onChange={(v) => onPatch({ notCurrent: v === 'on' ? 1 : null })}
        />
      </Field>

      {      /*
        Filter by one custom field (1.7.77). "The lead piece", "featured", "show on the home page" — a toggle the
        site owner ticks on one post. Before this a query could not see post meta at all, so "which one is featured"
        had to be a sort-order convention nobody can find in the admin. The key list comes from the content type's
        own fields (toggle / select / text), so the user picks rather than types.
      */}
      {(() => {
        const ptDef = postTypes.find((p) => p.name === postType);
        const metaFields = metaFilterFields(ptDef);
        const meta = q.meta && typeof q.meta === 'object' ? q.meta : {};
        const RANGE = ['<', '<=', '>', '>='];
        const isRange = RANGE.includes(meta.compare || '=');
        const needsValue = ['=', '!='].includes(meta.compare || '=') || isRange;
        const setMeta = (patch) => {
          const next = { ...meta, ...patch };
          if (!next.key) { onPatch({ meta: null }); return; }
          onPatch({ meta: next });
        };
        return (
          <Field
            label={__('Only where a field is…', 'aumframe')}
            hint={__('Filter by a custom field: a “featured” toggle, a status. “Is not” also matches posts where the field was never set.', 'aumframe')}
          >
            {metaFields.length ? (
              <Select
                value={meta.key || ''}
                placeholder={__('No field filter', 'aumframe')}
                options={metaFields}
                onChange={(v) => {
                  // Picking a date field defaults the type so the range compares below sort dates as dates
                  const picked = metaFields.find((f) => f.value === v);
                  setMeta({ key: v || '', ...(picked?.type === 'date' ? { type: 'date' } : picked?.type === 'number' ? { type: 'number' } : {}) });
                }}
              />
            ) : (
              <Str value={meta.key || ''} placeholder={__('field key', 'aumframe')} mono onChange={(v) => setMeta({ key: v })} />
            )}
            {!!meta.key && (
              <div className="af-row">
                <Select
                  value={meta.compare || '='}
                  options={[
                    { value: '=', label: __('is', 'aumframe') },
                    { value: '!=', label: __('is not', 'aumframe') },
                    { value: '>=', label: __('is on or after', 'aumframe') },
                    { value: '>', label: __('is after', 'aumframe') },
                    { value: '<=', label: __('is on or before', 'aumframe') },
                    { value: '<', label: __('is before', 'aumframe') },
                    { value: 'exists', label: __('is set', 'aumframe') },
                    { value: 'notExists', label: __('is not set', 'aumframe') },
                  ]}
                  onChange={(v) => setMeta({ compare: v || '=' })}
                />
                {needsValue ? (
                  <Str value={meta.value ?? (isRange ? '@today' : '1')} placeholder={isRange ? '@today' : '1'} mono onChange={(v) => setMeta({ value: v })} />
                ) : null}
              </div>
            )}
            {!!meta.key && needsValue && (
              <div className="af-row">
                <Select
                  value={meta.type || ''}
                  options={[
                    { value: '', label: __('Compare as text', 'aumframe') },
                    { value: 'date', label: __('Compare as a date', 'aumframe') },
                    { value: 'number', label: __('Compare as a number', 'aumframe') },
                  ]}
                  onChange={(v) => setMeta({ type: v || null })}
                />
              </div>
            )}
            {!!meta.key && isRange && (
              <p className="af-field-hint">
                {__('“@today” is the site’s current date, so “on or after @today” means upcoming and “before @today” means past.', 'aumframe')}
              </p>
            )}
          </Field>
        );
      })()}

      <Field
        label={__('Follow the current term', 'aumframe')}
        hint={__('On an archive that means content under the current term; on a single post, other content sharing its term.', 'aumframe')}
      >
        <Seg
          value={q.inCurrentTerm ? 'on' : 'off'}
          options={[
            { value: 'off', label: __('No', 'aumframe') },
            { value: 'on', label: __('Yes', 'aumframe') },
          ]}
          onChange={(v) => onPatch({ inCurrentTerm: v === 'on' ? true : null })}
        />
      </Field>

      {      /*
        Which taxonomy to follow on a single page. Before 1.7.73 this reused `taxonomy`, which is also the
        filter's taxonomy — so "same layout, keycaps only" could not be written. `followTaxonomy` is its own
        key; with only one taxonomy on the type there is nothing to choose.
      */}
      {!!q.inCurrentTerm && usableTax.length > 1 && (
        <Field
          label={__('Follow which taxonomy', 'aumframe')}
          hint={__('On a single page: the taxonomy whose terms this post shares with the results. Leave empty for the first taxonomy on the content type.', 'aumframe')}
        >
          <Select
            value={q.followTaxonomy || ''}
            placeholder={__('First taxonomy', 'aumframe')}
            options={usableTax.map((t) => ({ value: t.name, label: sprintf(/* translators: 1: Human-readable label. 2: The underlying path, name or key it stands for. */ __('%1$s · %2$s', 'aumframe'), t.label, t.name) }))}
            onChange={(v) => onPatch({ followTaxonomy: v || null })}
          />
        </Field>
      )}
      </>
      )}
    </div>
  );
}