@php
    use App\Support\ImageFormats;
    use App\Support\WhatsAppMediaCategory;

    $items = collect($pageData['items'] ?? []);
    $categories = WhatsAppMediaCategory::all();
    $counts = $items->groupBy('whatsapp_category')->map->count();
    $files = app(\App\Services\DeviceFilesService::class);
@endphp

<div class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 mb-4 text-sm text-green-900">
    <p class="font-medium">{{ __('devices.whatsapp.title') }}</p>
    <p class="mt-1 text-xs text-green-800">{{ __('devices.whatsapp.hint') }}</p>
</div>

@if($items->isEmpty())
    <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-8 text-center">
        <p class="text-sm text-gray-500">{{ __('devices.whatsapp.empty') }}</p>
    </div>
@else
    <div class="flex flex-wrap gap-2 mb-4" id="wa-filters">
        <button type="button" data-filter="all"
                class="wa-filter px-3 py-1 rounded-full text-xs font-medium border bg-green-600 text-white border-transparent">
            {{ __('devices.whatsapp.filter_all') }} ({{ $items->count() }})
        </button>
        @foreach($categories as $cat)
            @php $count = $counts->get($cat, 0); @endphp
            @if($count > 0)
                <button type="button" data-filter="{{ $cat }}"
                        class="wa-filter px-3 py-1 rounded-full text-xs font-medium border bg-white text-gray-600 border-gray-300 hover:bg-gray-50">
                    {{ WhatsAppMediaCategory::icon($cat) }} {{ WhatsAppMediaCategory::label($cat) }} ({{ $count }})
                </button>
            @endif
        @endforeach
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="border-b border-gray-200 text-left text-xs uppercase tracking-wide text-gray-500">
                    <th class="py-2 pr-4">Tipo</th>
                    <th class="py-2 pr-4">Archivo</th>
                    <th class="py-2 pr-4">Fecha</th>
                    <th class="py-2">Acción</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($items as $item)
                    @php
                        $category = (string) ($item->whatsapp_category ?? '');
                        $when = $item->file_modified_at ?? $item->created_at;
                        $filename = (string) ($item->original_name ?? '');
                        $isImage = ImageFormats::isImageFilename($filename);
                        $isAudio = WhatsAppMediaCategory::supportsAudioPlayback($category)
                            || $files->isAudioFilename($filename);
                    @endphp
                    <tr class="wa-row" data-category="{{ $category }}">
                        <td class="py-3 pr-4 whitespace-nowrap">
                            <span class="mr-1">{{ WhatsAppMediaCategory::icon($category) }}</span>
                            {{ WhatsAppMediaCategory::label($category) }}
                        </td>
                        <td class="py-3 pr-4">
                            <div class="font-medium text-gray-900 break-all">{{ $item->original_name }}</div>
                            @if($isImage)
                                <img src="{{ route('downloads.preview', $item) }}" alt=""
                                     class="mt-2 max-h-24 rounded border border-gray-200 bg-white"
                                     loading="lazy" />
                            @elseif($isAudio)
                                <x-audio-player :src="route('downloads.preview', $item)" class="max-w-xs" />
                            @endif
                        </td>
                        <td class="py-3 pr-4 whitespace-nowrap text-gray-600">
                            {{ $when?->format('d/m/Y H:i:s') }}
                        </td>
                        <td class="py-3 whitespace-nowrap">
                            <a href="{{ route('downloads.show', $item) }}"
                               class="text-indigo-600 hover:underline">
                                {{ __('devices.whatsapp.open_file') }}
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

<script>
(function () {
    const buttons = document.querySelectorAll('.wa-filter');
    const rows = document.querySelectorAll('.wa-row');
    const active = 'bg-green-600 text-white border-transparent';
    const inactive = 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50';

    buttons.forEach((btn) => {
        btn.addEventListener('click', () => {
            const filter = btn.dataset.filter;
            rows.forEach((row) => {
                row.style.display = (filter === 'all' || row.dataset.category === filter) ? '' : 'none';
            });
            buttons.forEach((b) => {
                b.className = 'wa-filter px-3 py-1 rounded-full text-xs font-medium border ' +
                    (b === btn ? active : inactive);
            });
        });
    });
})();
</script>