@props([
    'legenda',
    'id',
    'modelo',
    'opcoes' => [],
    'selecionados' => [],
    'vazio' => 'Todos',
    'singular' => 'item',
    'plural' => 'itens',
    'largura' => 'min-w-48',
    'busca' => false,
])

{{-- Escolha de vários itens de uma vez, no desenho da barra de filtros.

     Um <select multiple> nativo exige segurar Ctrl e some com a lista ao rolar;
     aqui é um botão que abre um painel de caixas de marcar, com busca quando a
     lista é longa. Cada caixa fala direto com o Livewire (`wire:model.live`),
     então não há estado duplicado no Alpine — ele só abre e fecha o painel. --}}
@php
    $marcados = collect($opcoes)->whereIn('valor', array_map('strval', $selecionados));
    $resumo = match (true) {
        $marcados->isEmpty() => $vazio,
        $marcados->count() === 1 => (string) $marcados->first()['rotulo'],
        default => $marcados->count().' '.$plural,
    };
@endphp

<div class="text-sm" x-data="{ aberto: false }" x-on:keydown.escape="aberto = false">
    <span class="block text-xs font-medium text-suave" id="{{ $id }}-legenda">{{ $legenda }}</span>
    <div class="relative mt-1">
        <button type="button" id="{{ $id }}" x-on:click="aberto = ! aberto"
                :aria-expanded="aberto ? 'true' : 'false'" aria-haspopup="true" aria-labelledby="{{ $id }}-legenda {{ $id }}"
                @class([
                    'flex h-[2.125rem] w-full items-center gap-2 rounded-md border pr-9 pl-3 text-left',
                    $largura,
                    'font-medium shadow-xs transition-colors',
                    'border-marca-200 bg-marca-50 text-marca-800 hover:bg-marca-100' => $marcados->isNotEmpty(),
                    'border-fio bg-superficie text-tinta hover:bg-chao' => $marcados->isEmpty(),
                ])>
            {{-- Um item escolhido aparece pelo nome; vários viram a contagem,
                 que já é o número — não precisa de etiqueta repetindo. --}}
            <span class="truncate">{{ $resumo }}</span>
        </button>
        <svg class="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-suave" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
        </svg>

        <div x-show="aberto" x-cloak x-transition.opacity.duration.100ms
             x-on:click.outside="aberto = false"
             class="absolute z-30 mt-1 w-max max-w-80 min-w-full rounded-md border border-fio bg-superficie p-1 shadow-lg">
            @if ($busca)
                <div class="p-1" x-data="{ termo: '' }">
                    <input type="search" x-model="termo" placeholder="Buscar…" aria-label="Buscar em {{ $legenda }}"
                           class="block h-8 w-full rounded-md border border-fio bg-superficie px-2.5 text-sm text-tinta placeholder:text-suave focus-visible:outline-2 focus-visible:outline-marca-600">
                    <ul class="mt-1 max-h-64 overflow-y-auto">
                        @foreach ($opcoes as $opcao)
                            <li x-show="termo === '' || @js(mb_strtolower((string) $opcao['rotulo'])).includes(termo.toLowerCase())">
                                @include('components.partes.opcao-multipla', ['opcao' => $opcao, 'modelo' => $modelo, 'id' => $id])
                            </li>
                        @endforeach
                    </ul>
                </div>
            @else
                <ul class="max-h-64 overflow-y-auto">
                    @foreach ($opcoes as $opcao)
                        <li>@include('components.partes.opcao-multipla', ['opcao' => $opcao, 'modelo' => $modelo, 'id' => $id])</li>
                    @endforeach
                </ul>
            @endif

            @if ($opcoes === [] || count($opcoes) === 0)
                <p class="px-2 py-3 text-center text-xs text-suave">Nada para escolher aqui.</p>
            @endif

            @if ($marcados->isNotEmpty())
                <button type="button" wire:click="$set('{{ $modelo }}', [])" x-on:click="aberto = false"
                        class="mt-1 block w-full rounded-sm border-t border-fio px-2 py-1.5 text-left text-xs font-medium text-marca-700 transition-colors hover:bg-marca-50">
                    Limpar {{ mb_strtolower($legenda) }}
                </button>
            @endif
        </div>
    </div>
</div>