<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
    @foreach ([
        ['Waiting', $kpis['waiting'] ?? 0, 'text-amber-700'],
        ['In care', $kpis['in_progress'] ?? 0, 'text-sky-700'],
        ['Clinical open', $kpis['clinical_open'] ?? 0, 'text-rose-700'],
        ['Completed today', $kpis['completed_today'] ?? 0, 'text-emerald-700'],
        ['Open visits', $kpis['open_visits'] ?? 0, 'text-indigo-700'],
        ['Paid today', ($currency ?? 'GHS').' '.number_format(($kpis['revenue_today_minor'] ?? 0) / 100, 2), 'text-slate-800'],
    ] as [$label, $value, $color])
        <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3">
            <p class="text-xs font-medium uppercase tracking-wide text-slate-500">{{ $label }}</p>
            <p class="mt-1 text-2xl font-semibold {{ $color }}">{{ $value }}</p>
        </div>
    @endforeach
</div>

@if (! empty($kpis['stages']))
    <section class="rounded-2xl border border-slate-200 bg-white p-5">
        <h2 class="text-sm font-semibold text-slate-900">Workflow stages</h2>
        <div class="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($kpis['stages'] as $stage)
                <div class="rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
                    <p class="text-xs text-slate-500">{{ $stage['label'] }}</p>
                    <p class="text-lg font-semibold text-slate-900">{{ $stage['count'] }}</p>
                </div>
            @endforeach
        </div>
    </section>
@endif

<div class="grid gap-4 lg:grid-cols-2">
    <section class="rounded-2xl border border-slate-200 bg-white p-5 lg:col-span-2">
        <div class="flex items-center justify-between gap-3">
            <h2 class="text-sm font-semibold text-slate-900">Waiting patients</h2>
            <a href="{{ route('care.specialty.visits', $moduleKey) }}" class="text-xs font-medium text-indigo-600">All visits</a>
        </div>
        <div class="mt-3 space-y-2">
            @forelse ($waiting as $appointment)
                <div class="flex items-start justify-between gap-4 rounded-xl border border-slate-100 bg-slate-50 px-3 py-3 text-sm">
                    <div class="min-w-0 flex-1 space-y-1">
                        @if (! empty($queueIntegration['enabled']) && $appointment->queue_ticket_number)
                            @include('care.partials.queue-ticket', [
                                'ticketNumber' => $appointment->queue_ticket_number,
                                'ticketStatus' => $appointment->queue_ticket_status,
                                'showAssignment' => false,
                            ])
                        @endif
                        <p class="truncate font-semibold text-slate-900">{{ $appointment->patient?->fullName() }}</p>
                        <p class="truncate text-xs text-slate-500">{{ $appointment->practitioner?->name ?? 'Unassigned' }}</p>
                    </div>
                    @if ($appointment->visit)
                        <a href="{{ route('care.specialty.workspace', ['module' => $moduleKey, 'visit' => $appointment->visit]) }}" class="shrink-0 text-sky-600">Open</a>
                    @else
                        <a href="{{ route('care.appointments.show', $appointment) }}" class="shrink-0 text-sky-600">View</a>
                    @endif
                </div>
            @empty
                <p class="rounded-xl border border-dashed border-slate-200 px-4 py-8 text-center text-sm text-slate-500">No patients waiting.</p>
            @endforelse
        </div>
    </section>
</div>
