@php
    $filterOptions = [
        ''            => ['label' => t('activities.filter.all'),          'icon' => 'squares-2x2'],
        'event'       => ['label' => t('activities.filter.events'),       'icon' => 'calendar'],
        'reminder'    => ['label' => t('activities.filter.reminders'),  'icon' => 'bell'],
        'automation'  => ['label' => t('activities.filter.automations'),  'icon' => 'bolt'],
        'contact'     => ['label' => t('activities.filter.contacts'),      'icon' => 'user'],
        'note'        => ['label' => t('activities.filter.notes'),       'icon' => 'document-text'],
        'task'        => ['label' => t('activities.filter.tasks'),      'icon' => 'check-circle'],
        'integration' => ['label' => t('activities.filter.integrations'), 'icon' => 'link'],
        'system'      => ['label' => t('activities.filter.system'),        'icon' => 'cog-6-tooth'],
    ];

    $today     = now($tz)->toDateString();
    $yesterday = now($tz)->subDay()->toDateString();
@endphp

<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex items-start justify-between">
        <div>
            <h2 class="text-xl font-semibold text-gray-800">{{ t('activities.title') }}</h2>
            <p class="text-sm text-gray-500 mt-1">{{ t('activities.subtitle') }}</p>
        </div>
        @if($activities->total() > 0)
            <button wire:click="clearAll"
                    wire:confirm="{{ t('activities.confirm_delete_all') }}"
                    class="flex items-center gap-1.5 text-xs text-gray-400 hover:text-red-500 border border-gray-200 hover:border-red-200 px-3 py-1.5 rounded-lg transition-colors">
                <x-heroicon-o-trash class="w-3.5 h-3.5"/>
                {{ t('activities.delete_all') }}
            </button>
        @endif
    </div>


    {{-- STATS --}}
    @if($stats && $stats->total > 0)
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            @foreach([
                ['label' => t('activities.total'),      'value' => $stats->total,       'icon' => 'squares-2x2',  'color' => 'text-gray-600',   'bg' => 'bg-gray-100'],
                ['label' => t('activities.today'),       'value' => $stats->today,       'icon' => 'sun',          'color' => 'text-amber-600',  'bg' => 'bg-amber-50'],
                ['label' => t('activities.events'),     'value' => $stats->events,      'icon' => 'calendar',     'color' => 'text-indigo-600', 'bg' => 'bg-indigo-50'],
                ['label' => t('activities.automations'),'value' => $stats->automations, 'icon' => 'bolt',         'color' => 'text-purple-600', 'bg' => 'bg-purple-50'],
            ] as $stat)
                <div class="bg-white border border-gray-100 rounded-xl px-4 py-3.5 flex items-center gap-3 shadow-sm">
                    <div class="w-8 h-8 rounded-lg {{ $stat['bg'] }} flex items-center justify-center shrink-0">
                        @if($stat['icon'] === 'squares-2x2')  <x-heroicon-o-squares-2x2 class="w-4 h-4 {{ $stat['color'] }}"/>
                        @elseif($stat['icon'] === 'sun')       <x-heroicon-o-sun class="w-4 h-4 {{ $stat['color'] }}"/>
                        @elseif($stat['icon'] === 'calendar')  <x-heroicon-o-calendar class="w-4 h-4 {{ $stat['color'] }}"/>
                        @else                                  <x-heroicon-o-bolt class="w-4 h-4 {{ $stat['color'] }}"/>
                        @endif
                    </div>
                    <div>
                        <p class="text-lg font-semibold text-gray-800 leading-none">{{ number_format($stat['value']) }}</p>
                        <p class="text-xs text-gray-400 mt-0.5">{{ $stat['label'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    @endif


    {{-- FILTER + SUCHE --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-4 flex flex-col sm:flex-row gap-3 items-start sm:items-center">

        {{-- Suche --}}
        <div class="relative flex-1 w-full">
            <x-heroicon-o-magnifying-glass class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
            <input wire:model.live.debounce.300ms="search"
                   type="text"
                   placeholder="{{ t('activities.search') }}"
                   class="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
        </div>

        {{-- Typ-Filter --}}
        <div class="flex flex-wrap gap-1.5 shrink-0">
            @foreach($filterOptions as $key => $opt)
                <button wire:click="$set('filterType', '{{ $key }}')"
                        class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium border transition-all
                            {{ $filterType === $key
                                ? 'bg-indigo-600 text-white border-indigo-600 shadow-sm'
                                : 'bg-white text-gray-500 border-gray-200 hover:border-gray-300 hover:text-gray-700' }}">
                    @if($opt['icon'] === 'squares-2x2')      <x-heroicon-o-squares-2x2 class="w-3 h-3"/>
                    @elseif($opt['icon'] === 'calendar')     <x-heroicon-o-calendar class="w-3 h-3"/>
                    @elseif($opt['icon'] === 'bell')         <x-heroicon-o-bell class="w-3 h-3"/>
                    @elseif($opt['icon'] === 'bolt')         <x-heroicon-o-bolt class="w-3 h-3"/>
                    @elseif($opt['icon'] === 'user')         <x-heroicon-o-user class="w-3 h-3"/>
                    @elseif($opt['icon'] === 'document-text')<x-heroicon-o-document-text class="w-3 h-3"/>
                    @elseif($opt['icon'] === 'check-circle') <x-heroicon-o-check-circle class="w-3 h-3"/>
                    @elseif($opt['icon'] === 'link')         <x-heroicon-o-link class="w-3 h-3"/>
                    @else                                    <x-heroicon-o-cog-6-tooth class="w-3 h-3"/>
                    @endif
                    {{ $opt['label'] }}
                </button>
            @endforeach
        </div>

    </div>


    {{-- TIMELINE --}}
    @if($grouped->isEmpty())

        {{-- EMPTY STATE --}}
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm py-16 flex flex-col items-center gap-3">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <x-heroicon-o-clock class="w-6 h-6 text-gray-400"/>
            </div>
            <p class="text-sm font-medium text-gray-600">{{ t('activities.no_activities') }}</p>
            @if($search || $filterType)
                <p class="text-xs text-gray-400">{{ t('activities.adjust_filter') }}</p>
                <button wire:click="$set('search', ''); $set('filterType', '')"
                        class="text-xs text-indigo-600 hover:underline mt-1">{{ t('common.reset_filter') }}</button>
            @else
                <p class="text-xs text-gray-400">{{ t('activities.auto_logged') }}</p>
            @endif
        </div>

    @else

        <div class="space-y-6">
            @foreach($grouped as $date => $dayActivities)
                @php
                    $label = match($date) {
                        $today     => t('common.today'),
                        $yesterday => t('activities.yesterday'),
                        default    => \Carbon\Carbon::parse($date)->translatedFormat('l, d. F Y'),
                    };
                @endphp

                {{-- Datums-Gruppe --}}
                <div>

                    {{-- Datum-Label --}}
                    <div class="flex items-center gap-3 mb-3">
                        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider whitespace-nowrap">{{ $label }}</span>
                        <div class="flex-1 border-t border-gray-100"></div>
                        <span class="text-xs text-gray-300 shrink-0">{{ $dayActivities->count() }}</span>
                    </div>

                    {{-- Aktivitäten des Tages --}}
                    <div class="bg-white border border-gray-100 rounded-xl shadow-sm divide-y divide-gray-50">
                        @foreach($dayActivities as $activity)
                            @php $v = $activity->visual(); @endphp

                            <div class="flex items-start gap-4 px-5 py-4 group hover:bg-gray-50/50 transition-colors"
                                 wire:key="act-{{ $activity->id }}">

                                {{-- Icon --}}
                                <div class="w-8 h-8 rounded-lg {{ $v['bg'] }} flex items-center justify-center shrink-0 mt-0.5">
                                    @if($v['icon'] === 'calendar')                    <x-heroicon-o-calendar class="w-4 h-4 {{ $v['text'] }}"/>
                                    @elseif($v['icon'] === 'bell')                    <x-heroicon-o-bell class="w-4 h-4 {{ $v['text'] }}"/>
                                    @elseif($v['icon'] === 'bolt')                    <x-heroicon-o-bolt class="w-4 h-4 {{ $v['text'] }}"/>
                                    @elseif($v['icon'] === 'user')                    <x-heroicon-o-user class="w-4 h-4 {{ $v['text'] }}"/>
                                    @elseif($v['icon'] === 'link')                    <x-heroicon-o-link class="w-4 h-4 {{ $v['text'] }}"/>
                                    @elseif($v['icon'] === 'document-text')           <x-heroicon-o-document-text class="w-4 h-4 {{ $v['text'] }}"/>
                                    @elseif($v['icon'] === 'check-circle')            <x-heroicon-o-check-circle class="w-4 h-4 {{ $v['text'] }}"/>
                                    @elseif($v['icon'] === 'arrow-right-on-rectangle')<x-heroicon-o-arrow-right-on-rectangle class="w-4 h-4 {{ $v['text'] }}"/>
                                    @else                                             <x-heroicon-o-cog-6-tooth class="w-4 h-4 {{ $v['text'] }}"/>
                                    @endif
                                </div>

                                {{-- Inhalt --}}
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between gap-2">
                                        <div class="min-w-0">
                                            <p class="text-sm font-medium text-gray-800 leading-tight">{{ $activity->title }}</p>
                                            @if($activity->description)
                                                <p class="text-xs text-gray-400 mt-0.5 truncate">{{ $activity->description }}</p>
                                            @endif
                                        </div>
                                        <div class="flex items-center gap-2 shrink-0">
                                            <span class="text-[11px] text-gray-300 whitespace-nowrap">
                                                {{ $activity->created_at->setTimezone($tz)->format('H:i') }}
                                            </span>
                                            <button wire:click="delete('{{ $activity->id }}')"
                                                    class="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all">
                                                <x-heroicon-o-x-mark class="w-3.5 h-3.5"/>
                                            </button>
                                        </div>
                                    </div>

                                    {{-- Typ-Badge + Meta --}}
                                    <div class="flex items-center gap-2 mt-1.5">
                                        <span class="text-[10px] font-medium {{ $v['text'] }} {{ $v['bg'] }} px-1.5 py-0.5 rounded-md">
                                            {{ $activity->typeLabel() }}
                                        </span>
                                        @if(!empty($activity->meta))
                                            @foreach(array_slice($activity->meta, 0, 2) as $key => $value)
                                                <span class="text-[10px] text-gray-400">{{ $key }}: {{ is_array($value) ? implode(', ', $value) : $value }}</span>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>

                            </div>
                        @endforeach
                    </div>

                </div>
            @endforeach
        </div>

        {{-- PAGINATION --}}
        @if($activities->hasPages())
            <div class="flex items-center justify-between text-sm text-gray-500 pt-2">
                <span class="text-xs">
                    {{ $activities->firstItem() }}–{{ $activities->lastItem() }} {{ t('activities.of_total', ['total' => $activities->total()]) }}
                </span>
                <div class="flex gap-1">
                    @if($activities->onFirstPage())
                        <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">‹</span>
                    @else
                        <button wire:click="previousPage"
                                class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">‹</button>
                    @endif

                    @foreach($activities->getUrlRange(max(1, $activities->currentPage() - 2), min($activities->lastPage(), $activities->currentPage() + 2)) as $page => $url)
                        <button wire:click="gotoPage({{ $page }})"
                                class="px-3 py-1.5 rounded-lg border text-xs transition-colors
                                    {{ $page === $activities->currentPage()
                                        ? 'bg-indigo-600 text-white border-indigo-600'
                                        : 'border-gray-200 text-gray-600 hover:bg-gray-50' }}">
                            {{ $page }}
                        </button>
                    @endforeach

                    @if($activities->hasMorePages())
                        <button wire:click="nextPage"
                                class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">›</button>
                    @else
                        <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">›</span>
                    @endif
                </div>
            </div>
        @endif

    @endif

</div>
