{{--
    Server-side searchable select (App\Livewire\Components\SearchSelect).
    Alpine owns open/close only; the option list and the resolved label come from
    the server, so the DOM never holds more than {limit} rows of a huge table.
--}}
<div x-data="{ ssOpen: false }"
     x-on:click.outside="ssOpen = false"
     x-on:keydown.escape="ssOpen = false"
     class="relative">

    {{-- Trigger --}}
    <div class="rf-input flex items-center justify-between gap-2"
         style="cursor:pointer;"
         @click="ssOpen = !ssOpen; if (ssOpen) $nextTick(() => $refs.ssSearch && $refs.ssSearch.focus())">
        <span class="truncate" @if (! $this->selectedLabel) style="color:var(--color-text-subtle);" @endif>
            {{ $this->selectedLabel ?? $placeholder }}
        </span>
        <span class="flex items-center gap-1" style="flex-shrink:0;">
            @if ($this->selectedLabel)
                <button type="button" class="rf-icon-btn" style="width:20px;height:20px;"
                        @click.stop="ssOpen = false" wire:click.stop="clearValue">
                    <i data-lucide="x" style="width:14px;height:14px;"></i>
                </button>
            @endif
            <i data-lucide="chevrons-up-down" style="width:15px;height:15px;color:var(--color-text-subtle);"></i>
        </span>
    </div>

    {{-- Dropdown --}}
    {{-- x-rf-float pins the panel to the trigger with position:fixed (see
         resources/js/app.js): the rounded cards this select sits in carry
         overflow:hidden and were slicing the list. Geometry is written there,
         so nothing positional may be set inline — Livewire's morph would
         restore it on every keystroke. --}}
    <div x-show="ssOpen" x-cloak x-rf-float
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         class="rf-menu rf-ss-menu">
        <div class="rf-ss-menu-search" style="padding:8px;border-bottom:1px solid var(--color-border);">
            <input type="text" x-ref="ssSearch"
                   wire:model.live.debounce.300ms="search"
                   placeholder="{{ $searchPlaceholder }}"
                   class="rf-input" autocomplete="off"
                   x-on:keydown.escape.stop="ssOpen = false">
        </div>
        <div class="rf-ss-menu-list" style="max-height:240px;padding:4px;">
            @forelse ($this->options as $opt)
                <button type="button" class="rf-menu-item" style="width:100%;text-align:left;"
                        wire:key="ss-opt-{{ $opt['value'] }}"
                        wire:click="choose({{ $opt['value'] }})"
                        @click="ssOpen = false">
                    {{ $opt['label'] }}
                </button>
            @empty
                <div class="px-3 py-2 text-xs" style="color:var(--color-text-subtle);">
                    {{ trim($search) === '' ? __('No options available.') : __('No matches.') }}
                </div>
            @endforelse
            <div wire:loading wire:target="search" class="px-3 py-2 text-xs" style="color:var(--color-text-subtle);">
                {{ __('Searching…') }}
            </div>
        </div>
    </div>
</div>