<x-app-layout :title="'Outcomes · '.$patient->fullName()">
    <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 text-slate-500">Follow-up scores</p>
            <h1 class="text-2xl font-semibold text-slate-900">{{ $patient->fullName() }}</h1>
            <p class="mt-1 text-sm text-slate-500">
                <a href="{{ route('care.patients.show', $patient) }}" class="text-sky-600 hover:text-sky-700">{{ $patient->patient_number }}</a>
                ·
                <a href="{{ route('care.assessments.index', $patient) }}" class="text-sky-600 hover:text-sky-700">Assessments</a>
                ·
                <a href="{{ route('care.pathways.index', $patient) }}" class="text-sky-600 hover:text-sky-700">Pathways</a>
            </p>
        </div>
        @if ($canCapture)
            <form method="POST" action="{{ route('care.outcomes.store', $patient) }}">
                @csrf
                <button type="submit" class="btn-primary">Record outcomes</button>
            </form>
        @endif
    </div>

    <p class="mt-4 text-xs text-slate-400">
        Patient-level outcome history is available on all plans. Weight and blood pressure come from consultation vitals (typed records), not the outcome form.
        @unless ($canOrgAnalytics)
            Org-wide multi-patient analytics require Enterprise.
        @endunless
    </p>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <section class="rounded-2xl border border-slate-200 bg-white p-6">
            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Quality of life trend</h2>
            @if (empty($qolSeries))
                <p class="mt-3 text-sm text-slate-400">No QoL scores yet.</p>
            @else
                <ul class="mt-3 space-y-1 text-sm">
                    @foreach ($qolSeries as $point)
                        <li class="flex justify-between gap-2">
                            <span class="text-slate-500">{{ $point['date'] }}</span>
                            <span class="font-medium">{{ $point['value'] }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        <section class="rounded-2xl border border-slate-200 bg-white p-6">
            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">Pain score trend</h2>
            @if (empty($painSeries))
                <p class="mt-3 text-sm text-slate-400">No pain scores yet.</p>
            @else
                <ul class="mt-3 space-y-1 text-sm">
                    @foreach ($painSeries as $point)
                        <li class="flex justify-between gap-2">
                            <span class="text-slate-500">{{ $point['date'] }}</span>
                            <span class="font-medium">{{ $point['value'] }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>
    </div>

    <section class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <div class="border-b border-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide text-slate-500">
            Outcome assessments
        </div>
        <table class="min-w-full divide-y divide-slate-100 text-sm">
            <thead class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500">
                <tr>
                    <th class="px-4 py-3">Date</th>
                    <th class="px-4 py-3">QoL</th>
                    <th class="px-4 py-3">Pain</th>
                    <th class="px-4 py-3">Falls</th>
                    <th class="px-4 py-3">Admissions</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($outcomeSeries as $row)
                    @php $a = $row['answers']; @endphp
                    <tr>
                        <td class="px-4 py-3">{{ $row['assessed_at']?->format('d M Y') ?? '—' }}</td>
                        <td class="px-4 py-3">{{ $a['quality_of_life'] ?? '—' }}</td>
                        <td class="px-4 py-3">{{ $a['pain_score'] ?? '—' }}</td>
                        <td class="px-4 py-3">{{ $a['falls_count'] ?? '—' }}</td>
                        <td class="px-4 py-3">{{ $a['hospital_admissions_since_last'] ?? '—' }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('care.assessments.show', $row['assessment']) }}" class="text-sky-600 hover:text-sky-700">View</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-slate-400">No completed outcome assessments yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </section>

    <section class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <div class="border-b border-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide text-slate-500">
            Instrument scores
        </div>
        <table class="min-w-full divide-y divide-slate-100 text-sm">
            <thead class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500">
                <tr>
                    <th class="px-4 py-3">Instrument</th>
                    <th class="px-4 py-3">Total</th>
                    <th class="px-4 py-3">Max</th>
                    <th class="px-4 py-3">Date</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($scores as $score)
                    <tr>
                        <td class="px-4 py-3 font-medium">{{ $score->template_code }}</td>
                        <td class="px-4 py-3">{{ $score->total_score }}</td>
                        <td class="px-4 py-3">{{ $score->max_score ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $score->computed_at?->format('d M Y H:i') }}</td>
                        <td class="px-4 py-3 text-right">
                            @if ($score->assessment)
                                <a href="{{ route('care.assessments.show', $score->assessment) }}" class="text-sky-600 hover:text-sky-700">Open</a>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-slate-400">No scored instruments yet (e.g. NIHSS, mRS, Barthel, GCS).</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </section>

    <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">Recent vitals (typed)</h2>
        @if ($vitals->isEmpty())
            <p class="mt-3 text-sm text-slate-400">No vitals recorded on consultations.</p>
        @else
            <ul class="mt-3 space-y-2 text-sm">
                @foreach ($vitals as $v)
                    <li class="text-slate-700">
                        {{ $v->recorded_at?->format('d M Y H:i') }}
                        · BP {{ $v->bp_systolic }}/{{ $v->bp_diastolic }}
                        · Wt {{ $v->weight_kg ?? '—' }} kg
                        · SpO₂ {{ $v->spo2 ? $v->spo2.'%' : '—' }}
                    </li>
                @endforeach
            </ul>
        @endif
    </section>
</x-app-layout>
