<div>
    <div class="flex items-center justify-between mb-8">
        <div>
            <flux:heading size="xl" class="text-zinc-900 dark:text-zinc-100">
                Activity Logs
            </flux:heading>
            <flux:text class="text-zinc-600 dark:text-zinc-400 mt-2">
                Monitor system activities and user actions
            </flux:text>
        </div>
        <div class="flex gap-2">
            <flux:button
                wire:click="exportLogs"
                variant="outline"
                icon="arrow-down-tray"
            >
                Export
            </flux:button>
            <flux:button
                wire:click="deleteOldLogs"
                wire:confirm="Are you sure you want to delete logs older than 90 days? This action cannot be undone."
                variant="danger"
                icon="trash"
            >
                Clean Old Logs
            </flux:button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <flux:card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <flux:icon.document-text class="w-8 h-8 text-blue-500" />
                </div>
                <div class="ml-4">
                    <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Total Activities</flux:text>
                    <flux:text class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
                        {{ number_format($this->activityStats['total_activities']) }}
                    </flux:text>
                </div>
            </div>
        </flux:card>

        <flux:card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <flux:icon.user class="w-8 h-8 text-green-500" />
                </div>
                <div class="ml-4">
                    <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400">User Activities</flux:text>
                    <flux:text class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
                        {{ number_format($this->activityStats['user_activities']) }}
                    </flux:text>
                </div>
            </div>
        </flux:card>

        <flux:card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <flux:icon.cog-6-tooth class="w-8 h-8 text-orange-500" />
                </div>
                <div class="ml-4">
                    <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400">System Activities</flux:text>
                    <flux:text class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
                        {{ number_format($this->activityStats['system_activities']) }}
                    </flux:text>
                </div>
            </div>
        </flux:card>

        <flux:card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <flux:icon.users class="w-8 h-8 text-purple-500" />
                </div>
                <div class="ml-4">
                    <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Active Users</flux:text>
                    <flux:text class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
                        {{ number_format($this->activityStats['unique_users']) }}
                    </flux:text>
                </div>
            </div>
        </flux:card>
    </div>

    <!-- Filters -->
    <flux:card class="p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Search -->
            <flux:field>
                <flux:input
                    wire:model.live.debounce.300ms="search"
                    placeholder="Search activities..."
                    icon="magnifying-glass"
                />
            </flux:field>

            <!-- Log Name Filter -->
            <flux:field>
                <flux:select wire:model.live="logName" placeholder="All Log Names" variant="listbox">
                    <flux:select.option value="">All Log Names</flux:select.option>
                    @foreach ($this->logNames as $logName)
                        <flux:select.option value="{{ $logName }}">{{ $logName }}</flux:select.option>
                    @endforeach
                </flux:select>
            </flux:field>

            <!-- Causer Filter -->
            <flux:field>
                <flux:select wire:model.live="causerFilter" placeholder="All Users" variant="listbox">
                    <flux:select.option value="">All Users</flux:select.option>
                    @foreach ($this->causers as $causer)
                        <flux:select.option value="{{ $causer->id }}">{{ $causer->name }}</flux:select.option>
                    @endforeach
                </flux:select>
            </flux:field>

            <!-- Event Filter -->
            <flux:field>
                <flux:select wire:model.live="eventFilter" placeholder="All Events" variant="listbox">
                    <flux:select.option value="">All Events</flux:select.option>
                    @foreach ($this->events as $event)
                        <flux:select.option value="{{ $event }}">{{ ucfirst($event) }}</flux:select.option>
                    @endforeach
                </flux:select>
            </flux:field>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <!-- Subject Type Filter -->
            <flux:field>
                <flux:select wire:model.live="subjectFilter" placeholder="All Subject Types" variant="listbox">
                    <flux:select.option value="">All Subject Types</flux:select.option>
                    @foreach ($this->subjectTypes as $subjectType)
                        <flux:select.option value="{{ $subjectType }}">{{ class_basename($subjectType) }}</flux:select.option>
                    @endforeach
                </flux:select>
            </flux:field>

            <!-- Date From -->
            <flux:field>
                <flux:date-picker
                    wire:model.live="dateFrom"
                    placeholder="From Date"
                />
            </flux:field>

            <!-- Date To -->
            <flux:field>
                <flux:date-picker
                    wire:model.live="dateTo"
                    placeholder="To Date"
                />
            </flux:field>
        </div>

        <div class="flex justify-between items-center mt-4">
            <flux:button
                wire:click="clearFilters"
                variant="outline"
                icon="x-mark"
            >
                Clear Filters
            </flux:button>

            <div class="flex items-center gap-2">
                <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">Per page:</flux:text>
                <flux:select variant="listbox" wire:model.live="perPage" size="sm">
                    <flux:select.option value="15">15</flux:select.option>
                    <flux:select.option value="25">25</flux:select.option>
                    <flux:select.option value="50">50</flux:select.option>
                    <flux:select.option value="100">100</flux:select.option>
                </flux:select>
            </div>
        </div>
    </flux:card>

    <!-- Activities List -->
    @if ($this->activities->count() > 0)
        <!-- Desktop Table View -->
        <div class="hidden lg:block">
            <flux:card class="overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-zinc-50 dark:bg-zinc-900">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
                                    Activity
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
                                    User
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
                                    Subject
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
                                    Event
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
                                    Date
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-zinc-800 divide-y divide-zinc-200 dark:divide-zinc-700">
                            @foreach ($this->activities as $activity)
                                <tr class="hover:bg-zinc-50 dark:hover:bg-zinc-700">
                                    <td class="px-6 py-4">
                                        <div>
                                            <flux:text class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                                {{ $activity->description }}
                                            </flux:text>
                                            @if ($activity->log_name)
                                                <flux:badge color="blue" size="sm" class="mt-1">
                                                    {{ $activity->log_name }}
                                                </flux:badge>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if ($activity->causer)
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-8 w-8">
                                                    @if ($activity->causer->profile_picture)
                                                        <img class="h-8 w-8 rounded-full" src="{{ $activity->causer->profile_picture_url }}" alt="">
                                                    @else
                                                        <div class="h-8 w-8 rounded-full bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center">
                                                            <flux:icon.user class="w-4 h-4 text-zinc-400" />
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="ml-3">
                                                    <flux:text class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                                        {{ $activity->causer->name }}
                                                    </flux:text>
                                                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
                                                        {{ $activity->causer->email }}
                                                    </flux:text>
                                                </div>
                                            </div>
                                        @else
                                            <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">System</flux:text>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if ($activity->subject)
                                            <div>
                                                <flux:text class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                                    {{ class_basename($activity->subject_type) }} #{{ $activity->subject_id }}
                                                </flux:text>
                                                @if (method_exists($activity->subject, 'getTitle'))
                                                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
                                                        {{ $activity->subject->getTitle() }}
                                                    </flux:text>
                                                @endif
                                            </div>
                                        @else
                                            <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">N/A</flux:text>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if ($activity->event)
                                            <flux:badge
                                                color="{{ match($activity->event) {
                                                    'created' => 'green',
                                                    'updated' => 'blue',
                                                    'deleted' => 'red',
                                                    default => 'zinc'
                                                } }}"
                                                size="sm"
                                            >
                                                {{ ucfirst($activity->event) }}
                                            </flux:badge>
                                        @else
                                            <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">N/A</flux:text>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <flux:text class="text-sm text-zinc-900 dark:text-zinc-100">
                                            {{ $activity->created_at->format('M d, Y H:i') }}
                                        </flux:text>
                                        <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
                                            {{ $activity->created_at->diffForHumans() }}
                                        </flux:text>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </flux:card>
        </div>

        <!-- Mobile Card View -->
        <div class="lg:hidden space-y-4">
            @foreach ($this->activities as $activity)
                <flux:card class="p-4">
                    <div class="space-y-4">
                        <!-- Header -->
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <flux:text class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                                    {{ $activity->description }}
                                </flux:text>
                                @if ($activity->log_name)
                                    <flux:badge color="blue" size="sm" class="mt-1">
                                        {{ $activity->log_name }}
                                    </flux:badge>
                                @endif
                            </div>
                            <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
                                {{ $activity->created_at->format('M d, H:i') }}
                            </flux:text>
                        </div>

                        <!-- User Information -->
                        <div class="flex items-center gap-3">
                            @if ($activity->causer)
                                <div class="flex-shrink-0">
                                    @if ($activity->causer->profile_picture)
                                        <img class="h-8 w-8 rounded-full" src="{{ $activity->causer->profile_picture_url }}" alt="">
                                    @else
                                        <div class="h-8 w-8 rounded-full bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center">
                                            <flux:icon.user class="w-4 h-4 text-zinc-400" />
                                        </div>
                                    @endif
                                </div>
                                <div>
                                    <flux:text class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                        {{ $activity->causer->name }}
                                    </flux:text>
                                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
                                        {{ $activity->causer->email }}
                                    </flux:text>
                                </div>
                            @else
                                <div class="flex items-center gap-2">
                                    <flux:icon.cog-6-tooth class="w-4 h-4 text-zinc-400" />
                                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">System</flux:text>
                                </div>
                            @endif
                        </div>

                        <!-- Subject and Event -->
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400 mb-1">Subject</flux:text>
                                @if ($activity->subject)
                                    <flux:text class="text-sm text-zinc-900 dark:text-zinc-100">
                                        {{ class_basename($activity->subject_type) }} #{{ $activity->subject_id }}
                                    </flux:text>
                                @else
                                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">N/A</flux:text>
                                @endif
                            </div>
                            <div>
                                <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400 mb-1">Event</flux:text>
                                @if ($activity->event)
                                    <flux:badge
                                        color="{{ match($activity->event) {
                                            'created' => 'green',
                                            'updated' => 'blue',
                                            'deleted' => 'red',
                                            default => 'zinc'
                                        } }}"
                                        size="sm"
                                    >
                                        {{ ucfirst($activity->event) }}
                                    </flux:badge>
                                @else
                                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">N/A</flux:text>
                                @endif
                            </div>
                        </div>

                        <!-- Timestamp -->
                        <div class="border-t border-zinc-200 dark:border-zinc-700 pt-3">
                            <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
                                {{ $activity->created_at->format('M d, Y H:i') }} ({{ $activity->created_at->diffForHumans() }})
                            </flux:text>
                        </div>
                    </div>
                </flux:card>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-6">
            {{ $this->activities->links() }}
        </div>
    @else
        <!-- Empty State -->
        <flux:card class="p-12 text-center">
            <flux:icon.document-text class="w-12 h-12 text-zinc-400 dark:text-zinc-500 mx-auto mb-4" />
            <flux:heading size="lg" class="text-zinc-900 dark:text-zinc-100 mb-2">
                No Activity Logs Found
            </flux:heading>
            <flux:text class="text-zinc-500 dark:text-zinc-400 mb-6">
                No activities match your current filters. Try adjusting your search criteria.
            </flux:text>
            <flux:button
                wire:click="clearFilters"
                variant="outline"
                icon="x-mark"
            >
                Clear Filters
            </flux:button>
        </flux:card>
    @endif
</div>