<div>
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Audit Log</h1>
        <p class="text-sm text-gray-500">Registro di tutte le azioni eseguite nel sistema.</p>
    </div>

    {{-- Filters --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <input wire:model.live.debounce.300ms="search" type="text" placeholder="Cerca..." class="rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
            <select wire:model.live="filterEvent" class="rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                <option value="">Tutti gli eventi</option>
                @foreach($events as $event)
                    <option value="{{ $event }}">{{ $event }}</option>
                @endforeach
            </select>
            <select wire:model.live="filterCauser" class="rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                <option value="">Tutti gli utenti</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">Data/Ora</th>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">Utente</th>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">Evento</th>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">Soggetto</th>
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">Dettagli</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($activities as $activity)
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 text-xs text-gray-500 whitespace-nowrap">{{ $activity->created_at->format('d/m/Y H:i:s') }}</td>
                        <td class="px-3 py-2 text-xs">{{ $activity->causer?->name ?? data_get($activity->properties, 'causer_name') ?? 'Sistema' }}</td>
                        <td class="px-3 py-2">
                            <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-full
                                {{ match($activity->description) {
                                    'created' => 'bg-green-100 text-green-800',
                                    'updated' => 'bg-blue-100 text-blue-800',
                                    'deleted' => 'bg-red-100 text-red-800',
                                    'assigned' => 'bg-indigo-100 text-indigo-800',
                                    'returned' => 'bg-amber-100 text-amber-800',
                                    'restored' => 'bg-purple-100 text-purple-800',
                                    'login' => 'bg-cyan-100 text-cyan-800',
                                    default => 'bg-gray-100 text-gray-700',
                                } }}">
                                {{ $activity->description }}
                            </span>
                        </td>
                        <td class="px-3 py-2 text-xs text-gray-600">
                            @if($activity->subject_type)
                                {{ class_basename($activity->subject_type) }} #{{ $activity->subject_id }}
                            @else
                                -
                            @endif
                        </td>
                        <td class="px-3 py-2 text-xs text-gray-500">
                            @if($activity->properties->isNotEmpty())
                            <details>
                                <summary class="cursor-pointer text-indigo-600 hover:text-indigo-800">Mostra</summary>
                                <div class="mt-1 p-2 bg-gray-50 rounded text-xs font-mono max-w-xs overflow-auto">
                                    @if($activity->properties->has('old'))
                                        <div class="mb-1">
                                            <span class="font-semibold text-red-600">Vecchio:</span>
                                            @foreach($activity->properties['old'] as $k => $v)
                                                <div>{{ $k }}: {{ is_string($v) ? $v : json_encode($v) }}</div>
                                            @endforeach
                                        </div>
                                        <div>
                                            <span class="font-semibold text-green-600">Nuovo:</span>
                                            @foreach($activity->properties['attributes'] ?? [] as $k => $v)
                                                <div>{{ $k }}: {{ is_string($v) ? $v : json_encode($v) }}</div>
                                            @endforeach
                                        </div>
                                    @else
                                        @foreach($activity->properties->toArray() as $k => $v)
                                            <div>{{ $k }}: {{ is_string($v) ? $v : json_encode($v) }}</div>
                                        @endforeach
                                    @endif
                                </div>
                            </details>
                            @else
                                -
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">Nessuna attività registrata.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-gray-200">
            {{ $activities->links() }}
        </div>
    </div>
</div>
