@extends('layouts.admin')

@section('title', 'Media Library')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Media Library</h1>
            <p class="text-sm text-gray-500 mt-1">All images uploaded to Local Pulse.</p>
        </div>
        <form method="GET" action="{{ route('admin.media.index') }}" class="flex items-center gap-2">
            <input type="text" name="q" value="{{ $q }}" placeholder="Search filename..." class="border border-slate-300 rounded-md px-3 py-2 text-sm w-64">
            <button type="submit" class="bg-slate-800 hover:bg-slate-900 text-white px-4 py-2 rounded-md text-sm">Search</button>
        </form>
    </div>

    @if($items->isEmpty())
        <div class="bg-white border border-slate-200 rounded-xl p-12 text-center text-sm text-slate-500">
            No media files yet. Upload one from the article editor or a featured-image dropzone.
        </div>
    @else
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            @foreach($items as $m)
                <div class="bg-white border border-slate-200 rounded-lg overflow-hidden group">
                    <div class="aspect-square bg-slate-100 overflow-hidden">
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($m->path) }}" alt="{{ $m->alt_text ?? $m->filename }}" class="w-full h-full object-cover group-hover:scale-105 transition">
                    </div>
                    <div class="p-2">
                        <div class="text-xs font-medium text-slate-700 truncate" title="{{ $m->filename }}">{{ $m->filename }}</div>
                        <div class="text-[10px] text-slate-400 mt-0.5">{{ strtoupper(pathinfo($m->filename, PATHINFO_EXTENSION)) }} &middot; {{ number_format(($m->size ?? 0) / 1024, 1) }} KB</div>
                        <div class="text-[10px] text-slate-400">{{ $m->created_at?->diffForHumans() ?? '—' }}</div>
                        <button type="button"
                                data-delete-url="{{ route('admin.media.destroy', $m) }}"
                                data-name="{{ $m->filename }}"
                                onclick="deleteMedia(this)"
                                class="mt-2 w-full text-xs text-rose-600 hover:text-rose-700 font-semibold border border-rose-200 hover:bg-rose-50 rounded px-2 py-1">Delete</button>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-6">{{ $items->links() }}</div>
    @endif
@endsection

@once
    @push('scripts')
        <script>
            const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            async function deleteMedia(btn) {
                if (!confirm('Delete ' + btn.dataset.name + '? This cannot be undone.')) return;
                const r = await fetch(btn.dataset.deleteUrl, {
                    method: 'POST',
                    headers: {'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'Content-Type': 'application/json'},
                    body: JSON.stringify({_method: 'DELETE'}),
                });
                if (r.ok) {
                    btn.closest('.bg-white').remove();
                } else {
                    alert('Delete failed.');
                }
            }
        </script>
    @endpush
@endonce