@extends('layouts.app')

@section('title', $collectionConfig['title'])

@section('content')
@php
    // Base-aware URL builder: preserves every active filter except overrides.
    $filterBase = '/' . $collectionConfig['key'];
    $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'),
        ], 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="catalogue-main collection-head">
            <h1 class="collection-heading">{{ $collectionConfig['heading'] }}</h1>
            <p class="collection-tagline">{{ $collectionConfig['tagline'] }}</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