{{--
    Reusable media picker surface (task 7.15).
    Browse the shared library, filter, multi-select and confirm.
    Media loads incrementally as the user scrolls (infinite scroll), so the
    whole library is reachable inside the modal.
--}}
<div class="flex flex-col gap-4">
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <input
            type="search"
            wire:model.live.debounce.400ms="search"
            placeholder="Buscar por nombre, título o alt…"
            class="w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-brand-700 transition-colors duration-fast ease-out-soft focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
        />

        <select
            wire:model.live="mime"
            class="w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-brand-700 transition-colors duration-fast ease-out-soft focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
        >
            <option value="">Todos los tipos</option>
            <option value="image/">Imágenes</option>
            <option value="video/">Videos</option>
            <option value="application/pdf">PDF</option>
        </select>

        <select
            wire:model.live="collection"
            class="w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-brand-700 transition-colors duration-fast ease-out-soft focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
        >
            <option value="">Todas las colecciones</option>
            <option value="gallery">Galería</option>
            <option value="cover">Portada</option>
            <option value="og">Open Graph</option>
        </select>
    </div>

    <p class="text-xs text-brand-400">
        Mostrando {{ $records->count() }} de {{ $records->total() }} archivo(s).
    </p>

    <div data-picker-scroll class="grid max-h-96 grid-cols-2 gap-3 overflow-y-auto sm:grid-cols-3 lg:grid-cols-4">
        @forelse ($records as $media)
            <button
                type="button"
                wire:key="picker-media-{{ $media->id }}"
                wire:click="toggle({{ $media->id }})"
                class="group overflow-hidden rounded-lg border text-left transition-colors duration-fast ease-out-soft {{ $this->isSelected($media->id) ? 'border-brand-500 ring-2 ring-brand-500' : 'border-brand-200 hover:border-brand-400' }}"
            >
                @if ($media->isImage())
                    <img
                        src="{{ $media->thumb_url }}"
                        alt="{{ $media->alt_text ?? $media->filename }}"
                        loading="lazy"
                        class="h-28 w-full bg-brand-50 object-cover"
                    />
                @else
                    <span class="flex h-28 w-full items-center justify-center bg-brand-50 text-brand-400">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-10 w-10">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5A3.375 3.375 0 0 0 10.125 2.25H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                        </svg>
                    </span>
                @endif
                <span class="block truncate px-2 py-1 text-xs text-brand-700">
                    {{ $media->filename ?? $media->path }}
                </span>
            </button>
        @empty
            <p class="col-span-full py-8 text-center text-sm text-brand-400">
                No se encontraron archivos.
            </p>
        @endforelse

        @if ($records->hasMorePages())
            <div
                x-data="{
                    watch() {
                        const root = this.$el.closest('[data-picker-scroll]');
                        const observer = new IntersectionObserver((entries) => {
                            if (entries.some((entry) => entry.isIntersecting)) {
                                $wire.loadMore();
                            }
                        }, { root: root ?? null, rootMargin: '160px 0px' });
                        observer.observe(this.$el);
                    },
                }"
                x-init="watch()"
                wire:key="picker-more-{{ $records->count() }}"
                class="col-span-full flex items-center justify-center py-3"
                aria-hidden="true"
            >
                <span class="text-xs text-brand-400">Cargando más…</span>
            </div>
        @endif
    </div>

    <div class="flex items-center justify-between border-t border-brand-200 pt-3">
        <span class="text-sm text-brand-400">{{ count($selected) }} seleccionado(s)</span>

        <button
            type="button"
            wire:click="confirm"
            class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition-colors duration-base ease-out-soft hover:bg-brand-600"
        >
            Usar seleccionados
        </button>
    </div>
</div>