@php
    $filtered = ($patientQuery ?? '') !== '';
@endphp

<x-app-layout title="Order laboratory tests">
    <x-page-header
        title="Order laboratory tests"
        subtitle="Pick the patient, then build the request from the laboratory's test guide — one dropdown holds every test on the book, panels included."
        icon="flask"
        :back="route('lab-orders.index')"
        backLabel="Laboratory worklist">
    </x-page-header>

    @if ($patient)
        <form method="POST" action="{{ route('lab-orders.store') }}" x-data="testPicker()">
            @csrf

            @php
                $pickerTests = $testsByLetter
                    ->flatMap(fn ($group) => $group)
                    ->map(fn ($t) => [
                        'id' => $t->id,
                        'name' => $t->name,
                        'code' => $t->code,
                        'department' => $t->department_label,
                        'specimen' => $t->specimen_type,
                        'tat' => $t->tat_hours,
                        'price' => (float) $t->price,
                    ])
                    ->values();
            @endphp

            <input type="hidden" name="patient_id" value="{{ $patient->id }}">
            <input type="hidden" name="encounter_id" value="{{ $encounter?->id ?? old('encounter_id') }}">

            <div class="grid gap-6 xl:grid-cols-[1fr_20rem]">
                <div class="space-y-6">
                    {{-- The dropdown: search the whole book, group by letter --}}
                    <x-card title="Tests on this request" icon="beaker">
                        <x-slot:header>
                            <span class="text-sm text-slate-500">From the laboratory test guide — {{ $pickerTests->count() }} tests and {{ $panels->count() }} panels.</span>
                        </x-slot:header>

                        <div class="relative" @click.outside="open = false">
                            <x-form.input
                                name="test_search"
                                label="Search the test guide"
                                placeholder="Type a test name or code — e.g. “malaria” or “FBC”…"
                                x-model="search"
                                @focus="open = true"
                                @input="open = true"
                                autocomplete="off" />

                            <div x-cloak x-show="open"
                                 class="absolute z-30 mt-1 max-h-80 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white shadow-raised">
                                <template x-if="filtered().length === 0">
                                    <p class="px-4 py-6 text-center text-sm text-slate-500">
                                        Nothing in the guide matches “<span x-text="search"></span>”.
                                    </p>
                                </template>

                                <template x-for="group in groupedFiltered()" :key="group.letter">
                                    <div>
                                        <p class="sticky top-0 border-b border-slate-100 bg-slate-50 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500">
                                            <span x-text="group.letter"></span>
                                        </p>
                                        <template x-for="test in group.tests" :key="test.id">
                                            <button type="button"
                                                    @click="pick(test)"
                                                    class="flex w-full items-center justify-between gap-3 px-4 py-2 text-left hover:bg-brand-50/60"
                                                    :class="picked.has(test.id) ? 'opacity-40' : ''">
                                                <span class="min-w-0">
                                                    <span class="block truncate text-sm font-medium text-slate-800" x-text="test.name"></span>
                                                    <span class="block truncate text-xs text-slate-500">
                                                        <span class="font-mono" x-text="test.code"></span> · <span x-text="test.specimen ?? 'specimen not specified'"></span>
                                                    </span>
                                                </span>
                                                <span class="shrink-0 text-xs tabular-nums text-slate-400">
                                                    <span x-show="test.price > 0" x-text="test.price.toFixed(2)"></span>
                                                </span>
                                            </button>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </div>

                        {{-- Picked tests as chips; each carries a hidden tests[] input --}}
                        <div class="mt-4 space-y-2" x-show="pickedTests.length > 0">
                            <template x-for="test in pickedTests" :key="test.id">
                                <span class="inline-flex max-w-full items-center gap-2 rounded-lg bg-brand-50 px-3 py-1.5 text-sm text-brand-800">
                                    <input type="hidden" name="tests[]" :value="test.id">
                                    <span class="font-medium" x-text="test.name"></span>
                                    <span class="font-mono text-xs text-brand-600" x-text="test.code"></span>
                                    <span class="text-xs text-brand-600/80" x-text="test.specimen ? '· ' + test.specimen : ''"></span>
                                    <button type="button" class="ml-1 text-brand-400 hover:text-red-600" @click="drop(test.id)" aria-label="Remove">
                                        <x-icon name="x" size="xs" />
                                    </button>
                                </span>
                            </template>
                        </div>

                        <p x-show="pickedTests.length === 0" class="mt-4 text-sm text-slate-500">
                            Nothing picked yet. Search above, or add a priced panel below — a panel expands into its bench
                            worklist but bills as one line at the panel price.
                        </p>

                        @error('tests.*')
                            <x-input-error :messages="$message" class="mt-2" />
                        @enderror

                        @if ($panels->isNotEmpty())
                            <div class="mt-5 border-t border-slate-200 pt-4">
                                <label class="hms-label">Priced panels</label>
                                <div class="grid gap-2 sm:grid-cols-2">
                                    @foreach ($panels as $panel)
                                        <label class="flex cursor-pointer items-start gap-2 rounded-lg border border-slate-200 p-3 hover:border-brand-300 hover:bg-brand-50/40">
                                            <input type="checkbox" name="panels[]" value="{{ $panel->id }}"
                                                   @checked(in_array($panel->id, (array) old('panels', [])))
                                                   class="mt-0.5 h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                                            <span class="min-w-0">
                                                <span class="block truncate text-sm font-medium text-slate-800">{{ $panel->name }}</span>
                                                <span class="block truncate text-xs text-slate-500">
                                                    {{ $panel->tests->pluck('name')->implode(' · ') }}
                                                </span>
                                                <span class="mt-0.5 block text-xs font-medium text-brand-700">
                                                    Kshs {{ number_format($panel->price, 2) }} as one line
                                                </span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </x-card>

                    <x-card title="Request details" icon="clipboard-list">
                        <div class="grid gap-4 md:grid-cols-2">
                            <x-form.select name="department" label="Department" :options="$departments"
                                           :value="$department" required />
                            <x-form.select name="priority" label="Priority" :options="$priorities"
                                           :value="old('priority', $defaults['priority'])" required />
                            <div class="md:col-span-2">
                                <x-form.textarea name="provisional_diagnosis" label="Provisional diagnosis"
                                                 :value="old('provisional_diagnosis')" rows="2"
                                                 placeholder="What are you trying to confirm or exclude?" />
                            </div>
                            <div class="md:col-span-2">
                                <x-form.textarea name="clinical_notes" label="Clinical notes"
                                                 :value="old('clinical_notes')" rows="3"
                                                 placeholder="Indication, treatment context, anything the bench should know." />
                            </div>
                        </div>

                        <x-form.checkbox name="is_billable" label="Bill this request to the patient's account"
                                         :checked="old('is_billable', true)" />

                        <div class="mt-5 flex items-center justify-end gap-3 border-t border-slate-200 pt-4">
                            <a href="{{ route('lab-orders.create') }}" class="hms-btn-ghost">Start over</a>
                            <button type="submit" class="hms-btn-primary">
                                <x-icon name="check" size="sm" />
                                Place order
                            </button>
                        </div>
                    </x-card>
                </div>

                {{-- Patient and encounter context --}}
                <div class="space-y-6">
                    <x-card title="Patient" icon="user">
                        <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->allergies_summary)
                            <p class="mt-3 rounded-lg bg-red-50 px-3 py-2 text-xs font-medium text-red-700">
                                <x-icon name="warning" size="xs" class="mr-1 inline" />{{ $patient->allergies_summary }}
                            </p>
                        @endif

                        @if ($match = $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>

                    @if ($openEncounters->isNotEmpty())
                        <x-card title="Encounter" icon="stethoscope">
                            <p class="text-sm text-slate-600">
                                This order attaches to the encounter that opened the form:
                            </p>
                            <div class="mt-2 rounded-lg bg-slate-50 px-3 py-2 text-sm">
                                <span class="font-mono text-xs text-slate-700">{{ $encounter->encounter_no }}</span>
                                <span class="ml-2 text-xs text-slate-500">{{ $encounter->encounter_type_label ?? ucfirst($encounter->encounter_type) }} · {{ $encounter->status }}</span>
                            </div>
                            <p class="mt-2 text-xs text-slate-400">
                                To order against a different visit, open it from the patient's chart.
                            </p>
                        </x-card>
                    @endif

                    <x-card title="How billing works" icon="info">
                        <ul class="space-y-2 text-xs leading-relaxed text-slate-500">
                            <li>Curated catalogue tests carry their standard charge.</li>
                            <li>Guide-imported tests show the exact specimen the book requires; if the billing office has not priced one yet, it is listed on the charge sheet for pricing — never invented onto the bill.</li>
                            <li>A panel bills as one line at the panel price, however many bench tests it expands to.</li>
                        </ul>
                    </x-card>
                </div>
            </div>
        </form>

        @push('scripts')
            <script>
                function testPicker() {
                    const book = @json($pickerTests);
                    const initial = @json((array) old('tests', []));

                    return {
                        search: '',
                        open: false,
                        picked: new Set(initial.map(Number)),
                        pickedTests: book.filter(t => initial.map(Number).includes(t.id)),

                        filtered() {
                            const q = this.search.trim().toLowerCase();
                            if (q === '') return book;
                            return book.filter(t =>
                                t.name.toLowerCase().includes(q) ||
                                (t.code || '').toLowerCase().includes(q));
                        },

                        groupedFiltered() {
                            const map = new Map();
                            for (const test of this.filtered()) {
                                const letter = (test.name[0] || '#').toUpperCase();
                                if (!map.has(letter)) map.set(letter, []);
                                map.get(letter).push(test);
                            }
                            return [...map.entries()]
                                .sort((a, b) => a[0].localeCompare(b[0]))
                                .map(([letter, tests]) => ({ letter, tests: tests.slice(0, 40) }));
                        },

                        pick(test) {
                            if (this.picked.has(test.id)) return;
                            this.picked.add(test.id);
                            this.pickedTests.push(test);
                        },

                        drop(id) {
                            this.picked.delete(id);
                            this.pickedTests = this.pickedTests.filter(t => t.id !== id);
                        },
                    };
                }
            </script>
        @endpush
    @else
        <x-card title="Which patient?" icon="search">
            <x-slot:header>
                Search by MRN, name, phone or national ID.
            </x-slot:header>

            <form method="GET" class="flex flex-wrap items-end gap-3">
                <div class="min-w-[16rem] flex-1">
                    <x-form.input name="q" label="Patient" placeholder="MRN, name, phone or national ID…"
                                  :value="$patientQuery" autofocus />
                </div>

                <button type="submit" class="hms-btn-secondary">
                    <x-icon name="search" size="sm" />
                    Find
                </button>

                @if ($filtered)
                    <a href="{{ route('lab-orders.create') }}" class="hms-btn-ghost">Clear</a>
                @endif
            </form>

            <div class="mt-5 border-t border-slate-200 pt-5">
                @if ($patientQuery === '')
                    <p class="text-sm text-slate-500">
                        Start typing a name or MRN above. The test guide's dropdown comes next.
                    </p>
                @elseif (! auth()->user()->can('patients.view'))
                    <x-alert type="info">
                        Your account cannot search the patient register. Open the patient's clinical record and
                        place the order from there.
                    </x-alert>
                @elseif ($matches->isEmpty())
                    <x-empty-state icon="users" title="No patient matches “{{ $patientQuery }}”">
                        Nothing in the register matches. Check the spelling, or register the patient first.
                        <x-slot:actions>
                            @can('patients.create')
                                <a href="{{ route('patients.create', ['q' => $patientQuery]) }}" class="hms-btn-primary">
                                    <x-icon name="user-plus" size="sm" />
                                    Register a new patient
                                </a>
                            @endcan
                        </x-slot:actions>
                    </x-empty-state>
                @else
                    <ul class="divide-y divide-slate-100">
                        @foreach ($matches as $match)
                            <li class="flex flex-wrap items-center justify-between gap-3 py-3">
                                <div class="flex min-w-0 items-center gap-3">
                                    <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-semibold text-brand-700">
                                        {{ Str::of($match->first_name)->substr(0, 1)->upper() }}{{ Str::of($match->last_name)->substr(0, 1)->upper() }}
                                    </div>
                                    <div class="min-w-0">
                                        <p class="truncate 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->age_display }} · {{ $match->gender_label }}
                                            @if ($match->phone) · {{ $match->phone }} @endif
                                        </p>
                                    </div>
                                </div>

                                <div class="flex items-center gap-2">
                                    @if ($match->isRestricted())
                                        <x-icon name="lock" size="xs" class="shrink-0 text-amber-600" />
                                    @endif

                                    <a href="{{ route('lab-orders.create', ['patient_id' => $match->id]) }}"
                                       class="hms-btn-primary hms-btn-sm">
                                        Order tests
                                    </a>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </x-card>
    @endif
</x-app-layout>