@php
    $doctorish = auth()->user()->can('patients.view');
@endphp

<x-app-layout title="Request an interpreter">
    <x-page-header
        title="Request an interpreter"
        subtitle="Find the patient first — sessions are anchored to the person whose conversation needs interpreting, not to the room."
        icon="video"
        :back="route('communication.interpreting.index')"
        backLabel="Interpreting board">
    </x-page-header>

    @if (! $patient)
        <x-card title="Find the patient" icon="search">
            <x-slot:header>
                <span class="text-sm text-slate-500">Search by name, MRN, phone or national ID.</span>
            </x-slot:header>

            <form method="GET" action="{{ route('communication.interpreting.create') }}">
                <div class="flex flex-wrap items-end gap-3">
                    <div class="min-w-[18rem] flex-1">
                        <x-form.input name="q" label="Patient" :value="$patientQuery"
                                      placeholder="e.g. “Wanjiku” or “MRN-2026-…”" autofocus />
                    </div>
                    <button type="submit" class="hms-btn-primary">
                        <x-icon name="search" size="sm" />
                        Search
                    </button>
                </div>
            </form>

            @if ($patientQuery !== '' && $matches->isEmpty())
                <div class="mt-5 rounded-xl border border-dashed border-slate-300 px-5 py-8 text-center">
                    <x-icon name="search" size="lg" class="mx-auto text-slate-300" />
                    <p class="mt-2 text-sm font-medium text-slate-600">No patient matches “{{ $patientQuery }}”.</p>
                    @unless ($doctorish)
                        <p class="mt-1 text-xs text-slate-500">Your role does not search the whole register — open the patient's chart or ask the front desk for the record.</p>
                    @endunless
                </div>
            @endif

            @if ($matches->isNotEmpty())
                <div class="mt-5 divide-y divide-slate-100 rounded-xl border border-slate-200">
                    @foreach ($matches as $match)
                        <a href="{{ request()->fullUrlWithQuery(['q' => null, 'patient_id' => $match->id]) }}"
                           class="flex items-center justify-between gap-3 px-4 py-3 transition hover:bg-brand-50/60">
                            <div class="flex min-w-0 items-center gap-3">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-semibold uppercase text-brand-700">
                                    {{ mb_substr($match->first_name ?? '?', 0, 1).mb_substr($match->last_name ?? '', 0, 1) }}
                                </span>
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-medium text-slate-900">{{ $match->full_name }}</p>
                                    <p class="truncate text-xs text-slate-500">
                                        <span class="font-mono">{{ $match->medical_record_number }}</span>
                                        · {{ $match->gender_label ?? ucfirst((string) $match->gender) }}
                                        @if ($match->date_of_birth) · {{ $match->date_of_birth->age }} yrs @endif
                                    </p>
                                </div>
                                @if ($match->isRestricted())
                                    <x-icon name="lock" size="xs" class="shrink-0 text-amber-600" />
                                @endif
                            </div>
                            <x-icon name="arrow-right" size="sm" class="shrink-0 text-slate-400" />
                        </a>
                    @endforeach
                </div>
            @elseif ($patientQuery === '')
                <p class="mt-5 text-sm text-slate-500">
                    Search the register above. Once the patient is selected, the request form opens with their open
                    admissions and upcoming appointments offered for linking.
                </p>
            @endif
        </x-card>
    @else
        <div class="grid gap-6 xl:grid-cols-[1fr_20rem]">
            <div class="space-y-6">
                @include('communication.interpreting._form', [
                    'session' => null,
                    'patient' => $patient,
                    'interpreters' => $interpreters,
                    'admissions' => $admissions,
                    'appointments' => $appointments,
                ])
            </div>

            <div class="space-y-6">
                <x-card title="Patient" icon="clipboard-list">
                    <p class="text-lg font-semibold text-slate-900">{{ $patient->full_name }}</p>
                    <p class="mt-0.5 font-mono text-xs text-slate-500">{{ $patient->medical_record_number }}</p>
                    <p class="mt-2 text-sm text-slate-600">
                        {{ $patient->age_display }} · {{ $patient->gender_label }}
                        @if ($patient->phone) · {{ $patient->phone }} @endif
                    </p>

                    @if ($patient->preferred_language)
                        <p class="mt-3 rounded-lg bg-teal-50 px-3 py-2 text-xs text-teal-800">
                            <x-icon name="chat" size="xs" class="mr-1 inline" />
                            Recorded communication preference: {{ \App\Support\Lookup::label('interpreter_language', $patient->preferred_language) }}
                        </p>
                    @endif

                    @if ($patient->isRestricted())
                        <p class="mt-3 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
                            <x-icon name="lock" size="xs" class="mr-1 inline" />Restricted record — access is logged.
                        </p>
                    @endif
                </x-card>

                <x-card title="Why VRI?" icon="info">
                    <ul class="space-y-2 text-xs leading-relaxed text-slate-500">
                        <li><span class="font-medium text-slate-700">Visual context.</span> The interpreter sees facial
                            expression, body language and gesture — and can sign, unlike a phone call.</li>
                        <li><span class="font-medium text-slate-700">One device joins.</span> The patient's room dials
                            into a secure video link; the interpreter joins from wherever they are.</li>
                        <li><span class="font-medium text-slate-700">Keep it short.</span> For quick clarifications
                            over the phone, choose OPI instead.</li>
                    </ul>
                </x-card>
            </div>
        </div>
    @endif
</x-app-layout>