<div class="px-4 pt-4">

    {{-- Header --}}
    <div class="mb-4">
        <h1 class="text-lg font-bold text-slate-800">Semua Produk</h1>
        <p class="text-xs text-slate-400 mt-0.5">Temukan semua produk dari mitra kami</p>
    </div>

    {{-- Filter chips — konsisten dengan Beranda --}}
    <div class="flex gap-2 mb-3 overflow-x-auto pb-0.5 -mx-4 px-4 scrollbar-hide">

        {{-- Kategori --}}
        <x-store.filter-chip :active="$filterCategory === ''"
            wire:click="$set('filterCategory', '')">
            Semua
        </x-store.filter-chip>
        @foreach ($categories as $cat)
            <x-store.filter-chip :active="$filterCategory === $cat->slug"
                wire:click="$set('filterCategory', '{{ $cat->slug }}')">
                {{ $cat->name }}
            </x-store.filter-chip>
        @endforeach
    </div>

    {{-- Filter harga + sort + unggulan --}}
    <div class="flex gap-2 mb-3 overflow-x-auto pb-0.5 -mx-4 px-4 scrollbar-hide">

        {{-- Harga --}}
        <x-store.filter-chip :active="$filterPrice === ''"
            wire:click="$set('filterPrice', '')">
            Semua Harga
        </x-store.filter-chip>
        <x-store.filter-chip :active="$filterPrice === 'under50k'"
            wire:click="$set('filterPrice', 'under50k')">
            &lt; 50rb
        </x-store.filter-chip>
        <x-store.filter-chip :active="$filterPrice === '50k-100k'"
            wire:click="$set('filterPrice', '50k-100k')">
            50rb – 100rb
        </x-store.filter-chip>
        <x-store.filter-chip :active="$filterPrice === 'above100k'"
            wire:click="$set('filterPrice', 'above100k')">
            &gt; 100rb
        </x-store.filter-chip>

        {{-- Divider visual --}}
        <span class="w-px bg-slate-200 shrink-0 my-1.5"></span>

        {{-- Sort --}}
        <x-store.filter-chip :active="$sortBy === 'terbaru'"
            wire:click="$set('sortBy', 'terbaru')">
            Terbaru
        </x-store.filter-chip>
        <x-store.filter-chip :active="$sortBy === 'termurah'"
            wire:click="$set('sortBy', 'termurah')">
            Termurah
        </x-store.filter-chip>
        <x-store.filter-chip :active="$sortBy === 'termahal'"
            wire:click="$set('sortBy', 'termahal')">
            Termahal
        </x-store.filter-chip>

        {{-- Unggulan --}}
        <x-store.filter-chip
            :active="$filterFeatured === 'featured'"
            wire:click="$set('filterFeatured', $filterFeatured === 'featured' ? '' : 'featured')"
            icon="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
            Unggulan
        </x-store.filter-chip>
    </div>

    {{-- Info filter aktif + tombol Reset --}}
    @php
        $filterLabels = [];
        if ($filterCategory) {
            $activeCat = $categories->firstWhere('slug', $filterCategory);
            $filterLabels[] = $activeCat?->name ?? $filterCategory;
        }
        $priceLabels = ['under50k' => 'Di bawah 50rb', '50k-100k' => '50rb – 100rb', 'above100k' => 'Di atas 100rb'];
        if ($filterPrice)    $filterLabels[] = $priceLabels[$filterPrice] ?? $filterPrice;
        if ($filterFeatured === 'featured') $filterLabels[] = 'Unggulan';
        $sortLabels = ['terbaru' => 'Terbaru', 'termurah' => 'Termurah', 'termahal' => 'Termahal', 'unggulan' => 'Unggulan'];
        if ($sortBy && $sortBy !== 'terbaru') $filterLabels[] = $sortLabels[$sortBy] ?? $sortBy;
        $hasActiveFilter = count($filterLabels) > 0;
    @endphp

    @if ($hasActiveFilter)
        <div class="flex items-center justify-between mb-4 px-0.5">
            <p class="text-xs text-slate-500">
                Filter:
                <span class="font-medium text-slate-700">{{ implode(' • ', $filterLabels) }}</span>
            </p>
            <button type="button"
                wire:click="$set('filterCategory',''); $set('filterPrice',''); $set('filterFeatured',''); $set('sortBy','terbaru')"
                class="text-xs text-orange-500 font-medium hover:text-orange-600 transition-colors whitespace-nowrap ml-3">
                × Reset Filter
            </button>
        </div>
    @else
        <div class="mb-4"></div>
    @endif

    {{-- Loading --}}
    <div wire:loading.flex wire:target="filterCategory,filterPrice,sortBy,filterFeatured"
         class="items-center justify-center gap-2 py-8 text-slate-400">
        <svg class="animate-spin w-5 h-5 text-orange-400" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
    </div>

    <div wire:loading.remove wire:target="filterCategory,filterPrice,sortBy,filterFeatured">
        @if ($products->isEmpty())
            <div class="py-16 flex flex-col items-center text-center">
                <div class="w-14 h-14 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                    <svg class="w-7 h-7 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                <p class="font-semibold text-slate-600 text-sm">Produk tidak ditemukan</p>
            </div>
        @else
            <p class="text-xs text-slate-400 mb-3">
                Menampilkan <span class="font-medium text-slate-600">{{ number_format($products->total()) }}</span> Produk
            </p>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mb-5">
                @foreach ($products as $product)
                    @include('livewire.store.partials.product-card', ['product' => $product])
                @endforeach
            </div>
            {{ $products->links() }}
        @endif
    </div>
</div>
