{{-- Filament port of the legacy Admin asset/media manager. Browses the
     `public` disk under assets/ (served at /storage/assets/...). Folders are
     clickable; files show a thumbnail for images. Upload + New folder are
     header actions; delete is a per-item confirming action. --}}
@php($listing = $this->getListing())
@php($folders = $listing['folders'])
@php($files = $listing['files'])
@php($trail = $this->getBreadcrumbsTrail())
@php($parent = $this->getParentPath())

<x-filament-panels::page>
    {{-- Breadcrumb + up --}}
    <div class="flex flex-wrap items-center gap-2 text-sm">
        @if ($parent !== null)
            <button type="button" wire:click="goUp"
                class="inline-flex items-center gap-1 rounded-md border border-gray-300 px-2 py-1 text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
                <x-heroicon-o-arrow-up class="h-4 w-4" />
                Up
            </button>
        @endif

        <nav class="flex flex-wrap items-center gap-1 text-gray-500 dark:text-gray-400">
            @foreach ($trail as $i => $crumb)
                @if (! $loop->first)
                    <span class="text-gray-300 dark:text-gray-600">/</span>
                @endif
                <button type="button"
                    wire:click="open(@js($crumb['path']))"
                    @class([
                        'rounded px-1.5 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700',
                        'font-semibold text-gray-700 dark:text-gray-200' => $loop->last,
                    ])>
                    {{ $crumb['label'] }}
                </button>
            @endforeach
        </nav>
    </div>

    {{-- Folders --}}
    @if (count($folders))
        <div>
            <h3 class="mb-2 text-sm font-semibold text-gray-500 dark:text-gray-400">Folders</h3>
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                @foreach ($folders as $folder)
                    <div class="group relative flex flex-col items-center rounded-lg border border-gray-200 bg-white p-3 text-center hover:border-primary-400 dark:border-gray-700 dark:bg-gray-800">
                        <button type="button"
                            wire:click="open(@js($folder['path']))"
                            class="flex w-full flex-col items-center">
                            <x-heroicon-s-folder class="h-12 w-12 text-amber-400" />
                            <span class="mt-1 w-full truncate text-sm font-medium text-gray-700 dark:text-gray-200" title="{{ $folder['name'] }}">
                                {{ $folder['name'] }}
                            </span>
                            <span class="text-xs text-gray-400">{{ $folder['file_count'] }} file(s)</span>
                        </button>

                        {{ ($this->deleteAction)(['path' => $folder['path'], 'label' => $folder['name'], 'kind' => 'folder']) }}
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Files --}}
    <div>
        <h3 class="mb-2 text-sm font-semibold text-gray-500 dark:text-gray-400">Files</h3>

        @if (count($files))
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                @foreach ($files as $file)
                    <div class="group relative flex flex-col rounded-lg border border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800">
                        <div class="flex h-28 items-center justify-center overflow-hidden rounded bg-gray-50 dark:bg-gray-900">
                            @if ($file['is_image'])
                                <img src="{{ $file['url'] }}" alt="{{ $file['name'] }}"
                                    loading="lazy"
                                    class="max-h-28 max-w-full object-contain" />
                            @else
                                <x-heroicon-o-document class="h-12 w-12 text-gray-300 dark:text-gray-600" />
                            @endif
                        </div>

                        <div class="mt-2 min-w-0">
                            <a href="{{ $file['url'] }}" target="_blank" rel="noopener"
                                class="block truncate text-sm font-medium text-primary-600 hover:underline dark:text-primary-400"
                                title="{{ $file['name'] }}">
                                {{ $file['name'] }}
                            </a>
                            <div class="flex items-center justify-between text-xs text-gray-400">
                                <span class="uppercase">{{ $file['extension'] ?: $file['type'] }}</span>
                                <span>{{ $file['size_human'] }}</span>
                            </div>
                        </div>

                        <div class="mt-1 flex justify-end">
                            {{ ($this->deleteAction)(['path' => $file['path'], 'label' => $file['name'], 'kind' => 'file']) }}
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="rounded-lg border border-dashed border-gray-300 px-4 py-6 text-center text-sm text-gray-400 dark:border-gray-600">
                No files in this folder.
            </p>
        @endif
    </div>

    <x-filament-actions::modals />
</x-filament-panels::page>