@php
    $fmt = app(\App\Services\Formatter::class);
    $staffNames = $staff;
@endphp

<div>
    <x-ui.page-header
        title="Activity log"
        :subtitle="$this->rangeLabel().' — every decision, who made it, and from where.'"
    />

    <div class="mb-4 flex flex-wrap items-end gap-2">
        <x-ui.search-bar placeholder="Description, event or IP…" />

        <x-ui.date-range />

        <select wire:model.live="event" class="field-input w-auto py-1.5 text-xs">
            <option value="">All events</option>
            @foreach ($events as $value)
                <option value="{{ $value }}">{{ $value }}</option>
            @endforeach
        </select>

        <select wire:model.live="causerId" class="field-input w-auto py-1.5 text-xs">
            <option value="">Anyone</option>
            @foreach ($staffNames as $id => $name)
                <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
        </select>

        @if ($this->hasActiveFilters())
            <button type="button" wire:click="clearFilters" class="btn btn-ghost btn-sm">
                <x-ui.icon name="x" class="h-3.5 w-3.5" /> Clear
            </button>
        @endif
    </div>

    <x-ui.card :padded="false">
        @if ($rows->isEmpty())
            <x-ui.empty icon="clock" title="Nothing logged in this range" />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <x-ui.th sortable="{{ $sortField }}" field="created_at" :direction="$sortDirection">When</x-ui.th>
                        <th>Who</th>
                        <x-ui.th sortable="{{ $sortField }}" field="event" :direction="$sortDirection">Event</x-ui.th>
                        <th>What happened</th>
                        <th>Shop</th>
                        <th>IP</th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $entry)
                    <tr>
                        <td class="whitespace-nowrap text-xs">{{ $fmt->dateTime($entry->created_at) }}</td>

                        <td class="text-xs">
                            {{ $staffNames[$entry->causer_id] ?? 'System' }}
                        </td>

                        <td class="text-xs"><code>{{ $entry->event }}</code></td>

                        <td class="text-sm">
                            {{ $entry->description }}

                            @if ($entry->properties)
                                <details class="mt-0.5">
                                    <summary class="cursor-pointer text-[11px] text-slate-400 hover:text-brand">Details</summary>
                                    <pre class="mt-1 overflow-x-auto rounded bg-slate-50 p-2 text-[11px] dark:bg-slate-800">{{ json_encode($entry->properties, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) }}</pre>
                                </details>
                            @endif
                        </td>

                        <td class="text-xs">
                            @if ($entry->tenant)
                                <a href="{{ route('tenants.show', $entry->tenant_id) }}" wire:navigate
                                   class="text-brand hover:underline">{{ $entry->tenant->business_name }}</a>
                            @else
                                —
                            @endif
                        </td>

                        <td class="tabular text-xs text-slate-500">{{ $entry->ip_address ?: '—' }}</td>
                    </tr>
                @endforeach
            </x-ui.table>

            <x-resource.pagination :rows="$rows" />
        @endif
    </x-ui.card>
</div>