@extends('layouts.app')

@section('title', 'Best Selling - IZONE Africa × Magic City')

@section('content')
    @php
        $filterBase = '/shop/best-selling';
        $shopUrl = function (array $overrides = []) use ($filterBase) {
            $params = array_filter([
                'brand' => request()->query('brand'),
                'cat' => request()->query('cat'),
                'tag' => request()->query('tag'),
                'mfr' => request()->query('mfr'),
                'min_price' => request()->query('min_price'),
                'max_price' => request()->query('max_price'),
                'stock' => request()->query('stock'),
                'dropship' => request()->query('dropship'),
                'dropship_available' => request()->query('dropship_available'),
                'best_selling' => request()->query('best_selling'),
                'deal_of_day' => request()->query('deal_of_day'),
                'quick_deal' => request()->query('quick_deal'),
            ], fn ($v) => $v !== null && $v !== '');

            foreach ($overrides as $key => $value) {
                if ($value === null || $value === '') {
                    unset($params[$key]);
                } else {
                    $params[$key] = $value;
                }
            }

            return empty($params) ? url($filterBase) : url($filterBase . '?' . http_build_query($params));
        };

        $facets = $catalogue['facets'];
        $paginator = $catalogue['paginator'];
    @endphp

    <x-shop.hero-carousel
        :brands="$shop['brands'] ?? []"
        :active-brand="$activeBrandKey"
        :promo-cards="[]"
    />

    <section class="shop-catalogue" id="catalogue">
        <div class="collection-head">
            <h1 class="collection-heading">Best Selling This Week</h1>
            <p class="collection-tagline">Top movers from real orders — quality-checked picks you can trust.</p>
        </div>

        <div class="shop-layout">
            @include('shop.partials.filter-panel')

            <div class="catalogue-main">
                <div class="catalogue-bar">
                    <button class="filters-toggle" id="filtersToggle" type="button" aria-expanded="false" aria-controls="filterPanel">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
                        Filters
                    </button>
                    <p class="catalogue-context" aria-live="polite">
                        @if($catalogue['active']['cat_name'])
                            {{ $catalogue['active']['cat_name'] }}
                        @elseif($activeBrandKey)
                            {{ $activeBrandKey === 'magic' ? 'Magic City' : 'IZONE Africa' }}
                        @else
                            All Products
                        @endif
                        · {{ $catalogue['total'] }} {{ Str::plural('product', $catalogue['total']) }}
                    </p>
                </div>

                <div class="catalogue-grid" id="catalogueGrid">
                    @forelse($catalogue['products'] as $product)
                        <x-product.card :product="$product" />
                    @empty
                        <div class="deals-empty catalogue-empty">
                            <div class="deals-empty-emoji">🔍</div>
                            <div class="deals-empty-title">No products match these filters</div>
                            <div class="deals-empty-text">Try widening the price range or clearing a filter.</div>
                        </div>
                    @endforelse
                </div>

                @if($paginator && $paginator->lastPage() > 1)
                    <nav class="collection-pager" aria-label="Pagination">
                        @if($paginator->onFirstPage())
                            <span class="fp-chip pager-link is-disabled">← Prev</span>
                        @else
                            <a class="fp-chip pager-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">← Prev</a>
                        @endif

                        @foreach($paginator->getUrlRange(1, $paginator->lastPage()) as $page => $url)
                            <a class="fp-chip pager-link{{ $page === $paginator->currentPage() ? ' active' : '' }}" href="{{ $url }}" aria-label="Page {{ $page }}" @if($page === $paginator->currentPage()) aria-current="page" @endif>{{ $page }}</a>
                        @endforeach

                        @if($paginator->hasMorePages())
                            <a class="fp-chip pager-link" href="{{ $paginator->nextPageUrl() }}" rel="next">Next →</a>
                        @else
                            <span class="fp-chip pager-link is-disabled">Next →</span>
                        @endif
                    </nav>
                @endif
            </div>
        </div>
    </section>

    <div class="shop-filter-backdrop" id="shopFilterBackdrop" hidden></div>

@endsection