@props([
    'options' => [],
    'optionValue' => 'id',
    'optionLabel' => 'name',
    'placeholder' => 'Select option',
    'searchPlaceholder' => 'Search...',
    'wireModel' => null,
    'required' => false,
    'disabled' => false,
])

@php
    $wireModel = $attributes->wire('model')->value() ?? $wireModel;
    $componentId = 'searchable_select_' . uniqid();
@endphp

<div 
    x-data="{
        open: false,
        search: '',
        selectedId: @if($wireModel) @entangle($wireModel).live @else null @endif,
        options: {{ json_encode($options) }},
        optionValue: '{{ $optionValue }}',
        optionLabel: '{{ $optionLabel }}',
        placeholder: '{{ $placeholder }}',
        disabled: {{ $disabled ? 'true' : 'false' }},
        
        init() {
            // Ensure options are properly set on initialization
            if (!this.options || this.options.length === 0) {
                this.options = {{ json_encode($options) }};
            }
        },
        
        get filteredOptions() {
            if (this.search === '') {
                return this.options;
            }
            return this.options.filter(option => {
                const label = this.getOptionLabel(option);
                return label.toLowerCase().includes(this.search.toLowerCase());
            });
        },
        
        get selectedOptionName() {
            if (!this.selectedId) {
                return this.placeholder;
            }
            const option = this.options.find(opt => opt[this.optionValue] == this.selectedId);
            return option ? this.getOptionLabel(option) : this.placeholder;
        },
        
        getOptionLabel(option) {
            return option[this.optionLabel] || '';
        },
        
        getOptionValue(option) {
            return option[this.optionValue];
        },
        
        selectOption(option) {
            const value = this.getOptionValue(option);
            this.selectedId = value;
            @if($wireModel)
            try {
                this.$wire.set('{{ $wireModel }}', value);
            } catch (error) {
                console.warn('Livewire sync error, value updated locally:', error);
            }
            @endif
            this.open = false;
            this.search = '';
        },
        
        toggleDropdown() {
            if (!this.disabled) {
                this.open = !this.open;
                if (this.open) {
                    this.$nextTick(() => {
                        this.$refs.searchInput?.focus();
                    });
                }
            }
        }
    }" 
    class="position-relative"
    @click.away="open = false"
    id="{{ $componentId }}"
    {{ $attributes->except(['wire:model', 'class']) }}>
    
    <!-- Display Button -->
    <button 
        type="button"
        @click="toggleDropdown()" 
        class="form-control text-start d-flex justify-content-between align-items-center {{ $attributes->get('class', '') }}"
        :class="{ 'bg-light': disabled }"
        :disabled="disabled"
        style="background-color: white;">
        <span x-text="selectedOptionName" class="text-truncate"></span>
        <svg 
            width="12" 
            height="12" 
            viewBox="0 0 12 12" 
            style="margin-left: auto; flex-shrink: 0;"
            :class="{ 'rotate-180': open }">
            <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>

    <!-- Dropdown -->
    <div 
        x-show="open" 
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        class="position-absolute w-100 bg-white border rounded shadow-lg mt-1"
        style="z-index: 1050; max-height: 300px; overflow-y: auto;">
        
        <!-- Search Input -->
        <div class="p-2 border-bottom sticky-top bg-white" style="z-index: 1051;">
            <input 
                type="text" 
                x-model="search" 
                x-ref="searchInput"
                :placeholder="'{{ $searchPlaceholder }}'"
                class="form-control form-control-sm"
                @click.stop
                @keydown.escape="open = false"
                @keydown.arrow-down.prevent="$refs.optionsList?.querySelector('[data-option]')?.focus()"
                autocomplete="off">
        </div>

        <!-- Options List -->
        <div x-ref="optionsList">
            <template x-for="option in filteredOptions" :key="getOptionValue(option)">
                <div 
                    @click="selectOption(option)"
                    class="px-3 py-2"
                    :class="{ 
                        'bg-primary text-white': getOptionValue(option) == selectedId, 
                        'cursor-pointer': true 
                    }"
                    style="cursor: pointer;"
                    @mouseenter="$el.classList.add('bg-light')"
                    @mouseleave="if(getOptionValue(option) != selectedId) $el.classList.remove('bg-light')"
                    tabindex="0"
                    data-option>
                    <span x-text="getOptionLabel(option)"></span>
                </div>
            </template>
            
            <!-- No Results -->
            <div x-show="filteredOptions.length === 0" class="px-3 py-2 text-muted text-center">
                No results found
            </div>
        </div>
    </div>
</div>

<style>
    .rotate-180 {
        transform: rotate(180deg);
        transition: transform 0.2s ease;
    }
    
    [x-cloak] { 
        display: none !important; 
    }
</style>