@php
  $inputName = $inputName ?? 'thumbnail_file';
  $mediaUrlInputName = $mediaUrlInputName ?? 'thumbnail_media_url';
  $inputId = $inputId ?? 'monaka-image-file';
  $previewId = $previewId ?? $inputId.'-preview';
  $pickBtnId = $inputId.'-pick-btn';
  $mediaBtnId = $inputId.'-media-btn';
  $removeCheckboxId = $removeCheckboxId ?? $inputId.'-remove';
  $removeInputName = $removeInputName ?? 'thumbnail_remove';
  $currentUrl = $currentUrl ?? null;
  $showRemove = $showRemove ?? false;
  $label = $label ?? '画像';
  $layout = $layout ?? 'inline';
  $previewWidth = (int) ($previewWidth ?? 120);
  $previewHeight = (int) ($previewHeight ?? 80);
  $isFeatured = $layout === 'featured';
  $previewHint = $previewHint ?? ($isFeatured ? 'コース一覧のカードと同じ比率（16:9）・同じ切り抜き（中央）でプレビューします。' : null);
@endphp
<div class="monaka-image-upload" data-monaka-image-upload
     data-file-input-name="{{ $inputName }}"
     data-media-input-name="{{ $mediaUrlInputName }}"
     data-preview-layout="{{ $isFeatured ? 'featured' : 'inline' }}">
  @if($label !== '')
    <label class="form-label fw-semibold">{{ $label }}</label>
  @endif
  @if($isFeatured && filled($previewHint))
    <p class="text-muted small mb-2">{{ $previewHint }}</p>
    <div class="bundle-course-thumb-wrap--preview-form mb-3">
    <div id="{{ $previewId }}" class="monaka-image-preview-featured bundle-course-thumb bundle-course-thumb--card-top rounded">
      @if($currentUrl)
        <img src="{{ $currentUrl }}" alt="" class="bundle-course-thumb__img monaka-image-preview-img">
      @else
        <div class="bundle-course-thumb__placeholder monaka-image-preview-empty" aria-hidden="true">
          <i class="bi bi-image"></i>
          <span class="small">画像なし</span>
        </div>
      @endif
    </div>
    </div>
    <div class="monaka-image-upload-controls">
  @else
    <div class="d-flex align-items-start gap-3 flex-wrap mb-2">
      <div id="{{ $previewId }}"
           class="flex-shrink-0 d-flex align-items-center justify-content-center overflow-hidden bg-white"
           style="width:{{ $previewWidth }}px;height:{{ $previewHeight }}px;border:1px dashed #ced4da;border-radius:8px;">
        @if($currentUrl)
          <img src="{{ $currentUrl }}" alt="" class="monaka-image-preview-img" style="max-width:100%;max-height:100%;object-fit:cover;">
        @else
          <span class="text-muted small text-center px-1 monaka-image-preview-empty">未設定</span>
        @endif
      </div>
      <div class="flex-grow-1" style="min-width:200px;">
  @endif
      <input type="file"
             name="{{ $inputName }}"
             id="{{ $inputId }}"
             class="d-none @error($inputName) is-invalid @enderror"
             accept=".png,.jpg,.jpeg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp">
      <input type="hidden" name="{{ $mediaUrlInputName }}" id="{{ $inputId }}-media-url" value="{{ old($mediaUrlInputName) }}">
      <div class="monaka-upload-area monaka-image-drop-zone py-3 px-2 mb-2" data-monaka-image-drop style="margin:0;">
        <i class="bi bi-cloud-upload"></i>
        <p class="mb-0 small text-muted">クリックまたはドラッグ＆ドロップ</p>
        <p class="mb-0 text-muted" style="font-size:0.72rem;">png / jpg / gif / webp、5MB以下</p>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        <button type="button" class="btn btn-sm btn-outline-secondary" id="{{ $pickBtnId }}">
          <i class="bi bi-upload me-1"></i>画像をアップロード
        </button>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="{{ $mediaBtnId }}">
          <i class="bi bi-images me-1"></i>メディアから選ぶ
        </button>
      </div>
      @error($inputName)
        <div class="invalid-feedback d-block">{{ $message }}</div>
      @enderror
      @if($showRemove && $currentUrl)
        <div class="form-check mt-2 mb-0">
          <input class="form-check-input" type="checkbox" name="{{ $removeInputName }}" value="1" id="{{ $removeCheckboxId }}" @checked(old($removeInputName))>
          <label class="form-check-label" for="{{ $removeCheckboxId }}">現在の画像を削除する（画像を選ばずに消す場合のみ）</label>
        </div>
      @endif
    @if($isFeatured)
    </div>
  @else
      </div>
    </div>
  @endif
</div>

@include('partials._bundle_course_thumbnail_styles')
@once
@push('scripts')
<script>
(function () {
  function setPreview(preview, url) {
    if (!preview) return;
    const isFeatured = preview.classList.contains('monaka-image-preview-featured');
    const safeUrl = url ? url.replace(/"/g, '&quot;') : '';
    if (url) {
      if (isFeatured) {
        preview.innerHTML = '<img src="' + safeUrl + '" alt="" class="bundle-course-thumb__img monaka-image-preview-img">';
      } else {
        preview.innerHTML = '<img src="' + safeUrl + '" alt="" class="monaka-image-preview-img" style="max-width:100%;max-height:100%;object-fit:cover;">';
      }
    } else if (isFeatured) {
      preview.innerHTML = '<div class="bundle-course-thumb__placeholder monaka-image-preview-empty" aria-hidden="true"><i class="bi bi-image"></i><span class="small">画像なし</span></div>';
    } else {
      preview.innerHTML = '<span class="text-muted small text-center px-1 monaka-image-preview-empty">未設定</span>';
    }
  }

  function initMonakaImageUpload(root) {
    if (!root || root.dataset.bound === '1') return;
    root.dataset.bound = '1';

    const fileName = root.dataset.fileInputName || 'thumbnail_file';
    const mediaName = root.dataset.mediaInputName || 'thumbnail_media_url';
    const fileInput = root.querySelector('input[type="file"][name="' + fileName + '"]');
    const mediaInput = root.querySelector('input[name="' + mediaName + '"]');
    const preview = root.querySelector('[id$="-preview"]');
    const drop = root.querySelector('[data-monaka-image-drop]');
    const pickBtn = root.querySelector('[id$="-pick-btn"]');
    const mediaBtn = root.querySelector('[id$="-media-btn"]');

    pickBtn?.addEventListener('click', function () { fileInput?.click(); });
    drop?.addEventListener('click', function () { fileInput?.click(); });

    fileInput?.addEventListener('change', function () {
      const file = fileInput.files && fileInput.files[0];
      if (!file) return;
      if (mediaInput) mediaInput.value = '';
      const reader = new FileReader();
      reader.onload = function () { setPreview(preview, reader.result); };
      reader.readAsDataURL(file);
      const removeCb = root.querySelector('input[type="checkbox"][name="thumbnail_remove"], input[type="checkbox"][name="logo_remove"]');
      if (removeCb) removeCb.checked = false;
    });

    drop?.addEventListener('dragover', function (e) {
      e.preventDefault();
      drop.classList.add('drag-over');
    });
    drop?.addEventListener('dragleave', function () {
      drop.classList.remove('drag-over');
    });
    drop?.addEventListener('drop', function (e) {
      e.preventDefault();
      drop.classList.remove('drag-over');
      const file = e.dataTransfer.files && e.dataTransfer.files[0];
      if (!file || !file.type.startsWith('image/')) return;
      const dt = new DataTransfer();
      dt.items.add(file);
      fileInput.files = dt.files;
      fileInput.dispatchEvent(new Event('change', { bubbles: true }));
    });

    mediaBtn?.addEventListener('click', function () {
      if (typeof window.MonakaImagePicker === 'undefined') {
        alert('メディア選択を読み込めませんでした。ページを再読み込みしてください。');
        return;
      }
      window.MonakaImagePicker.open({
        onSelect: function (url) {
          if (mediaInput) mediaInput.value = url;
          if (fileInput) fileInput.value = '';
          setPreview(preview, url);
          const removeCb = root.querySelector('input[type="checkbox"][name="thumbnail_remove"], input[type="checkbox"][name="logo_remove"]');
          if (removeCb) removeCb.checked = false;
        },
      });
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-monaka-image-upload]').forEach(initMonakaImageUpload);
  });
})();
</script>
@endpush
@endonce