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

@php
    $statusVariants = ['Scheduled' => 'warning', 'Sent' => 'success', 'Failed' => 'danger', 'Cancelled' => 'muted'];
    $stats = $stats ?? [];
    $logs = $logs ?? [];
    $filters = $filters ?? [];
@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">
            <p class="text-sm font-medium text-booklio-muted">Track sent and failed reminders with message previews, delivery times, and failure reasons.</p>
            @include('admin.reminders.partials.nav', ['activeTab' => 'logs'])
        </div>

        <section class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($stats as $stat)
                <x-ui.card>
                    <p class="truncate text-sm font-semibold text-slate-600">{{ $stat['label'] }}</p>
                    <p class="mt-3 text-3xl font-extrabold">{{ $stat['value'] }}</p>
                    <p class="mt-4 text-xs font-semibold {{ $stat['tone'] }}">{{ $stat['note'] }}</p>
                </x-ui.card>
            @endforeach
        </section>

        <x-ui.card data-booklio-filter-panel>
            <form method="GET" action="{{ route('admin.reminders.logs') }}" class="grid gap-3 lg:grid-cols-[1fr_170px_170px_170px_auto_auto]" data-booklio-filter-grid>
                <div class="relative">
                    <x-ui.icon name="search" class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
                    <input name="q" value="{{ $filters['q'] ?? '' }}" class="h-11 w-full rounded-lg border border-booklio-border bg-white pl-4 pr-11 text-sm font-medium shadow-soft outline-none placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" placeholder="Search customer or message preview..." />
                </div>
                <select name="status" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    @foreach (['all' => 'All Statuses', 'sent' => 'Sent', 'failed' => 'Failed', 'cancelled' => 'Cancelled'] as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['status'] ?? 'all') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <select name="channel" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    @foreach (['all' => 'All Channels', 'whatsapp' => 'WhatsApp', 'email' => 'Email'] as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['channel'] ?? 'all') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <input name="date" value="{{ $filters['date'] ?? '' }}" type="date" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" />
                <x-ui.button variant="secondary" type="submit">
                    <x-ui.icon name="filter" class="h-4 w-4" />
                    Filter
                </x-ui.button>
                <x-ui.button variant="ghost" href="{{ route('admin.reminders.logs') }}">Reset</x-ui.button>
            </form>
        </x-ui.card>

        <x-ui.card title="Reminder Logs" padding="p-0">
            <div class="hidden overflow-x-auto md:block booklio-scrollbar">
                <table class="min-w-[1240px] w-full divide-y divide-booklio-border">
                    <thead class="bg-slate-50">
                        <tr>
                            @foreach (['Status', 'Channel', 'Customer', 'Type', 'Message Preview', 'Sent Time', 'Failure Reason'] as $heading)
                                <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-booklio-border bg-white">
                        @forelse ($logs as $log)
                            <tr class="transition hover:bg-slate-50/80">
                                <td class="px-5 py-4"><x-ui.badge :variant="$statusVariants[$log['status']] ?? 'muted'">{{ $log['status'] }}</x-ui.badge></td>
                                <td class="px-5 py-4"><x-ui.badge :variant="$log['channel'] === 'WhatsApp' ? 'success' : 'primary'">{{ $log['channel'] }}</x-ui.badge></td>
                                <td class="max-w-[180px] px-5 py-4 text-sm font-extrabold text-booklio-dark"><span class="block truncate">{{ $log['customer'] }}</span></td>
                                <td class="max-w-[180px] px-5 py-4 text-sm font-semibold text-slate-700"><span class="block truncate">{{ $log['type'] }}</span></td>
                                <td class="max-w-sm px-5 py-4 text-sm font-medium leading-6 text-booklio-muted"><span class="line-clamp-2">{{ $log['preview'] }}</span></td>
                                <td class="px-5 py-4 text-sm font-semibold text-slate-700">{{ $log['time'] }}</td>
                                <td class="px-5 py-4 text-sm font-semibold {{ $log['status'] === 'Failed' ? 'text-booklio-danger' : 'text-booklio-muted' }}">{{ $log['reason'] }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-5 py-8">
                                    <x-ui.empty-state
                                        title="No reminder logs found"
                                        description="Try changing the search, status, channel, or date filters."
                                        icon="chart-column"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="divide-y divide-booklio-border md:hidden">
                @forelse ($logs as $log)
                    <div class="p-5">
                        <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-extrabold text-booklio-dark">{{ $log['customer'] }}</p>
                                <p class="truncate text-xs font-medium text-booklio-muted">{{ $log['type'] }}</p>
                            </div>
                            <x-ui.badge :variant="$statusVariants[$log['status']] ?? 'muted'">{{ $log['status'] }}</x-ui.badge>
                        </div>
                        <p class="mt-3 text-sm leading-6 text-slate-600">{{ $log['preview'] }}</p>
                        <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                            <div><p class="text-xs font-bold text-booklio-muted">Channel</p><p class="font-bold">{{ $log['channel'] }}</p></div>
                            <div><p class="text-xs font-bold text-booklio-muted">Sent Time</p><p class="font-bold">{{ $log['time'] }}</p></div>
                            <div class="col-span-2"><p class="text-xs font-bold text-booklio-muted">Failure Reason</p><p class="font-bold {{ $log['status'] === 'Failed' ? 'text-booklio-danger' : '' }}">{{ $log['reason'] }}</p></div>
                        </div>
                    </div>
                @empty
                    <div class="p-5">
                        <x-ui.empty-state
                            title="No reminder logs found"
                            description="Try changing the search, status, channel, or date filters."
                            icon="chart-column"
                        />
                    </div>
                @endforelse
            </div>
        </x-ui.card>
    </div>
@endsection