@props([
    'name',
    'label' => null,
    'options' => [],       // espera array de arrays: ['id' => ..., 'nombre' => ...]
    'values' => [],        // valores seleccionados
    'placeholder' => 'Seleccionar...',
    'searchPlaceholder' => 'Buscar...',
])

@php
    $values = old($name, $values);

    // Normalizar opciones: si vienen como strings, los convertimos a ['id'=>..., 'nombre'=>...]
    $normalizedOptions = collect($options)
        ->mapWithKeys(function ($option) {
            if (!is_array($option)) {
                return [$option => $option];
            }
            return [$option['id'] => $option['nombre']];
        })
        ->toArray();
@endphp

<div
    x-data="{
        open: false,
        search: '',
        selected: @js($values),
        options: @js($normalizedOptions),

        toggle(val) {
            this.selected.includes(val)
                ? this.selected = this.selected.filter(v => v !== val)
                : this.selected.push(val)
        },

        remove(val) {
            this.selected = this.selected.filter(v => v !== val)
        },

        filtered() {
            if (!this.search) return Object.entries(this.options)
            return Object.entries(this.options).filter(
                ([, text]) => text.toLowerCase().includes(this.search.toLowerCase())
            )
        },

        labelOf(val) {
            return this.options[val] ?? val
        }
    }"
    class="relative w-full"
>
    {{-- LABEL --}}
    @if ($label)
        <label class="text-sm font-medium text-gray-700 mb-1 block">
            {{ $label }}
        </label>
    @endif

    {{-- SELECT / TAG CONTAINER --}}
    <div
        @click="open = true"
        class="min-h-[42px] w-full cursor-text rounded-xl border border-gray-300
               bg-white px-2 py-1 text-sm text-gray-700
               flex flex-wrap items-center gap-1
               focus-within:ring-2 focus-within:ring-blue-500"
    >
        {{-- TAGS --}}
        <template x-for="val in selected" :key="val">
            <span
                class="flex items-center gap-1 rounded-lg bg-orange-100 px-2 py-0.5
                       text-xs text-orange-700"
            >
                <span x-text="labelOf(val)"></span>
                <button
                    type="button"
                    @click.stop="remove(val)"
                    class="hover:text-red-500"
                >
                    ✕
                </button>
            </span>
        </template>

        {{-- PLACEHOLDER --}}
        <span
            x-show="selected.length === 0"
            class="text-gray-400 px-1"
        >
            {{ $placeholder }}
        </span>
    </div>

    {{-- DROPDOWN --}}
    <div
        x-show="open"
        @click.outside="open = false"
        x-transition
        class="absolute z-50 mt-2 w-full rounded-xl border border-gray-200
               bg-white shadow-lg"
    >
        {{-- SEARCH --}}
        <div class="p-2 border-b">
            <input
                type="text"
                x-model="search"
                placeholder="{{ $searchPlaceholder }}"
                class="w-full rounded-md border border-gray-300 px-2 py-1 text-sm
                       focus:ring-2 focus:ring-blue-500 focus:outline-none"
            >
        </div>

        {{-- LISTA --}}
        <div class="max-h-56 overflow-y-auto">
            <template x-for="[key, text] in filtered()" :key="key">
                <label
                    class="flex items-center gap-2 px-3 py-2 text-sm
                           hover:bg-blue-50 cursor-pointer"
                >
                    <input
                        type="checkbox"
                        :checked="selected.includes(key)"
                        @change="toggle(key)"
                        class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                    >
                    <span x-text="text"></span>
                </label>
            </template>

            <div
                x-show="filtered().length === 0"
                class="px-3 py-2 text-sm text-gray-400"
            >
                Sin resultados
            </div>
        </div>
    </div>

    {{-- INPUTS REALES --}}
    <template x-for="val in selected" :key="val">
        <input type="hidden" name="{{ $name }}[]" :value="val">
    </template>

    @error($name)
        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
    @enderror
</div>