@php
    $patient = $assessment->patient;
    $admission = $assessment->admission;

    $bradenRows = [
        ['label' => 'Sensory perception', 'score' => $assessment->braden_sensory, 'max' => 4],
        ['label' => 'Moisture', 'score' => $assessment->braden_moisture, 'max' => 4],
        ['label' => 'Activity', 'score' => $assessment->braden_activity, 'max' => 4],
        ['label' => 'Mobility', 'score' => $assessment->braden_mobility, 'max' => 4],
        ['label' => 'Nutrition', 'score' => $assessment->braden_nutrition, 'max' => 4],
        ['label' => 'Friction & shear', 'score' => $assessment->braden_friction, 'max' => 3],
    ];

    $stageValue = $assessment->pressure_injury_present ? $assessment->injury_stage : 'none';
@endphp

<x-app-layout title="Skin assessment · {{ $patient?->full_name }}">
    <x-page-header
        title="Skin assessment"
        subtitle="{{ $assessment->type_label }} · {{ $patient?->full_name ?? 'Unknown patient' }} · {{ $assessment->assessed_at?->format('d M Y H:i') }}"
        icon="scan"
        :back="route('admissions.kardex.show', $admission)"
        backLabel="Kardex">
        <x-slot:meta>
            <x-status-badge field="skin_assessment_type" :value="$assessment->assessment_type" dot />
            <x-status-badge field="braden_risk" :value="$assessment->braden_risk" />
            <x-status-badge field="pressure_injury_stage" :value="$stageValue" />
        </x-slot:meta>
    </x-page-header>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            {{-- 1 · head-to-toe map --}}
            <x-card flush title="Head to toe" icon="scan"
                    header="The regions the exam walks, in the order the hands go.">
                <ul class="divide-y divide-slate-100">
                    @foreach ($regionLabels as $region => $label)
                        @php($note = $regionNotes[$region] ?? null)
                        <li class="flex items-start gap-3 px-5 py-3">
                            <span class="mt-0.5 shrink-0">
                                @if ($note)
                                    <x-icon name="exclamation" size="sm" class="text-amber-600" />
                                @else
                                    <x-icon name="check" size="sm" class="text-emerald-600" />
                                @endif
                            </span>
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-slate-800">{{ $label }}</p>
                                @if ($note)
                                    <p class="mt-0.5 text-xs text-slate-600">{{ $note }}</p>
                                @else
                                    <p class="mt-0.5 text-xs text-slate-400">No finding noted</p>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            </x-card>

            {{-- 2 · pressure injury --}}
            @if ($assessment->pressure_injury_present)
                <x-card title="Pressure injury" icon="warning">
                    <div class="space-y-3">
                        <div class="flex flex-wrap items-center gap-2">
                            <x-status-badge field="pressure_injury_stage" :value="$assessment->injury_stage" />
                            <span class="text-sm font-medium text-slate-800">{{ $assessment->injury_site ?: 'Site not recorded' }}</span>
                        </div>
                        <p class="text-xs text-slate-500">
                            Record the injury in the wound chart and reassess at every turn — stage can progress even while the
                            surface looks unchanged.
                        </p>
                    </div>
                </x-card>
            @else
                <x-card title="Pressure injury" icon="shield-check">
                    <p class="text-sm text-slate-600">
                        No pressure injury found on this survey — keep preventative turning, moisture control and the
                        Braden-appropriate mattress in place.
                    </p>
                </x-card>
            @endif

            {{-- 3 · narrative findings --}}
            @if ($assessment->findings_summary)
                <x-card title="Findings summary" icon="document-text">
                    <p class="text-sm text-slate-700">{{ $assessment->findings_summary }}</p>
                </x-card>
            @endif

            @if ($assessment->interventions)
                <x-card title="Interventions" icon="clipboard-check">
                    <p class="text-sm text-slate-700">{{ $assessment->interventions }}</p>
                </x-card>
            @endif
        </div>

        {{-- ------------------------------------------------ right rail --}}
        <div class="space-y-6">
            <x-card title="Braden scale" icon="chart-bar">
                <table class="w-full text-sm">
                    <tbody class="divide-y divide-slate-100">
                        @foreach ($bradenRows as $row)
                            <tr>
                                <td class="py-2 text-slate-600">{{ $row['label'] }}</td>
                                <td class="py-2 text-right tabular-nums">
                                    <span class="font-semibold text-slate-800">{{ $row['score'] }}</span>
                                    <span class="text-xs text-slate-400">/ {{ $row['max'] }}</span>
                                </td>
                            </tr>
                        @endforeach
                        <tr class="border-t-2 border-slate-200">
                            <td class="py-2.5 font-semibold text-slate-800">Total</td>
                            <td class="py-2.5 text-right tabular-nums">
                                <span class="text-base font-bold text-slate-900">{{ $assessment->braden_total }}</span>
                                <span class="text-xs text-slate-400">/ 23</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="mt-3 border-t border-slate-100 pt-3">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="text-xs font-semibold uppercase tracking-wide text-slate-400">Risk band</span>
                        <x-status-badge field="braden_risk" :value="$assessment->braden_risk" />
                    </div>
                    <p class="mt-2 text-xs text-slate-500">
                        Lower totals carry greater pressure-injury risk; the band above follows the standard Braden cut-offs.
                    </p>
                </div>
            </x-card>

            <x-card title="Patient" icon="user-cog">
                <div class="space-y-3">
                    <div>
                        <p class="text-sm font-semibold text-slate-800">{{ $patient?->full_name ?? '—' }}</p>
                        <p class="font-mono text-xs text-slate-400">{{ $patient?->medical_record_number }}</p>
                    </div>
                    <dl class="space-y-1.5 text-xs text-slate-500">
                        <div class="flex justify-between gap-2">
                            <dt>Age / sex</dt>
                            <dd class="text-right text-slate-700">{{ $patient?->age_display }} · {{ $patient?->gender_label }}</dd>
                        </div>
                        <div class="flex justify-between gap-2">
                            <dt>Admission</dt>
                            <dd class="text-right font-mono text-slate-700">{{ $admission?->admission_no }}</dd>
                        </div>
                        <div class="flex justify-between gap-2">
                            <dt>Location</dt>
                            <dd class="text-right text-slate-700">
                                @if ($admission?->bed)
                                    Bed {{ $admission->bed->bed_number }}
                                    @if ($admission->bed->room) · Room {{ $admission->bed->room->room_number }} @endif
                                    @if ($admission->bed->room?->ward?->name) · {{ $admission->bed->room->ward->name }} @endif
                                @else
                                    {{ $admission?->ward?->name ?? '—' }}
                                @endif
                            </dd>
                        </div>
                    </dl>
                    @if ($admission)
                        <a href="{{ route('admissions.kardex.show', $admission) }}" class="hms-btn-secondary hms-btn-sm w-full">
                            <x-icon name="clipboard-list" size="xs" />
                            Open kardex
                        </a>
                    @endif
                </div>
            </x-card>

            <x-card title="Performed" icon="fingerprint">
                <dl class="space-y-2 text-xs text-slate-500">
                    <div class="flex justify-between gap-2">
                        <dt>Assessed by</dt>
                        <dd class="text-right text-slate-700">{{ $assessment->assessedBy?->name ?? '—' }}</dd>
                    </div>
                    <div class="flex justify-between gap-2">
                        <dt>On the ward at</dt>
                        <dd class="text-right text-slate-700">{{ $assessment->assessed_at?->format('d M Y H:i') ?? '—' }}</dd>
                    </div>
                    <div class="flex justify-between gap-2">
                        <dt>Survey type</dt>
                        <dd class="text-right text-slate-700">{{ $assessment->type_label }}</dd>
                    </div>
                </dl>
            </x-card>
        </div>
    </div>
</x-app-layout>