@php
    $patient = $carePlan->patient;
    $admission = $carePlan->admission;
    $isActive = $carePlan->status === 'active';
    $overdue = $isActive && $carePlan->target_date?->isPast();
@endphp

<x-app-layout title="Care plan · {{ $carePlan->problem }}">
    <x-page-header
        title="{{ $carePlan->problem }}"
        subtitle="Nursing care plan · {{ $patient?->full_name ?? 'Unknown patient' }} · {{ $admission?->admission_no }}"
        icon="clipboard-check"
        :back="route('admissions.kardex.show', $admission)"
        backLabel="Kardex">
        <x-slot:meta>
            <x-status-badge field="care_plan_status" :value="$carePlan->status" dot />
            <span class="text-xs text-slate-500">
                {{ $carePlan->open_actions_count }} open · {{ $carePlan->completed_actions_count }} done
            </span>
            @if ($carePlan->target_date)
                <span class="text-xs {{ $overdue ? 'font-semibold text-amber-700' : 'text-slate-500' }}">
                    Target {{ $carePlan->target_date->format('d M Y') }}{{ $overdue ? ' — overdue' : '' }}
                </span>
            @endif
        </x-slot:meta>

        <x-slot:actions>
            @can('care-plans.manage')
                @if ($isActive)
                    <a href="#evaluate" class="hms-btn-primary">
                        <x-icon name="check" size="sm" />
                        Evaluate & close
                    </a>
                @endif
            @endcan
        </x-slot:actions>
    </x-page-header>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            {{-- 1 · the plan itself --}}
            <x-card title="The plan" icon="document-check"
                    header="Problem, evidence, goal — the nurse's clinical reasoning in one place.">
                <div class="space-y-4">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Clinical need</p>
                            <p class="mt-1 text-sm text-slate-700">{{ $carePlan->clinical_need ?: '—' }}</p>
                        </div>
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Diagnostic data</p>
                            <p class="mt-1 text-sm text-slate-700">{{ $carePlan->diagnostic_data ?: '—' }}</p>
                        </div>
                    </div>
                    <div class="rounded-lg border border-brand-100 bg-brand-50/50 px-4 py-3">
                        <p class="text-xs font-semibold uppercase tracking-wide text-brand-700">Goal</p>
                        <p class="mt-1 text-sm font-medium text-slate-800">{{ $carePlan->goal }}</p>
                        @if ($carePlan->target_date)
                            <p class="mt-1 text-xs text-slate-500">By {{ $carePlan->target_date->format('d M Y') }}</p>
                        @endif
                    </div>
                </div>
            </x-card>

            {{-- 2 · evaluation, once the loop is closed --}}
            @if ($carePlan->evaluated_at)
                <x-card title="Evaluation" icon="check">
                    <div class="space-y-2">
                        <div class="flex flex-wrap items-center gap-2">
                            <x-status-badge field="care_plan_status" :value="$carePlan->status" />
                            <span class="text-xs text-slate-500">{{ $carePlan->evaluated_at->format('d M Y H:i') }}</span>
                        </div>
                        <p class="text-sm text-slate-700">{{ $carePlan->evaluation }}</p>
                    </div>
                </x-card>
            @endif

            {{-- 3 · action checklist --}}
            <x-card flush title="Actions" icon="clipboard-list"
                    header="The standing work of the plan — ticked off shift by shift from the bedside.">
                @if ($carePlan->actions->isEmpty())
                    <x-empty-state icon="clipboard-list" title="No actions on this plan">
                        Add the first standing action below — one line of what the shift actually does.
                    </x-empty-state>
                @else
                    <ul class="divide-y divide-slate-100">
                        @foreach ($carePlan->actions as $action)
                            <li class="px-5 py-4">
                                <div class="flex flex-wrap items-start justify-between gap-3">
                                    <div class="min-w-0 flex-1">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <x-status-badge field="care_action_status" :value="$action->status" size="sm" />
                                            <span class="text-sm font-medium {{ $action->status === 'pending' ? 'text-slate-800' : 'text-slate-500' }}">
                                                {{ $action->action }}
                                            </span>
                                            @if ($action->frequency)
                                                <span class="text-xs text-slate-400">· {{ $action->frequency }}</span>
                                            @endif
                                        </div>
                                        @if ($action->status !== 'pending')
                                            <p class="mt-1 text-[11px] text-slate-400">
                                                {{ $action->status_label }}
                                                @if ($action->completedBy) by {{ $action->completedBy->name }} @endif
                                                @if ($action->completed_at) · {{ $action->completed_at->format('d M Y H:i') }} @endif
                                            </p>
                                        @endif
                                        @if ($action->notes)
                                            <p class="mt-1 text-xs text-slate-500">{{ $action->notes }}</p>
                                        @endif
                                    </div>

                                    @can('care-actions.record')
                                        @if ($action->status === 'pending')
                                            <form method="POST" action="{{ route('nursing.care-actions.complete', $action) }}"
                                                  class="flex flex-wrap items-center gap-2">
                                                @csrf
                                                <input type="text" name="notes" maxlength="1000" placeholder="Note (optional)"
                                                       class="hms-input w-40">
                                                <button type="submit" name="status" value="completed" class="hms-btn-primary hms-btn-sm">
                                                    <x-icon name="check" size="xs" />
                                                    Done
                                                </button>
                                                <button type="submit" name="status" value="skipped" class="hms-btn-ghost hms-btn-sm">
                                                    Skip
                                                </button>
                                            </form>
                                        @endif
                                    @endcan
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif

                @can('care-actions.record')
                    <form method="POST" action="{{ route('nursing.care-plans.actions.store', $carePlan) }}"
                          class="border-t border-slate-200 bg-slate-50/70 px-5 py-4">
                        @csrf
                        <div class="flex flex-wrap items-end gap-3">
                            <div class="min-w-[14rem] flex-1">
                                <x-form.input name="action" label="New action" required
                                              placeholder="What the shift does — e.g. turn and check skin 2-hourly…" />
                            </div>
                            <div class="w-44">
                                <x-form.input name="frequency" label="Frequency" placeholder="e.g. 4-hourly" />
                            </div>
                            <button type="submit" class="hms-btn-primary hms-btn-sm">
                                <x-icon name="plus" size="xs" />
                                Add action
                            </button>
                        </div>
                    </form>
                @endcan
            </x-card>
        </div>

        {{-- ------------------------------------------------ right rail --}}
        <div class="space-y-6">
            <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="Provenance" icon="fingerprint">
                <dl class="space-y-2 text-xs text-slate-500">
                    <div class="flex justify-between gap-2">
                        <dt>Opened by</dt>
                        <dd class="text-right text-slate-700">
                            {{ $carePlan->createdBy?->name ?? '—' }}
                            <br><span class="text-slate-400">{{ $carePlan->created_at?->format('d M Y H:i') }}</span>
                        </dd>
                    </div>
                    <div class="flex justify-between gap-2">
                        <dt>Last updated</dt>
                        <dd class="text-right text-slate-700">
                            {{ $carePlan->updatedBy?->name ?? '—' }}
                            @if ($carePlan->updated_at) <br><span class="text-slate-400">{{ $carePlan->updated_at->format('d M Y H:i') }}</span> @endif
                        </dd>
                    </div>
                </dl>
            </x-card>
        </div>
    </div>

    {{-- ------------------------------------------------ authoring (manage) --}}
    @can('care-plans.manage')
        <div class="mt-6 grid gap-6 lg:grid-cols-2">
            <x-card title="Revise the plan" icon="edit"
                    header="Sharpen the problem or the goal as the picture changes." x-data="{ open: false }">
                <x-slot:actions>
                    <button type="button" class="hms-btn-secondary hms-btn-sm" x-on:click="open = ! open"
                            x-text="open ? 'Close' : 'Edit'"></button>
                </x-slot:actions>

                <form method="POST" action="{{ route('nursing.care-plans.update', $carePlan) }}"
                      x-show="open" x-cloak class="space-y-4">
                    @csrf
                    @method('PUT')
                    <x-form.input name="problem" label="Problem / nursing diagnosis" required :value="$carePlan->problem" />
                    <x-form.textarea name="clinical_need" label="Clinical need" rows="2" :value="$carePlan->clinical_need"
                                     placeholder="What the assessment found — signs, symptoms, deficits…" />
                    <x-form.textarea name="diagnostic_data" label="Diagnostic data" rows="2" :value="$carePlan->diagnostic_data"
                                     placeholder="Vitals, labs, imaging that back the problem…" />
                    <x-form.textarea name="goal" label="Goal" rows="2" required :value="$carePlan->goal"
                                     placeholder="What 'better' looks like, stated so it can be judged…" />
                    <x-form.input name="target_date" label="Target date" type="date"
                                  :value="$carePlan->target_date?->format('Y-m-d')" />
                    <div class="flex justify-end">
                        <button type="submit" class="hms-btn-primary hms-btn-sm">
                            <x-icon name="check" size="xs" />
                            Save plan
                        </button>
                    </div>
                </form>
            </x-card>

            @if ($isActive)
                <x-card title="Evaluate & close" icon="document-check" id="evaluate"
                        header="Close the loop — was the goal met, or is the plan stood down?">
                    <form method="POST" action="{{ route('nursing.care-plans.evaluate', $carePlan) }}" class="space-y-4">
                        @csrf
                        <x-form.select name="status" label="Outcome" placeholder="How did it end…"
                                       :options="['achieved' => 'Goal Achieved', 'discontinued' => 'Discontinued']" />
                        <x-form.textarea name="evaluation" label="Evaluation" rows="3" required
                                         placeholder="What happened, what changed, what would be done differently…" />
                        <div class="flex justify-end">
                            <button type="submit" class="hms-btn-primary hms-btn-sm">
                                <x-icon name="check" size="xs" />
                                Record evaluation
                            </button>
                        </div>
                    </form>
                </x-card>
            @endif
        </div>
    @endcan
</x-app-layout>