@props([
    'wireModel',
    'options',
    'selected' => null,
    'placeholder' => 'Select…',
    'live' => true,
    'idKey' => 'id',
    'labelKey' => 'name',
])

@php
    $items = collect($options)->map(fn ($option) => [
        'id' => (string) data_get($option, $idKey),
        'label' => (string) data_get($option, $labelKey),
    ])->values();

    $selectedItem = $items->first(fn ($item) => $item['id'] === (string) $selected);
@endphp

<div
    x-data="{
        open: false,
        query: '',
        items: @js($items),
        selectedId: @js($selectedItem['id'] ?? ''),
        selectedLabel: @js($selectedItem['label'] ?? ''),
        get filtered() {
            const q = this.query.trim().toLowerCase();
            return q === '' ? this.items : this.items.filter(i => i.label.toLowerCase().includes(q));
        },
        choose(item) {
            this.selectedId = item.id;
            this.selectedLabel = item.label;
            this.query = '';
            this.open = false;
            $wire.set('{{ $wireModel }}', item.id, {{ $live ? 'true' : 'false' }});
        },
        clear() {
            this.selectedId = '';
            this.selectedLabel = '';
            this.query = '';
            this.open = false;
            $wire.set('{{ $wireModel }}', '', {{ $live ? 'true' : 'false' }});
        }
    }"
    x-init="$watch('open', value => { if (value) { query = ''; $nextTick(() => $refs.searchInput?.focus()); } })"
    @click.outside="open = false"
    @keydown.escape="open = false"
    class="relative"
>
    <button type="button" @click="open = ! open"
        {{ $attributes->merge(['class' => 'flex items-center justify-between gap-2 w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-left px-3 py-2 text-sm']) }}>
        <span x-text="selectedLabel || {{ Illuminate\Support\Js::from($placeholder) }}" :class="selectedLabel ? '' : 'text-gray-400 dark:text-gray-500'" class="truncate"></span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-400 flex-shrink-0">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>
    </button>

    <div x-show="open" x-transition style="display: none;"
        class="absolute z-30 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg">
        <div class="p-2 border-b border-gray-100 dark:border-gray-700">
            <input x-ref="searchInput" type="text" x-model="query" placeholder="Search…" autocomplete="off"
                @keydown.enter.prevent="filtered.length && choose(filtered[0])"
                class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <ul class="max-h-60 overflow-y-auto py-1">
            @if ($placeholder)
                <li>
                    <button type="button" @click="clear()" class="block w-full text-left px-3 py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                        {{ $placeholder }}
                    </button>
                </li>
            @endif
            <template x-for="item in filtered" :key="item.id">
                <li>
                    <button type="button" @click="choose(item)"
                        class="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
                        :class="item.id === selectedId ? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 font-medium' : 'text-gray-700 dark:text-gray-200'"
                        x-text="item.label"
                    ></button>
                </li>
            </template>
            <li x-show="filtered.length === 0" class="px-3 py-4 text-sm text-center text-gray-400 dark:text-gray-500">No matches.</li>
        </ul>
    </div>
</div>