{# Reusable image-picker field for admin forms.

   Renders a hidden input + inline thumbnail (when set) + Pick /
   Change / Clear buttons + a per-field <dialog> that lazy-loads the
   shared attachments picker grid via htmx. Card-click on the grid
   sets the hidden input, updates the thumbnail, and closes the
   dialog.

   Use via {% from "admin/_image_picker_field.html" import image_picker_field %}
   then `{{ image_picker_field(name=..., value=..., attachment=...,
   label=..., picker_url=..., site_slug=..., helper=...,
   thumb_storage_key=...) }}`. One form-field per page expected; the
   dialog id is derived from `name` so multiple fields could coexist
   in principle.

   `picker_url` is the fully-built attachments-picker URL (site_slug
   already substituted by the caller). The macro can't build it
   itself because the site-edit page has no `site_slug` in its view
   args — only post/page edit views do.

   `site_slug` lets the macro build the site-scoped attachment-bytes
   URLs for the inline thumbnail and for the after-pick preview swap.
   The delivery `/attachments/<key>` route resolves the site from
   the Host header, which doesn't match on the admin host, so the
   macro must use the path-scoped admin route instead.

   `thumb_storage_key` (optional) overrides the storage key used for
   the inline preview image. The caller passes the smallest done
   WebP rendition's storage_key so the form doesn't drag the full
   original (often >1 MB) over the wire to render a 160x120
   thumbnail. Falls back to `attachment.storage_key` when None,
   which keeps the macro working for attachments whose renditions
   haven't processed yet.
#}

{% macro image_picker_field(name, value, attachment, label, picker_url, site_slug, helper="", thumb_storage_key=None) %}
{%- set dialog_id = "image-picker-dialog--" ~ name -%}
{%- set field_id = "image-picker-field--" ~ name -%}
<fieldset class="image-picker-field" id="{{ field_id }}" data-field="{{ name }}">
  <label>{{ label }}</label>
  <input type="hidden" name="{{ name }}" id="{{ name }}" value="{{ value or '' }}">
  <div class="image-picker-state"
       style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
    <div class="image-picker-preview"
         style="display: {% if attachment %}flex{% else %}none{% endif %};
                align-items: center; gap: 0.75rem;">
      {% if attachment %}
      <img class="image-picker-thumb"
           src="{{ url_for('attachment_admin.serve_attachment_bytes', site_slug=site_slug, storage_key=(thumb_storage_key or attachment.storage_key)) }}"
           alt="{{ attachment.alt_text or attachment.filename }}"
           style="max-width: 160px; max-height: 120px; object-fit: cover;
                  border: 1px solid #ddd; border-radius: 4px;">
      <span class="image-picker-filename" style="font-family: monospace; font-size: 0.875em;">
        {{ attachment.filename }}
      </span>
      {% endif %}
    </div>
    <button type="button" class="image-picker-pick"
            data-dialog="{{ dialog_id }}">
      {% if attachment %}Change image{% else %}Pick image{% endif %}
    </button>
    <button type="button" class="image-picker-clear"
            style="display: {% if attachment %}inline-block{% else %}none{% endif %};">
      Clear
    </button>
  </div>
  {% if helper %}<small style="display: block; margin-top: 0.25rem;">{{ helper }}</small>{% endif %}
</fieldset>

<dialog id="{{ dialog_id }}"
        style="width: min(90vw, 900px); max-height: 80vh; padding: 1rem;">
  <header style="display: flex; justify-content: space-between; align-items: center;
                 margin-bottom: 0.5rem;">
    <h3 style="margin: 0;">Pick an image</h3>
    <button type="button" data-action="close-picker"
            style="background: transparent; border: 0; font-size: 1.5rem; cursor: pointer;"
            aria-label="Close">&times;</button>
  </header>
  <div class="image-picker-grid-target">
    Loading…
  </div>
</dialog>

<script>
(function () {
  const fieldName = {{ name | tojson }};
  const dialogId = {{ dialog_id | tojson }};
  const fieldId = {{ field_id | tojson }};
  const pickerUrl = {{ picker_url | tojson }};
  // Site-scoped admin URL prefix for attachment bytes. The
  // delivery `/attachments/<key>` route resolves the site from
  // the Host header, which doesn't match on the admin host; the
  // path-scoped admin route does. Concatenating storage_key here
  // yields the same URL Jinja's url_for would produce.
  const attachmentPrefix = {{ url_for(
      "attachment_admin.serve_attachment_bytes",
      site_slug=site_slug,
      storage_key="__STORAGE_KEY__",
  ) | tojson }}.replace("__STORAGE_KEY__", "");

  const fieldRoot = document.getElementById(fieldId);
  const dialog = document.getElementById(dialogId);
  const hidden = document.getElementById(fieldName);
  if (!fieldRoot || !dialog || !hidden) return;

  const target = dialog.querySelector(".image-picker-grid-target");
  const previewEl = fieldRoot.querySelector(".image-picker-preview");
  const pickBtn = fieldRoot.querySelector(".image-picker-pick");
  const clearBtn = fieldRoot.querySelector(".image-picker-clear");

  function openPicker() {
    if (window.htmx) {
      window.htmx.ajax("GET", pickerUrl, { target: target, swap: "innerHTML" });
    } else {
      target.innerHTML = "<p>htmx unavailable; close and try again.</p>";
    }
    dialog.showModal();
  }

  function setSelection(card) {
    const key = card.dataset.storageKey || "";
    const altText = card.dataset.altText || "";
    const filename = card.dataset.filename || "";
    const attachmentId = card.dataset.attachmentId || "";
    if (!attachmentId) return;
    hidden.value = attachmentId;
    previewEl.style.display = "flex";
    previewEl.innerHTML =
      '<img class="image-picker-thumb" src="' + attachmentPrefix + key + '"' +
      ' alt="' + altText.replace(/"/g, "&quot;") + '"' +
      ' style="max-width: 160px; max-height: 120px; object-fit: cover;' +
      ' border: 1px solid #ddd; border-radius: 4px;">' +
      '<span class="image-picker-filename" style="font-family: monospace; font-size: 0.875em;">' +
      filename + '</span>';
    pickBtn.textContent = "Change image";
    clearBtn.style.display = "inline-block";
    dialog.close();
  }

  function clearSelection() {
    hidden.value = "";
    previewEl.style.display = "none";
    previewEl.innerHTML = "";
    pickBtn.textContent = "Pick image";
    clearBtn.style.display = "none";
  }

  pickBtn.addEventListener("click", openPicker);
  clearBtn.addEventListener("click", clearSelection);

  dialog.addEventListener("click", function (e) {
    if (e.target === dialog) {
      dialog.close();
      return;
    }
    if (e.target.closest("[data-action='close-picker']")) {
      dialog.close();
      return;
    }
    const card = e.target.closest(".picker-card");
    if (!card) return;
    e.preventDefault();
    setSelection(card);
  });
})();
</script>
{% endmacro %}