<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Admin Audit Log
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <!-- Filters -->
            <div class="bg-white shadow-sm sm:rounded-lg mb-6">
                <div class="p-6">
                    <form method="GET" action="{{ route('admin.audit-log.index') }}" class="flex flex-wrap gap-4 items-end">
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Admin</label>
                            <select name="admin_id" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400">
                                <option value="">All admins</option>
                                @foreach($admins as $admin)
                                    <option value="{{ $admin->id }}" @selected(request('admin_id') == $admin->id)>
                                        {{ $admin->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Action</label>
                            <select name="action" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400">
                                <option value="">All actions</option>
                                @foreach($actions as $action)
                                    <option value="{{ $action }}" @selected(request('action') === $action)>
                                        {{ str_replace('_', ' ', $action) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Target Type</label>
                            <select name="target_type" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400">
                                <option value="">All types</option>
                                <option value="User" @selected(request('target_type') === 'User')>User</option>
                                <option value="Item" @selected(request('target_type') === 'Item')>Item</option>
                            </select>
                        </div>
                        <div class="flex gap-2">
                            <x-secondary-button type="submit">
                                Filter
                            </x-secondary-button>
                            <x-secondary-button onclick="window.location='{{ route('admin.audit-log.index') }}'">
                                Clear
                            </x-secondary-button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Log Table -->
            <div class="bg-white shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold text-gray-900">
                            {{ number_format($logs->total()) }} entries
                        </h3>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 text-sm">
                            <thead>
                                <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <th class="pb-3 pr-4">When</th>
                                    <th class="pb-3 pr-4">Admin</th>
                                    <th class="pb-3 pr-4">Action</th>
                                    <th class="pb-3 pr-4">Target</th>
                                    <th class="pb-3 pr-4">Details</th>
                                    <th class="pb-3">IP</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @forelse($logs as $log)
                                    <tr class="hover:bg-gray-50">
                                        <td class="py-3 pr-4 whitespace-nowrap text-gray-500 text-xs">
                                            <span title="{{ $log->created_at->toDateTimeString() }}">
                                                {{ $log->created_at->diffForHumans() }}
                                            </span>
                                            <div class="text-gray-400">{{ $log->created_at->format('M j, Y H:i') }}</div>
                                        </td>
                                        <td class="py-3 pr-4 whitespace-nowrap">
                                            @if($log->admin)
                                                <a href="{{ route('admin.users.show', $log->admin_id) }}" class="text-blue-600 hover:underline font-medium">
                                                    {{ $log->admin->name }}
                                                </a>
                                            @else
                                                <span class="text-gray-400">Deleted admin</span>
                                            @endif
                                        </td>
                                        <td class="py-3 pr-4 whitespace-nowrap">
                                            @php
                                                $actionColors = [
                                                    'ban_user'        => 'bg-red-50 text-red-600',
                                                    'ban_item'        => 'bg-red-50 text-red-600',
                                                    'delete_item'     => 'bg-red-50 text-red-600',
                                                    'grant_admin'     => 'bg-gray-100 text-gray-600',
                                                    'revoke_admin'    => 'bg-gray-100 text-gray-600',
                                                    'impersonate_start' => 'bg-gray-100 text-gray-600',
                                                    'impersonate_stop'  => 'bg-gray-100 text-gray-600',
                                                    'unban_user'      => 'bg-gray-100 text-gray-600',
                                                    'approve_item'    => 'bg-gray-100 text-gray-600',
                                                    'update_user'     => 'bg-gray-100 text-gray-600',
                                                    'update_item'     => 'bg-gray-100 text-gray-600',
                                                ];
                                                $color = $actionColors[$log->action] ?? 'bg-gray-100 text-gray-600';
                                            @endphp
                                            <span class="inline-flex px-2 py-1 rounded text-xs font-medium {{ $color }}">
                                                {{ str_replace('_', ' ', $log->action) }}
                                            </span>
                                        </td>
                                        <td class="py-3 pr-4 whitespace-nowrap text-gray-700">
                                            @if($log->target_type && $log->target_id)
                                                @if($log->target_type === 'User')
                                                    <a href="{{ route('admin.users.show', $log->target_id) }}" class="hover:underline text-gray-700">
                                                        User #{{ $log->target_id }}
                                                    </a>
                                                @elseif($log->target_type === 'Item')
                                                    <a href="{{ route('admin.items.show', $log->target_id) }}" class="hover:underline text-gray-700">
                                                        Item #{{ $log->target_id }}
                                                    </a>
                                                @else
                                                    {{ $log->target_type }} #{{ $log->target_id }}
                                                @endif
                                            @else
                                                <span class="text-gray-400">—</span>
                                            @endif
                                        </td>
                                        <td class="py-3 pr-4 text-gray-600 text-xs max-w-xs">
                                            @if($log->meta)
                                                <ul class="space-y-0.5">
                                                    @foreach($log->meta as $key => $value)
                                                        <li>
                                                            <span class="text-gray-400">{{ str_replace('_', ' ', $key) }}:</span>
                                                            {{ is_array($value) ? json_encode($value) : $value }}
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @else
                                                <span class="text-gray-400">—</span>
                                            @endif
                                        </td>
                                        <td class="py-3 text-gray-500 text-xs whitespace-nowrap">
                                            {{ $log->ip_address ?? '—' }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="py-12 text-center text-gray-400">No audit log entries found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-6">
                        {{ $logs->links() }}
                    </div>
                </div>
            </div>

        </div>
    </div>
</x-app-layout>
