@extends('layouts.admin', [
    'title' => 'Reminder Report',
    'pageTitle' => 'Reminder Report',
    'active' => 'reports',
])

@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">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Analyze reminder delivery by channel, success rate, and recent logs.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'reminders'])
        </div>

        @include('admin.reports.partials.filters')

        <section class="grid gap-5 sm:grid-cols-2 xl:grid-cols-5">
            @foreach ($kpis as $item)
                <x-ui.card>
                    <p class="text-sm font-semibold text-slate-600">{{ $item['label'] }}</p>
                    <p class="mt-3 text-3xl font-extrabold">{{ $item['value'] }}</p>
                    <p @class([
                        'mt-4 text-xs font-semibold',
                        'text-emerald-600' => ($item['tone'] ?? null) === 'success',
                        'text-red-600' => ($item['tone'] ?? null) === 'danger',
                        'text-booklio-muted' => ! in_array(($item['tone'] ?? null), ['success', 'danger'], true),
                    ])>{{ $item['note'] }}</p>
                </x-ui.card>
            @endforeach
        </section>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Success Rate Chart">
                <div class="mt-4 h-64 rounded-xl border border-booklio-border bg-slate-50 p-5">
                    <div class="flex h-full items-end gap-3">
                        @forelse ($successBars as $rate)
                            <div class="flex flex-1 flex-col items-center justify-end gap-2">
                                <div class="w-full rounded-t-lg bg-emerald-500" style="height: {{ max(8, $rate['rate'] * 1.7) }}px"></div>
                                <span class="text-[10px] font-bold text-booklio-muted">{{ $rate['rate'] }}%</span>
                            </div>
                        @empty
                            <div class="flex h-full w-full items-center justify-center text-sm font-bold text-booklio-muted">No reminder logs in this range.</div>
                        @endforelse
                    </div>
                </div>
            </x-ui.card>

            <x-ui.card title="Channel Success">
                <div class="space-y-4">
                    @foreach ($channelSuccess as $item)
                        <div><div class="flex justify-between text-sm font-bold"><span class="text-booklio-muted">{{ $item['label'] }}</span><span>{{ $item['percent'] }}%</span></div><div class="mt-2 h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full {{ $item['class'] }}" style="width: {{ $item['percent'] }}%"></div></div></div>
                    @endforeach
                </div>
            </x-ui.card>
        </section>

        <x-ui.card title="Logs Table" padding="p-0">
            <x-ui.table :headers="['Customer', 'Reminder Type', 'Channel', 'Sent Time', 'Status']">
                @forelse ($logs as $log)
                    @php
                        $statusValue = $log->status instanceof \App\Enums\ReminderStatus ? $log->status->value : (string) $log->status;
                    @endphp
                    <tr class="hover:bg-slate-50/80">
                        <td class="text-sm font-extrabold">{{ $log->customer?->name ?? '-' }}</td>
                        <td class="text-sm font-semibold">{{ \Illuminate\Support\Str::headline($log->type) }}</td>
                        <td><x-ui.badge :variant="$log->channel === 'whatsapp' ? 'success' : 'primary'">{{ \Illuminate\Support\Str::headline($log->channel) }}</x-ui.badge></td>
                        <td class="text-sm font-semibold">{{ ($log->sent_at ?? $log->created_at)?->format('M d, Y - g:i A') }}</td>
                        <td><x-ui.badge :variant="match($statusValue) { 'sent' => 'success', 'failed' => 'danger', 'scheduled' => 'warning', default => 'muted' }">{{ \Illuminate\Support\Str::headline($statusValue) }}</x-ui.badge></td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center text-booklio-muted">No reminder logs found.</td></tr>
                @endforelse
            </x-ui.table>
            <div class="p-5"><x-ui.pagination :paginator="$logs" /></div>
        </x-ui.card>
    </div>
@endsection