@props([
    'name' => 'media_asset_ids',
    'mode' => 'multiple', // single|multiple
    'label' => 'Media',
    'help' => null,
    'selected' => [], // array of picker arrays or MediaAsset models
    'max' => null,
])
@php
  $selectedItems = collect($selected)->map(function ($item) {
      if (is_array($item)) {
          return $item;
      }
      if ($item instanceof \App\Models\MediaAsset) {
          return $item->loadMissing('variants')->toPickerArray();
      }

      return null;
  })->filter()->values();
@endphp

<div
  class="admin-media-field"
  data-media-field
  data-mode="{{ $mode }}"
  data-name="{{ $name }}"
  data-max="{{ $max }}"
  data-picker-url="{{ route('admin.media.picker') }}"
  data-upload-url="{{ route('admin.media.store') }}"
  data-import-url="{{ route('admin.media.import-url') }}"
  data-update-url-template="{{ url('/admin/media') }}/__ID__"
>
  <div class="flex flex-wrap items-end justify-between gap-3">
    <div>
      <div class="admin-label">{{ $label }}</div>
      @if($help)
        <p class="admin-help mt-0.5">{{ $help }}</p>
      @endif
    </div>
    <button type="button" class="admin-btn admin-btn-primary" data-media-open>
      <i data-lucide="images" class="h-3.5 w-3.5"></i>
      {{ $mode === 'single' ? 'Select image' : 'Select images' }}
    </button>
  </div>

  <div class="admin-media-selected mt-3" data-media-selected>
    @forelse($selectedItems as $item)
      <div class="admin-media-chip" data-media-chip data-id="{{ $item['id'] }}">
        <div class="admin-media-chip-thumb" style="background-image:url('{{ $item['thumb'] ?? $item['url'] }}')"></div>
        <div class="min-w-0 flex-1">
          <div class="truncate text-xs font-medium text-[#202223]">{{ $item['name'] }}</div>
          <div class="text-[11px] text-[#8c9196]">#{{ $item['id'] }}@if(!empty($item['alt_text'])) · {{ $item['alt_text'] }}@endif</div>
        </div>
        <button type="button" class="admin-media-chip-remove" data-media-remove aria-label="Remove">&times;</button>
        @if($mode === 'single')
          <input type="hidden" name="{{ $name }}" value="{{ $item['id'] }}">
        @else
          <input type="hidden" name="{{ $name }}[]" value="{{ $item['id'] }}">
        @endif
      </div>
    @empty
      <div class="admin-media-empty" data-media-empty>
        <i data-lucide="image-off" class="h-5 w-5 text-[#8c9196]"></i>
        <span>No image selected — open Media to choose from the library, upload, or insert from URL.</span>
      </div>
    @endforelse
  </div>
</div>