{{-- Shared WordPress-style Insert Media modal — library / upload / URL / attachment details --}}
<div
  id="admin-media-gallery-modal"
  class="admin-media-modal"
  hidden
  aria-hidden="true"
  data-default-picker-url="{{ route('admin.media.picker') }}"
  data-default-upload-url="{{ route('admin.media.store') }}"
  data-default-import-url="{{ route('admin.media.import-url') }}"
  data-update-url-template="{{ url('/admin/media') }}/__ID__"
  data-destroy-url-template="{{ url('/admin/media') }}/__ID__"
>
  <div class="admin-media-modal-backdrop" data-media-close></div>
  <div class="admin-media-modal-panel admin-media-modal-panel--wp" role="dialog" aria-modal="true" aria-labelledby="admin-media-gallery-title">
    <div class="admin-media-modal-shell">
      <aside class="admin-media-modal-nav" aria-label="Media actions">
        <p class="admin-media-modal-brand">Insert Media</p>
        <button type="button" class="admin-media-nav-item is-active" data-media-nav="insert">Insert Media</button>
        <button type="button" class="admin-media-nav-item" data-media-nav="gallery">Create Gallery</button>
        <button type="button" class="admin-media-nav-item" data-media-nav="featured">Set Featured Image</button>
        <button type="button" class="admin-media-nav-item" data-media-nav="url">Insert from URL</button>
      </aside>

      <div class="admin-media-modal-main">
        <div class="admin-media-modal-head">
          <div>
            <h2 id="admin-media-gallery-title" class="text-base font-semibold text-[#202223]">Insert Media</h2>
            <p class="text-xs text-[#6d7175]" data-media-modal-help hidden>Select or upload media. Edit title, alt text, and caption before inserting.</p>
          </div>
          <button type="button" class="admin-btn" data-media-close aria-label="Close">
            <i data-lucide="x" class="h-3.5 w-3.5"></i>
          </button>
        </div>

        <div data-media-pane="library">
          <div class="admin-media-modal-tabs" role="tablist">
            <button type="button" class="admin-media-tab is-active" data-media-tab="upload" role="tab">Upload Files</button>
            <button type="button" class="admin-media-tab" data-media-tab="library" role="tab">Media Library</button>
          </div>

          <div class="admin-media-upload-pane" data-media-view="upload">
            <label class="admin-media-dropzone" data-media-dropzone>
              <input type="file" accept="image/jpeg,image/png,image/webp,image/gif,application/pdf" class="sr-only" data-media-upload multiple>
              <i data-lucide="upload-cloud" class="h-8 w-8 text-[#8c9196]"></i>
              <span class="mt-2 text-sm font-semibold text-[#202223]">Drop files to upload</span>
              <span class="mt-1 text-xs text-[#6d7175]">or click to select from your computer</span>
              <span class="mt-3 admin-btn admin-btn-primary">Select Files</span>
              <span class="mt-2 text-[11px] text-[#8c9196]">JPEG, PNG, WebP, GIF, PDF · max 10 MB each</span>
            </label>
            <div class="admin-media-upload-previews" data-media-upload-previews hidden></div>
          </div>

          <div class="admin-media-library-pane" data-media-view="library" hidden>
            <div class="admin-media-modal-toolbar">
              <select class="admin-input admin-media-type-filter" data-media-type>
                <option value="image">Images</option>
                <option value="all">All media items</option>
                <option value="pdf">Documents</option>
              </select>
              <div class="relative min-w-0 flex-1">
                <i data-lucide="search" class="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[#8c9196]"></i>
                <input type="search" class="admin-input w-full pl-8" placeholder="Search media…" data-media-search>
              </div>
            </div>
            <div class="admin-media-modal-status text-xs text-[#6d7175]" data-media-status>Loading…</div>
            <div class="admin-media-modal-body">
              <div class="admin-media-modal-grid" data-media-grid></div>
              <aside class="admin-media-details" data-media-details>
                <div class="admin-media-details-empty" data-media-details-empty>
                  <p class="text-sm font-medium text-[#202223]">Attachment Details</p>
                  <p class="mt-1 text-xs text-[#6d7175]">Select an item to edit title, alt text, caption, and description.</p>
                </div>
                <div class="admin-media-details-form" data-media-details-form hidden>
                  <p class="text-sm font-semibold text-[#202223]">Attachment Details</p>
                  <div class="admin-media-details-preview mt-3" data-media-details-top>
                    <div class="admin-media-details-thumb" data-detail-thumb>
                      <img src="" alt="" data-detail-thumb-img hidden>
                    </div>
                    <div class="min-w-0">
                      <div class="truncate text-xs font-medium" data-detail-filename></div>
                      <div class="text-[11px] text-[#8c9196]" data-detail-meta></div>
                      <div class="mt-1 flex flex-wrap gap-2 text-[11px]">
                        <a href="#" class="text-[#2c6ecb] hover:underline" data-detail-edit-link target="_blank" rel="noopener">Edit Image</a>
                        <button type="button" class="text-[var(--color-danger)] hover:underline" data-detail-delete>Delete Permanently</button>
                      </div>
                    </div>
                  </div>
                  <label class="admin-media-detail-field">
                    <span>Title</span>
                    <input type="text" class="admin-input" data-detail-title>
                  </label>
                  <label class="admin-media-detail-field">
                    <span>Alt Text</span>
                    <input type="text" class="admin-input" data-detail-alt>
                  </label>
                  <label class="admin-media-detail-field">
                    <span>Caption</span>
                    <textarea class="admin-input" rows="2" data-detail-caption></textarea>
                  </label>
                  <label class="admin-media-detail-field">
                    <span>Description</span>
                    <textarea class="admin-input" rows="3" data-detail-description></textarea>
                  </label>
                  <button type="button" class="admin-btn admin-btn-primary w-full" data-detail-save>Save details</button>
                  <div class="admin-media-display-settings">
                    <p class="text-xs font-semibold uppercase tracking-wide text-[#6d7175]">Attachment Display Settings</p>
                    <label class="admin-media-detail-field">
                      <span>Alignment</span>
                      <select class="admin-input" data-detail-align>
                        <option value="none">None</option>
                        <option value="left">Left</option>
                        <option value="center">Center</option>
                        <option value="right">Right</option>
                      </select>
                    </label>
                    <label class="admin-media-detail-field">
                      <span>Link To</span>
                      <select class="admin-input" data-detail-link>
                        <option value="none">None</option>
                        <option value="file">Media File</option>
                        <option value="custom">Custom URL</option>
                      </select>
                    </label>
                    <label class="admin-media-detail-field">
                      <span>Size</span>
                      <select class="admin-input" data-detail-size>
                        <option value="thumbnail">Thumbnail</option>
                        <option value="medium">Medium</option>
                        <option value="full" selected>Full Size</option>
                      </select>
                    </label>
                  </div>
                </div>
              </aside>
            </div>
            <div class="admin-media-load-more-wrap">
              <button type="button" class="admin-btn" data-media-load-more hidden>Load more</button>
            </div>
          </div>
        </div>

        <div data-media-pane="url" hidden>
          <div class="admin-media-url-pane">
            <p class="text-sm text-[#6d7175]">Insert from URL downloads the image into your Media library so it stays available everywhere.</p>
            <label class="admin-media-detail-field mt-4">
              <span>Image URL</span>
              <input type="url" class="admin-input" placeholder="https://…" data-url-input>
            </label>
            <div class="mt-3 grid gap-3 sm:grid-cols-2">
              <label class="admin-media-detail-field">
                <span>Title (optional)</span>
                <input type="text" class="admin-input" data-url-title>
              </label>
              <label class="admin-media-detail-field">
                <span>Alt text (optional)</span>
                <input type="text" class="admin-input" data-url-alt>
              </label>
            </div>
            <button type="button" class="admin-btn admin-btn-primary mt-4" data-url-import>Import into library</button>
            <p class="mt-2 text-xs text-[#6d7175]" data-url-status></p>
          </div>
        </div>

        <div class="admin-media-modal-foot">
          <div class="admin-media-selection-summary">
            <span class="text-xs text-[#6d7175]"><span data-media-count>0</span> selected</span>
            <div class="admin-media-selection-thumbs" data-media-selection-thumbs></div>
            <button type="button" class="text-xs text-[#2c6ecb] hover:underline" data-media-clear hidden>Clear</button>
          </div>
          <div class="admin-media-insert-actions">
            <button type="button" class="admin-btn" data-media-close>Cancel</button>
            <button type="button" class="admin-btn admin-btn-primary" data-media-confirm>Insert</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(() => {
  if (window.__traMediaGallery) return;
  const modal = document.getElementById('admin-media-gallery-modal');
  if (!modal) return;

  const grid = modal.querySelector('[data-media-grid]');
  const status = modal.querySelector('[data-media-status]');
  const countEl = modal.querySelector('[data-media-count]');
  const searchInput = modal.querySelector('[data-media-search]');
  const uploadInput = modal.querySelector('[data-media-upload]');
  const typeFilter = modal.querySelector('[data-media-type]');
  const loadMoreBtn = modal.querySelector('[data-media-load-more]');
  const selectionThumbs = modal.querySelector('[data-media-selection-thumbs]');
  const clearBtn = modal.querySelector('[data-media-clear]');
  const confirmBtn = modal.querySelector('[data-media-confirm]');
  const helpEl = modal.querySelector('[data-media-modal-help]');
  const titleEl = modal.querySelector('#admin-media-gallery-title');
  const csrf = document.querySelector('meta[name="csrf-token"]')?.content;

  let activeField = null;
  let onConfirm = null;
  let pickerUrl = modal.dataset.defaultPickerUrl;
  let uploadUrl = modal.dataset.defaultUploadUrl;
  let importUrl = modal.dataset.defaultImportUrl;
  let mode = 'multiple';
  let max = null;
  let selected = new Map();
  let libraryItems = [];
  let page = 1;
  let lastPage = 1;
  let searchTimer = null;
  let activeDetailId = null;
  let boundFields = new WeakSet();

  const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  const cssUrl = (s) => String(s ?? '').replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/'/g, "\\'");
  const assetThumb = (item) => item?.thumb || item?.medium || item?.url || '';
  const detailsPane = () => modal.querySelector('[data-media-details]');
  const uploadPreviews = modal.querySelector('[data-media-upload-previews]');
  const focusDetails = () => {
    const pane = detailsPane();
    if (!pane) return;
    pane.scrollTop = 0;
    requestAnimationFrame(() => {
      pane.scrollTop = 0;
      const top = pane.querySelector('[data-media-details-top]') || pane.querySelector('[data-media-details-form]');
      top?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
      const titleInput = pane.querySelector('[data-detail-title]');
      if (titleInput && !modal.hidden) {
        try { titleInput.focus({ preventScroll: true }); } catch (_) { /* ignore */ }
      }
    });
  };

  const openModal = () => {
    modal.hidden = false;
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('overflow-hidden');
    if (window.lucide) window.lucide.createIcons();
  };
  const close = () => {
    modal.hidden = true;
    modal.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('overflow-hidden');
    activeField = null;
    onConfirm = null;
    selected.clear();
    activeDetailId = null;
    showDetails(null);
  };

  const setNav = (key) => {
    modal.querySelectorAll('[data-media-nav]').forEach((btn) => {
      btn.classList.toggle('is-active', btn.dataset.mediaNav === key);
    });
    const isUrl = key === 'url';
    modal.querySelector('[data-media-pane="library"]').hidden = isUrl;
    modal.querySelector('[data-media-pane="url"]').hidden = !isUrl;
    if (key === 'gallery') {
      mode = 'multiple';
      max = null;
      titleEl.textContent = 'Create Gallery';
      if (helpEl) helpEl.textContent = 'Select multiple images for a gallery. Upload new files or import from URL anytime.';
      confirmBtn.textContent = 'Create gallery';
      setTab('library');
    } else if (key === 'featured') {
      mode = 'single';
      max = 1;
      if (selected.size > 1) {
        const first = [...selected.values()][0];
        selected.clear();
        if (first) selected.set(first.id, first);
      }
      titleEl.textContent = 'Set Featured Image';
      if (helpEl) helpEl.textContent = 'Choose one featured image. Edit alt text for accessibility before inserting.';
      confirmBtn.textContent = 'Set featured';
      setTab('library');
    } else if (key === 'url') {
      titleEl.textContent = 'Insert from URL';
      if (helpEl) helpEl.textContent = 'Paste an image URL to download it into the Media library.';
      confirmBtn.textContent = 'Insert';
    } else {
      titleEl.textContent = 'Insert Media';
      if (helpEl) {
        helpEl.textContent = mode === 'single'
          ? 'Choose one image from the library, upload from your computer, or import from URL.'
          : 'Choose images from the library, upload from your computer, or import from URL.';
      }
      confirmBtn.textContent = 'Insert';
      setTab('library');
    }
    updateCount();
    paintGrid();
  };

  const setTab = (tab) => {
    modal.querySelectorAll('[data-media-tab]').forEach((btn) => {
      btn.classList.toggle('is-active', btn.dataset.mediaTab === tab);
    });
    modal.querySelector('[data-media-view="upload"]').hidden = tab !== 'upload';
    modal.querySelector('[data-media-view="library"]').hidden = tab !== 'library';
    if (tab === 'library') load(true);
  };

  const setFieldSelection = (field, items) => {
    const wrap = field.querySelector('[data-media-selected]');
    const name = field.dataset.name;
    const fieldMode = field.dataset.mode;
    wrap.innerHTML = '';
    if (!items.length) {
      wrap.innerHTML = `<div class="admin-media-empty" data-media-empty><span>No image selected — open Media to choose from the library, upload, or insert from URL.</span></div>`;
      return;
    }
    items.forEach((item) => {
      const el = document.createElement('div');
      el.className = 'admin-media-chip';
      el.dataset.mediaChip = '';
      el.dataset.id = String(item.id);
      const thumb = item.thumb || item.url || '';
      el.innerHTML = `
        <div class="admin-media-chip-thumb" style="background-image:url('${esc(thumb)}')"></div>
        <div class="min-w-0 flex-1">
          <div class="truncate text-xs font-medium text-[#202223]">${esc(item.name || ('Asset #' + item.id))}</div>
          <div class="text-[11px] text-[#8c9196]">#${item.id}${item.alt_text ? ' · ' + esc(item.alt_text) : ''}</div>
        </div>
        <button type="button" class="admin-media-chip-remove" data-media-remove aria-label="Remove">&times;</button>
        <input type="hidden" name="${fieldMode === 'single' ? name : name + '[]'}" value="${item.id}">
      `;
      wrap.appendChild(el);
    });
    field.dispatchEvent(new CustomEvent('media:changed', { bubbles: true, detail: { items } }));
  };

  const updateCount = () => {
    countEl.textContent = String(selected.size);
    clearBtn.hidden = selected.size === 0;
    selectionThumbs.innerHTML = '';
    [...selected.values()].slice(0, 8).forEach((item) => {
      const thumb = document.createElement('span');
      thumb.className = 'admin-media-selection-thumb';
      const src = assetThumb(item);
      if (src) thumb.style.backgroundImage = `url("${cssUrl(src)}")`;
      selectionThumbs.appendChild(thumb);
    });
  };

  const showDetails = (item, { scroll = true } = {}) => {
    const empty = modal.querySelector('[data-media-details-empty]');
    const form = modal.querySelector('[data-media-details-form]');
    const thumbWrap = modal.querySelector('[data-detail-thumb]');
    const thumbImg = modal.querySelector('[data-detail-thumb-img]');
    if (!item) {
      activeDetailId = null;
      empty.hidden = false;
      form.hidden = true;
      if (thumbImg) {
        thumbImg.hidden = true;
        thumbImg.removeAttribute('src');
      }
      if (thumbWrap) thumbWrap.style.backgroundImage = '';
      return;
    }
    activeDetailId = item.id;
    empty.hidden = true;
    form.hidden = false;
    const src = assetThumb(item);
    if (thumbImg && src) {
      thumbImg.hidden = false;
      thumbImg.alt = item.alt_text || item.name || '';
      thumbImg.src = src;
      if (thumbWrap) thumbWrap.style.backgroundImage = '';
    } else if (thumbWrap) {
      if (thumbImg) thumbImg.hidden = true;
      thumbWrap.style.backgroundImage = src ? `url("${cssUrl(src)}")` : '';
    }
    modal.querySelector('[data-detail-filename]').textContent = item.original_name || item.name || ('#' + item.id);
    const bits = [item.human_size || '', item.dimensions || '', item.mime || ''].filter(Boolean);
    modal.querySelector('[data-detail-meta]').textContent = bits.join(' · ');
    modal.querySelector('[data-detail-edit-link]').href = item.url || '#';
    modal.querySelector('[data-detail-title]').value = item.title || item.name || '';
    modal.querySelector('[data-detail-alt]').value = item.alt_text || '';
    modal.querySelector('[data-detail-caption]').value = item.caption || '';
    modal.querySelector('[data-detail-description]').value = item.description || '';
    if (scroll) focusDetails();
  };

  const toggleSelect = (item) => {
    if (mode === 'single') {
      selected.clear();
      selected.set(item.id, item);
      showDetails(item);
    } else if (selected.has(item.id)) {
      selected.delete(item.id);
      const next = [...selected.values()].at(-1) || null;
      showDetails(next);
    } else {
      if (max && selected.size >= max) {
        status.textContent = `Maximum ${max} images.`;
        return;
      }
      selected.set(item.id, item);
      showDetails(item);
    }
    paintGrid();
    updateCount();
  };

  const paintGrid = () => {
    grid.innerHTML = '';
    if (!libraryItems.length) {
      grid.innerHTML = `<div class="admin-media-grid-empty">No media yet. Switch to Upload Files or Insert from URL.</div>`;
      return;
    }
    libraryItems.forEach((item) => {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'admin-media-tile' + (selected.has(item.id) ? ' is-selected' : '');
      btn.dataset.id = String(item.id);
      btn.title = item.name || ('#' + item.id);
      const thumb = assetThumb(item);
      btn.innerHTML = `
        <span class="admin-media-tile-thumb">${thumb ? `<img src="${esc(thumb)}" alt="">` : ''}</span>
        <span class="admin-media-tile-name">${esc(item.name || ('#' + item.id))}</span>
        <span class="admin-media-tile-check">✓</span>
      `;
      btn.addEventListener('click', () => toggleSelect(item));
      grid.appendChild(btn);
    });
  };

  const load = async (reset = false) => {
    if (reset) {
      page = 1;
      libraryItems = [];
    }
    status.textContent = 'Loading library…';
    try {
      const url = new URL(pickerUrl, window.location.origin);
      const type = typeFilter?.value || 'image';
      if (type === 'image' || type === 'pdf' || type === 'all') {
        url.searchParams.set('type', type === 'all' ? '' : type);
        url.searchParams.set('images_only', type === 'image' ? '1' : '0');
      } else {
        url.searchParams.set('images_only', '1');
      }
      url.searchParams.set('per_page', '36');
      url.searchParams.set('page', String(page));
      const q = searchInput.value.trim();
      if (q) url.searchParams.set('q', q);
      const res = await fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } });
      if (!res.ok) throw new Error('Failed to load media');
      const json = await res.json();
      const rows = json.data || [];
      libraryItems = reset ? rows : libraryItems.concat(rows);
      lastPage = json.meta?.last_page || 1;
      status.textContent = `${json.meta?.total ?? 0} items in library`;
      loadMoreBtn.hidden = page >= lastPage;
      paintGrid();
      updateCount();
      if (activeDetailId) {
        const found = libraryItems.find((i) => i.id === activeDetailId) || selected.get(activeDetailId);
        if (found) showDetails(found);
      }
    } catch (e) {
      status.textContent = e.message || 'Could not load media gallery.';
      grid.innerHTML = '';
    }
  };

  const renderLocalUploadPreview = (file, objectUrl) => {
    if (!uploadPreviews) return null;
    uploadPreviews.hidden = false;
    const card = document.createElement('div');
    card.className = 'admin-media-upload-preview is-uploading';
    if (objectUrl && String(file.type || '').startsWith('image/')) {
      card.innerHTML = `<img src="${esc(objectUrl)}" alt=""><span class="admin-media-upload-preview-label">${esc(file.name)}</span>`;
    } else {
      card.style.background = '#e3e5e7';
      card.innerHTML = `<span class="admin-media-upload-preview-label">${esc(file.name)}</span>`;
    }
    uploadPreviews.appendChild(card);
    return card;
  };

  const uploadFiles = async (files) => {
    const list = [...files];
    if (!list.length || !uploadUrl) return;
    if (uploadPreviews) uploadPreviews.innerHTML = '';
    status.textContent = `Uploading ${list.length} file(s)…`;
    let lastAsset = null;
    for (const file of list) {
      const objectUrl = String(file.type || '').startsWith('image/') ? URL.createObjectURL(file) : '';
      const previewCard = renderLocalUploadPreview(file, objectUrl);
      const body = new FormData();
      body.append('file', file);
      body.append('_token', csrf);
      const res = await fetch(uploadUrl, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf },
        body,
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        status.textContent = err.message || 'Upload failed.';
        previewCard?.classList.remove('is-uploading');
        if (objectUrl) URL.revokeObjectURL(objectUrl);
        return;
      }
      const json = await res.json();
      if (json.asset) {
        lastAsset = json.asset;
        if (mode === 'single') selected.clear();
        selected.set(json.asset.id, json.asset);
        if (previewCard) {
          previewCard.classList.remove('is-uploading');
          const src = assetThumb(json.asset) || objectUrl;
          if (src && String(json.asset.mime || file.type || '').startsWith('image/')) {
            previewCard.innerHTML = `<img src="${esc(src)}" alt=""><span class="admin-media-upload-preview-label">${esc(json.asset.name || file.name)}</span>`;
          }
        }
      }
      if (objectUrl) URL.revokeObjectURL(objectUrl);
    }
    setTab('library');
    await load(true);
    if (lastAsset) {
      selected.set(lastAsset.id, lastAsset);
      showDetails(lastAsset);
      updateCount();
      paintGrid();
    }
    status.textContent = 'Upload complete — review details on the right, then Insert.';
  };

  const openForField = (field) => {
    activeField = field;
    onConfirm = null;
    pickerUrl = field.dataset.pickerUrl || modal.dataset.defaultPickerUrl;
    uploadUrl = field.dataset.uploadUrl || modal.dataset.defaultUploadUrl;
    importUrl = field.dataset.importUrl || modal.dataset.defaultImportUrl;
    mode = field.dataset.mode || 'multiple';
    max = field.dataset.max ? Number(field.dataset.max) : null;
    selected = new Map();
    field.querySelectorAll('[data-media-chip]').forEach((chip) => {
      selected.set(Number(chip.dataset.id), {
        id: Number(chip.dataset.id),
        name: chip.querySelector('.truncate')?.textContent,
        thumb: chip.querySelector('.admin-media-chip-thumb')?.style.backgroundImage?.replace(/^url\(["']?|["']?\)$/g, ''),
      });
    });
    setNav(mode === 'single' ? 'featured' : 'insert');
    openModal();
    setTab('library');
  };

  const openProgrammatic = (opts = {}) => {
    activeField = null;
    onConfirm = typeof opts.onConfirm === 'function' ? opts.onConfirm : null;
    pickerUrl = opts.pickerUrl || modal.dataset.defaultPickerUrl;
    uploadUrl = opts.uploadUrl || modal.dataset.defaultUploadUrl;
    importUrl = opts.importUrl || modal.dataset.defaultImportUrl;
    mode = opts.mode || 'multiple';
    max = opts.max ?? null;
    selected = new Map();
    (opts.selected || []).forEach((item) => selected.set(item.id, item));
    setNav(opts.nav || (mode === 'single' ? 'featured' : 'insert'));
    if (opts.title) titleEl.textContent = opts.title;
    openModal();
    setTab(opts.tab || 'library');
  };

  const bindField = (field) => {
    if (boundFields.has(field)) return;
    boundFields.add(field);
  };

  document.addEventListener('click', (e) => {
    const openBtn = e.target.closest('[data-media-open]');
    if (openBtn) {
      const field = openBtn.closest('[data-media-field]');
      if (!field) return;
      e.preventDefault();
      openForField(field);
      return;
    }
    const remove = e.target.closest('[data-media-remove]');
    if (remove) {
      const field = remove.closest('[data-media-field]');
      if (!field) return;
      e.preventDefault();
      remove.closest('[data-media-chip]')?.remove();
      if (!field.querySelector('[data-media-chip]')) setFieldSelection(field, []);
    }
  });

  document.querySelectorAll('[data-media-field]').forEach(bindField);

  modal.querySelectorAll('[data-media-close]').forEach((el) => el.addEventListener('click', close));
  modal.querySelectorAll('[data-media-nav]').forEach((btn) => {
    btn.addEventListener('click', () => setNav(btn.dataset.mediaNav));
  });
  modal.querySelectorAll('[data-media-tab]').forEach((btn) => {
    btn.addEventListener('click', () => setTab(btn.dataset.mediaTab));
  });

  confirmBtn.addEventListener('click', () => {
    const items = [...selected.values()];
    if (activeField) {
      setFieldSelection(activeField, items);
      close();
      return;
    }
    if (onConfirm) {
      onConfirm(items);
      close();
      return;
    }
    close();
  });

  clearBtn.addEventListener('click', () => {
    selected.clear();
    showDetails(null);
    paintGrid();
    updateCount();
  });

  searchInput.addEventListener('input', () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => load(true), 250);
  });
  typeFilter?.addEventListener('change', () => load(true));
  loadMoreBtn.addEventListener('click', () => {
    if (page < lastPage) {
      page += 1;
      load(false);
    }
  });

  uploadInput.addEventListener('change', () => {
    uploadFiles(uploadInput.files || []);
    uploadInput.value = '';
  });

  const dropzone = modal.querySelector('[data-media-dropzone]');
  ['dragenter', 'dragover'].forEach((evt) => {
    dropzone.addEventListener(evt, (e) => {
      e.preventDefault();
      dropzone.classList.add('is-dragover');
    });
  });
  ['dragleave', 'drop'].forEach((evt) => {
    dropzone.addEventListener(evt, (e) => {
      e.preventDefault();
      dropzone.classList.remove('is-dragover');
    });
  });
  dropzone.addEventListener('drop', (e) => {
    uploadFiles(e.dataTransfer?.files || []);
  });

  modal.querySelector('[data-detail-save]').addEventListener('click', async () => {
    if (!activeDetailId) return;
    const template = modal.dataset.updateUrlTemplate;
    const url = template.replace('__ID__', String(activeDetailId));
    const payload = {
      title: modal.querySelector('[data-detail-title]').value,
      alt_text: modal.querySelector('[data-detail-alt]').value,
      caption: modal.querySelector('[data-detail-caption]').value,
      description: modal.querySelector('[data-detail-description]').value,
    };
    const res = await fetch(url, {
      method: 'PATCH',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': csrf,
      },
      body: JSON.stringify(payload),
    });
    if (!res.ok) {
      status.textContent = 'Could not save details.';
      return;
    }
    const json = await res.json();
    if (json.asset) {
      const idx = libraryItems.findIndex((i) => i.id === json.asset.id);
      if (idx >= 0) libraryItems[idx] = json.asset;
      if (selected.has(json.asset.id)) selected.set(json.asset.id, json.asset);
      showDetails(json.asset);
      paintGrid();
      status.textContent = 'Details saved.';
    }
  });

  modal.querySelector('[data-detail-delete]').addEventListener('click', async () => {
    if (!activeDetailId || !confirm('Delete this media permanently?')) return;
    const url = modal.dataset.destroyUrlTemplate.replace('__ID__', String(activeDetailId));
    const res = await fetch(url, {
      method: 'DELETE',
      headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf },
    });
    if (!res.ok) {
      status.textContent = 'Delete failed.';
      return;
    }
    selected.delete(activeDetailId);
    libraryItems = libraryItems.filter((i) => i.id !== activeDetailId);
    showDetails(null);
    paintGrid();
    updateCount();
    status.textContent = 'Deleted.';
  });

  modal.querySelector('[data-url-import]').addEventListener('click', async () => {
    const urlStatus = modal.querySelector('[data-url-status]');
    const imageUrl = modal.querySelector('[data-url-input]').value.trim();
    if (!imageUrl) {
      urlStatus.textContent = 'Enter an image URL.';
      return;
    }
    urlStatus.textContent = 'Importing…';
    const res = await fetch(importUrl, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': csrf,
      },
      body: JSON.stringify({
        url: imageUrl,
        title: modal.querySelector('[data-url-title]').value || null,
        alt_text: modal.querySelector('[data-url-alt]').value || null,
      }),
    });
    const json = await res.json().catch(() => ({}));
    if (!res.ok) {
      urlStatus.textContent = json.message || 'Import failed.';
      return;
    }
    if (json.asset) {
      if (mode === 'single') selected.clear();
      selected.set(json.asset.id, json.asset);
      urlStatus.textContent = 'Imported — ready to insert.';
      setNav(mode === 'single' ? 'featured' : 'insert');
      setTab('library');
      showDetails(json.asset);
      updateCount();
    }
  });

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !modal.hidden) close();
  });

  window.__traMediaGallery = { bindField, setFieldSelection, open: openProgrammatic, close };
})();
</script>