@props([
    'options' => [],
    'model',
    'value' => '',
    'placeholder' => 'Choose an option',
    'searchPlaceholder' => 'Type to search…',
    'searchModel' => null,
    'clearable' => false,
    'disabled' => false,
])

@php
    $options = collect($options)->map(fn ($option) => [
        'value' => (string) data_get($option, 'value'),
        'label' => (string) data_get($option, 'label'),
    ]);
    $selectedOption = $options->firstWhere('value', (string) $value);
@endphp

<div {{ $attributes->class('relative') }} x-data="{ open: false, searchTerm: '' }" x-on:click.outside="open = false" x-on:keydown.escape.window="open = false">
    <button type="button" @disabled($disabled) @click="open = !open; searchTerm = ''; if (open) $nextTick(() => $refs.searchInput?.focus())" :aria-expanded="open.toString()" aria-haspopup="listbox" class="flex w-full items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-left text-sm text-slate-700 shadow-sm hover:border-slate-300 focus:border-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-100 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400">
        <span class="truncate">{{ $selectedOption['label'] ?? $placeholder }}</span>
        <svg class="size-4 shrink-0 text-slate-400 transition-transform" :class="open && 'rotate-180'" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 7.22a.75.75 0 0 1 1.06 0L10 10.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 8.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
    </button>

    <div x-cloak x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute z-40 mt-1 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xl">
        <div class="border-b border-slate-100 p-2">
            <input x-ref="searchInput" type="search" x-model.debounce.200ms="searchTerm" @if($searchModel) wire:model.live.debounce.250ms="{{ $searchModel }}" @endif placeholder="{{ $searchPlaceholder }}" aria-label="{{ $searchPlaceholder }}" autocomplete="off" x-on:keydown.arrow-down.prevent="$el.closest('[x-data]').querySelector('[role=option]:not([style*=display])')?.focus()" x-on:keydown.enter.prevent="$el.closest('[x-data]').querySelector('[role=option]:not([style*=display])')?.click()" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none focus:border-emerald-600 focus:ring-2 focus:ring-emerald-100">
        </div>
        <div class="max-h-60 overflow-y-auto p-1" role="listbox">
            @if($clearable)
                <button type="button" x-show="!searchTerm || 'all parent areas'.includes(searchTerm.toLowerCase())" wire:click="$set('{{ $model }}', '')@if($searchModel); $set('{{ $searchModel }}', '')@endif" @click="open = false; searchTerm = ''" class="block w-full rounded-lg px-3 py-2 text-left text-sm {{ (string) $value === '' ? 'bg-emerald-50 font-medium text-emerald-800' : 'text-slate-600 hover:bg-slate-50' }}">All parent areas</button>
            @endif
            @forelse($options as $option)
                <button type="button" x-show="!searchTerm || $el.textContent.toLowerCase().includes(searchTerm.toLowerCase())" wire:click="$set('{{ $model }}', '{{ $option['value'] }}')@if($searchModel); $set('{{ $searchModel }}', '')@endif" @click="open = false; searchTerm = ''" role="option" aria-selected="{{ (string) $value === $option['value'] ? 'true' : 'false' }}" class="block w-full rounded-lg px-3 py-2 text-left text-sm {{ (string) $value === $option['value'] ? 'bg-emerald-50 font-medium text-emerald-800' : 'text-slate-700 hover:bg-slate-50' }}">
                    {{ $option['label'] }}
                </button>
            @empty
                <div class="px-3 py-4 text-center text-sm text-slate-500">No options available.</div>
            @endforelse
            <div x-cloak x-show="searchTerm && !Array.from($el.parentElement.querySelectorAll('[role=option]')).some(option => option.textContent.toLowerCase().includes(searchTerm.toLowerCase()))" class="px-3 py-4 text-center text-sm text-slate-500">No matching options. Try a shorter search.</div>
        </div>
    </div>
</div>