@props([
    'name', 
    'options' => [], 
    'selected' => '', 
    'placeholder' => 'Pilih', 
    'searchable' => false,
    'required' => false,
    'class' => '',
    'xModel' => null // Optional: if we want to bind it to a parent x-data property
])
@php
    $normalizedOptions = [];
    if (is_array($options) || $options instanceof \Illuminate\Support\Collection) {
        $optionsArray = $options instanceof \Illuminate\Support\Collection ? $options->toArray() : $options;
        $isSequential = empty($optionsArray) || array_keys($optionsArray) === range(0, count($optionsArray) - 1);
        foreach ($optionsArray as $key => $value) {
            if (is_array($value) && isset($value['value'])) {
                 $normalizedOptions[] = ['value' => (string) $value['value'], 'label' => (string) ($value['label'] ?? $value['value'])];
            } elseif (is_object($value) && isset($value->value)) {
                 $normalizedOptions[] = ['value' => (string) $value->value, 'label' => (string) ($value->label ?? $value->value)];
            } elseif ($isSequential) {
                $normalizedOptions[] = ['value' => (string) $value, 'label' => (string) $value];
            } else {
                $normalizedOptions[] = ['value' => (string) $key, 'label' => (string) $value];
            }
        }
    }

    $oldInputName = $name;
    if (str_ends_with($name, '[]')) {
        $oldInputName = substr($name, 0, -2);
    }

    $defaultValue = old($oldInputName, $selected);
    if (is_array($defaultValue)) {
        $defaultValue = reset($defaultValue) ?: '';
    }
@endphp

<div x-data="{ 
      open: false, 
      value: @if($xModel) {{ $xModel }} @else {{ Js::from($defaultValue) }} @endif,
      options: {{ Js::from($normalizedOptions) }},
      search: '',
      get displayValue() {
         const opt = this.options.find(o => o.value == this.value);
         return opt ? opt.label : this.value;
      },
      get filteredOptions() {
         if (!this.search) return this.options;
         const q = this.search.toLowerCase();
         return this.options.filter(o => o.label.toLowerCase().includes(q));
      },
      selectOption(val) {
          this.value = val;
          @if($xModel) {{ $xModel }} = val; @endif
          this.open = false;
          this.search = '';
      }
    }" 
    class="relative w-full"
    @click.away="open = false">
    
    <input type="hidden" name="{{ $name }}" x-model="value" value="{{ $defaultValue }}" {{ $required ? 'required' : '' }}>
    
    <button type="button" @click="open = !open" 
        class="flex items-center justify-between w-full h-8 px-3 text-xs bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 dark:focus:ring-indigo-500/30 transition-all duration-200 {{ $class }}">
        <span x-text="value ? displayValue : '{{ $placeholder }}'" :class="{'text-gray-400': !value, 'text-gray-900 dark:text-gray-100 font-medium': value}" class="truncate"></span>
        <svg class="w-4 h-4 text-gray-400 transition-transform duration-200 shrink-0" :class="{'rotate-180': open}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
    </button>
    
    <div x-show="open" 
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-2"
        class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-xl overflow-hidden ring-1 ring-black ring-opacity-5"
        style="display: none;">
        
        @if($searchable)
        <div class="p-2 border-b border-gray-100 dark:border-gray-800">
            <input type="text" x-model="search" placeholder="Cari..." class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs rounded-md h-7 px-2 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        @endif

        <ul class="max-h-48 overflow-y-auto custom-scrollbar p-1">
            <template x-for="option in filteredOptions" :key="option.value">
                <li>
                    <button type="button" @click="selectOption(option.value)" 
                        class="w-full px-3 py-2 text-left text-xs rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-500/10 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
                        :class="{'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 font-medium': value == option.value, 'text-gray-700 dark:text-gray-300': value != option.value}">
                        <span x-text="option.label"></span>
                        <svg x-show="value == option.value" class="w-3 h-3 inline float-right mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    </button>
                </li>
            </template>
            @if($searchable)
            <li x-show="filteredOptions.length === 0" class="px-3 py-2 text-xs text-gray-500 text-center">
                Tidak ditemukan
            </li>
            @endif
        </ul>
    </div>
</div>