@php
    $encounter = $encounter ?? null;
    $suggested = $suggested ?? [];
    $submitLabel = $submitLabel ?? 'Open encounter';
    $action = $action ?? route('encounters.store');
    $method = $method ?? 'POST';
    $backRoute = $backRoute ?? route('encounters.index');
@endphp

<div class="grid gap-6 lg:grid-cols-3">
    <div class="lg:col-span-2">
        <x-card title="Encounter" icon="stethoscope">
            <x-slot:header>Where the patient is being seen, and the narrative the record will carry.</x-slot:header>

            <form method="POST" action="{{ $action }}" class="space-y-6">
                @csrf
                @if ($method !== 'POST')
                    @method($method)
                @endif

                @unless ($encounter)
                    <input type="hidden" name="patient_id" value="{{ $patient->id }}">
                    @if ($visit)
                        <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                    @endif
                @endunless

                <div class="grid gap-4 sm:grid-cols-3">
                    <x-form.select name="encounter_type" label="Type" :options="$types" required
                                   :value="$encounter->encounter_type ?? ($suggested['encounter_type'] ?? 'opd')" />

                    <x-form.select name="department_id" label="Department" :options="$departments"
                                   :value="$encounter->department_id ?? ($suggested['department_id'] ?? null)"
                                   placeholder="Select department" />

                    <x-form.select name="doctor_id" label="Consultant" :options="$doctors"
                                   :value="$encounter->doctor_id ?? ($suggested['doctor_id'] ?? null)"
                                   placeholder="Unassigned" />
                </div>

                <x-form.textarea name="chief_complaint" label="Presenting complaint" rows="2"
                                 :value="$encounter->chief_complaint ?? ($suggested['chief_complaint'] ?? null)"
                                 placeholder="In the patient's own words — what brought them in…" />

                <div class="grid gap-4 sm:grid-cols-2">
                    <x-form.textarea name="history_of_presenting_illness" label="History of presenting illness" rows="6"
                                     :value="$encounter->history_of_presenting_illness ?? null"
                                     placeholder="Onset, character, course, what makes it better or worse…" />

                    <x-form.textarea name="review_of_systems" label="Review of systems" rows="6"
                                     :value="$encounter->review_of_systems ?? null"
                                     placeholder="A sweep through the systems — positive and pertinent negatives…" />

                    <x-form.textarea name="physical_examination" label="Physical examination" rows="6"
                                     :value="$encounter->physical_examination ?? null"
                                     placeholder="General condition, then the systems examined…" />

                    <x-form.textarea name="plan" label="Plan" rows="6"
                                     :value="$encounter->plan ?? null"
                                     placeholder="Investigations, treatment, follow-up…" />
                </div>

                @if (isset($errors) && $errors->any())
                    <div class="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">
                        {{ $errors->first() }}
                    </div>
                @endif

                <div class="flex flex-wrap items-center justify-end gap-3 border-t border-slate-200 pt-4">
                    <a href="{{ $backRoute }}" class="hms-btn-ghost">Cancel</a>
                    <button type="submit" class="hms-btn-primary">
                        <x-icon name="check" size="sm" />
                        {{ $submitLabel }}
                    </button>
                </div>
            </form>
        </x-card>
    </div>

    <div class="space-y-6">
        <x-card title="Patient" icon="users">
            <div class="flex items-start gap-3">
                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-700">
                    {{ Str::of($patient->first_name)->substr(0, 1)->upper() }}{{ Str::of($patient->last_name)->substr(0, 1)->upper() }}
                </span>
                <div class="min-w-0">
                    @can('patients.view')
                        <a href="{{ route('patients.show', $patient) }}"
                           class="font-medium text-slate-900 hover:text-brand-700">{{ $patient->full_name }}</a>
                    @else
                        <span class="font-medium text-slate-900">{{ $patient->full_name }}</span>
                    @endcan
                    <div class="font-mono text-xs text-slate-500">{{ $patient->medical_record_number }}</div>
                    <div class="mt-1 text-xs text-slate-500">
                        {{ $patient->age_display }}
                        @if ($patient->gender) · {{ $patient->gender_label }} @endif
                        @if ($patient->phone) · {{ $patient->phone }} @endif
                    </div>
                </div>
            </div>

            @if ($patient->isRestricted())
                <div class="mt-3 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-800">
                    This record is access-controlled. You are seeing it because your account holds the restricted-access
                    permission, and this access is being logged.
                </div>
            @endif

            <div class="mt-4 flex flex-wrap gap-2 border-t border-slate-200 pt-3">
                @can('emr.view')
                    <a href="{{ route('patients.clinical', $patient) }}" class="hms-link text-xs">Clinical hub</a>
                @endcan
            </div>
        </x-card>

        @if (($visit ?? null) || ($appointment ?? null))
            <x-card title="Attendance" icon="queue">
                <div class="space-y-3 text-sm">
                    @if ($visit)
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Visit</span>
                            <span class="font-mono text-xs text-slate-800">{{ $visit->visit_no }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Token</span>
                            <span class="font-mono text-slate-800">{{ $visit->token_number ?? '—' }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Visit status</span>
                            <x-status-badge field="visit_status" :value="$visit->status" size="sm" dot />
                        </div>
                    @elseif ($appointment)
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Booking</span>
                            <span class="font-mono text-xs text-slate-800">{{ $appointment->appointment_no }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Token</span>
                            <span class="font-mono text-slate-800">{{ $appointment->token_number ?? '—' }}</span>
                        </div>
                    @endif
                </div>
            </x-card>
        @endif

        <x-card title="Opening the record" icon="info">
            <ul class="space-y-2 text-xs text-slate-600">
                <li class="flex gap-2">
                    <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                    The encounter starts open. Vitals, diagnoses and notes attach to it as the consultation proceeds.
                </li>
                <li class="flex gap-2">
                    <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                    A visit carries one live encounter at a time — opening a second sends you back to the first.
                </li>
                <li class="flex gap-2">
                    <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                    Closing it freezes the narrative and, when the last encounter on the visit is done, completes the
                    queue entry.
                </li>
            </ul>
        </x-card>
    </div>
</div>