@php $busy = 'openFolder,toggleFolder,gotoPage,previousPage,nextPage,save,delete,update,search'; @endphp

<div wire:loading.class="is-busy" wire:target="{{ $busy }}">
    @if ($error)
        <x-admin.panel pad>
            <div class="empty-state">
                <i class="fa-light fa-database" style="color:var(--coral);"></i>
                <div><div class="es-title">Media library unavailable</div><div class="sub">{{ $error }}</div></div>
                <button type="button" class="btn btn-navy btn-sm" wire:click="$refresh" style="margin-left:auto;"><i class="fa-light fa-rotate-right"></i> Retry</button>
            </div>
        </x-admin.panel>
    @else
    <div class="media-browser">
        {{-- Folder tree --}}
        <x-admin.panel pad class="media-tree">
            <x-admin.eyebrow icon="fa-light fa-folder-tree">Folders</x-admin.eyebrow>
            <div class="mt-1">
                <button type="button" class="mtree-row {{ $folder === '' ? 'on' : '' }}" wire:click="openFolder('')">
                    <span class="tw" style="visibility:hidden;"><i class="fa-light fa-chevron-right"></i></span>
                    <i class="fa-light fa-images"></i><span class="nm">Images</span>
                </button>
                @foreach ($tree as $node)
                    <div class="mtree-node" wire:key="tn-{{ $node['path'] }}" style="--d:{{ $node['depth'] }};">
                        <button type="button" class="mtree-row {{ $folder === $node['path'] ? 'on' : '' }}" wire:click="openFolder('{{ $node['path'] }}')">
                            <span class="tw" @if ($node['hasChildren']) wire:click.stop="toggleFolder('{{ $node['path'] }}')" role="button" @else style="visibility:hidden;" @endif>
                                <i class="fa-light {{ $node['open'] ? 'fa-chevron-down' : 'fa-chevron-right' }}"></i>
                            </span>
                            <i class="fa-light {{ $node['open'] ? 'fa-folder-open' : 'fa-folder' }}"></i>
                            <span class="nm">{{ $node['name'] }}</span>
                            @if ($node['path'] === 'county')<i class="fa-light fa-lock" title="CRM event maps (read-only)" style="margin-left:auto;font-size:.7rem;color:var(--ink-soft);"></i>@endif
                        </button>
                    </div>
                @endforeach
            </div>
        </x-admin.panel>

        {{-- Browse pane --}}
        <div style="min-width:0;display:flex;flex-direction:column;gap:1rem;">
            {{-- Breadcrumb + search --}}
            <x-admin.toolbar>
                <div class="mcrumbs">
                    @foreach ($crumbs as $i => $c)
                        @if ($i > 0)<i class="fa-light fa-chevron-right sep"></i>@endif
                        <button type="button" class="crumb {{ $loop->last ? 'on' : '' }}" wire:click="openFolder('{{ $c['path'] }}')">{{ $c['name'] }}</button>
                    @endforeach
                </div>
                <div class="tb-search" style="margin-left:auto;">
                    <i class="fa-light fa-magnifying-glass" wire:loading.remove wire:target="search"></i>
                    <i class="fa-light fa-spinner-third fa-spin" wire:loading wire:target="search" style="color:var(--sky);"></i>
                    <input type="text" wire:model.live.debounce.300ms="search" placeholder="Filter this folder&hellip;" autocomplete="off">
                    @if ($search !== '')<button type="button" class="ibtn" wire:click="$set('search','')" aria-label="Clear" style="border:none;background:transparent;"><i class="fa-light fa-xmark"></i></button>@endif
                </div>
            </x-admin.toolbar>

            {{-- Upload into the current folder --}}
            @unless ($protected)
                <x-admin.panel pad>
                    <div style="display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;">
                        <div class="fld" style="flex:1;min-width:240px;">
                            <label for="m-up">Upload to <span>/{{ $folder ?: 'images' }}</span> <span class="sub">(JPG/PNG/WebP → WebP)</span></label>
                            <input class="inp" id="m-up" type="file" multiple accept="image/jpeg,image/png,image/webp" wire:model="uploads">
                            @error('uploads')<p class="field-err"><i class="fa-solid fa-circle-xmark"></i> {{ $message }}</p>@enderror
                            @error('uploads.*')<p class="field-err"><i class="fa-solid fa-circle-xmark"></i> {{ $message }}</p>@enderror
                        </div>
                        <x-admin.btn type="button" variant="navy" sm icon="fa-light fa-arrow-up-from-bracket" wire:click="save" wire:loading.attr="disabled" wire:target="save,uploads">
                            <span wire:loading.remove wire:target="save">Upload</span><span wire:loading wire:target="save">Uploading…</span>
                        </x-admin.btn>
                    </div>
                    <div wire:loading wire:target="uploads" class="sub" style="margin-top:.4rem;"><i class="fa-light fa-spinner-third fa-spin"></i> Preparing files…</div>
                </x-admin.panel>
            @else
                <div class="impact"><i class="fa-light fa-lock"></i><span>County event maps are managed by the CRM — this folder is read-only.</span></div>
            @endunless

            {{-- Grid --}}
            <x-admin.panel pad>
                @if ($items->isEmpty())
                    <div class="empty-state">
                        <i class="fa-light fa-images"></i>
                        <div><div class="es-title">{{ $search !== '' ? 'No matches in this folder' : 'No images in this folder' }}</div><div class="sub">{{ $search !== '' ? 'Try a different filename.' : 'Open another folder, or upload images above.' }}</div></div>
                    </div>
                @else
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;">
                        <span class="sub">{{ number_format($items->total()) }} {{ str('image')->plural($items->total()) }}{{ $search !== '' ? ' matching' : '' }} in <span>/{{ $folder ?: 'images' }}</span></span>
                    </div>
                    <div class="media-grid" wire:loading.remove wire:target="openFolder,search,gotoPage,previousPage,nextPage">
                        @foreach ($items as $path)
                            <div class="media-card click" wire:key="mf-{{ md5($path) }}" wire:click="edit('{{ $path }}')" role="button" tabindex="0"
                                x-on:keydown.enter="$wire.edit('{{ $path }}')" title="{{ basename($path) }}">
                                <div class="thumb"><img src="{{ route('admin.media.thumb', ['p' => $path]) }}" alt="{{ basename($path) }}" loading="lazy"></div>
                                <div class="body">
                                    <div class="nm">{{ basename($path) }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @if ($items->hasPages())
                        <div class="tbl-foot">
                            <span class="sub">Showing {{ $items->firstItem() }}–{{ $items->lastItem() }} of {{ number_format($items->total()) }}</span>
                            <div style="display:flex;gap:.4rem;align-items:center;">
                                <button class="fchip" wire:click="previousPage" @disabled($items->onFirstPage())><i class="fa-light fa-chevron-left"></i> Prev</button>
                                <span class="sub">Page {{ $items->currentPage() }} / {{ $items->lastPage() }}</span>
                                <button class="fchip" wire:click="nextPage" @disabled(! $items->hasMorePages())>Next <i class="fa-light fa-chevron-right"></i></button>
                            </div>
                        </div>
                    @endif
                @endif
            </x-admin.panel>
        </div>
    </div>

    {{-- Detail / edit overlay --}}
    @if ($editing)
        <div class="modal-overlay" wire:key="edit-{{ md5($editing['path']) }}">
            <div class="modal-card" style="max-width:560px;">
                <div class="modal-head">
                    <h3>Image details</h3>
                    <button type="button" class="ibtn" wire:click="closeEdit" aria-label="Close"><i class="fa-light fa-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="media-preview"><img src="{{ $editing['url'] }}" alt="{{ $alt }}"></div>
                    <p class="sub" style="margin:.5rem 0;"><span>{{ $editing['url'] }}</span></p>
                    <div class="fld">
                        <label for="m-alt">Alt text <span class="sub">(describe the image for accessibility)</span></label>
                        <input class="inp" id="m-alt" type="text" wire:model="alt" maxlength="255">
                        @error('alt')<p class="field-err"><i class="fa-solid fa-circle-xmark"></i> {{ $message }}</p>@enderror
                    </div>
                    <div class="fld">
                        <label for="m-title">Title <span class="sub">(optional)</span></label>
                        <input class="inp" id="m-title" type="text" wire:model="title" maxlength="255">
                    </div>
                </div>
                <div class="modal-foot" style="justify-content:space-between;">
                    @if (str($editing['path'])->before('/')->value() === 'county')
                        <span class="sub" style="color:var(--ink-soft);"><i class="fa-light fa-lock"></i> CRM event map — managed by the CRM</span>
                    @else
                        <button type="button" class="btn btn-ghost btn-sm" wire:click="delete('{{ $editing['path'] }}')" wire:confirm="Delete this image permanently?" style="color:var(--coral);"><i class="fa-light fa-trash-can"></i> Delete</button>
                    @endif
                    <div style="display:flex;gap:.5rem;">
                        <button type="button" class="btn btn-ghost btn-sm" wire:click="closeEdit">Cancel</button>
                        <x-admin.btn type="button" variant="navy" sm icon="fa-light fa-check" wire:click="update">Save</x-admin.btn>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @endif
</div>