@props([
    'name',
    'label' => null,
    'current' => '',
    'hint' => null,
    'previewClass' => 'w-full aspect-video',
])
@php $uid = uniqid('mif_'); @endphp
{{--
    Bespoke CMS image field with a Media Library picker. Renders the existing
    <input type=file> (direct upload, unchanged) plus a "Choose from Library"
    button that pops the shared <x-media-picker-modal> (which must be included
    once on the same page). A pick sets a hidden "<name>_media_id"; the server
    (ResolvesImageField trait) resolves it to the Media path. Upload beats pick.
    The instance's field name + current URL travel via data-* (read in init()).
--}}
<div x-data="mediaImageField()"
     data-field="{{ $name }}"
     data-uid="{{ $uid }}"
     data-current="{{ $current ? \Illuminate\Support\Facades\Storage::url($current) : '' }}"
     @media-picked.window="applyPick($event.detail)">

    @if($label)
    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ $label }}</label>
    @endif

    <template x-if="preview">
        <img :src="preview" alt="" class="{{ $previewClass }} object-cover rounded-lg mb-2 border-[0.5px] border-gray-200">
    </template>

    <div class="flex items-center gap-2 flex-wrap">
        <input type="file" name="{{ $name }}" accept="image/*" x-ref="file" @change="onFile($event)"
               class="block text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100">
        <button type="button" @click="$dispatch('media-pick-open', { field: '{{ $name }}', uid: '{{ $uid }}' })"
                class="inline-flex items-center gap-1 px-2.5 py-1 text-xs rounded-lg border-[0.5px] border-gray-200 hover:bg-gray-50 text-teal-700 font-medium transition-colors whitespace-nowrap">
            🖼 Choose from Library
        </button>
        <button type="button" x-show="picked" x-cloak @click="clearPick()"
                class="text-xs text-gray-400 hover:text-red-500 transition-colors">Undo</button>
    </div>

    <input type="hidden" name="{{ $name }}_media_id" x-ref="mid" value="">
    @if($hint)<p class="text-xs text-gray-400 mt-1">{{ $hint }}</p>@endif
</div>