@php
    $anagrafiche = $getAnagrafiche();
    $anagraficheKey = 'anagrafiche-table-' . md5(json_encode($anagrafiche));
@endphp

<div
    wire:key="{{ $anagraficheKey }}"
    x-data="{
        selected: @entangle($getStatePath()),
        search: '',
        showOnlySelected: false,
        get filteredItems() {
            let items = this.items;
            if (this.search) {
                const s = this.search.toLowerCase();
                items = items.filter(i =>
                    i.cognome.toLowerCase().includes(s) ||
                    i.nome.toLowerCase().includes(s) ||
                    (i.email && i.email.toLowerCase().includes(s))
                );
            }
            if (this.showOnlySelected) {
                items = items.filter(i => this.selected.includes(i.id));
            }
            return items;
        },
        items: @js($anagrafiche),
        toggle(id) {
            if (this.selected.includes(id)) {
                this.selected = this.selected.filter(i => i !== id);
            } else {
                this.selected.push(id);
            }
        },
        isSelected(id) {
            return this.selected.includes(id);
        },
        selectAll() {
            const ids = this.filteredItems.map(i => i.id);
            this.selected = [...new Set([...this.selected, ...ids])];
        },
        deselectAll() {
            const ids = this.filteredItems.map(i => i.id);
            this.selected = this.selected.filter(i => !ids.includes(i));
        }
    }"
    class="space-y-4"
>
    {{-- Header con conteggio e filtri --}}
    <div class="flex flex-wrap items-center justify-between gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
        <div class="flex items-center gap-4">
            <span class="text-lg font-semibold text-primary-600">
                <span x-text="selected.length"></span> selezionati
            </span>
            <span class="text-sm text-gray-500">
                su <span x-text="items.length"></span> disponibili
            </span>
        </div>

        <div class="flex items-center gap-2">
            <button
                type="button"
                @click="selectAll()"
                class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700"
            >
                <x-heroicon-o-check-circle class="w-4 h-4" />
                Seleziona visibili
            </button>
            <button
                type="button"
                @click="deselectAll()"
                class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
            >
                <x-heroicon-o-x-circle class="w-4 h-4" />
                Deseleziona visibili
            </button>
        </div>
    </div>

    {{-- Barra di ricerca e filtri --}}
    <div class="flex flex-wrap items-center gap-4">
        <div class="flex-1 min-w-[250px]">
            <input
                type="text"
                x-model.debounce.300ms="search"
                placeholder="Cerca per cognome, nome o email..."
                class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            />
        </div>
        <label class="inline-flex items-center gap-2 cursor-pointer">
            <input
                type="checkbox"
                x-model="showOnlySelected"
                class="w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
            />
            <span class="text-sm text-gray-600 dark:text-gray-300">Mostra solo selezionati</span>
        </label>
    </div>

    {{-- Tabella --}}
    <div class="overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg">
        <div class="max-h-[400px] overflow-y-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800 sticky top-0">
                    <tr>
                        <th class="w-12 px-4 py-3"></th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cognome</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Anagrafica</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                    <template x-for="item in filteredItems" :key="item.id">
                        <tr
                            @click="toggle(item.id)"
                            class="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                            :class="{ 'bg-primary-50 dark:bg-primary-900/20': isSelected(item.id) }"
                        >
                            <td class="px-4 py-3">
                                <input
                                    type="checkbox"
                                    :checked="isSelected(item.id)"
                                    @click.stop="toggle(item.id)"
                                    class="w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
                                />
                            </td>
                            <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white" x-text="item.cognome"></td>
                            <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300" x-text="item.nome"></td>
                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400" x-text="item.email"></td>
                            <td class="px-4 py-3">
                                <span
                                    class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
                                    :class="item.is_complete ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'"
                                    x-text="item.is_complete ? 'Completa' : 'Incompleta'"
                                ></span>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        {{-- Empty state --}}
        <div x-show="filteredItems.length === 0" class="p-8 text-center text-gray-500">
            <x-heroicon-o-user-group class="w-12 h-12 mx-auto mb-2 text-gray-300" />
            <p>Nessun risultato trovato</p>
        </div>
    </div>

    {{-- Info --}}
    <p class="text-xs text-gray-500 dark:text-gray-400">
        Clicca su una riga per selezionare/deselezionare. Usa la ricerca per filtrare rapidamente.
    </p>
</div>