@props([
    'id',
    'name',
    'options'     => [],
    'selected'    => null,
    'placeholder' => 'Selecione…',
    'allLabel'    => 'Todos',
    'width'       => 'w-56',
])

@php
    // options: [['value' => 1, 'label' => 'Nome', 'sub' => 'linha secundária'], ...]
    $options  = array_values(array_map(fn($o) => (array) $o, (array) $options));
    $selected = $selected === null || $selected === '' ? null : (string) $selected;

    $current = null;
    foreach ($options as $option) {
        if ((string) $option['value'] === $selected) {
            $current = $option;
            break;
        }
    }
@endphp

<div id="{{ $id }}" class="search-select relative {{ $width }}" data-name="{{ $name }}">
    <input type="hidden" name="{{ $name }}" value="{{ $selected }}">

    <button type="button" onclick="toggleSearchSelect('{{ $id }}')"
        class="ss-trigger flex items-center gap-2 w-full pl-3 pr-2 py-2 rounded-xl bg-white/4 border border-white/8 text-left transition-colors hover:border-white/20 cursor-pointer">
        <span class="ss-label flex-1 min-w-0 truncate text-sm {{ $current ? 'text-white' : 'text-gray-500' }}">
            {{ $current['label'] ?? $placeholder }}
        </span>
        @if ($current)
            <span onclick="event.stopPropagation(); clearSearchSelect('{{ $id }}')"
                class="ss-clear p-1 rounded-md text-gray-500 hover:text-white hover:bg-white/10 transition-all shrink-0">
                <i class="fa-solid fa-xmark text-[0.7rem]"></i>
            </span>
        @endif
        <i class="ss-chevron fa-solid fa-chevron-down text-[0.6rem] text-gray-500 shrink-0 transition-transform duration-200"></i>
    </button>

    <div class="ss-menu hidden absolute left-0 right-0 mt-2 z-50 rounded-xl border border-white/10 bg-[#111111] shadow-2xl shadow-black/70 overflow-hidden">
        <div class="p-2 border-b border-white/6">
            <div class="relative">
                <input type="text" class="ss-search w-full pl-8 pr-3 py-2 rounded-lg bg-black/40 border border-white/10 text-white placeholder-gray-600 text-xs outline-none focus:border-brand-green/50"
                    placeholder="Pesquisar por nome…" autocomplete="off"
                    oninput="filterSearchSelect('{{ $id }}', this.value)"
                    onkeydown="onSearchSelectKey(event, '{{ $id }}')">
                <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none">
                    <i class="fa-solid fa-magnifying-glass text-[0.65rem]"></i>
                </span>
            </div>
        </div>

        <div class="ss-list max-h-64 overflow-y-auto p-1">
            <button type="button" data-value="" data-search="{{ Str::lower($allLabel) }}"
                onclick="pickSearchSelect('{{ $id }}', '', @js($allLabel))"
                class="ss-option w-full text-left px-3 py-2 rounded-lg text-sm no-underline transition-colors border-0 cursor-pointer
                    {{ $selected === null ? 'bg-brand-green/12 text-brand-green font-semibold' : 'bg-transparent text-gray-300 hover:bg-white/5 hover:text-white' }}">
                {{ $allLabel }}
            </button>

            @foreach ($options as $option)
                @php $isOn = (string) $option['value'] === $selected; @endphp
                <button type="button"
                    data-value="{{ $option['value'] }}"
                    data-search="{{ Str::lower($option['label'] . ' ' . ($option['sub'] ?? '')) }}"
                    onclick="pickSearchSelect('{{ $id }}', @js((string) $option['value']), @js($option['label']))"
                    class="ss-option w-full text-left px-3 py-2 rounded-lg transition-colors border-0 cursor-pointer
                        {{ $isOn ? 'bg-brand-green/12' : 'bg-transparent hover:bg-white/5' }}">
                    <span class="block text-sm truncate {{ $isOn ? 'text-brand-green font-semibold' : 'text-gray-200' }}">
                        {{ $option['label'] }}
                    </span>
                    @if (!empty($option['sub']))
                        <span class="block text-[0.68rem] text-gray-500 truncate">{{ $option['sub'] }}</span>
                    @endif
                </button>
            @endforeach
        </div>

        <p class="ss-empty hidden px-3 py-4 text-center text-gray-600 text-xs m-0">Nenhum resultado.</p>
    </div>
</div>

@once
@push('styles')
<style>
    .ss-list::-webkit-scrollbar {
        width: 5px;
    }
    .ss-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
    }
    .ss-list::-webkit-scrollbar-thumb {
        background: rgba(34, 197, 94, 0.4);
        border-radius: 8px;
        transition: background .2s ease;
    }
    .ss-list::-webkit-scrollbar-thumb:hover {
        background: #22c55e;
    }
    .ss-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(34, 197, 94, 0.4) rgba(255, 255, 255, 0.04);
    }
</style>
@endpush
@push('scripts')
<script>
    function toggleSearchSelect(id) {
        const box = document.getElementById(id);
        const menu = box.querySelector('.ss-menu');
        const open = !menu.classList.contains('hidden');

        closeAllSearchSelects();
        if (open) return;

        menu.classList.remove('hidden');
        box.querySelector('.ss-chevron').classList.add('rotate-180');
        box.querySelector('.ss-search').focus();
    }

    function closeAllSearchSelects() {
        document.querySelectorAll('.search-select').forEach(box => {
            box.querySelector('.ss-menu').classList.add('hidden');
            box.querySelector('.ss-chevron').classList.remove('rotate-180');
        });
    }

    function normalizeSs(value) {
        return (value || '').normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
    }

    function filterSearchSelect(id, term) {
        const box    = document.getElementById(id);
        const needle = normalizeSs(term);
        let matches  = 0;

        box.querySelectorAll('.ss-option').forEach(option => {
            const hit = normalizeSs(option.dataset.search).includes(needle);
            option.classList.toggle('hidden', !hit);
            if (hit) matches++;
        });

        box.querySelector('.ss-empty').classList.toggle('hidden', matches > 0);
    }

    // Enter escolhe a primeira opção visível; Escape fecha.
    function onSearchSelectKey(event, id) {
        if (event.key === 'Escape') { closeAllSearchSelects(); return; }
        if (event.key !== 'Enter') return;

        event.preventDefault();
        const first = document.getElementById(id)
            .querySelector('.ss-option:not(.hidden)');
        if (first) first.click();
    }

    function pickSearchSelect(id, value, label) {
        const box = document.getElementById(id);
        box.querySelector('input[type="hidden"]').value = value;
        box.querySelector('.ss-label').textContent = label;

        closeAllSearchSelects();
        document.dispatchEvent(new CustomEvent('search-select:change', {
            detail: { id: id, name: box.dataset.name, value: value }
        }));
    }

    function clearSearchSelect(id) {
        const box = document.getElementById(id);
        const all = box.querySelector('.ss-option[data-value=""]');
        pickSearchSelect(id, '', all ? all.textContent.trim() : 'Todos');
    }

    document.addEventListener('click', function (e) {
        if (!e.target.closest('.search-select')) closeAllSearchSelects();
    });
</script>
@endpush
@endonce