@props([
    'name',
    'label' => '',
    'placeholder' => 'Search...',
    'apiUrl',
    'required' => false,
    'selectedId' => null,
    'selectedText' => null,
])

<div x-data="searchableSelect('{{ $apiUrl }}', '{{ $selectedId }}', {{ json_encode($selectedText) }})" class="relative">
    <input type="hidden" name="{{ $name }}" :value="selectedId" {{ $required ? 'required' : '' }}>

    <div class="relative">
        <input
            type="text"
            x-model="query"
            @input.debounce.250ms="search()"
            @focus="open = true; if(query.length >= 1) search()"
            @click="open = true; if(query.length >= 1) search()"
            @keydown.escape="open = false"
            @keydown.arrow-down.prevent="highlightNext()"
            @keydown.arrow-up.prevent="highlightPrev()"
            @keydown.enter.prevent="selectHighlighted()"
            placeholder="{{ $placeholder }}"
            class="w-full border-gray-300 rounded-lg text-sm focus:ring-emerald-500 focus:border-emerald-500 pr-8"
            :class="selectedId ? 'bg-emerald-50 border-emerald-300' : ''"
            autocomplete="off"
        >
        <button type="button" x-show="selectedId" @click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
        <svg x-show="!selectedId" class="absolute inset-y-0 right-0 my-auto mr-3 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
    </div>

    <div
        x-show="open && (results.length > 0 || loading || noResults)"
        @click.outside="open = false"
        x-transition
        class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto"
    >
        <div x-show="loading" class="px-4 py-3 text-sm text-gray-500 flex items-center gap-2">
            <svg class="animate-spin h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
            Searching...
        </div>
        <div x-show="noResults && !loading" class="px-4 py-3 text-sm text-gray-500">No results found</div>
        <template x-for="(item, idx) in results" :key="item.id">
            <button
                type="button"
                @click="select(item)"
                @mouseenter="highlightedIndex = idx"
                class="w-full text-left px-4 py-2.5 text-sm hover:bg-emerald-50 transition flex flex-col border-b border-gray-50 last:border-0"
                :class="highlightedIndex === idx ? 'bg-emerald-50' : ''"
            >
                <span class="font-medium text-gray-800" x-text="item.text"></span>
                <span class="text-xs text-gray-500" x-text="item.sub" x-show="item.sub"></span>
            </button>
        </template>
    </div>
</div>

@once
@push('scripts')
<script>
function searchableSelect(apiUrl, initialId, initialText) {
    return {
        apiUrl: apiUrl,
        query: initialText || '',
        selectedId: initialId || '',
        results: [],
        open: false,
        loading: false,
        noResults: false,
        highlightedIndex: -1,
        abortController: null,

        async search() {
            if (this.query.length < 1) {
                this.results = [];
                this.noResults = false;
                return;
            }

            if (this.abortController) this.abortController.abort();
            this.abortController = new AbortController();

            this.loading = true;
            this.noResults = false;

            try {
                const separator = this.apiUrl.includes('?') ? '&' : '?';
                const resp = await fetch(this.apiUrl + separator + 'q=' + encodeURIComponent(this.query), {
                    signal: this.abortController.signal,
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await resp.json();
                this.results = data;
                this.noResults = data.length === 0;
                this.highlightedIndex = -1;
            } catch (e) {
                if (e.name !== 'AbortError') {
                    this.results = [];
                    this.noResults = true;
                }
            } finally {
                this.loading = false;
            }
        },

        select(item) {
            this.selectedId = item.id;
            this.query = item.text;
            this.open = false;
            this.results = [];
        },

        clear() {
            this.selectedId = '';
            this.query = '';
            this.results = [];
            this.open = false;
        },

        highlightNext() {
            if (this.highlightedIndex < this.results.length - 1) this.highlightedIndex++;
        },

        highlightPrev() {
            if (this.highlightedIndex > 0) this.highlightedIndex--;
        },

        selectHighlighted() {
            if (this.highlightedIndex >= 0 && this.results[this.highlightedIndex]) {
                this.select(this.results[this.highlightedIndex]);
            }
        }
    }
}
</script>
@endpush
@endonce