<div class="p-6">
    <x-page-header title="Activity" subtitle="What FFR has been doing automatically" />

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6 mb-6">
        @foreach ($typeOptions as $value => $label)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm px-4 py-3">
                <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ $label }}</p>
                <p class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $summaryDay[$value] }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $summaryWeek[$value] }} in 7d</p>
            </div>
        @endforeach
    </div>

    <div class="mb-4 flex flex-wrap items-center gap-3">
        <select
            wire:model.live="type"
            aria-label="Filter by activity type"
            class="w-56 shrink-0 pl-3 pr-10 py-2 border border-gray-300 rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
        >
            <option value="">All types</option>
            @foreach ($typeOptions as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>

        <select
            wire:model.live="days"
            aria-label="Filter by time range"
            class="w-44 shrink-0 pl-3 pr-10 py-2 border border-gray-300 rounded-md text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
        >
            <option value="1">Last 24 hours</option>
            <option value="7">Last 7 days</option>
            <option value="30">Last 30 days</option>
            <option value="90">Last 90 days</option>
        </select>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
        @forelse ($entries as $entry)
            @include('livewire.partials.activity-entry', ['entry' => $entry])
        @empty
            <div class="px-5 py-12 text-center">
                <p class="text-sm text-gray-500 dark:text-gray-400">No activity in this period.</p>
            </div>
        @endforelse
    </div>

    @if ($entries->hasPages())
        <div class="mt-4">
            {{ $entries->links() }}
        </div>
    @endif
</div>
