@php
    $patient = $patient ?? null;
    $encounter = $encounter ?? null;
    $openEncounters = $openEncounters ?? collect();
    $types = $types ?? [];
    $doseUnits = $doseUnits ?? [];
    $routes = $routes ?? [];
    $frequencies = $frequencies ?? [];
    $defaults = $defaults ?? [];
    $submitLabel = $submitLabel ?? 'Send to pharmacy';
    $action = $action ?? route('prescriptions.store');
    $method = $method ?? 'POST';
    $backRoute = $backRoute ?? route('prescriptions.index');

    $encounterOptions = $openEncounters
        ->mapWithKeys(fn ($row) => [
            $row->id => $row->encounter_no
                .' · '.lookup_label('encounter_type', $row->encounter_type, $row->encounter_type)
                .' · '.($row->doctor?->name ?? 'Unassigned')
                .' · '.($row->started_at?->format('d M Y') ?? ''),
        ])->all();

    // A bounced submission comes back with the rows the prescriber had already
    // filled in. The display-only columns of each row travel in a `snapshot`
    // field the browser writes, so the line can be rebuilt exactly as it looked.
    $lineErrors = function (int $index): array {
        if (! isset($errors)) {
            return [];
        }

        return collect($errors->getMessages())
            ->filter(fn ($messages, $key) => str_starts_with($key, "items.{$index}."))
            ->mapWithKeys(fn ($messages, $key) => [Str::afterLast($key, '.') => $messages])
            ->all();
    };

    $seedLines = collect(is_array(old('items')) ? array_values(old('items')) : [])
        ->map(function ($row, $index) use ($lineErrors) {
            $row = is_array($row) ? $row : [];
            $snapshot = is_string($row['snapshot'] ?? null) ? json_decode($row['snapshot'], true) : [];

            return array_merge(is_array($snapshot) ? $snapshot : [], [
                'drug_id' => $row['drug_id'] ?? '',
                'dose' => $row['dose'] ?? '',
                'dose_unit' => $row['dose_unit'] ?? 'mg',
                'route' => $row['route'] ?? 'oral',
                'frequency' => $row['frequency'] ?? 'bd',
                'duration_days' => $row['duration_days'] ?? '',
                'quantity' => $row['quantity'] ?? '',
                'quantity_unit' => $row['quantity_unit'] ?? 'tablet',
                'is_stat' => ! empty($row['is_stat']),
                'is_prn' => ! empty($row['is_prn']),
                'prn_indication' => $row['prn_indication'] ?? '',
                'instructions' => $row['instructions'] ?? '',
                'substitution_allowed' => ! empty($row['substitution_allowed']),
                'errors' => $lineErrors($index),
            ]);
        })
        ->values()
        ->all();
@endphp

<div class="grid gap-6 lg:grid-cols-3"
     x-data="prescriptionWriter({
        lines: @js($seedLines),
        units: @js($doseUnits),
        routes: @js($routes),
        frequencies: @js($frequencies),
     })"
     x-on:drug-picked="addLine($event.detail)">

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

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

            @if (isset($errors) && $errors->any())
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                    <p class="font-medium">The script was not sent to the pharmacy.</p>
                    <ul class="mt-1 list-inside list-disc space-y-0.5 text-xs">
                        @foreach ($errors->all() as $message)
                            <li>{{ $message }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <x-card title="The script" icon="pill">
                <x-slot:header>
                    Drugs are picked from the formulary, which carries the default dose, frequency and
                    duration for each entry. The pharmacy dispenses exactly what is written here.
                </x-slot:header>

                <div class="space-y-6">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.select name="prescription_type" label="Prescription type" :options="$types"
                                       :value="old('prescription_type', $defaults['prescription_type'] ?? null)"
                                       placeholder="Choose a type" required />

                        @if ($encounterOptions !== [])
                            <x-form.select name="encounter_id" label="Encounter" :options="$encounterOptions"
                                           :value="old('encounter_id', $defaults['encounter_id'] ?? null)"
                                           placeholder="Standalone — not tied to an encounter" />
                        @endif
                    </div>

                    @if ($encounter)
                        <div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600">
                            This script will be filed against
                            <a href="{{ route('encounters.show', $encounter) }}" class="hms-link">{{ $encounter->encounter_no }}</a>
                            @if ($encounter->visit)
                                (visit {{ $encounter->visit->visit_no }}@if ($encounter->visit->token_number), token {{ $encounter->visit->token_number }}@endif)
                            @endif
                            — {{ lookup_label('encounter_type', $encounter->encounter_type, $encounter->encounter_type) }}.
                        </div>
                    @elseif ($encounterOptions !== [])
                        <p class="text-xs text-slate-500">
                            Leaving the encounter blank writes a standalone script — it still reaches the pharmacy,
                            but it is not filed against a clinical record.
                        </p>
                    @else
                        <p class="text-xs text-slate-500">
                            No encounter is open for this patient, so the script is written standalone.
                        </p>
                    @endif

                    <div class="border-t border-slate-200 pt-5">
                        <div class="mb-3 flex flex-wrap items-end justify-between gap-3">
                            <div>
                                <h3 class="text-sm font-semibold text-slate-800">Medicine</h3>
                                <p class="text-xs text-slate-500">Search the formulary and the drug is added as a line below.</p>
                            </div>
                            <span class="text-xs text-slate-500">
                                <span class="font-medium text-slate-700" x-text="lines.length"></span> line(s)
                            </span>
                        </div>

                        @include('prescriptions._picker', ['placeholder' => 'Search by brand, generic or code…', 'autofocus' => true])

                        <div class="mt-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800"
                             x-show="notice" x-cloak>
                            <div class="flex items-start justify-between gap-3">
                                <span x-text="notice"></span>
                                <button type="button" class="shrink-0 font-medium underline" x-on:click="notice = ''">Dismiss</button>
                            </div>
                        </div>

                        <div x-show="! lines.length" x-cloak class="mt-4 rounded-lg border border-dashed border-slate-300 px-4 py-8 text-center">
                            <x-icon name="pill" size="lg" class="mx-auto text-slate-300" />
                            <p class="mt-2 text-sm font-medium text-slate-600">No medicine on the script yet</p>
                            <p class="mt-1 text-xs text-slate-500">Search the formulary above to add the first line.</p>
                        </div>

                        <div class="mt-4 space-y-4">
                            <template x-for="(line, index) in lines" :key="line.key">
                                <div class="rounded-lg border border-slate-200 bg-white p-4">
                                    <input type="hidden" :name="`items[${index}][drug_id]`" :value="line.drug_id">
                                    <input type="hidden" :name="`items[${index}][snapshot]`" :value="JSON.stringify(line)">

                                    <div class="flex flex-wrap items-start justify-between gap-3">
                                        <div class="min-w-0">
                                            <div class="flex flex-wrap items-center gap-2">
                                                <span class="font-medium text-slate-900" x-text="line.drug_label || 'Unnamed drug'"></span>

                                                <template x-if="line.is_controlled">
                                                    <span class="inline-flex items-center gap-1 rounded-md bg-red-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-red-700">
                                                        <x-icon name="shield" size="xs" />
                                                        <span x-text="'Controlled — ' + (line.controlled_label || 'schedule unset')"></span>
                                                    </span>
                                                </template>

                                                <template x-if="line.is_high_alert">
                                                    <span class="inline-flex items-center gap-1 rounded-md bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700">
                                                        <x-icon name="exclamation" size="xs" /> High alert
                                                    </span>
                                                </template>
                                            </div>

                                            <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-slate-500">
                                                <span class="font-mono" x-text="line.code"></span>
                                                <span x-text="line.generic"></span>
                                                <span :class="line.stock > 0 ? 'text-emerald-700' : 'text-amber-700'"
                                                      x-text="line.stock === null ? 'Not stocked' : line.stock + ' ' + (line.unit || '') + ' on hand'"></span>
                                            </div>

                                            <p class="mt-1 text-xs text-amber-700" x-show="line.prescription_note" x-cloak x-text="line.prescription_note"></p>
                                        </div>

                                        <button type="button" class="hms-btn-ghost hms-btn-sm text-red-600 hover:bg-red-50"
                                                x-on:click="removeLine(index)">
                                            <x-icon name="trash" size="xs" />
                                            Remove
                                        </button>
                                    </div>

                                    <div class="mt-4 grid gap-3 sm:grid-cols-3 lg:grid-cols-6">
                                        <div>
                                            <label class="hms-label" :for="`dose-${index}`">Dose <span class="text-red-500">*</span></label>
                                            <input type="text" :id="`dose-${index}`" :name="`items[${index}][dose]`"
                                                   x-model="line.dose" placeholder="e.g. 500" class="hms-input">
                                            <p class="hms-error" x-show="line.errors?.dose" x-cloak x-text="line.errors?.dose?.[0]"></p>
                                        </div>

                                        <div>
                                            <label class="hms-label" :for="`dose-unit-${index}`">Dose unit</label>
                                            <select :id="`dose-unit-${index}`" :name="`items[${index}][dose_unit]`"
                                                    x-model="line.dose_unit" class="hms-input">
                                                <template x-for="(label, key) in units" :key="key">
                                                    <option :value="key" x-text="label"></option>
                                                </template>
                                            </select>
                                            <p class="hms-error" x-show="line.errors?.dose_unit" x-cloak x-text="line.errors?.dose_unit?.[0]"></p>
                                        </div>

                                        <div>
                                            <label class="hms-label" :for="`route-${index}`">Route</label>
                                            <select :id="`route-${index}`" :name="`items[${index}][route]`"
                                                    x-model="line.route" class="hms-input">
                                                <template x-for="(label, key) in routes" :key="key">
                                                    <option :value="key" x-text="label"></option>
                                                </template>
                                            </select>
                                            <p class="hms-error" x-show="line.errors?.route" x-cloak x-text="line.errors?.route?.[0]"></p>
                                        </div>

                                        <div>
                                            <label class="hms-label" :for="`frequency-${index}`">Frequency</label>
                                            <select :id="`frequency-${index}`" :name="`items[${index}][frequency]`"
                                                    x-model="line.frequency" class="hms-input">
                                                <template x-for="(label, key) in frequencies" :key="key">
                                                    <option :value="key" x-text="label"></option>
                                                </template>
                                            </select>
                                            <p class="hms-error" x-show="line.errors?.frequency" x-cloak x-text="line.errors?.frequency?.[0]"></p>
                                        </div>

                                        <div>
                                            <label class="hms-label" :for="`duration-${index}`">Days</label>
                                            <input type="number" min="1" max="365" :id="`duration-${index}`"
                                                   :name="`items[${index}][duration_days]`" x-model="line.duration_days"
                                                   placeholder="e.g. 5" class="hms-input">
                                            <p class="hms-error" x-show="line.errors?.duration_days" x-cloak x-text="line.errors?.duration_days?.[0]"></p>
                                        </div>

                                        <div>
                                            <label class="hms-label" :for="`quantity-${index}`">Quantity <span class="text-red-500">*</span></label>
                                            <input type="number" step="0.01" min="0.01" :id="`quantity-${index}`"
                                                   :name="`items[${index}][quantity]`" x-model="line.quantity"
                                                   placeholder="e.g. 15" class="hms-input">
                                            <p class="hms-error" x-show="line.errors?.quantity" x-cloak x-text="line.errors?.quantity?.[0]"></p>
                                        </div>
                                    </div>

                                    <div class="mt-3 grid gap-3 sm:grid-cols-3 lg:grid-cols-6">
                                        <div>
                                            <label class="hms-label" :for="`quantity-unit-${index}`">Dispense as</label>
                                            <select :id="`quantity-unit-${index}`" :name="`items[${index}][quantity_unit]`"
                                                    x-model="line.quantity_unit" class="hms-input">
                                                <template x-for="(label, key) in units" :key="key">
                                                    <option :value="key" x-text="label"></option>
                                                </template>
                                            </select>
                                            <p class="hms-error" x-show="line.errors?.quantity_unit" x-cloak x-text="line.errors?.quantity_unit?.[0]"></p>
                                        </div>

                                        <div class="sm:col-span-2 lg:col-span-3">
                                            <label class="hms-label" :for="`instructions-${index}`">Instructions to the patient</label>
                                            <input type="text" :id="`instructions-${index}`" :name="`items[${index}][instructions]`"
                                                   x-model="line.instructions" placeholder="e.g. Take with food" class="hms-input">
                                            <p class="hms-error" x-show="line.errors?.instructions" x-cloak x-text="line.errors?.instructions?.[0]"></p>
                                        </div>

                                        <div class="sm:col-span-3 lg:col-span-2">
                                            <label class="hms-label" :for="`prn-${index}`">Reason, if given as needed</label>
                                            <input type="text" :id="`prn-${index}`" :name="`items[${index}][prn_indication]`"
                                                   x-model="line.prn_indication" placeholder="e.g. For pain" class="hms-input"
                                                   :disabled="! line.is_prn" :required="line.is_prn">
                                            <p class="hms-error" x-show="line.errors?.prn_indication" x-cloak x-text="line.errors?.prn_indication?.[0]"></p>
                                        </div>
                                    </div>

                                    <div class="mt-3 flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-slate-100 pt-3">
                                        <label class="inline-flex items-center gap-2 text-xs text-slate-700">
                                            <input type="checkbox" value="1" :name="`items[${index}][is_stat]`"
                                                   x-model="line.is_stat"
                                                   class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                                            Give immediately (stat)
                                        </label>

                                        <label class="inline-flex items-center gap-2 text-xs text-slate-700">
                                            <input type="checkbox" value="1" :name="`items[${index}][is_prn]`"
                                                   x-model="line.is_prn"
                                                   class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                                            Only when needed (PRN)
                                        </label>

                                        <label class="inline-flex items-center gap-2 text-xs text-slate-700">
                                            <input type="checkbox" value="1" :name="`items[${index}][substitution_allowed]`"
                                                   x-model="line.substitution_allowed"
                                                   class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                                            The pharmacy may substitute a therapeutically equivalent brand
                                        </label>

                                        <span class="ml-auto text-xs text-slate-500" x-show="line.price !== null && line.price !== undefined">
                                            Line estimate
                                            <span class="font-medium text-slate-700"
                                                  x-text="estimateFor(line).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })"></span>
                                        </span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="grid gap-4 border-t border-slate-200 pt-5">
                        <x-form.textarea name="diagnosis_notes" label="Diagnosis or clinical note" rows="3"
                                         hint="The working diagnosis this script follows from — visible to the pharmacy."
                                         :value="old('diagnosis_notes')"
                                         placeholder="e.g. Acute bacterial tonsillitis" />

                        <x-form.textarea name="general_instructions" label="General instructions" rows="3"
                                         hint="Counselling points that apply to the script as a whole."
                                         :value="old('general_instructions')"
                                         placeholder="e.g. Complete the full course. Return if the fever persists beyond three days." />
                    </div>
                </div>

                <x-slot:footer>
                    <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" :disabled="! lines.length"
                                :class="! lines.length ? 'cursor-not-allowed opacity-60' : ''">
                            <x-icon name="check" size="sm" />
                            {{ $submitLabel }}
                        </button>
                    </div>
                </x-slot:footer>
            </x-card>
        </form>
    </div>

    <div class="space-y-6">
        <x-card title="Patient" icon="users">
            @if ($patient)
                <div class="flex items-start gap-3">
                    <div 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() }}
                    </div>
                    <div class="min-w-0">
                        <p class="truncate font-medium text-slate-900">{{ $patient->full_name }}</p>
                        <p class="font-mono text-xs text-slate-500">{{ $patient->medical_record_number }}</p>
                        <p class="mt-1 text-xs text-slate-500">
                            {{ $patient->age_display }} · {{ $patient->gender_label }}
                            @if ($patient->phone) · {{ $patient->phone }} @endif
                        </p>
                    </div>
                </div>

                @if ($patient->isRestricted())
                    <div class="mt-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
                        <x-icon name="lock" size="xs" class="mr-1" />
                        Restricted record — handle per facility policy.
                    </div>
                @endif
            @else
                <p class="text-sm text-slate-500">No patient chosen.</p>
            @endif
        </x-card>

        <x-card title="Script so far" icon="clipboard-check">
            <dl class="hms-dl">
                <dt>Lines</dt>
                <dd x-text="lines.length"></dd>

                <dt>Controlled</dt>
                <dd x-text="lines.filter(line => line.is_controlled).length"></dd>

                <dt>Estimated charge</dt>
                <dd>
                    {{ currency_code() }}
                    <span x-text="estimate.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })"></span>
                </dd>
            </dl>

            <p class="mt-3 text-xs text-slate-500">
                An estimate only — the charge is raised when the pharmacy dispenses, at the price of the
                batch that actually leaves the shelf.
            </p>
        </x-card>

        <x-card title="Before it goes" 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" /> A controlled drug on the script sends it to the register, and the schedule prints on the slip.</li>
                <li class="flex gap-2"><x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" /> The line can be amended only until the pharmacy hands the first dose over.</li>
                <li class="flex gap-2"><x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" /> Quantity is what leaves the shelf, so write it to match the course.</li>
            </ul>
        </x-card>
    </div>
</div>

@push('scripts')
    <script>
        window.prescriptionWriter = (config) => ({
            lines: config.lines ?? [],
            units: config.units ?? {},
            routes: config.routes ?? {},
            frequencies: config.frequencies ?? {},
            notice: '',
            sequence: 0,

            init() {
                this.lines = this.lines.map((line) => this.hydrate(line));
            },

            hydrate(line) {
                return {
                    key: `line-${this.sequence++}`,
                    errors: {},
                    is_stat: false,
                    is_prn: false,
                    substitution_allowed: false,
                    ...line,
                };
            },

            addLine(drug) {
                const duplicate = this.lines.find((line) => Number(line.drug_id) === Number(drug.id)
                    && line.route === (drug.route || 'oral'));

                if (duplicate) {
                    this.notice = `${drug.label} is already on the script by the ${this.routes[duplicate.route] || duplicate.route} route. Change that line rather than adding a second one.`;
                    return;
                }

                this.notice = '';

                this.lines.push(this.hydrate({
                    drug_id: drug.id,
                    drug_label: drug.label,
                    code: drug.code,
                    generic: [drug.generic_name, drug.brand_name].filter(Boolean).join(' · '),
                    is_controlled: drug.is_controlled,
                    controlled_label: drug.controlled_label,
                    is_high_alert: drug.is_high_alert,
                    prescription_note: drug.prescription_notes,
                    stock: drug.stock,
                    unit: drug.unit,
                    price: drug.price,
                    dose: drug.adult_dose || '',
                    dose_unit: 'mg',
                    route: drug.route || 'oral',
                    frequency: drug.default_frequency || 'bd',
                    duration_days: drug.default_duration_days || '',
                    quantity: '',
                    quantity_unit: 'tablet',
                    prn_indication: '',
                    instructions: '',
                }));
            },

            removeLine(index) {
                this.lines.splice(index, 1);
            },

            estimateFor(line) {
                return Number(line.price ?? 0) * Number(line.quantity || 0);
            },

            get estimate() {
                return this.lines.reduce((total, line) => total + this.estimateFor(line), 0);
            },
        });
    </script>
@endpush