{{--
    <x-search-select> — client-side searchable single-select for MODERATE, static
    option lists (timezones, currencies, …) that a plain <select> makes unusable.

    It wraps the app-wide rfSS Alpine component (resources/js/app.js) and the
    rf-ss-* styles, so it looks and behaves exactly like the timezone picker the
    owner console already ships — just packaged so every screen reuses one tag
    instead of copy-pasting the markup.

    Binding: on pick, rfSS calls $wire.set({name}, value) — a reliable Livewire
    write that works whether the surrounding modal was opened server-side or seeded
    client-side. The wire:key re-seeds the control when the bound value changes on a
    server render (e.g. an Edit opened by a Livewire action).

    Props:
      name              Livewire property to write (required), e.g. "timezone".
      value             Current value, used as the initial selection + re-init key.
      options           List of plain strings, or rows shaped ['v'=>, 'l'=>] /
                        ['value'=>, 'label'=>].
      placeholder       Trigger text when nothing is chosen.
      searchPlaceholder Search box placeholder.
      keyPrefix         Namespaces the wire:key when several live on one screen.

    For a HUGE, server-backed list (thousands of rows) use the Livewire
    <livewire:components.search-select> instead — it never ships the whole table.
--}}
@props([
    'name',
    'value' => '',
    'options' => [],
    'placeholder' => null,
    'searchPlaceholder' => null,
    'keyPrefix' => 'ss',
])
@php
    $opts = [];
    foreach ($options as $o) {
        if (is_array($o)) {
            $opts[] = ['v' => (string) ($o['v'] ?? $o['value'] ?? ''), 'l' => (string) ($o['l'] ?? $o['label'] ?? '')];
        } else {
            $opts[] = ['v' => (string) $o, 'l' => (string) $o];
        }
    }
    $ssVal = (string) ($value ?? '');
    $ssPh  = $placeholder ?? __('Select…');
    $ssSph = $searchPlaceholder ?? __('Search…');
@endphp
<div wire:key="{{ $keyPrefix }}-{{ $ssVal }}"
     x-data="rfSS({ opts: @js($opts), initVal: @js($ssVal), wireKey: @js($name) })"
     x-on:click.outside="open = false"
     class="rf-ss-wrap" {{ $attributes }}>

    <button type="button" @click="toggle()" :class="{ 'rf-ss-open': open }" class="rf-ss-trigger w-full">
        <span class="rf-ss-label" :class="{ 'rf-ss-label-placeholder': val === '' }"
              x-text="selectedLabel || @js($ssPh)"></span>
        <i data-lucide="chevron-down" class="rf-ss-chevron"></i>
    </button>

    {{-- x-rf-float pins the panel to the trigger; see resources/js/app.js. The
         max-height comes from there too, sized to the room actually left below
         (or above) the field, so a card's overflow:hidden can no longer cut it. --}}
    <div x-show="open" 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-ss-dropdown" style="display:none;">

        <div class="rf-ss-search-wrap">
            <i data-lucide="search" class="rf-ss-search-icon"></i>
            <input type="text" x-ref="ssq" x-model="search"
                   @keydown.escape="open = false; search = ''"
                   placeholder="{{ $ssSph }}" class="rf-ss-search" autocomplete="off">
        </div>

        <ul class="rf-ss-list" role="listbox">
            <template x-for="opt in filtered" :key="opt.v">
                <li role="option"
                    :aria-selected="opt.v === val"
                    :class="{ 'rf-ss-opt-active': opt.v === val }"
                    class="rf-ss-opt"
                    @click="pick(opt.v, opt.l)"
                    x-text="opt.l"></li>
            </template>
            <li x-show="filtered.length === 0" class="rf-ss-empty">{{ __('No results') }}</li>
        </ul>

        <div x-show="totalMatch > LIMIT" class="rf-ss-more"
             x-text="`+${totalMatch - LIMIT} {{ __('more — keep typing to narrow') }}`"></div>
    </div>
</div>