@props([
    /** @var array<int, array{value:int|string,label:string,search?:string}> */
    'options' => [],
    'model' => '',
    'selected' => '',
    'placeholder' => 'Select…',
    'empty_label' => null, // If provided, include a blank option
    'disabled' => false,
])

@php
    $chevronSvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8fa8' d='M6 8L1 3h10z'/%3E%3C/svg%3E";
@endphp

<div
    x-data="searchableSelect({
        initial: @js((string) $selected),
        options: @js(array_values($options)),
        placeholder: @js($placeholder),
        emptyLabel: @js($empty_label),
    })"
    class="relative"
    @click.outside="open = false"
    @keydown.escape.window="open = false"
>
    <input type="hidden"
           wire:model.live="{{ $model }}"
           x-ref="hidden" />

    <button type="button"
            @click="toggle()"
            @keydown="onTriggerKey($event)"
            x-ref="trigger"
            @disabled($disabled)
            class="flex w-full cursor-pointer items-center justify-between gap-2 rounded-[8px] border border-[#dde0ec] bg-white bg-no-repeat px-3 py-[10px] pr-8 text-[13px] text-ui-ink outline-none transition-colors focus:border-indigo-500 focus:ring-[3px] focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:bg-slate-50"
            style="background-image:url('{{ $chevronSvg }}'); background-position:right 10px center;">
        <span x-text="displayLabel()" class="truncate"></span>
    </button>

    <div x-show="open"
         x-transition.opacity.duration.100ms
         x-cloak
         class="absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-[10px] border border-[#dde0ec] bg-white shadow-lg"
         wire:ignore.self>
        <div class="border-b border-[#eef0f6] bg-[#fafbfd] p-2">
            <input type="text"
                   x-ref="search"
                   x-model="search"
                   placeholder="Type to search…"
                   @keydown.enter.prevent="selectHighlighted()"
                   @keydown.arrow-down.prevent="moveHighlight(1)"
                   @keydown.arrow-up.prevent="moveHighlight(-1)"
                   class="w-full rounded-[7px] border border-[#dde0ec] bg-white px-2.5 py-1.5 text-[12.5px] text-ui-ink outline-none focus:border-indigo-500 focus:ring-[2px] focus:ring-indigo-500/20" />
        </div>

        <ul x-ref="list" class="max-h-[260px] overflow-y-auto py-1 text-[13px]">
            <template x-for="(opt, idx) in filtered()" :key="String(opt.value)">
                <li>
                    <button type="button"
                            @click="choose(opt)"
                            @mouseenter="highlight = idx"
                            :class="{
                                'bg-indigo-50 text-indigo-700': highlight === idx,
                                'text-ui-ink': highlight !== idx,
                            }"
                            class="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left transition-colors hover:bg-indigo-50 hover:text-indigo-700">
                        <span class="min-w-0 truncate" x-text="opt.label"></span>
                    </button>
                </li>
            </template>
            <li x-show="filtered().length === 0" class="px-3 py-3 text-center text-[12px] text-ui-muted">
                No matches for “<span x-text="search"></span>”.
            </li>
        </ul>
    </div>
</div>

@once
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('searchableSelect', ({ initial, options, placeholder, emptyLabel }) => ({
                open: false,
                search: '',
                highlight: 0,
                selected: initial || '',
                placeholder: placeholder || 'Select…',
                emptyLabel: emptyLabel || null,
                options: Array.isArray(options) ? options : [],

                init() {
                    if (this.emptyLabel) {
                        // Ensure a blank option exists at the top for clearing
                        const hasBlank = this.options.some(o => String(o.value) === '');
                        if (!hasBlank) {
                            this.options = [{ value: '', label: this.emptyLabel, search: this.emptyLabel }, ...this.options];
                        }
                    }

                    if (this.$refs.hidden) {
                        const observer = new MutationObserver(() => {
                            const v = this.$refs.hidden.value;
                            if (typeof v === 'string' && v !== this.selected) {
                                this.selected = v;
                            }
                        });
                        observer.observe(this.$refs.hidden, { attributes: true, attributeFilter: ['value'] });
                        this.$refs.hidden.addEventListener('input', () => {
                            const v = this.$refs.hidden.value;
                            if (typeof v === 'string' && v !== this.selected) {
                                this.selected = v;
                            }
                        });
                    }
                },

                toggle() {
                    this.open = !this.open;
                    if (this.open) {
                        this.search = '';
                        this.highlight = this.indexOfSelected();
                        this.$nextTick(() => {
                            if (this.$refs.search) this.$refs.search.focus();
                            this.scrollHighlightIntoView();
                        });
                    }
                },

                onTriggerKey(e) {
                    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        if (!this.open) this.toggle();
                        return;
                    }
                    if (e.key && e.key.length === 1 && /[\w@\.\+\-\s]/.test(e.key)) {
                        e.preventDefault();
                        if (!this.open) {
                            this.toggle();
                            this.$nextTick(() => {
                                this.search = e.key;
                                this.highlight = 0;
                            });
                        } else {
                            this.search += e.key;
                        }
                    }
                },

                filtered() {
                    const q = this.search.trim().toLowerCase();
                    if (!q) return this.options;
                    const starts = [];
                    const contains = [];
                    for (const o of this.options) {
                        const label = (o.label || '').toLowerCase();
                        const hay = ((o.search || '') + ' ' + label).toLowerCase();
                        if (label.startsWith(q) || hay.startsWith(q)) {
                            starts.push(o);
                        } else if (hay.includes(q)) {
                            contains.push(o);
                        }
                    }
                    return [...starts, ...contains];
                },

                indexOfSelected() {
                    const list = this.filtered();
                    const i = list.findIndex(o => String(o.value) === String(this.selected));
                    return i >= 0 ? i : 0;
                },

                moveHighlight(step) {
                    const list = this.filtered();
                    if (list.length === 0) return;
                    this.highlight = (this.highlight + step + list.length) % list.length;
                    this.scrollHighlightIntoView();
                },

                scrollHighlightIntoView() {
                    this.$nextTick(() => {
                        if (!this.$refs.list) return;
                        const node = this.$refs.list.children[this.highlight];
                        if (node && node.scrollIntoView) node.scrollIntoView({ block: 'nearest' });
                    });
                },

                selectHighlighted() {
                    const list = this.filtered();
                    if (list.length === 0) return;
                    const opt = list[Math.max(0, Math.min(this.highlight, list.length - 1))];
                    if (opt) this.choose(opt);
                },

                choose(opt) {
                    if (!opt) return;
                    this.selected = String(opt.value);
                    this.syncHidden(String(opt.value));
                    this.open = false;
                    this.search = '';
                    if (this.$refs.trigger) this.$refs.trigger.focus();
                },

                syncHidden(value) {
                    if (!this.$refs.hidden) return;
                    if (this.$refs.hidden.value !== value) {
                        this.$refs.hidden.value = value;
                        this.$refs.hidden.dispatchEvent(new Event('input', { bubbles: true }));
                        this.$refs.hidden.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                },

                displayLabel() {
                    const opt = this.options.find(o => String(o.value) === String(this.selected));
                    if (opt) return opt.label;
                    return this.selected || this.placeholder;
                },
            }));
        });
    </script>
@endonce