{{-- 管理画面共通: 画像をアップロード／メディア一覧から選択（ファネルエディタと同系） --}}
@push('styles')
<style>
.monaka-upload-modal { display: none; position: fixed; inset: 0; z-index: 12000; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; }
.monaka-upload-modal.open { display: flex; }
.monaka-upload-modal-content { background: #fff; border-radius: 12px; width: 600px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.monaka-upload-modal-header { padding: 16px 20px; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: space-between; }
.monaka-upload-modal-header h5 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.monaka-upload-area { border: 2px dashed #d0d0d0; border-radius: 8px; padding: 32px 20px; text-align: center; cursor: pointer; transition: all 0.2s; margin: 16px; }
.monaka-upload-area:hover, .monaka-upload-area.drag-over { border-color: #6c5ce7; background: #f5f0ff; }
.monaka-upload-area i { font-size: 2rem; color: #ccc; display: block; margin-bottom: 8px; }
.monaka-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 16px; overflow-y: auto; max-height: 300px; }
.monaka-media-item { aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; position: relative; }
.monaka-media-item:hover { border-color: #6c5ce7; }
.monaka-media-item.selected { border-color: #6c5ce7; }
.monaka-media-item img { width: 100%; height: 100%; object-fit: cover; }
.monaka-media-item .monaka-media-check { display: none; position: absolute; top: 4px; right: 4px; background: #6c5ce7; color: #fff; border-radius: 50%; width: 20px; height: 20px; align-items: center; justify-content: center; font-size: 0.7rem; }
.monaka-media-item.selected .monaka-media-check { display: flex; }
</style>
@endpush

<div class="monaka-upload-modal" id="monaka-image-picker-modal" aria-hidden="true">
  <div class="monaka-upload-modal-content" role="dialog" aria-modal="true" aria-labelledby="monaka-image-picker-title">
    <div class="monaka-upload-modal-header">
      <h5 id="monaka-image-picker-title"><i class="bi bi-image me-2"></i>画像を選択</h5>
      <button type="button" class="btn-close" id="monaka-image-picker-close" aria-label="閉じる"></button>
    </div>
    <div class="monaka-upload-area" id="monaka-image-picker-drop">
      <i class="bi bi-cloud-upload"></i>
      <p class="mb-0 small text-muted">クリックまたはドラッグ＆ドロップで画像をアップロード</p>
      <p class="mb-0 small text-muted" style="font-size:0.75rem;">JPEG / PNG / GIF / WebP など</p>
    </div>
    <input type="file" id="monaka-image-picker-file" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/heic,image/heif,image/avif,image/bmp" class="d-none">
    <div class="px-3 pb-2 small text-muted">アップロード済み画像</div>
    <div class="monaka-media-grid" id="monaka-image-picker-grid">
      <div class="text-center text-muted p-3 small" style="grid-column:1/-1;">読み込み中...</div>
    </div>
    <div class="p-3 border-top d-flex gap-2 justify-content-end">
      <button type="button" class="btn btn-secondary btn-sm" id="monaka-image-picker-cancel">キャンセル</button>
      <button type="button" class="btn btn-primary btn-sm" id="monaka-image-picker-confirm"><i class="bi bi-check2 me-1"></i>選択</button>
    </div>
  </div>
</div>

@push('scripts')
<script>
(function () {
  const listUrl = @json(route('media.api.list'));
  const uploadUrl = @json(route('media.api.upload'));
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
  const modal = document.getElementById('monaka-image-picker-modal');
  const grid = document.getElementById('monaka-image-picker-grid');
  const fileInput = document.getElementById('monaka-image-picker-file');
  const drop = document.getElementById('monaka-image-picker-drop');
  let targetInput = null;
  let onSelectCallback = null;
  let items = [];
  let selectedUrl = null;
  let selectedIdx = -1;

  function escapeHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function toast(msg, type) {
    if (typeof window.showAppToast === 'function') {
      window.showAppToast(msg, type);
      return;
    }
    alert(msg);
  }

  function closePicker() {
    modal.classList.remove('open');
    modal.setAttribute('aria-hidden', 'true');
    targetInput = null;
    onSelectCallback = null;
    selectedUrl = null;
    selectedIdx = -1;
  }

  function applySelection(url) {
    if (targetInput) {
      targetInput.value = url;
      targetInput.dispatchEvent(new Event('input', { bubbles: true }));
      targetInput.dispatchEvent(new Event('change', { bubbles: true }));
    }
    if (typeof onSelectCallback === 'function') {
      onSelectCallback(url);
    }
  }

  function renderGrid() {
    const images = items.filter(i => i.type === 'image');
    if (!images.length) {
      grid.innerHTML = '<div class="text-center text-muted p-3 small" style="grid-column:1/-1;">アップロード済みの画像がありません</div>';
      return;
    }
    grid.innerHTML = images.map((item, idx) => `
      <div class="monaka-media-item" data-idx="${idx}" title="${escapeHtml(item.name || '')}">
        <img src="${escapeHtml(item.url)}" alt="" loading="lazy">
        <div class="monaka-media-check"><i class="bi bi-check"></i></div>
      </div>`).join('');
    grid.querySelectorAll('.monaka-media-item').forEach(el => {
      el.addEventListener('click', () => {
        grid.querySelectorAll('.monaka-media-item').forEach(n => n.classList.remove('selected'));
        el.classList.add('selected');
        selectedIdx = parseInt(el.dataset.idx, 10);
        selectedUrl = images[selectedIdx]?.url || null;
      });
    });
  }

  async function loadList() {
    grid.innerHTML = '<div class="text-center text-muted p-3 small" style="grid-column:1/-1;">読み込み中...</div>';
    try {
      const res = await fetch(listUrl, {
        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        credentials: 'same-origin',
      });
      const data = await res.json();
      if (!res.ok || !Array.isArray(data)) {
        grid.innerHTML = '<div class="text-center text-muted p-3 small" style="grid-column:1/-1;">一覧を読み込めませんでした</div>';
        return;
      }
      items = data;
      renderGrid();
    } catch (e) {
      grid.innerHTML = '<div class="text-center text-muted p-3 small" style="grid-column:1/-1;">読み込みに失敗しました</div>';
    }
  }

  async function uploadFile(file) {
    if (!file) return;
    const formData = new FormData();
    formData.append('file', file);
    formData.append('media_type', 'image');
    formData.append('_token', csrfToken);
    const btn = document.getElementById('monaka-image-picker-confirm');
    if (btn) { btn.disabled = true; }
    try {
      const res = await fetch(uploadUrl, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrfToken },
        credentials: 'same-origin',
        body: formData,
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success && data.url) {
        toast('アップロードしました', 'success');
        await loadList();
        selectedUrl = data.url;
        const images = items.filter(i => i.type === 'image');
        const idx = images.findIndex(i => String(i.url) === String(data.url));
        if (idx >= 0) {
          const nodes = grid.querySelectorAll('.monaka-media-item');
          if (nodes[idx]) nodes[idx].click();
        }
      } else {
        toast(data.message || 'アップロードに失敗しました', 'error');
      }
    } catch (e) {
      toast('アップロードに失敗しました', 'error');
    } finally {
      if (btn) btn.disabled = false;
    }
  }

  window.MonakaImagePicker = {
    open(options) {
      options = options || {};
      targetInput = options.input || (options.inputId ? document.getElementById(options.inputId) : null);
      onSelectCallback = options.onSelect || null;
      selectedUrl = null;
      selectedIdx = -1;
      modal.classList.add('open');
      modal.setAttribute('aria-hidden', 'false');
      loadList();
    },
    close: closePicker,
  };

  document.getElementById('monaka-image-picker-close')?.addEventListener('click', closePicker);
  document.getElementById('monaka-image-picker-cancel')?.addEventListener('click', closePicker);
  modal?.addEventListener('click', e => { if (e.target === modal) closePicker(); });
  document.getElementById('monaka-image-picker-confirm')?.addEventListener('click', () => {
    if (!selectedUrl) { toast('画像を選択してください', 'error'); return; }
    applySelection(selectedUrl);
    closePicker();
  });
  drop?.addEventListener('click', () => fileInput?.click());
  fileInput?.addEventListener('change', () => uploadFile(fileInput.files[0]));
  drop?.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('drag-over'); });
  drop?.addEventListener('dragleave', () => drop.classList.remove('drag-over'));
  drop?.addEventListener('drop', e => {
    e.preventDefault();
    drop.classList.remove('drag-over');
    const file = e.dataTransfer.files[0];
    if (file && file.type.startsWith('image/')) uploadFile(file);
    else toast('画像ファイルを選択してください', 'error');
  });
})();
</script>
@endpush