{{-- Modern Brands Filter Component --}}
@props(['availableBrands', 'selectedBrands' => []])

<div class="px-5 py-4" x-data="{ open: true, showAll: @entangle('showAllBrands'), searchTerm: @entangle('brandsSearchTerm') }">
    <button
        @click="open = !open"
        class="flex items-center justify-between w-full text-left group"
    >
        <div class="flex items-center gap-2">
            <h3 class="text-sm font-semibold text-zinc-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Brands</h3>
            @if(is_array($selectedBrands) && count($selectedBrands) > 0)
                <span class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 text-xs font-bold text-white bg-indigo-600 rounded-full">
                    {{ count($selectedBrands) }}
                </span>
            @endif
        </div>
        <div class="w-6 h-6 rounded-lg bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center group-hover:bg-indigo-100 dark:group-hover:bg-indigo-900/30 transition-colors">
            <svg class="w-3.5 h-3.5 text-zinc-500 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-all duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </div>
    </button>

    <div x-show="open" x-collapse class="mt-4 space-y-3">
        @if($availableBrands->count() > 5)
            <div class="relative">
                <input
                    type="text"
                    x-model="searchTerm"
                    placeholder="Search brands..."
                    class="w-full pl-9 pr-4 py-2 text-sm border-0 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
        @endif

        <div class="space-y-1 max-h-56 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-600">
            @foreach($availableBrands as $brand)
                <label
                    wire:key="brand-{{ $brand->id }}"
                    x-show="!searchTerm || '{{ strtolower($brand->name) }}'.includes(searchTerm.toLowerCase())"
                    class="flex items-center gap-3 cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900/20 p-2 rounded-xl transition-all group/item"
                >
                    <div class="relative flex items-center">
                        <input
                            type="checkbox"
                            wire:click="toggleBrand({{ $brand->id }})"
                            @if(is_array($selectedBrands) && in_array($brand->id, $selectedBrands)) checked @endif
                            class="peer sr-only"
                        >
                        <div class="w-5 h-5 rounded-lg border-2 border-zinc-300 dark:border-zinc-600 peer-checked:border-indigo-600 peer-checked:bg-indigo-600 transition-all flex items-center justify-center">
                            <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                    </div>
                    <span class="text-sm text-zinc-700 dark:text-zinc-300 flex-1 group-hover/item:text-indigo-600 dark:group-hover/item:text-indigo-400 transition-colors">
                        {{ $brand->name }}
                    </span>
                    <span class="text-xs text-zinc-400 dark:text-zinc-500 bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded-full">
                        {{ $brand->items_count }}
                    </span>
                </label>
            @endforeach
        </div>
    </div>
</div>