@extends('layouts.admin', [
    'title' => 'Reminders',
    'pageTitle' => 'Reminders',
    'active' => 'reminders',
])

@php
    $statusVariants = [
        'Scheduled' => 'warning',
        'Sent' => 'success',
        'Failed' => 'danger',
        'Cancelled' => 'muted',
    ];

    $summary = $summary ?? [];
    $activities = $activities ?? [];
    $performance = $performance ?? ['success_rate' => 0, 'whatsapp_share' => 0, 'note' => 'No reminder performance data is available yet.'];

    $quickLinks = [
        ['label' => 'Message Templates', 'note' => 'Edit booking and invoice messages', 'icon' => 'file-text', 'route' => route('admin.reminders.templates')],
        ['label' => 'Scheduled Queue', 'note' => 'Review upcoming reminder jobs', 'icon' => 'clock', 'route' => route('admin.reminders.scheduled')],
        ['label' => 'Delivery Logs', 'note' => 'Track sent and failed reminders', 'icon' => 'chart-column', 'route' => route('admin.reminders.logs')],
        ['label' => 'Channel Settings', 'note' => 'Configure WhatsApp and SMTP', 'icon' => 'settings', 'route' => route('admin.reminders.whatsapp')],
    ];
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <div>
                <p class="text-sm font-medium text-booklio-muted">Manage automated WhatsApp and email communication for appointments, invoices, and follow-ups.</p>
            </div>
            @include('admin.reminders.partials.nav', ['activeTab' => 'overview'])
        </div>

        <section class="grid gap-5 sm:grid-cols-2 2xl:grid-cols-6">
            @foreach ($summary as $item)
                <x-ui.card class="min-w-0 overflow-hidden">
                    <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold text-slate-600">{{ $item['label'] }}</p>
                            <p class="mt-3 text-3xl font-extrabold leading-none">{{ $item['value'] }}</p>
                            <p class="mt-4 text-xs font-semibold text-booklio-muted">{{ $item['note'] }}</p>
                        </div>
                        <div class="hidden h-12 w-12 shrink-0 items-center justify-center rounded-xl sm:flex {{ $item['class'] }}">
                            <x-ui.icon :name="$item['icon']" class="h-6 w-6" />
                        </div>
                    </div>
                </x-ui.card>
            @endforeach
        </section>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Recent Reminder Activity" padding="p-0">
                <div class="divide-y divide-booklio-border">
                    @forelse ($activities as $activity)
                        <div class="flex flex-col gap-4 p-5 md:flex-row md:items-start md:justify-between">
                            <div class="flex min-w-0 gap-3">
                                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full {{ $activity['channel'] === 'WhatsApp' ? 'bg-emerald-50 text-emerald-600' : 'bg-blue-50 text-booklio-primary' }}">
                                    <x-ui.icon :name="$activity['channel'] === 'WhatsApp' ? 'message-circle' : 'mail'" class="h-5 w-5" />
                                </div>
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <p class="text-sm font-extrabold text-booklio-dark">{{ $activity['type'] }}</p>
                                        <x-ui.badge :variant="$activity['channel'] === 'WhatsApp' ? 'success' : 'primary'">{{ $activity['channel'] }}</x-ui.badge>
                                    </div>
                                    <p class="mt-1 text-sm font-semibold text-slate-700">{{ $activity['customer'] }}</p>
                                    <p class="mt-1 break-words text-sm leading-6 text-booklio-muted">{{ $activity['message'] }}</p>
                                </div>
                            </div>
                            <div class="flex shrink-0 items-center justify-between gap-3 md:flex-col md:items-end">
                                <x-ui.badge :variant="$statusVariants[$activity['status']] ?? 'muted'">{{ $activity['status'] }}</x-ui.badge>
                                <p class="text-xs font-bold text-booklio-muted">{{ $activity['time'] }}</p>
                            </div>
                        </div>
                    @empty
                        <x-ui.empty-state
                            title="No reminder activity yet"
                            description="Sent, failed, and scheduled reminders will appear here after the reminder queue starts recording activity."
                            icon="bell"
                        />
                    @endforelse
                </div>
            </x-ui.card>

            <div class="space-y-5">
                <x-ui.card title="Reminder Performance">
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between text-sm font-bold">
                                <span class="text-booklio-muted">Delivery success</span>
                                <span>{{ $performance['success_rate'] }}%</span>
                            </div>
                            <div class="mt-2 h-2 rounded-full bg-slate-100">
                                <div class="h-2 rounded-full bg-booklio-primary" style="width: {{ min(100, max(0, $performance['success_rate'])) }}%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between text-sm font-bold">
                                <span class="text-booklio-muted">WhatsApp share</span>
                                <span>{{ $performance['whatsapp_share'] }}%</span>
                            </div>
                            <div class="mt-2 h-2 rounded-full bg-slate-100">
                                <div class="h-2 rounded-full bg-emerald-500" style="width: {{ min(100, max(0, $performance['whatsapp_share'])) }}%"></div>
                            </div>
                        </div>
                        <div class="rounded-lg bg-slate-50 p-4 text-sm leading-6 text-slate-600">
                            {{ $performance['note'] }}
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Quick Actions">
                    <div class="space-y-3">
                        @foreach ($quickLinks as $link)
                            <a href="{{ $link['route'] }}" class="flex items-center gap-3 rounded-lg border border-booklio-border p-3 transition hover:border-blue-200 hover:bg-blue-50/40">
                                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-booklio-primary">
                                    <x-ui.icon :name="$link['icon']" class="h-5 w-5" />
                                </span>
                                <span class="min-w-0">
                                    <span class="block text-sm font-extrabold text-booklio-dark">{{ $link['label'] }}</span>
                                    <span class="block truncate text-xs font-medium text-booklio-muted">{{ $link['note'] }}</span>
                                </span>
                            </a>
                        @endforeach
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection