@props([
    'title',
    'name' => null,
    'options' => [],
    'searchable' => false,
    'selected' => [],
    'inputName' => null,
])

@php
    $filterName = $name ?? Str::slug($title, '-');
    // API-facing filter key: ifi-name → ifi_name, ip-wise → ip_wise, etc.
    $filterKey = str_replace('-', '_', $filterName);
    $selectedValues = collect($selected ?? [])->map(fn ($value) => (string) $value)->all();
    $inputFieldName = $inputName ?? ($filterName . '[]');
    $totalOptions = count($options);

    // Render first 50 options initially; the rest are loaded via AJAX on scroll.
    // Selected options are always included in the initial render so URL-preset
    // filters are shown checked regardless of their position in the list.
    $renderLimit = 50;

    // Partition: selected options first, then fill remaining slots with unselected
    $selectedOpts   = array_values(array_filter($options, fn ($o) => in_array((string) $o, $selectedValues, true)));
    $unselectedOpts = array_values(array_filter($options, fn ($o) => !in_array((string) $o, $selectedValues, true)));
    $remainingSlots = max(0, $renderLimit - count($selectedOpts));
    $displayOptions = array_merge($selectedOpts, array_slice($unselectedOpts, 0, $remainingSlots));
    $loadedCount    = count($displayOptions);
    $hasMore        = $loadedCount < $totalOptions;
    // Next page index (1-based, size $renderLimit)
    $nextPage       = $hasMore ? 2 : null;

    $isLargeDataset  = $totalOptions > $renderLimit;
    $forceSearchable = $isLargeDataset ? true : ($searchable ?? false);

    $selectedCount = collect($displayOptions)->filter(fn ($option) => empty($selectedValues) || in_array((string) $option, $selectedValues, true))->count();
    $isAllSelected = $loadedCount > 0 ? $selectedCount === $loadedCount : true;
@endphp

<div class="sphf-filter-item relative"
     data-filter-name="{{ $filterName }}"
     data-filter-key="{{ $filterKey }}"
     data-filter-total="{{ $totalOptions }}"
     data-filter-loaded="{{ $loadedCount }}"
     data-filter-page="{{ $nextPage ?? 1 }}"
     data-filter-has-more="{{ $hasMore ? 'true' : 'false' }}"
     data-filter-per-page="{{ $renderLimit }}">
    <button type="button" class="sphf-filter-btn" data-filter-toggle>
        <span class="sphf-filter-title">{{ $title }}</span> <i class="ki-filled ki-down"></i>
    </button>

    <div class="sphf-filter-dropdown">
        @if ($forceSearchable)
            <div style="padding: 8px 12px; border-bottom: 1px solid #edf2f1; background: #f9fbfb;">
                <input type="text" class="dropdown-search" placeholder="Search ({{ $totalOptions }} total)..."
                    style="width: 100%; border: 1px solid #ccdad6; border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; color: #315d56;">
                @if ($isLargeDataset)
                    <div class="filter-total-hint" style="font-size: 11px; color: #64748b; margin-top: 4px;">Showing {{ $loadedCount }} of {{ $totalOptions }}. Scroll to load more.</div>
                @endif
            </div>
        @endif

        <ul class="dropdown-list p-1" style="max-height: 250px; overflow-y: auto; margin: 0; list-style: none;">
            <li class="dropdown-list-item flex items-center gap-2.5 px-3 py-2 mx-1 my-0.5 rounded-md hover:bg-[#eaf5ef] cursor-pointer transition-colors duration-150">
                <input id="{{ $filterName }}-all" type="checkbox" class="filter-all w-4 h-4 rounded border-gray-300 text-[#0a9a4c] focus:ring-[#0a9a4c] cursor-pointer" {{ $isAllSelected ? 'checked' : '' }}>
                <label for="{{ $filterName }}-all" class="cursor-pointer flex-1 text-[13px] font-semibold text-[#1e293b] select-none m-0">Select All</label>
            </li>

            @foreach ($displayOptions as $option)
                <li class="dropdown-list-item flex items-center gap-2.5 px-3 py-2 mx-1 my-0.5 rounded-md hover:bg-[#eaf5ef] cursor-pointer transition-colors duration-150">
                    <input id="{{ $filterName }}-{{ Str::slug($option) }}" type="checkbox" class="filter-item w-4 h-4 rounded border-gray-300 text-[#0a9a4c] focus:ring-[#0a9a4c] cursor-pointer" value="{{ $option }}" name="{{ $inputFieldName }}" {{ (empty($selectedValues) || in_array((string) $option, $selectedValues, true)) ? 'checked' : '' }}>
                    <label for="{{ $filterName }}-{{ Str::slug($option) }}" class="cursor-pointer flex-1 text-[13px] font-semibold text-[#1e293b] select-none m-0">{{ $option }}</label>
                </li>
            @endforeach

            {{-- Lazy-load sentinel: JS scrolls this into view to trigger next-page fetch --}}
            @if ($hasMore)
                <li class="filter-lazy-sentinel" style="padding: 6px 12px; text-align: center; display: none;">
                    <span style="font-size: 12px; color: #64748b;">Loading more…</span>
                </li>
            @endif
        </ul>
    </div>
</div>