<x-app-layout :title="$assessment->template->name.' · '.$assessment->patient->fullName()">
    <x-care.consultation-return :consultation="$returnConsultation ?? null" />

    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <p class="text-xs font-medium uppercase tracking-wide {{ $assessment->status === 'completed' ? 'text-emerald-600' : ($assessment->status === 'cancelled' ? 'text-slate-400' : 'text-amber-600') }}">
                {{ $statuses[$assessment->status] ?? $assessment->status }}
            </p>
            <h1 class="text-2xl font-semibold text-slate-900">{{ $assessment->template->name }}</h1>
            <p class="mt-1 text-sm text-slate-500">
                <a href="{{ route('care.patients.show', $assessment->patient) }}" class="text-sky-600 hover:text-sky-700">{{ $assessment->patient->fullName() }}</a>
                · {{ $assessment->template->code }} v{{ $assessment->template->version }}
                @if ($assessment->consultation && ! ($returnConsultation ?? null))
                    · <a href="{{ route('care.consultations.show', $assessment->consultation) }}" class="text-sky-600 hover:text-sky-700">Consultation</a>
                @endif
            </p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('care.assessments.fhir', $assessment) }}?download=1" class="rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Export FHIR</a>
            <a href="{{ ($returnConsultation ?? null)
                ? route('care.consultations.assessments.index', $returnConsultation)
                : route('care.assessments.index', $assessment->patient) }}" class="rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">All assessments</a>
        </div>
    </div>

    @if ($assessment->score)
        <section class="mt-6 rounded-2xl border border-emerald-100 bg-emerald-50/40 p-6">
            <h2 class="text-sm font-semibold uppercase tracking-wide text-emerald-800">Score</h2>
            <dl class="mt-3 flex flex-wrap gap-6 text-sm">
                <div>
                    <dt class="text-slate-500">Total</dt>
                    <dd class="text-lg font-semibold text-slate-900">
                        {{ $assessment->score->total_score }}
                        @if ($assessment->score->max_score !== null)
                            <span class="text-sm font-normal text-slate-500">/ {{ $assessment->score->max_score }}</span>
                        @endif
                    </dd>
                </div>
                @if ($assessment->score->severity_label)
                    <div>
                        <dt class="text-slate-500">Severity</dt>
                        <dd class="font-medium text-slate-900">{{ $assessment->score->severity_label }}</dd>
                    </div>
                @endif
                @if ($assessment->score->subscores)
                    <div class="w-full">
                        <dt class="text-slate-500">Subscores</dt>
                        <dd class="mt-1 text-slate-700">
                            @foreach ($assessment->score->subscores as $key => $val)
                                <span class="mr-3"><span class="text-slate-500">{{ $key }}:</span> {{ $val }}</span>
                            @endforeach
                        </dd>
                    </div>
                @endif
            </dl>
        </section>
    @endif

    @if ($canEdit)
        <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
            <form method="POST" action="{{ route('care.assessments.update', $assessment) }}" class="space-y-6" id="assessment-form">
                @csrf
                @method('PUT')
                @include('care.assessments._form', ['assessment' => $assessment, 'answersByCode' => $answersByCode])
                @if (($returnConsultation ?? null)?->uuid)
                    <input type="hidden" name="from_consultation" value="{{ $returnConsultation->uuid }}">
                @endif
                <div class="flex flex-wrap gap-3 border-t border-slate-100 pt-6">
                    <button type="submit" class="btn-primary">Save draft</button>
                    <button
                        type="submit"
                        formaction="{{ route('care.assessments.complete', $assessment) }}"
                        formmethod="post"
                        class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-700"
                        onclick="this.form.querySelector('input[name=_method]')?.remove()"
                    >Complete assessment</button>
                </div>
            </form>

            <div class="mt-4">
                <x-confirm-dialog
                    :name="'cancel-assessment-'.$assessment->id"
                    title="Cancel this draft?"
                    message="The draft assessment will be marked cancelled and can no longer be edited."
                    :action="route('care.assessments.cancel', $assessment)"
                    confirm-label="Cancel assessment"
                    variant="danger"
                >
                    <x-slot:trigger>
                        <button type="button" class="rounded-lg border border-red-200 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50">Cancel draft</button>
                    </x-slot:trigger>
                </x-confirm-dialog>
            </div>
            <p class="mt-3 text-xs text-slate-400">Required fields are validated when you complete the assessment.</p>
        </section>
    @else
        <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Answers</h2>
            <dl class="mt-4 space-y-3 text-sm">
                @foreach ($assessment->template->questions as $question)
                    @php $value = $answersByCode[$question->code] ?? null; @endphp
                    <div class="grid gap-1 sm:grid-cols-3">
                        <dt class="text-slate-500">{{ $question->label }}</dt>
                        <dd class="sm:col-span-2 font-medium text-slate-900">
                            @if (is_array($value))
                                {{ implode(', ', $value) }}
                            @elseif (is_bool($value))
                                {{ $value ? 'Yes' : 'No' }}
                            @elseif ($value instanceof \Carbon\Carbon)
                                {{ $value->format($question->answer_type === 'date' ? 'd M Y' : 'd M Y H:i') }}
                            @else
                                {{ $value ?? '—' }}
                            @endif
                        </dd>
                    </div>
                @endforeach
            </dl>
            @if ($assessment->notes)
                <p class="mt-4 text-sm text-slate-600"><span class="font-medium text-slate-700">Notes:</span> {{ $assessment->notes }}</p>
            @endif
        </section>
    @endif
</x-app-layout>
