{#
  Method-picker Alpine component (S-120).

  Mounted once at the Studio page level (see ``studio.html``). Listens for
  ``studio:open-method-picker`` window events dispatched by the column
  method pill (rendered in ``spec_row.html``) and renders a modal showing
  the catalogue methods that apply to the column's dtype.

  Event payload:
      {table, column, method, provider, dtype}

  Behaviour:
    * On open: fetches ``/api/generators?dtype=<dtype>`` once (or the full
      catalogue when dtype is unknown), groups by provider, renders
      buttons. The currently-selected ``(provider, method)`` is shown
      highlighted.
    * On select: ``PUT /api/spec/tables/{t}/columns/{c}`` with
      ``HX-Request: true`` so the server returns the re-rendered
      ``spec_row.html`` fragment; the picker swaps the matching
      ``[data-column="<t>.<c>"]`` row in place via outerHTML.
    * On dismiss: closes the modal; clicking outside content closes too.

  Failure paths are intentionally non-fatal — fetch errors surface a
  human-readable line and keep the existing row untouched.
#}
<div
  id="method-picker"
  data-method-picker
  x-data="methodPicker()"
  x-init="init()"
  @keydown.escape.window="close()"
  @studio:open-method-picker.window="open($event.detail)"
>
  <div
    x-show="visible"
    x-cloak
    class="fixed inset-0 z-50 flex items-start justify-center bg-base-300/70 backdrop-blur-sm pt-20"
    role="dialog"
    aria-modal="true"
    aria-labelledby="method-picker-title"
    @click.self="close()"
  >
    <div class="card bg-base-100 shadow-xl w-full max-w-2xl max-h-[70vh] overflow-y-auto p-4">
      <header class="flex items-center justify-between mb-3">
        <h2 id="method-picker-title" class="font-semibold text-sm">
          <span x-text="title()"></span>
        </h2>
        <button
          type="button"
          class="btn btn-ghost btn-xs"
          aria-label="Close method picker"
          @click="close()"
        >
          ✕
        </button>
      </header>

      <p x-show="dtype" class="text-xs opacity-70 mb-3">
        Showing methods compatible with dtype
        <code class="text-xs" x-text="dtype"></code>.
      </p>

      <div x-show="loading" class="text-xs opacity-70 py-6 text-center">
        Loading generator catalogue…
      </div>

      <div x-show="error" x-cloak class="alert alert-error text-xs mb-3">
        <span x-text="error"></span>
      </div>

      <template x-for="(group, provider) in grouped()" :key="provider">
        <section class="mb-3" :data-provider="provider">
          <h3 class="text-xs uppercase tracking-wide opacity-60 mb-1" x-text="provider"></h3>
          <div class="flex flex-wrap gap-1">
            <template x-for="entry in group" :key="entry.provider + '.' + entry.method">
              <div class="flex flex-col gap-0.5" :data-entry="entry.provider + '.' + entry.method">
                <button
                  type="button"
                  class="badge badge-outline cursor-pointer text-xs"
                  :class="{ 'badge-primary': isSelected(entry) }"
                  :data-provider="entry.provider"
                  :data-method="entry.method"
                  :data-example="entry.example"
                  :title="entry.description"
                  :aria-describedby="'method-desc-' + entry.provider + '-' + entry.method"
                  @focus="hoveredDescription = entry.description; hoveredExample = entry.example"
                  @mouseenter="hoveredDescription = entry.description; hoveredExample = entry.example"
                  @click="apply(entry)"
                >
                  <span x-text="entry.method"></span>
                  {#
                    Off-screen description used by ``aria-describedby``. The
                    same text is duplicated into the ``title=`` attribute for
                    hover-based UAs; this span keeps assistive tech happy
                    without pushing the visual layout (sr-only).
                  #}
                  <span
                    class="sr-only"
                    :id="'method-desc-' + entry.provider + '-' + entry.method"
                    x-text="entry.description"
                  ></span>
                </button>
                {#
                  S-146 — per-entry example value. Shown as a small
                  monospace snippet so the user can recognise the
                  generator's output at a glance without hovering the
                  description tooltip. Hidden when blank (e.g. unknown
                  plugin methods that fall through to the description
                  fallback already use the description as the example,
                  but we still render the slot for layout stability).
                #}
                <code
                  class="text-[10px] opacity-60 truncate"
                  x-show="entry.example"
                  x-text="entry.example"
                  :data-method-example-for="entry.provider + '.' + entry.method"
                  aria-label="Example output"
                ></code>
              </div>
            </template>
          </div>
        </section>
      </template>

      <p x-show="!loading && !error && allEntries.length === 0" class="text-xs opacity-70 py-4">
        No methods available for this column's dtype.
      </p>

      {#
        S-123 footer:
          * ``hoveredDescription`` mirrors the focus / hover description for
            sighted users who can't see the native ``title`` tooltip yet —
            it's a quiet visual reinforcement, not a replacement.
          * ``field-descriptions`` is a JSON island carrying the Pydantic
            ``GeneratorConfig`` field tooltips. The Alpine component reads
            this on init so it can render a tooltip next to each config
            field when the picker eventually grows a params editor. The
            element is referenced by id, so the JSON-island contract is
            stable for downstream stories.
      #}
      <p
        x-show="hoveredDescription"
        x-cloak
        class="text-xs opacity-70 mt-3 border-t border-base-300 pt-2"
        aria-live="polite"
        x-text="hoveredDescription"
      ></p>
      {# S-146 — hovered / focused entry's example value, mirrored next
         to the description so sighted users see *both* lines without
         hovering the native ``title`` tooltip. ``aria-live`` keeps it
         polite so screen readers announce changes without preempting. #}
      <p
        x-show="hoveredExample"
        x-cloak
        class="text-[11px] opacity-80 font-mono mt-1"
        aria-live="polite"
      >
        Example:
        <code x-text="hoveredExample"></code>
      </p>
      <script
        id="field-descriptions"
        type="application/json"
      >{{ field_descriptions() | tojson }}</script>
    </div>
  </div>
</div>

<script>
  /*
   * Alpine factory for the method picker (S-120). Kept inline alongside
   * the template so the component is self-contained — the studio page
   * doesn't need a separate <script> include.
   */
  window.methodPicker = function () {
    return {
      visible: false,
      loading: false,
      error: '',
      target: null, // {table, column, method, provider, dtype}
      allEntries: [],
      // S-123: mirrors the focused / hovered entry's description so the
      // footer can show it as a quiet visual reinforcement of the native
      // ``title`` tooltip. Reset on open/close.
      hoveredDescription: '',
      // S-146: mirrors the hovered / focused entry's example value so
      // sighted users see a single illustrative output next to the
      // description footer. Reset on open / close.
      hoveredExample: '',
      // S-123: parsed map of ``GeneratorConfig`` field tooltips, loaded
      // once from the ``#field-descriptions`` JSON island.
      fieldDescriptions: {},

      init() {
        // Parse the field-description JSON island once. Failures are
        // non-fatal — the picker stays usable without the tooltip footer.
        try {
          const el = document.getElementById('field-descriptions');
          if (el && el.textContent) {
            this.fieldDescriptions = JSON.parse(el.textContent);
          }
        } catch (_e) {
          this.fieldDescriptions = {};
        }
      },

      open(detail) {
        this.target = {
          table: detail.table || '',
          column: detail.column || '',
          method: detail.method || '',
          provider: detail.provider || '',
          dtype: detail.dtype || '',
        };
        this.visible = true;
        this.error = '';
        this.hoveredDescription = '';
        this.hoveredExample = '';
        this.fetchCatalogue();
      },

      close() {
        this.visible = false;
        this.target = null;
        this.hoveredDescription = '';
        this.hoveredExample = '';
      },

      title() {
        if (!this.target) return 'Choose a generator';
        return 'Method · ' + this.target.table + '.' + this.target.column;
      },

      get dtype() {
        return this.target ? this.target.dtype : '';
      },

      fetchCatalogue() {
        this.loading = true;
        this.allEntries = [];
        const url = this.dtype
          ? '/api/generators?dtype=' + encodeURIComponent(this.dtype)
          : '/api/generators';
        fetch(url, { headers: { Accept: 'application/json' } })
          .then((resp) => {
            if (!resp.ok) {
              throw new Error('Catalogue unavailable (' + resp.status + ')');
            }
            return resp.json();
          })
          .then((data) => {
            this.allEntries = Array.isArray(data.methods) ? data.methods : [];
            this.loading = false;
          })
          .catch((err) => {
            this.error = err && err.message ? err.message : 'Failed to load catalogue.';
            this.loading = false;
          });
      },

      grouped() {
        const out = {};
        for (const entry of this.allEntries) {
          if (!out[entry.provider]) out[entry.provider] = [];
          out[entry.provider].push(entry);
        }
        return out;
      },

      isSelected(entry) {
        if (!this.target) return false;
        return entry.provider === this.target.provider && entry.method === this.target.method;
      },

      apply(entry) {
        if (!this.target) return;
        const body = JSON.stringify({ provider: entry.provider, method: entry.method, params: {} });
        const url =
          '/api/spec/tables/' +
          encodeURIComponent(this.target.table) +
          '/columns/' +
          encodeURIComponent(this.target.column);
        fetch(url, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            'HX-Request': 'true',
            Accept: 'text/html',
          },
          body: body,
        })
          .then((resp) => {
            if (!resp.ok) {
              throw new Error('Update failed (' + resp.status + ')');
            }
            return resp.text();
          })
          .then((html) => {
            const selector =
              '[data-column="' + this.target.table + '.' + this.target.column + '"]';
            const target = document.querySelector(selector);
            if (target) {
              target.outerHTML = html;
            }
            /* S-132 seam: tell the per-column re-preview pipeline the
               picker just swapped a row, so it can debounce-then-regen
               + re-fetch the preview slice for this one column.
               Other components can also subscribe to this event. */
            window.dispatchEvent(new CustomEvent('studio:row-rerendered', {
              detail: {
                table: this.target.table,
                column: this.target.column,
                method: entry.method,
                provider: entry.provider,
              },
            }));
            this.close();
          })
          .catch((err) => {
            this.error = err && err.message ? err.message : 'Update failed.';
          });
      },
    };
  };
</script>