@use('App\Enums\PermissionName')

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Announcements') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />

            <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                <x-stat-card :label="__('Sent in total')" :value="$stats['total']" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></x-slot>
                </x-stat-card>
                <x-stat-card :label="__('Sent this month')" :value="$stats['this_month']" tone="emerald" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg></x-slot>
                </x-stat-card>
                <x-stat-card :label="__('Holidays ahead')" :value="$stats['upcoming_holidays']" tone="violet" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg></x-slot>
                </x-stat-card>
                <x-stat-card :label="__('Events ahead')" :value="$stats['upcoming_events']" tone="amber" compact>
                    <x-slot name="icon"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></x-slot>
                </x-stat-card>
            </div>

            <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                <x-table-toolbar>
                    <form method="GET" action="{{ route('announcements.index') }}" class="flex flex-wrap items-center gap-4">
                        <label class="flex items-center gap-2 text-sm text-gray-600">
                            <span class="sr-only">{{ __('Search') }}</span>
                            <input type="search" name="q" value="{{ $search }}" placeholder="{{ __('Search titles…') }}" class="rounded-lg border-gray-300 py-2 text-sm text-gray-700 shadow-sm focus:border-brand-500 focus:ring-brand-500">
                        </label>

                        <label class="flex items-center gap-2 text-sm text-gray-600">
                            <span>{{ __('Type') }}</span>
                            <select name="type" onchange="this.form.requestSubmit()" class="rounded-lg border-gray-300 py-2 text-sm text-gray-700 shadow-sm focus:border-brand-500 focus:ring-brand-500">
                                <option value="">{{ __('All types') }}</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->value }}" @selected($selectedType === $type)>{{ $type->label() }}</option>
                                @endforeach
                            </select>
                        </label>

                        @if ($locations->isNotEmpty())
                            <label class="flex items-center gap-2 text-sm text-gray-600">
                                <span>{{ __('Location') }}</span>
                                <select name="location_id" onchange="this.form.requestSubmit()" class="rounded-lg border-gray-300 py-2 text-sm text-gray-700 shadow-sm focus:border-brand-500 focus:ring-brand-500">
                                    <option value="">{{ __('Any audience') }}</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location->id }}" @selected($selectedLocationId === $location->id)>{{ $location->name }}</option>
                                    @endforeach
                                </select>
                            </label>
                        @endif

                        <button type="submit" class="sr-only">{{ __('Search') }}</button>
                    </form>

                    <x-slot name="actions">
                        @can(PermissionName::SendAnnouncements->value)
                            <x-primary-button :href="route('announcements.create')">
                                <x-icon-plus />
                                {{ __('New announcement') }}
                            </x-primary-button>
                        @endcan
                    </x-slot>
                </x-table-toolbar>

                @if ($announcements->isEmpty())
                    <div class="flex flex-col items-center gap-3 px-6 py-16 text-center">
                        <div class="grid h-14 w-14 place-items-center rounded-2xl bg-brand-50 text-brand-600 ring-1 ring-brand-100">
                            <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" /></svg>
                        </div>
                        <div class="text-base font-semibold text-gray-900">{{ $search !== '' || $selectedType || $selectedLocationId ? __('Nothing matches') : __('Nothing sent yet') }}</div>
                        <p class="max-w-sm text-sm text-gray-600">{{ __('Holidays, events and notices you send land here, with who each one went to.') }}</p>
                    </div>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse text-sm">
                            <thead>
                                <tr class="border-y border-gray-200 bg-gray-50 text-xs font-semibold uppercase tracking-wider text-gray-500">
                                    <th class="px-6 py-3 text-start">{{ __('Announcement') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Day') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Sent to') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Sent by') }}</th>
                                    <th class="px-6 py-3 text-start">{{ __('Sent') }}</th>
                                    <th class="px-6 py-3 text-end">{{ __('Actions') }}</th>
                                </tr>
                            </thead>

                            <tbody class="divide-y divide-gray-100">
                                @foreach ($announcements as $announcement)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-3">
                                            <div class="flex items-center gap-2">
                                                <x-badge :tone="$announcement->type->tone()" dot>{{ $announcement->type->label() }}</x-badge>
                                                <a href="{{ route('announcements.show', $announcement) }}" class="font-semibold text-gray-900 hover:text-brand-700">{{ $announcement->title }}</a>
                                            </div>
                                            <div class="mt-1 max-w-md truncate text-xs text-gray-500">{{ str($announcement->body)->squish()->limit(90) }}</div>
                                        </td>
                                        <td class="px-6 py-3 text-gray-700">{{ $announcement->event_date?->format('D, M j, Y') ?? '—' }}</td>
                                        <td class="px-6 py-3">
                                            <div class="text-gray-900">{{ $announcement->audienceLabel() }}</div>
                                            <div class="text-xs text-gray-500">{{ trans_choice(':count person|:count people', $announcement->recipients_count, ['count' => $announcement->recipients_count]) }}</div>
                                        </td>
                                        <td class="px-6 py-3 text-gray-700">{{ $announcement->sender?->name ?? '—' }}</td>
                                        <td class="px-6 py-3 text-gray-700" title="{{ $announcement->sent_at->format('d M Y, H:i') }}">{{ $announcement->sent_at->diffForHumans() }}</td>
                                        <td class="px-6 py-3">
                                            <div class="flex items-center justify-end">
                                                <x-table-action :href="route('announcements.show', $announcement)">{{ __('View') }}</x-table-action>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if ($announcements->hasPages())
                        <div class="border-t border-gray-100 px-6 py-4">
                            {{ $announcements->links() }}
                        </div>
                    @endif
                @endif
            </div>
        </div>
    </div>
</x-app-layout>