{{-- Selector de empresa del encabezado (MigracionLayout.MD §4). Una sola compañía o "Todas" (decidido 27/10/2026:
     ningún filtro admite varias). Alt + S abre; ↑ ↓ recorren; Enter elige; Escape cierra. Aplicar guarda en la sesión
     y recarga la pantalla. --}}
<div>
    @if ($disponible)
        <div class="relative" x-data="{
                abierto: false,
                busqueda: '',
                universo: {{ \Illuminate\Support\Js::from($universo) }},
                elegidas: {{ \Illuminate\Support\Js::from($elegidas) }},
                foco: -1,
                guardando: false,
                get visibles() {
                    const q = this.busqueda.trim().toLowerCase();
                    return q ? this.universo.filter(c => c.nombre.toLowerCase().includes(q)) : this.universo;
                },
                marcada(id) { return this.elegidas.includes(id); },
                alternar(id) { this.elegidas = [id]; },
                abrir() { this.abierto = true; this.foco = -1; this.$nextTick(() => this.$refs.buscar.focus()); },
                mover(d) {
                    const n = this.visibles.length; if (!n) return;
                    this.foco = (this.foco + d + n) % n;
                    this.$nextTick(() => this.$refs.lista.querySelector('[data-indice=\'' + this.foco + '\']')?.scrollIntoView({ block: 'nearest' }));
                },
                marcarFoco() { const c = this.visibles[this.foco]; if (c) this.alternar(c.id_websimex); },
                aplicar() { this.guardando = true; $wire.guardar(this.elegidas); },
             }"
             x-on:keydown.alt.s.window.prevent="abierto ? abierto = false : abrir()"
             x-on:keydown.escape.window="abierto = false"
             x-on:click.outside="abierto = false">
            <button type="button" x-on:click="abierto ? abierto = false : abrir()" :aria-expanded="abierto"
                    title="Elegir compañía (Alt + S)"
                    class="mt-0.5 flex max-w-[260px] items-center gap-1 rounded-md px-1.5 py-0.5 text-[12px] font-medium text-[var(--acento-texto)] hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
                <x-icono nombre="building-office-2" class="h-3.5 w-3.5 flex-none" />
                <span class="truncate">{{ $etiqueta }}</span>
                <x-icono nombre="chevron-down" variante="m" class="h-3.5 w-3.5 flex-none" />
            </button>

            <div x-show="abierto" x-cloak x-transition.opacity
                 class="absolute left-0 z-50 mt-2 w-[340px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]"
                 role="dialog" aria-label="Elegir compañía">
                <div class="border-b border-[var(--borde)] p-3">
                    <div class="relative">
                        <x-icono nombre="magnifying-glass" class="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--texto-tenue)]" />
                        <input x-ref="buscar" x-model="busqueda" type="search" placeholder="Buscar compañía" aria-label="Buscar compañía"
                               x-on:keydown.arrow-down.prevent="mover(1)" x-on:keydown.arrow-up.prevent="mover(-1)"
                               x-on:keydown.enter.prevent="if (foco >= 0) marcarFoco(); aplicar()"
                               class="form-input block h-9 w-full rounded-lg border-[var(--borde-fuerte)] bg-[var(--superficie-3)] pl-8 text-[13px] text-[var(--texto)] placeholder:text-[var(--texto-tenue)] focus:border-[var(--acento)] focus:ring-[var(--acento)]">
                    </div>
                </div>
                <ul x-ref="lista" class="max-h-72 overflow-y-auto py-1" role="listbox">
                    <li role="option" :aria-selected="!elegidas.length" x-on:click="elegidas = []"
                        class="flex cursor-pointer items-center gap-2.5 border-b border-[var(--borde)] px-3 py-2 text-[13px] font-semibold text-[var(--texto)] hover:bg-[var(--nav-hover)]">
                        <input type="radio" tabindex="-1" :checked="!elegidas.length" class="form-radio h-4 w-4 border-[var(--borde-fuerte)] text-[var(--acento)] focus:ring-[var(--acento)]">
                        <span class="flex-1">Todas las compañías</span>
                    </li>
                    <template x-for="(c, i) in visibles" :key="c.id_websimex">
                        <li :data-indice="i" role="option" :aria-selected="marcada(c.id_websimex)"
                            x-on:click="alternar(c.id_websimex)" x-on:mouseenter="foco = i"
                            :class="foco === i ? 'bg-[var(--nav-hover)]' : ''"
                            class="flex cursor-pointer items-center gap-2.5 px-3 py-2 text-[13px] text-[var(--texto)]">
                            <input type="radio" tabindex="-1" :checked="marcada(c.id_websimex)" class="form-radio h-4 w-4 border-[var(--borde-fuerte)] text-[var(--acento)] focus:ring-[var(--acento)]">
                            <span class="min-w-0 flex-1 truncate" x-text="c.nombre"></span>
                        </li>
                    </template>
                    <li x-show="!visibles.length" class="px-3 py-4 text-center text-[12.5px] text-[var(--texto-suave)]">Ninguna compañía coincide.</li>
                </ul>
                <div class="flex items-center justify-between gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-3 py-2.5">
                    <span class="text-[11px] text-[var(--texto-tenue)]">↑ ↓ recorrer · Enter elegir · Esc cerrar</span>
                    <div class="flex gap-2">
                        <x-secondary-button class="!h-8 !px-3" x-on:click="abierto = false">Cancelar</x-secondary-button>
                        <x-button type="button" class="!h-8 !px-3" x-on:click="aplicar()" x-bind:disabled="guardando">
                            <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" x-show="guardando" x-cloak /> Aplicar
                        </x-button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>