@props([
    'patient',
    'visit' => null,
    'appointment' => null,
    'outstandingMinor' => 0,
    'allergies' => [],
    'insuranceSummary' => null,
    'emergency' => false,
    'clinicalAlerts' => [],
    'currency' => 'GHS',
])

@php
    $age = $patient->date_of_birth?->age;
    $gender = $patient->gender ? ucfirst((string) $patient->gender) : null;
@endphp

<section class="rounded-2xl border border-slate-200 bg-white px-4 py-4 sm:px-5">
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="flex min-w-0 items-start gap-3">
            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-slate-100 text-sm font-semibold text-slate-600">
                {{ strtoupper(substr($patient->first_name ?? 'P', 0, 1).substr($patient->last_name ?? '', 0, 1)) }}
            </div>
            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-2">
                    <h2 class="truncate text-lg font-semibold text-slate-900">{{ $patient->fullName() }}</h2>
                    @if ($emergency)
                        <span class="rounded-full bg-rose-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-rose-700">Emergency contact on file</span>
                    @endif
                </div>
                <p class="mt-0.5 text-sm text-slate-500">
                    <span class="font-mono text-sky-700">{{ $patient->patient_number }}</span>
                    @if ($gender) · {{ $gender }} @endif
                    @if ($age !== null) · {{ $age }} yrs @endif
                    @if ($visit)
                        · Visit <span class="font-mono text-xs">{{ \Illuminate\Support\Str::limit($visit->uuid, 8, '') }}</span>
                    @endif
                </p>
                <p class="mt-1 text-xs text-slate-500">
                    @if ($appointment?->practitioner)
                        {{ $appointment->practitioner->name }}
                        @if ($appointment->queue_ticket_number)
                            · Ticket {{ $appointment->queue_ticket_number }}
                            @if ($appointment->queue_ticket_status)
                                ({{ $appointment->queue_ticket_status }})
                            @endif
                        @endif
                    @else
                        No assigned clinician
                    @endif
                </p>
            </div>
        </div>
        <div class="grid gap-2 text-right text-xs sm:text-sm">
            <div>
                <p class="text-slate-500">Outstanding</p>
                <p class="font-semibold {{ $outstandingMinor > 0 ? 'text-amber-700' : 'text-slate-800' }}">
                    {{ $currency }} {{ number_format($outstandingMinor / 100, 2) }}
                </p>
            </div>
            @if ($insuranceSummary)
                <div>
                    <p class="text-slate-500">Insurance</p>
                    <p class="font-medium text-slate-800">{{ $insuranceSummary }}</p>
                </div>
            @endif
        </div>
    </div>

    @if (! empty($allergies))
        <div class="mt-3 flex flex-wrap gap-1.5 border-t border-slate-100 pt-3">
            <span class="text-xs font-semibold uppercase tracking-wide text-rose-600">Allergies</span>
            @foreach ($allergies as $allergy)
                <span class="rounded-full bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-800">{{ $allergy }}</span>
            @endforeach
        </div>
    @endif

    @if (! empty($clinicalAlerts))
        <div class="mt-3 space-y-1.5 border-t border-slate-100 pt-3">
            <span class="text-xs font-semibold uppercase tracking-wide text-amber-700">Alerts</span>
            @foreach ($clinicalAlerts as $alert)
                <p @class([
                    'text-xs font-medium',
                    'text-rose-700' => ($alert['severity'] ?? '') === 'critical',
                    'text-amber-800' => ($alert['severity'] ?? '') !== 'critical',
                ])>{{ $alert['message'] ?? '' }}</p>
            @endforeach
        </div>
    @endif
</section>