@php
    $placeholder = $placeholder ?? 'Search the formulary — two letters or more…';
    $autofocus = $autofocus ?? false;
@endphp

{{--
    The formulary picker. It searches `drugs.search` and hands the chosen drug to
    whichever component owns the surrounding `x-data` through a `drug-picked`
    window event, so the same control serves the prescriber's line table and the
    pharmacy's substitution dialog.
--}}

<div class="relative"
     x-data="drugPicker({ endpoint: '{{ route('drugs.search') }}' })"
     x-on:keydown.escape="open = false"
     x-on:click.outside="open = false">
    <div class="relative">
        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
            <x-icon name="search" size="sm" />
        </span>

        <input type="text"
               x-model="query"
               x-on:input.debounce.300ms="search()"
               x-on:focus="results.length ? open = true : null"
               placeholder="{{ $placeholder }}"
               autocomplete="off"
               @if ($autofocus) autofocus @endif
               class="hms-input pl-9">

        <span x-show="searching" x-cloak class="absolute inset-y-0 right-3 flex items-center text-xs text-slate-400">
            searching…
        </span>
    </div>

    <div x-show="open" x-cloak
         class="absolute z-40 mt-1 max-h-80 w-full overflow-y-auto rounded-lg border border-slate-200 bg-white shadow-lg">
        <template x-for="drug in results" :key="drug.id + '|' + drug.route">
            <button type="button"
                    x-on:click="choose(drug)"
                    class="flex w-full items-start justify-between gap-3 border-b border-slate-100 px-3 py-2 text-left last:border-0 hover:bg-slate-50">
                <span class="min-w-0">
                    <span class="block truncate text-sm font-medium text-slate-800" x-text="drug.label"></span>
                    <span class="block truncate text-xs text-slate-500"
                          x-text="[drug.generic_name, drug.code].filter(Boolean).join(' · ')"></span>
                </span>

                <span class="shrink-0 text-right">
                    <template x-if="drug.is_controlled">
                        <span class="block text-[10px] font-semibold uppercase tracking-wide text-red-600"
                              x-text="'Controlled — ' + (drug.controlled_label || 'schedule unset')"></span>
                    </template>
                    <template x-if="drug.is_high_alert">
                        <span class="block text-[10px] font-semibold uppercase tracking-wide text-amber-600">High alert</span>
                    </template>
                    <span class="block text-xs"
                          :class="drug.stock > 0 ? 'text-emerald-700' : 'text-slate-400'"
                          x-text="drug.stock === null ? 'not stocked' : drug.stock + ' ' + (drug.unit || '') + ' on hand'"></span>
                </span>
            </button>
        </template>

        <div x-show="! results.length" x-cloak class="px-3 py-4 text-center text-xs text-slate-500">
            <span x-show="query.trim().length < 2">Type at least two letters of the brand or generic name.</span>
            <span x-show="query.trim().length >= 2 && ! searching">Nothing in the formulary matches that.</span>
        </div>
    </div>
</div>

@once
    @push('scripts')
        <script>
            window.drugPicker = (config = {}) => ({
                endpoint: config.endpoint,
                query: '',
                results: [],
                searching: false,
                open: false,

                async search() {
                    const term = this.query.trim();

                    if (term.length < 2) {
                        this.results = [];
                        this.open = false;
                        return;
                    }

                    this.searching = true;

                    try {
                        const response = await fetch(`${this.endpoint}?q=${encodeURIComponent(term)}`, {
                            headers: { 'Accept': 'application/json' },
                        });

                        if (! response.ok) {
                            throw new Error(`formulary search failed: ${response.status}`);
                        }

                        const payload = await response.json();
                        this.results = payload.results ?? [];
                        this.open = true;
                    } catch (error) {
                        this.results = [];
                        this.open = false;
                    } finally {
                        this.searching = false;
                    }
                },

                choose(drug) {
                    this.query = '';
                    this.results = [];
                    this.open = false;
                    this.$dispatch('drug-picked', drug);
                },
            });
        </script>
    @endpush
@endonce