@props([
    'name',
    'label' => null,
    'options' => [], // ['value' => 'label'] or [['value','label','icon'?,'description'?,'group'?,'disabled'?]]
    'selected' => null,
    'multiple' => false,
    'searchable' => true,
    'clearable' => false,
    'url' => null, // remote/async search: fetch options from this endpoint instead of $options
    'help' => null,
    'error' => null,
    // See forms/input.blade.php's comment — same _field.blade.php superset guard.
    'value' => null,
    'required' => false,
    'type' => null,
    'checked' => false,
    'existingUrl' => null,
    'aspectRatio' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
    $normalizedOptions = collect($options)->map(function ($opt, $key) {
        $defaults = ['value' => $key, 'group' => null, 'icon' => null, 'description' => null, 'disabled' => false];

        return is_array($opt) ? array_merge($defaults, $opt) : array_merge($defaults, ['label' => $opt]);
    })->values();
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="formsSelect({ selected: @js($selected), multiple: {{ $multiple ? 'true' : 'false' }}, options: @js($normalizedOptions), url: @js($url) })"
         class="relative">
        @if ($multiple)
            <template x-for="value in selected" :key="value">
                <input type="hidden" name="{{ $name }}[]" :value="value">
            </template>
        @else
            <input type="hidden" name="{{ $name }}" :value="selected">
        @endif

        <button type="button" @click="open = !open" @keydown="onKeydown($event)"
                class="flex w-full flex-wrap items-center gap-1.5 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-left text-sm shadow-sm transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15">
            <template x-if="multiple && selected.length">
                <span class="flex flex-1 flex-wrap gap-1">
                    <template x-for="opt in selectedOptions()" :key="opt.value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
                            <span x-text="opt.label"></span>
                            <button type="button" @click.stop="remove(opt.value)" aria-label="Remove"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>
                        </span>
                    </template>
                </span>
            </template>
            <template x-if="!multiple || !selected.length">
                <span class="flex-1 truncate text-slate-700" x-text="selectedLabel()"></span>
            </template>
            @if ($clearable)
                <span x-show="multiple ? selected.length : selected" @click.stop="clear()" class="text-slate-400 transition hover:text-slate-600" role="button" tabindex="0" aria-label="Clear selection">
                    <i class="fa-solid fa-circle-xmark" aria-hidden="true"></i>
                </span>
            @endif
            <i class="fa-solid fa-chevron-down flex-shrink-0 text-xs text-slate-400 transition-transform" :class="open && 'rotate-180'" aria-hidden="true"></i>
        </button>

        <div x-show="open" x-cloak @click.outside="open = false" x-transition
             class="absolute z-30 mt-2 w-full rounded-xl border border-slate-200 bg-white p-3 shadow-xl">
            @if ($searchable)
                <div class="relative mb-3">
                    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400" aria-hidden="true"></i>
                    <input type="text" x-model="search" @keydown="onKeydown($event)" placeholder="Search..."
                           class="w-full rounded-lg border border-slate-200 py-2 pl-8 pr-3 text-sm focus:border-primary focus:outline-none">
                </div>
            @endif

            <p x-show="loading" class="py-6 text-center text-xs text-slate-400">Loading...</p>

            <div x-show="!loading" class="max-h-64 space-y-0.5 overflow-y-auto" role="listbox">
                <template x-for="(groupOptions, groupName) in groupedFiltered()" :key="groupName">
                    <div>
                        <p x-show="groupName" x-text="groupName" class="mt-2 px-2 text-xs font-bold uppercase tracking-wide text-slate-400 first:mt-0"></p>
                        <template x-for="opt in groupOptions" :key="opt.value">
                            <button type="button" @click="select(opt)" :disabled="opt.disabled" role="option" :aria-selected="isSelected(opt).toString()"
                                    class="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition hover:bg-primary/10 hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
                                    :class="isSelected(opt) ? 'bg-primary/10 text-primary' : 'text-slate-600'">
                                <i x-show="opt.icon" class="fa-solid" :class="opt.icon" aria-hidden="true"></i>
                                <span class="flex-1">
                                    <span x-text="opt.label"></span>
                                    <span x-show="opt.description" x-text="opt.description" class="block text-xs text-slate-400"></span>
                                </span>
                                <i x-show="isSelected(opt)" class="fa-solid fa-check text-xs" aria-hidden="true"></i>
                            </button>
                        </template>
                    </div>
                </template>
                <p x-show="Object.keys(groupedFiltered()).length === 0" class="py-6 text-center text-xs text-slate-400">No options found</p>
            </div>
        </div>
    </div>
</x-forms.field>