@props([
    'name' => 'City',
    'label' => 'Seleccionar',
    'items' => [],
    'key' => 'id',
    'text' => 'title',
    'value' => null,
    'placeholder' => 'Todas',
    'emit' => null,
])
@php
    $emptySelected = count(collect($items)->where('is_selected', true)) == 0;
@endphp
<div class="relative group z-30" x-data="dropdown({
    items: @js($items),
    key: @js($key),
    text: @js($text),
    value: @js($value),
    placeholder: @js($placeholder),
    emit: @js($emit),
    name: @js($name),
})" @click.outside="open=false">
    <button type="button" @click="open=!open" @class([
        'flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-all',
        'bg-white dark:bg-gray-700 text-primary border-primary' => $value,
        'bg-background-light dark:bg-gray-800 text-text-main dark:text-gray-200 border-transparent hover:border-gray-300 dark:hover:border-gray-600' => !$value,
    ])>
        <span class="material-symbols-outlined !text-[18px] text-text-secondary">location_on</span>
        <span class="text-text-secondary">{{ $label }}:</span>
        <span class="font-semibold" x-text="selectedText"></span>
        <span
            class="material-symbols-outlined !text-[18px] {{ $value ? 'rotate-180' : '' }} transition-transform text-text-secondary">expand_more</span>
    </button>
    <div x-show="open" x-transition
        class="absolute left-0 mt-2 w-64 bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-xl shadow-xl py-2 overflow-hidden">
        <div class="px-4 py-2 border-b border-gray-100 dark:border-gray-800 mb-1">
            <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Selecciona la ciudad</span>
        </div>
        <div class="max-h-64 overflow-y-auto">
            <button type="button" @click="select(null)" class='w-full text-left px-4 py-2.5 text-sm'
                :class="selectedValue == null ?
                    'font-medium text-primary bg-primary/5 flex items-center justify-between' :
                    'text-text-main dark:text-gray-300 hover:bg-background-light dark:hover:bg-gray-800'">
                Todas
                <template x-if="selectedValue  === null">
                    <span class="material-symbols-outlined !text-[18px]">check</span>
                </template>
            </button>
            @foreach (collect($items) as $item)
                <button type="button" @click="select('{{ $item[$key] }}')"
                    class="w-full text-left px-4 py-2.5 text-sm transition-colors"
                    :class="selectedValue == {{ $item[$key] }} ?
                        'font-medium text-primary bg-primary/5 flex items-center justify-between' :
                        'text-text-main dark:text-gray-300 hover:bg-background-light dark:hover:bg-gray-800'">
                    {{ $item['title'] }}
                    <template x-if="selectedValue == {{ $item[$key] }}">
                        <span class="material-symbols-outlined !text-[18px]">check</span>
                    </template>
                </button>
            @endforeach

        </div>
        <div class="mt-1 p-2 border-t border-gray-100 dark:border-gray-800 flex items-center justify-end gap-2">
            <button @click="open=false"
                class="px-3 py-1.5 text-xs font-semibold text-text-secondary hover:text-text-main dark:hover:text-white">Close</button>
            <button @click="apply()"
                class="px-3 py-1.5 text-xs font-bold bg-primary text-white rounded-md hover:bg-blue-700 transition-colors">Apply</button>
        </div>
    </div>

</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', (cfg) => ({
            open: false,
            items: cfg.items ?? [],
            key: cfg.key ?? 'id',
            text: cfg.text ?? 'title',
            selectedValue: cfg.value ?? null,
            placeholder: cfg.placeholder ?? 'Todas',
            emit: cfg.emit ?? null,
            name: cfg.name ?? null,

            get selectedText() {
                if (this.selectedValue === null || this.selectedValue === '') return this
                    .placeholder
                const found = this.items.find(i => i[this.key] == this.selectedValue)
                return found ? found[this.text] : this.placeholder
            },

            select(val) {
                this.selectedValue = val
            },


            apply() {
                this.open = false
                if (this.emit && window.Livewire) {
                    window.Livewire.dispatch(this.emit, {
                        name: this.name,
                        value: this.selectedValue
                    })
                    return
                }
            },
        }))
    })
</script>