@extends('layouts.app')

@section('content')
@php
    $catalogConfig = [
        'pageMode' => $pageMode,
        'pageSlug' => $pageSlug,
        'products' => $products,
        'taxonomy' => $taxonomy,
        'categoriesList' => $activeCategories,
    ];
@endphp

<div x-data="catalogListingManager(@js($catalogConfig))"
     @scroll.window.passive="saveScrollMemory()">

    {{-- ====================================================================
         1. COMPACT CATEGORY / COLLECTION HEADER & QUICK SWITCHER PILLS
         Reference: frontend/single_category_view_all_page_plan.md (Section 2A)
         & frontend/collection_and_utility_pages_plan.md (Section 2)
         ==================================================================== --}}
    <section class="pt-[20px] lg:pt-[32px] pb-[20px] lg:pb-[28px] border-b border-border-subtle bg-bg-main">
        <div class="container-main space-y-[14px] lg:space-y-[18px]">

            {{-- 1. Breadcrumb Navigation --}}
            <nav aria-label="Breadcrumb" class="font-body text-[12px] lg:text-[13px] text-text-muted flex items-center flex-wrap gap-[6px]">
                <a href="{{ url('/') }}" class="hover:text-brand-primary transition-colors duration-200">Home</a>
                <span aria-hidden="true">/</span>
                <a href="{{ url($breadcrumbParentUrl) }}" class="hover:text-brand-primary transition-colors duration-200">{{ $breadcrumbParentLabel }}</a>
                <span aria-hidden="true">/</span>
                <span class="text-text-primary font-medium">{{ $headingTitle }}</span>
            </nav>

            {{-- 2. Category / Collection Title (H1) & Short Intro --}}
            <div class="space-y-[6px]">
                <h1 class="type-h1">{{ $headingTitle }}</h1>
                @if(!empty($headingSubtitle))
                    <p class="type-body max-w-[720px]">{{ $headingSubtitle }}</p>
                @endif
            </div>

            {{-- 3. Quick Sub-Category / Collection Switcher Pills --}}
            <x-catalog.switcher-pills :pageMode="$pageMode" :pageSlug="$pageSlug" />
        </div>
    </section>

    {{-- ====================================================================
         2. TOP FILTER & SORT BAR (Static at Top of Grid) + PRODUCT GRID
         ==================================================================== --}}
    <section class="py-[24px] md:py-[36px] lg:py-[48px]">
        <div class="container-main space-y-[24px] lg:space-y-[32px]">

            {{-- Static Top Filter & Sort Bar + Active Filter Chips --}}
            <x-catalog.filter-bar />

            {{-- Empty Filter Result Fallback (Section 3D of single_category_view_all_page_plan.md) --}}
            <template x-if="filteredAndSortedProducts.length === 0">
                <div class="bg-bg-surface border border-border-subtle py-[56px] px-[20px] text-center space-y-[16px]">
                    <p class="font-body text-[15px] lg:text-[16px] text-text-muted">
                        No sarees match these exact filters.
                    </p>
                    <div>
                        <button type="button"
                                @click="clearAllFilters()"
                                class="btn-secondary">
                            CLEAR ALL FILTERS
                        </button>
                    </div>
                </div>
            </template>

            {{-- ================================================================
                 3. RESPONSIVE 3:4 PRODUCT CARD GRID
                 Desktop (1025px+): 4 Product Cards per row (gap: 20px)
                 Tablet (768–1024px): 3 Product Cards per row (gap: 16px)
                 Mobile (320–767px): 2 Product Cards per row (gap: 12px)
                 Batch Loading Size: 12 Products per batch
                 ================================================================ --}}
            <div x-show="filteredAndSortedProducts.length > 0"
                 class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-[12px] md:gap-[16px] lg:gap-[20px]">

                <template x-for="saree in visibleProducts" :key="saree.id">
                    <article x-data="{
                                isDesktopHovered: false,
                                get cardKey() { return 'grid-' + saree.id; },
                                get isPreviewActive() {
                                    return this.isDesktopHovered || ($store.ui && $store.ui.activeTappedCardId === this.cardKey);
                                },
                                handleCardImageTap(e) {
                                    const isTouch = window.matchMedia('(hover: none), (pointer: coarse)').matches || window.innerWidth < 1025;
                                    if (isTouch) {
                                        if ($store.ui.activeTappedCardId !== this.cardKey) {
                                            e.preventDefault();
                                            $store.ui.activeTappedCardId = this.cardKey;
                                            return;
                                        }
                                        saveScrollMemory();
                                        window.location.href = saree.pdpUrl;
                                    } else {
                                        saveScrollMemory();
                                        window.location.href = saree.pdpUrl;
                                    }
                                },
                                triggerQuickView(e, el) {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    $store.quickView.open({
                                        ...saree,
                                        pdpUrl: saree.pdpUrl
                                    }, el);
                                }
                             }"
                             @mouseenter="if (window.matchMedia('(hover: hover) and (pointer: fine)').matches && window.innerWidth >= 1025) { isDesktopHovered = true }"
                             @mouseleave="isDesktopHovered = false"
                             @click.outside="if ($store.ui.activeTappedCardId === cardKey) { $store.ui.activeTappedCardId = null }"
                             class="group bg-bg-surface border border-border-subtle flex flex-col h-full select-none">

                        {{-- Strict 3:4 Vertical Portrait Image Container --}}
                        <div class="relative w-full aspect-saree overflow-hidden bg-bg-surface">
                            <a :href="saree.pdpUrl"
                               @click="handleCardImageTap($event)"
                               class="block w-full h-full relative focus:outline-none"
                               :aria-label="saree.title">

                                <template x-if="saree.images && saree.images.length > 1">
                                    <div class="w-[200%] h-full flex transition-transform duration-250 ease-out"
                                         :class="isPreviewActive ? '-translate-x-1/2' : 'translate-x-0'">
                                        <div class="w-1/2 h-full relative bg-bg-surface">
                                            <img :src="saree.images[0].url"
                                                 :alt="saree.images[0].alt || saree.title"
                                                 loading="lazy"
                                                 class="w-full h-full object-cover object-top">
                                        </div>
                                        <div class="w-1/2 h-full relative bg-bg-surface">
                                            <img :src="saree.images[1].url"
                                                 :alt="saree.images[1].alt || saree.title"
                                                 loading="lazy"
                                                 class="w-full h-full object-cover object-top">
                                        </div>
                                    </div>
                                </template>

                                <template x-if="!saree.images || saree.images.length <= 1">
                                    <div class="w-full h-full relative bg-bg-surface overflow-hidden">
                                        <img :src="saree.images && saree.images[0] ? saree.images[0].url : '/images/sarees/saree-crimson-1.svg'"
                                             :alt="saree.title"
                                             loading="lazy"
                                             :class="isPreviewActive ? 'scale-[1.04]' : 'scale-100'"
                                             class="w-full h-full object-cover object-top transition-transform duration-250 ease-out">
                                    </div>
                                </template>
                            </a>

                            {{-- Top-Left Status Badge (Priority: SOLD OUT > -15% > NEW) --}}
                            <template x-if="saree.primaryBadge">
                                <div class="absolute top-[10px] left-[10px] z-10 pointer-events-none">
                                    <span :class="saree.primaryBadge.type === 'soldout' ? 'badge-soldout' : 'badge-accent'"
                                          x-text="saree.primaryBadge.label"></span>
                                </div>
                            </template>

                            {{-- Slide-Up QUICK VIEW Bar --}}
                            <button type="button"
                                    @click="triggerQuickView($event, $el)"
                                    :class="isPreviewActive ? 'translate-y-0 opacity-100 pointer-events-auto' : 'translate-y-full opacity-0 pointer-events-none'"
                                    class="absolute bottom-0 inset-x-0 z-10 h-[40px] lg:h-[42px] w-full bg-brand-accent text-text-primary hover:bg-brand-primary hover:text-text-light active:bg-brand-primary active:text-text-light font-body font-semibold text-[12px] lg:text-[13px] uppercase tracking-[0.8px] transition-all duration-200 ease-out flex items-center justify-center cursor-pointer">
                                QUICK VIEW
                            </button>
                        </div>

                        {{-- Bottom Product Info Box (12px Padding; 1st tap opens PDP) --}}
                        <a :href="saree.pdpUrl"
                           @click="saveScrollMemory()"
                           class="p-[12px] flex-1 flex flex-col justify-between gap-[6px] focus:outline-none">
                            <h3 class="type-card-title line-clamp-2 group-hover:text-brand-primary transition-colors duration-200"
                                x-text="saree.title"></h3>

                            <div class="flex items-baseline flex-wrap gap-x-[8px] gap-y-[2px] pt-[2px]">
                                <span class="type-card-price" x-text="saree.formattedPrice"></span>
                                <template x-if="saree.formattedOldPrice">
                                    <span class="type-card-old-price" x-text="saree.formattedOldPrice"></span>
                                </template>
                            </div>
                        </a>
                    </article>
                </template>
            </div>

            {{-- ================================================================
                 4. BRAND-MATCHED WARM SHIMMER SKELETON (Appears While Loading Next Batch)
                 4 Shimmer Cards on Desktop / 2 Shimmer Cards on Mobile
                 ================================================================ --}}
            <div x-show="isLoadingMore"
                 x-cloak
                 class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-[12px] md:gap-[16px] lg:gap-[20px]">
                <div><x-product.shimmer-card /></div>
                <div><x-product.shimmer-card /></div>
                <div class="hidden md:block"><x-product.shimmer-card /></div>
                <div class="hidden lg:block"><x-product.shimmer-card /></div>
            </div>

            {{-- Failed Batch Fallback (Section 10 of global_ui_components_and_content_standards.md) --}}
            <div x-show="batchLoadError"
                 x-cloak
                 class="py-[24px] text-center space-y-[12px]">
                <p class="font-body text-[14px] text-state-error">
                    Couldn't load more sarees. Check your connection.
                </p>
                <button type="button" @click="loadNextBatch()" class="btn-secondary">
                    TRY AGAIN
                </button>
            </div>

            {{-- Infinite Scroll Intersection Sentinel --}}
            <div x-ref="infiniteScrollSentinel" class="h-[4px] w-full"></div>

            {{-- ================================================================
                 5. END-OF-COLLECTION FOOTER DIVIDER
                 Reference: frontend/single_category_view_all_page_plan.md (Section 5C)
                 ================================================================ --}}
            <div x-show="filteredAndSortedProducts.length > 0 && !hasMoreBatches && !isLoadingMore"
                 x-cloak
                 class="border-t border-border-subtle pt-[32px] lg:pt-[40px] text-center space-y-[14px]">
                <p class="font-body text-[14px] text-text-muted"
                   x-text="`You have viewed all ${filteredAndSortedProducts.length} ${filteredAndSortedProducts.length === 1 ? 'Saree' : 'Sarees'} in this ${pageMode === 'collection' ? 'collection' : 'category'}`"></p>
                <div>
                    <a href="{{ url('/sarees') }}" class="btn-primary">
                        ← EXPLORE ALL SAREE CATEGORIES
                    </a>
                </div>
            </div>

        </div>
    </section>

    {{-- Mobile Filter Bottom Sheet Overlay --}}
    <x-catalog.mobile-filter-sheet />

    {{-- Floating Back-to-Top (↑) Button (Stacked 12px above Floating Chat) --}}
    <x-layout.back-to-top />
</div>
@endsection