@props([
    'options' => [],
    'placeholder' => __('Select'),
    'emptyLabel' => __('No results'),
])

@php
    $normalizedOptions = collect($options)
        ->map(fn ($label) => is_scalar($label) ? (string) $label : '')
        ->all();
@endphp

<div
    x-data="{
        open: false,
        query: '',
        value: @entangle($attributes->wire('model')),
        options: @js($normalizedOptions),
        panelStyle: '',
        matches(id, label) {
            const query = this.query.trim().toLowerCase();
            const text = String(label ?? '').toLowerCase();

            return query === '' || text.includes(query) || String(id).toLowerCase().includes(query);
        },
        get hasResults() {
            return Object.entries(this.options).some(([id, label]) => this.matches(id, label));
        },
        get selectedLabel() {
            const hasValue = this.value !== null && this.value !== undefined && String(this.value) !== '';
            return hasValue && this.options[String(this.value)] ? this.options[String(this.value)] : @js($placeholder);
        },
        positionPanel() {
            const button = this.$refs.button;
            if (!button) return;

            const rect = button.getBoundingClientRect();
            const width = rect.width;
            const spaceBelow = window.innerHeight - rect.bottom;
            const openAbove = spaceBelow < 280 && rect.top > spaceBelow;
            const top = openAbove ? Math.max(8, rect.top - 276) : rect.bottom + 4;
            const left = Math.min(Math.max(8, rect.left), window.innerWidth - width - 8);

            this.panelStyle = `position: fixed; top: ${top}px; left: ${left}px; width: ${width}px;`;
        },
        choose(id) {
            this.value = id;
            this.$nextTick(() => this.$refs.button?.dispatchEvent(new Event('change', { bubbles: true })));
            this.open = false;
            this.query = '';
        },
        clear() {
            this.value = '';
            this.$nextTick(() => this.$refs.button?.dispatchEvent(new Event('change', { bubbles: true })));
            this.open = false;
            this.query = '';
        }
    }"
    class="relative w-full"
    :class="{ 'z-[90]': open }"
    @resize.window="if (open) positionPanel()"
    @scroll.window="if (open) positionPanel()"
    @keydown.escape.window="open = false"
    data-no-global-spinner
>
    <button
        x-ref="button"
        type="button"
        @click.stop="open = !open; if (open) $nextTick(() => { positionPanel(); $refs.search?.focus() })"
        class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 flex items-center justify-between gap-2 text-start"
        {{ $attributes->whereDoesntStartWith('wire:model') }}
    >
        <span class="truncate" x-text="selectedLabel"></span>
        <i class="fas fa-chevron-down text-xs text-gray-500 dark:text-gray-300"></i>
    </button>

    <template x-teleport="body">
    <div x-show="open" x-transition @click.stop @click.window="open = false"
         :style="panelStyle" style="display: none;"
         class="z-[9999] bg-white dark:bg-gray-800 border dark:border-gray-600 rounded shadow-xl">
        <input
            x-ref="search"
            type="text"
            x-model="query"
            placeholder="{{ __('Search') }}"
            class="w-full border-b px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:outline-none"
        />

        <div class="max-h-56 overflow-y-auto">
            <button
                type="button"
                @click="clear"
                class="w-full text-start px-3 py-2 cursor-pointer hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100"
            >
                {{ $placeholder }}
            </button>

            @foreach($normalizedOptions as $id => $label)
                <button
                    type="button"
                    @click="choose(@js((string) $id))"
                    x-show="matches(@js((string) $id), @js($label))"
                    class="w-full text-start px-3 py-2 cursor-pointer hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 flex items-center justify-between gap-2"
                    :class="{'bg-blue-50 dark:bg-gray-700': String(value) === @js((string) $id)}"
                >
                    <span class="truncate">{{ $label }}</span>
                    <i x-show="String(value) === @js((string) $id)" class="fas fa-check text-xs text-blue-600 dark:text-blue-300"></i>
                </button>
            @endforeach

            <div x-show="!hasResults" class="px-3 py-2 text-gray-500 dark:text-gray-400">
                {{ $emptyLabel }}
            </div>
        </div>
    </div>
    </template>
</div>