@props([
    'name',
    // Static lists come in as a PHP iterable; lists that change on the page
    // (departments, once a campus is picked) come in as an Alpine expression.
    'options' => null,
    'optionsExpr' => null,
    'selected' => '',
    'placeholder' => 'Pilih',
    'searchPlaceholder' => 'Cari…',
    'emptyText' => 'Tiada padanan ditemui',
    // Label for an explicit "no value" entry; omit to make the field unclearable.
    'emptyOption' => null,
    'disabledExpr' => 'false',
])

@php
    $optionsJs = $optionsExpr ?: Js::from(
        collect($options ?? [])->map(fn ($option) => [
            'value' => (string) ($option['value'] ?? $option['id'] ?? ''),
            'label' => (string) ($option['label'] ?? $option['name'] ?? ''),
        ])->values()
    );
@endphp

<div
    x-data="searchableSelect(() => ({{ $optionsJs }}), {
        selected: {{ Js::from((string) $selected) }},
        placeholder: {{ Js::from($placeholder) }},
        emptyOption: {{ Js::from($emptyOption) }},
        disabled: () => {{ $disabledExpr }},
    })"
    x-modelable="value"
    {{ $attributes->class('relative') }}
    @keydown.escape.prevent.stop="close()"
    @click.outside="close()"
>
    {{-- The submitted control. Validation stays server-side: a hidden input is
         barred from the browser's constraint validation either way. --}}
    <input type="hidden" name="{{ $name }}" x-bind:value="value">

    <button
        type="button"
        id="{{ $name }}"
        x-ref="trigger"
        class="field-input flex w-full items-center justify-between gap-2 text-left"
        x-bind:disabled="isDisabled"
        @click="toggle()"
        @keydown.arrow-down.prevent="open ? move(1) : show()"
        @keydown.arrow-up.prevent="open ? move(-1) : show()"
        @keydown.enter.prevent="toggle()"
        aria-haspopup="listbox"
        x-bind:aria-expanded="open ? 'true' : 'false'"
    >
        <span class="truncate" x-text="displayLabel"
              x-bind:class="value ? 'text-slate-900' : 'text-slate-400'"></span>

        <svg class="size-4 shrink-0 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <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>

    <div
        x-show="open"
        x-cloak
        x-transition.opacity.duration.100ms
        class="absolute z-20 mt-1 w-full overflow-hidden rounded-lg border border-slate-200 bg-white shadow-lg"
    >
        <div class="border-b border-slate-100 p-2">
            <input
                type="text"
                x-ref="search"
                x-model="search"
                placeholder="{{ $searchPlaceholder }}"
                class="field-input py-1.5"
                autocomplete="off"
                @keydown.arrow-down.prevent="move(1)"
                @keydown.arrow-up.prevent="move(-1)"
                @keydown.enter.prevent="pick()"
                @keydown.tab="close()"
            >
        </div>

        <ul class="max-h-60 overflow-y-auto py-1 text-sm" role="listbox" x-ref="list">
            <template x-for="(option, index) in matches" :key="option.value">
                <li
                    role="option"
                    x-bind:aria-selected="option.value === value ? 'true' : 'false'"
                    class="cursor-pointer px-3 py-2"
                    x-bind:class="{
                        'bg-indigo-50 text-indigo-700': index === active,
                        'font-medium text-indigo-600': option.value === value && index !== active,
                        'text-slate-700': option.value !== value && index !== active,
                    }"
                    @click="choose(option)"
                    @mousemove="active = index"
                    x-text="option.label"
                ></li>
            </template>

            <li x-show="! matches.length" class="px-3 py-2 text-slate-500">{{ $emptyText }}</li>
        </ul>

        {{-- Kept out of the scroll area so the count stays visible while scrolling. --}}
        <p x-show="options.length > 8" x-cloak
           class="border-t border-slate-100 bg-slate-50 px-3 py-1.5 text-xs text-slate-500">
            <span x-text="matches.length"></span> daripada <span x-text="options.length"></span> pilihan
        </p>
    </div>
</div>