@php
    $alertCount = $workload['alerts'];
@endphp

<x-app-layout title="Nursing kardex">
    <x-page-header
        title="Nursing kardex"
        subtitle="The house by ward — acuity, fall risk, code status and the early-warning picture, kept by the nurse in charge."
        icon="clipboard-list">
        <x-slot:meta>
            <span class="text-xs text-slate-500">{{ $workload['cards'] }} card{{ $workload['cards'] === 1 ? '' : 's' }} on the board</span>
        </x-slot:meta>

        <x-slot:actions>
            @can('observations.view')
                <a href="{{ route('nursing.observations.index') }}" class="hms-btn-secondary">
                    <x-icon name="heart-pulse" size="sm" />
                    Observation charts
                    @if ($alertCount)
                        <span class="ml-1 rounded-full bg-red-100 px-1.5 py-0.5 text-[10px] font-semibold text-red-700">{{ $alertCount }}</span>
                    @endif
                </a>
            @endcan
        </x-slot:actions>
    </x-page-header>

    <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-5">
        <x-stat-card label="Cards on the board" :value="number_format($workload['cards'])" icon="clipboard-list" tone="brand" />
        <x-stat-card label="Total acuity" :value="number_format($workload['acuity'])"
                     :hint="'Sum of shift acuity, 1–5 per card'" icon="chart-bar" tone="blue" />
        <x-stat-card label="Acuity 4–5" :value="number_format($workload['critical'])"
                     :hint="'Need highly dependent or one-to-one care'" icon="heart-pulse" tone="orange" />
        <x-stat-card label="High fall risk" :value="number_format($workload['fallRisks'])" icon="warning" tone="amber" />
        <x-stat-card label="EWS alerts (12h)" :value="number_format($alertCount)"
                     :hint="'Observations that scored for escalation'" icon="activity" tone="red" />
    </div>

    <x-card flush>
        <form method="GET" action="{{ route('nursing.kardex.index') }}"
              class="flex flex-wrap items-end gap-3 border-b border-slate-200 bg-slate-50/70 px-5 py-4">
            <div class="min-w-[14rem] flex-1">
                <x-form.input name="q" label="Find a card" :value="$term"
                              placeholder="Patient name, MRN or admission no…" />
            </div>
            <div class="w-48">
                <x-form.select name="ward" label="Ward" :options="$wards" placeholder="All wards"
                               :value="$selectedWard ?: null" />
            </div>
            <button type="submit" class="hms-btn-primary hms-btn-sm">
                <x-icon name="search" size="xs" />
                Filter
            </button>
            @if ($term !== '' || $selectedWard)
                <a href="{{ route('nursing.kardex.index') }}" class="hms-btn-ghost hms-btn-sm">Reset</a>
            @endif
        </form>

        @if ($byWard->isEmpty())
            <x-empty-state icon="clipboard-list" title="No cards on the board">
                @if ($term !== '' || $selectedWard)
                    Nothing matches that filter. Every admitted patient with an open kardex card would appear here.
                @else
                    Nobody is currently admitted — the board fills as patients come in through admissions.
                @endif
            </x-empty-state>
        @else
            @foreach ($byWard as $wardName => $group)
                <div class="border-b border-slate-100 last:border-0">
                    <div class="flex items-center justify-between gap-3 bg-slate-50/80 px-5 py-2.5">
                        <p class="flex items-center gap-2 text-sm font-semibold text-slate-700">
                            <x-icon name="bed" size="sm" class="text-slate-400" />
                            {{ $wardName }}
                        </p>
                        <span class="text-xs text-slate-500">
                            {{ $group->count() }} patient{{ $group->count() === 1 ? '' : 's' }} ·
                            acuity {{ $group->sum(fn ($a) => $a->nursingKardex?->acuity_level ?? 0) }}
                        </span>
                    </div>

                    <div class="grid gap-4 p-5 sm:grid-cols-2 xl:grid-cols-3">
                        @foreach ($group as $admission)
                            @php
                                $kardexCard = $admission->nursingKardex;
                                $acuity = $kardexCard?->acuity_level;
                                $acuityPalette = [
                                    'green' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
                                    'blue' => 'bg-blue-50 text-blue-700 ring-blue-200',
                                    'amber' => 'bg-amber-50 text-amber-800 ring-amber-200',
                                    'orange' => 'bg-orange-50 text-orange-700 ring-orange-200',
                                    'red' => 'bg-red-50 text-red-700 ring-red-200',
                                    'gray' => 'bg-slate-100 text-slate-600 ring-slate-200',
                                ][$kardexCard?->acuity_color ?? 'gray'];
                            @endphp
                            <a href="{{ route('admissions.kardex.show', $admission) }}"
                               class="group flex flex-col gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-brand-400 hover:shadow-md">
                                <div class="flex items-start justify-between gap-2">
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-semibold text-slate-900 group-hover:text-brand-700">
                                            {{ $admission->patient?->full_name }}
                                        </p>
                                        <p class="mt-0.5 truncate text-xs text-slate-500">
                                            <span class="font-mono">{{ $admission->patient?->medical_record_number }}</span>
                                            · {{ $admission->admission_no }}
                                        </p>
                                    </div>
                                    <span class="shrink-0 rounded-lg px-2 py-1 text-center text-sm font-bold ring-1 ring-inset {{ $acuityPalette }}"
                                          title="Shift acuity">
                                        {{ $acuity ?? '–' }}
                                    </span>
                                </div>

                                <p class="text-xs text-slate-500">
                                    @if ($admission->bed)
                                        Bed {{ $admission->bed->bed_number }}
                                        @if ($admission->room) · Room {{ $admission->room->room_number }} @endif
                                    @else
                                        <span class="font-medium text-amber-600">Awaiting a bed</span>
                                    @endif
                                    · Dr {{ $admission->attendingDoctor?->name ?? '—' }}
                                </p>

                                <div class="flex flex-wrap items-center gap-1.5">
                                    @if ($admission->is_icu)
                                        <span class="inline-flex items-center gap-1 rounded-md bg-red-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-red-700">
                                            <x-icon name="heart-pulse" size="xs" /> ICU
                                        </span>
                                    @endif
                                    @if ($kardexCard)
                                        <x-status-badge field="fall_risk" :value="$kardexCard->fall_risk" size="sm" />
                                        <x-status-badge field="code_status" :value="$kardexCard->code_status" size="sm" />
                                    @else
                                        <span class="inline-flex items-center rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                                            Card not opened
                                        </span>
                                    @endif
                                    @if ($admission->has_ews_alert)
                                        <span class="inline-flex items-center gap-1 rounded-md bg-red-600 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white">
                                            <x-icon name="activity" size="xs" /> EWS
                                        </span>
                                    @endif
                                </div>

                                <div class="mt-auto flex items-center justify-between border-t border-slate-100 pt-2 text-[11px] text-slate-400">
                                    <span>
                                        @if ($kardexCard?->assignedNurse)
                                            Nurse {{ $kardexCard->assignedNurse->name }}
                                        @else
                                            No nurse assigned
                                        @endif
                                    </span>
                                    <span>
                                        @if ($admission->last_observed_at)
                                            Obs {{ \Illuminate\Support\Carbon::parse($admission->last_observed_at)->diffForHumans(short: true) }}
                                        @else
                                            No observations yet
                                        @endif
                                    </span>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endforeach
        @endif
    </x-card>
</x-app-layout>