{{--
    Searchable combobox for the V2 shell header (dark background).

    Variables expected:
        $cbId       – unique HTML id prefix
        $cbLabel    – visible label text
        $cbModel    – Livewire property name to update on selection
        $cbSelected – currently selected value (key from $cbOptions)
        $cbOptions  – associative array [value => label]
        $cbEmpty    – text shown when $cbOptions is empty
--}}
@php
    $selectedLabel = $cbOptions[$cbSelected] ?? ($cbEmpty ?? 'Select…');
@endphp

<div
    x-data="{
        open: false,
        search: '',
        selected: @js($cbSelected),
        options: @js($cbOptions),
        get filtered() {
            if (this.search === '') return this.options;
            const q = this.search.toLowerCase();
            return Object.fromEntries(
                Object.entries(this.options).filter(([, label]) => label.toLowerCase().includes(q))
            );
        },
        choose(value) {
            this.selected = value;
            this.open = false;
            this.search = '';
            $wire.set('{{ $cbModel }}', value);
        },
        labelFor(value) {
            return this.options[value] ?? '{{ $cbEmpty }}';
        }
    }"
    x-on:keydown.escape="open = false"
    x-on:click.outside="open = false"
    class="relative block"
>
    <span class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-300">{{ $cbLabel }}</span>

    {{-- Trigger button --}}
    <button
        type="button"
        x-on:click="open = !open"
        class="cs-v2-hero-control flex w-full items-center justify-between px-3 py-2 text-sm shadow-sm"
        aria-haspopup="listbox"
        :aria-expanded="open"
    >
        <span class="truncate" x-text="labelFor(selected)"></span>
        <svg class="ml-2 h-4 w-4 shrink-0 opacity-60 transition-transform" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
        </svg>
    </button>

    {{-- Dropdown panel --}}
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="absolute left-0 z-50 mt-1.5 w-full min-w-[14rem] rounded-xl border border-slate-200 bg-white shadow-xl"
        style="display:none"
        role="listbox"
    >
        {{-- Search input --}}
        <div class="border-b border-slate-100 p-2">
            <input
                type="text"
                x-model="search"
                x-on:click.stop
                placeholder="Search…"
                class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-slate-800 placeholder-slate-400 focus:border-cyan-400 focus:outline-none focus:ring-2 focus:ring-cyan-200"
                autocomplete="off"
            />
        </div>

        {{-- Options list --}}
        <ul class="max-h-56 overflow-y-auto py-1 text-sm">
            <template x-for="[value, label] in Object.entries(filtered)" :key="value">
                <li
                    x-on:click="choose(value)"
                    :class="value === selected ? 'bg-cyan-50 text-cyan-800 font-semibold' : 'text-slate-700 hover:bg-slate-50'"
                    class="flex cursor-pointer items-center justify-between px-3 py-2"
                    role="option"
                    :aria-selected="value === selected"
                >
                    <span x-text="label" class="truncate"></span>
                    <svg x-show="value === selected" class="ml-2 h-4 w-4 shrink-0 text-cyan-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"/>
                    </svg>
                </li>
            </template>

            <li x-show="Object.keys(filtered).length === 0" class="px-3 py-2 text-slate-400">
                No results
            </li>
        </ul>
    </div>
</div>