<x-filament-panels::page>
    {{-- Warning Banner --}}
    <x-filament::section
        icon="heroicon-o-exclamation-triangle"
        icon-color="warning"
    >
        <x-slot name="heading">
            {{ __('Warning') }}
        </x-slot>
        <x-slot name="description">
            {{ __('Deleting or modifying system files can break your website. Avoid editing files in the') }}
            <code class="px-1.5 py-0.5 rounded bg-warning-100 dark:bg-warning-900/50 text-warning-700 dark:text-warning-300 text-xs font-mono">conf</code>
            {{ __('and') }}
            <code class="px-1.5 py-0.5 rounded bg-warning-100 dark:bg-warning-900/50 text-warning-700 dark:text-warning-300 text-xs font-mono">logs</code>
            {{ __('folders unless you know what you are doing.') }}
        </x-slot>
    </x-filament::section>

    {{-- Breadcrumbs --}}
    <nav class="fi-breadcrumbs mb-4">
        <ol class="flex flex-wrap items-center gap-x-2">
            @foreach($this->getPathBreadcrumbs() as $crumb)
                <li class="flex items-center gap-x-2">
                    @if(!$loop->first)
                        <x-filament::icon
                            icon="heroicon-m-chevron-right"
                            class="h-4 w-4 text-gray-400 dark:text-gray-500"
                        />
                    @endif

                    @if($loop->last)
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">
                            {{ $crumb['name'] }}
                        </span>
                    @else
                        <x-filament::link
                            tag="button"
                            wire:click="navigateTo('{{ $crumb['path'] }}')"
                            :icon="$loop->first ? 'heroicon-o-home' : null"
                            size="sm"
                        >
                            {{ $crumb['name'] }}
                        </x-filament::link>
                    @endif
                </li>
            @endforeach
        </ol>
    </nav>

    {{-- File Table --}}
    <div id="file-dropzone" class="transition-all duration-200">
        {{ $this->table }}
    </div>

    <x-filament-actions::modals />

    {{-- Handle upload errors globally --}}
    <div x-data x-on:livewire-upload-error.window="$wire.showUploadError()"></div>

    @script
    <script>
        // File download handler
        $wire.on('download-file', ({ content, filename }) => {
            const blob = new Blob([Uint8Array.from(atob(content), c => c.charCodeAt(0))]);
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });

        // File dropzone for uploads
        const dropzone = document.getElementById('file-dropzone');
        if (dropzone) {
            ['dragenter','dragover','dragleave','drop'].forEach(e => dropzone.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); }));
            ['dragenter','dragover'].forEach(e => dropzone.addEventListener(e, () => dropzone.classList.add('ring-2', 'ring-primary-500', 'ring-offset-2', 'dark:ring-offset-gray-900')));
            ['dragleave','drop'].forEach(e => dropzone.addEventListener(e, () => dropzone.classList.remove('ring-2', 'ring-primary-500', 'ring-offset-2', 'dark:ring-offset-gray-900')));
            dropzone.addEventListener('drop', async e => {
                const files = e.dataTransfer?.files;
                if (files?.length) {
                    for (const file of files) {
                        const reader = new FileReader();
                        reader.onload = () => {
                            const base64 = reader.result.split(',')[1];
                            $wire.uploadDroppedFile(file.name, base64);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
        }
    </script>
    @endscript
</x-filament-panels::page>
