@props(['name', 'label' => '', 'options' => [], 'selected' => '', 'placeholder' => 'Rechercher...', 'class' => '', 'onchange' => '', 'disabled' => false, 'required' => false])

<div class="relative" x-data="{
    open: false,
    search: '',
    selectedValue: '{{ $selected }}',
    options: {{ json_encode($options) }},
    name: '{{ $name }}',
    disabled: {{ $disabled ? 'true' : 'false' }},
    
    init() {
        const selectedOption = this.options.find(opt => String(opt.value) === String(this.selectedValue));
        if (selectedOption) {
            this.search = selectedOption.label;
        }
        
        if (this.name === 'expense_type_id') {
            window.addEventListener('expense-type-created', (e) => {
                this.options.push(e.detail);
                this.selectOption(e.detail);
            });
        }
        
        if (this.name === 'supplier_id') {
            window.addEventListener('supplier-created', (e) => {
                this.options.push(e.detail);
                this.selectOption(e.detail);
            });
        }
    },
    
    get filteredOptions() {
        if (!this.search) return this.options;
        return this.options.filter(option => 
            option.label.toLowerCase().includes(this.search.toLowerCase())
        );
    },
    
    selectOption(option) {
        this.selectedValue = option.value;
        this.search = option.label;
        this.open = false;
        
        @if($onchange)
        this.$nextTick(() => {
            this.$el.closest('form').submit();
        });
        @endif
        
        if (this.name === 'client_id' && option.value) {
            const placeholder = document.getElementById('appointments-placeholder');
            if (placeholder) {
                placeholder.textContent = 'Chargement en cours...';
            }
            if (window.Livewire) {
                Livewire.dispatch('clientChanged', { clientId: option.value });
            }
        }
    },
    
    clearSelection() {
        this.search = '';
        this.selectedValue = '';
        this.open = true;
        
        if (this.name === 'client_id' && window.Livewire) {
            Livewire.dispatch('clientChanged', { clientId: null });
        }
    }
}">
    @if($label)
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        {{ $label }}
        @if($required)
            <span class="text-red-500">*</span>
        @endif
    </label>
    @endif
    
    <div class="relative">
        <input 
            type="text" 
            x-model="search"
            @click="if (!disabled) { open = true; $el.select(); }"
            @input="if (!disabled) open = true"
            placeholder="{{ $placeholder }}"
            :disabled="disabled"
            :class="disabled ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' : ''"
            class="block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white {{ $class }}"
            autocomplete="off"
            @if($required) required @endif>
        
        <button 
            type="button"
            x-show="search && !disabled"
            @click.stop="clearSelection()"
            class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
        
        <input type="hidden" name="{{ $name }}" x-model="selectedValue" @if($required) required @endif>
        
        <div x-show="open" 
             x-cloak
             style="display: none;"
             @click.away="open = false"
             class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto">
            <template x-for="option in filteredOptions" :key="option.value">
                <div @click="selectOption(option)" 
                     class="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-900 dark:text-white"
                     :class="{ 'bg-blue-50 dark:bg-blue-900': String(selectedValue) === String(option.value) }">
                    <span x-text="option.label"></span>
                </div>
            </template>
            <div x-show="filteredOptions.length === 0" x-cloak style="display: none;" class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
                Aucun résultat
            </div>
        </div>
    </div>
</div>