@php
    $formatAuditValue = static function ($value): string {
        if (is_bool($value)) {
            return $value ? __('messages.yes') : __('messages.no');
        }

        if ($value === null || $value === '') {
            return '—';
        }

        if (is_array($value)) {
            return json_encode($value, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?: '—';
        }

        return (string) $value;
    };

    $actionLabel = static function (?string $action): string {
        if (! is_string($action) || $action === '') {
            return '—';
        }

        $translationKey = 'messages.audit_action_'.str_replace('.', '_', $action);
        $translated = __($translationKey);

        return $translated === $translationKey ? $action : $translated;
    };
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-2xl font-semibold text-[var(--theme-text)]">{{ __('messages.audit_logs') }}</h2>
    </x-slot>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
        <form method="GET" action="{{ route('admin.audit-logs.index') }}" class="theme-surface-panel p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-3 items-end">
            <div class="xl:col-span-2">
                <label for="audit_q" class="block text-xs text-[var(--theme-muted)] mb-1">{{ __('messages.search') }}</label>
                <input id="audit_q" type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="{{ __('messages.search_audit_logs') }}" class="w-full rounded-lg theme-ring-brand">
            </div>

            <div>
                <label for="audit_admin_id" class="block text-xs text-[var(--theme-muted)] mb-1">{{ __('messages.manager') }}</label>
                <select id="audit_admin_id" name="admin_id" class="w-full rounded-lg theme-ring-brand">
                    <option value="">{{ __('messages.all_admins') }}</option>
                    @foreach ($admins as $admin)
                        <option value="{{ $admin->id }}" @selected((string) ($filters['admin_id'] ?? '') === (string) $admin->id)>
                            {{ $admin->name }} ({{ $admin->username }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="audit_action" class="block text-xs text-[var(--theme-muted)] mb-1">{{ __('messages.action') }}</label>
                <select id="audit_action" name="action" class="w-full rounded-lg theme-ring-brand">
                    <option value="">{{ __('messages.all_actions') }}</option>
                    @foreach ($actions as $availableAction)
                        <option value="{{ $availableAction }}" @selected(($filters['action'] ?? '') === $availableAction)>
                            {{ $actionLabel($availableAction) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <x-date-range-picker
                class="md:col-span-2 xl:col-span-2"
                :from="$filters['from'] ?? ''"
                :to="$filters['to'] ?? ''"
            />

            <div class="md:col-span-2 xl:col-span-6 flex flex-wrap items-center gap-2">
                <button class="px-4 py-2 rounded-lg theme-btn-primary text-sm font-medium">{{ __('messages.search') }}</button>
                <a href="{{ route('admin.audit-logs.index') }}" class="px-4 py-2 rounded-lg theme-btn-outline text-sm">{{ __('messages.reset') }}</a>
            </div>
        </form>

        <div class="theme-surface-panel overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="theme-table-head">
                        <tr>
                            <th class="px-4 py-3 text-start">#</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.manager') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.action') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.entity') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.changed_fields') }}</th>
                            <th class="px-4 py-3 text-start">IP</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.created_at') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.details') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($logs as $log)
                            @php
                                $oldValues = is_array($log->old_values) ? $log->old_values : [];
                                $newValues = is_array($log->new_values) ? $log->new_values : [];
                                $changedFields = collect(array_unique(array_merge(array_keys($oldValues), array_keys($newValues))))
                                    ->filter(fn ($field): bool => data_get($oldValues, $field) !== data_get($newValues, $field))
                                    ->values();
                                $managerRoles = $log->user?->roles?->pluck('name')->values()->all() ?? [];
                            @endphp

                            <tr class="border-t border-[var(--theme-border)] align-top">
                                <td class="px-4 py-3 font-semibold">{{ $log->id }}</td>

                                <td class="px-4 py-3">
                                    <p class="font-medium">{{ $log->user?->name ?? '-' }}</p>
                                    <p class="text-xs theme-inline-muted">{{ $log->user?->username ?? '-' }}</p>
                                </td>

                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium border border-[var(--theme-border)] bg-[var(--theme-bg)]">
                                        {{ $actionLabel($log->action) }}
                                    </span>
                                </td>

                                <td class="px-4 py-3">
                                    <p>{{ class_basename($log->entity_type) }} #{{ $log->entity_id ?? '-' }}</p>
                                    <p class="text-xs theme-inline-muted">{{ $log->entity_type }}</p>
                                </td>

                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold border border-[var(--theme-border)] bg-[var(--theme-bg)] text-[var(--theme-primary-strong)] dark:text-[var(--theme-text)]">
                                        {{ $changedFields->count() }}
                                    </span>
                                </td>

                                <td class="px-4 py-3">{{ $log->ip_address ?? '-' }}</td>
                                <td class="px-4 py-3 whitespace-nowrap">{{ $log->created_at?->format('Y-m-d H:i:s') }}</td>

                                <td class="px-4 py-3">
                                    <details class="group">
                                        <summary class="cursor-pointer select-none text-[var(--theme-primary)] hover:underline">
                                            {{ __('messages.view_details') }}
                                        </summary>

                                        <div class="mt-3 w-[320px] max-w-[65vw] space-y-3">
                                            <div class="rounded-xl border border-[var(--theme-border)] p-3 bg-[var(--theme-bg)]">
                                                <p class="text-xs theme-inline-muted">{{ __('messages.manager') }}</p>
                                                <p class="font-medium">{{ $log->user?->name ?? '-' }}</p>
                                                <p class="text-xs theme-inline-muted">{{ __('messages.username') }}: {{ $log->user?->username ?? '-' }}</p>
                                                <p class="text-xs theme-inline-muted">{{ __('messages.email') }}: {{ $log->user?->email ?? '-' }}</p>
                                                <p class="text-xs theme-inline-muted">{{ __('messages.roles') }}: {{ $managerRoles !== [] ? implode(', ', $managerRoles) : '-' }}</p>
                                            </div>

                                            <div class="rounded-xl border border-[var(--theme-border)] p-3 bg-[var(--theme-bg)]">
                                                <p class="text-xs theme-inline-muted mb-2">{{ __('messages.changed_fields') }}</p>

                                                @if ($changedFields->isEmpty())
                                                    <p class="text-xs theme-inline-muted">{{ __('messages.no_data') }}</p>
                                                @else
                                                    <div class="space-y-2 max-h-48 overflow-y-auto pe-1">
                                                        @foreach ($changedFields as $field)
                                                            <div class="rounded-lg border border-[var(--theme-border)] p-2">
                                                                <p class="text-xs font-semibold mb-1">{{ $field }}</p>
                                                                <p class="text-xs"><span class="theme-inline-muted">{{ __('messages.old_value') }}:</span> {{ \Illuminate\Support\Str::limit($formatAuditValue(data_get($oldValues, $field)), 120) }}</p>
                                                                <p class="text-xs"><span class="theme-inline-muted">{{ __('messages.new_value') }}:</span> {{ \Illuminate\Support\Str::limit($formatAuditValue(data_get($newValues, $field)), 120) }}</p>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </details>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-4 py-6 text-center theme-inline-muted">{{ __('messages.no_results') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div>{{ $logs->links() }}</div>
    </div>
</x-app-layout>