{{--
    Shared Media Library picker modal. Include ONCE per page that uses
    <x-media-image-field>. Opened via a "media-pick-open" window event carrying the
    target field name; on selection it fires a "media-picked" window event that the
    addressed field catches. This one <script> also defines mediaImageField() (used by
    the field component) so both are declared exactly once per page. All inline scripts
    run before Alpine's deferred DOMContentLoaded init, so definition order is safe.
--}}
<div x-data="mediaPickerModal()" @media-pick-open.window="openFor($event.detail)"
     x-show="open" x-cloak @keydown.escape.window="open = false"
     class="fixed inset-0 z-[60] flex items-center justify-center p-4" style="background: rgba(0,0,0,.5)">
    <div @click.outside="open = false" class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
        <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100">
            <h3 class="font-semibold text-gray-800 text-sm">Choose from Media Library</h3>
            <button type="button" @click="open = false" class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
        </div>
        <div class="p-4 overflow-y-auto">
            <template x-if="loaded && media.length === 0">
                <p class="text-center text-gray-400 text-sm py-8">No images in the library yet. Upload some in the
                    <a href="{{ route('media.index') }}" target="_blank" class="text-teal-600 underline">Media Library</a>.</p>
            </template>
            <div class="grid grid-cols-3 sm:grid-cols-4 gap-3">
                <template x-for="m in media" :key="m.id">
                    <button type="button" @click="pick(m)" :title="m.title || m.alt || 'Select'"
                            class="aspect-square rounded-lg overflow-hidden border-[0.5px] border-gray-200 hover:ring-2 hover:ring-teal-400 transition">
                        <img :src="m.url" :alt="m.alt" class="w-full h-full object-cover">
                    </button>
                </template>
            </div>
        </div>
    </div>
</div>

<script>
if (typeof window.mediaPickerModal === 'undefined') {
    window.mediaPickerModal = function () {
        return {
            open: false,
            field: null,
            uid: null,
            media: [],
            loaded: false,
            openFor(detail) {
                this.field = detail.field;
                this.uid = detail.uid;   // scope the pick to the ONE field that opened the modal
                this.open = true;
                if (!this.loaded) {
                    fetch('{{ route('media.list') }}', { headers: { 'Accept': 'application/json' } })
                        .then(function (r) { return r.json(); })
                        .then((d) => { this.media = d; this.loaded = true; })
                        .catch(() => { this.loaded = true; });
                }
            },
            pick(m) {
                window.dispatchEvent(new CustomEvent('media-picked', { detail: { field: this.field, uid: this.uid, id: m.id, url: m.url } }));
                this.open = false;
            },
        };
    };
}
if (typeof window.mediaImageField === 'undefined') {
    window.mediaImageField = function () {
        return {
            field: '',
            uid: '',
            preview: '',
            picked: false,
            init() {
                this.field = this.$el.dataset.field;
                this.uid = this.$el.dataset.uid;
                this.preview = this.$el.dataset.current || '';
            },
            onFile(e) {
                // A direct upload supersedes any pick.
                this.$refs.mid.value = '';
                this.picked = false;
                const f = e.target.files && e.target.files[0];
                this.preview = f ? URL.createObjectURL(f) : (this.$el.dataset.current || '');
            },
            applyPick(detail) {
                if (!detail || detail.uid !== this.uid) return; // only the field that opened the modal
                this.$refs.mid.value = detail.id;
                this.$refs.file.value = '';       // clear any staged upload (pick wins in the UI)
                this.preview = detail.url;
                this.picked = true;
                // Let any form-level unsaved-changes guard notice the change.
                this.$refs.mid.dispatchEvent(new Event('change', { bubbles: true }));
            },
            clearPick() {
                this.$refs.mid.value = '';
                this.picked = false;
                this.preview = this.$el.dataset.current || '';
                this.$refs.mid.dispatchEvent(new Event('change', { bubbles: true }));
            },
        };
    };
}
</script>