@props([
    'products' => [],
    'sliderId' => 'slider-' . uniqid(),
    'viewAllUrl' => '/sarees',
    'viewAllLabel' => 'View All Sarees',
    'totalCount' => null,
])

@php
    // Enforce Data Rule: Maximum 12 in-stock products per slider (Sold-out products never appear in sliders)
    $sliderProducts = array_values(array_filter($products, fn($p) => !empty($p['inStock']) && ($p['stockQty'] ?? 0) > 0));
    $sliderProducts = array_slice($sliderProducts, 0, 12);
    $productCount = count($sliderProducts);
    $desktopDotCount = (int) ceil($productCount / 4);
    $displayTotalCount = $totalCount ?? $productCount;
@endphp

@if($productCount > 0)
<div x-data="{
        productCount: {{ $productCount }},
        desktopDotCount: {{ $desktopDotCount }},
        activeDot: 0,
        atStart: true,
        atEnd: false,
        thumbWidthPercent: 35,
        thumbOffsetPercent: 0,

        init() {
            this.$nextTick(() => {
                this.updateMetrics();
            });
            window.addEventListener('resize', () => this.updateMetrics(), { passive: true });
        },

        updateMetrics() {
            const track = this.$refs.track;
            if (!track) return;

            const maxScroll = Math.max(0, track.scrollWidth - track.clientWidth);
            const currentScroll = Math.max(0, track.scrollLeft);

            this.atStart = currentScroll <= 8;
            this.atEnd = currentScroll >= maxScroll - 8;

            // Desktop 3-Dot calculation (4 cards per group)
            if (maxScroll > 0 && this.desktopDotCount > 1) {
                const ratio = Math.min(1, Math.max(0, currentScroll / maxScroll));
                this.activeDot = Math.min(this.desktopDotCount - 1, Math.round(ratio * (this.desktopDotCount - 1)));
            } else {
                this.activeDot = 0;
            }

            // Mobile & Tablet Slim Progress Bar calculation
            if (track.scrollWidth > 0) {
                const visibleRatio = Math.min(1, track.clientWidth / track.scrollWidth);
                this.thumbWidthPercent = Math.max(22, Math.round(visibleRatio * 100));
                const scrollProgress = maxScroll > 0 ? Math.min(1, currentScroll / maxScroll) : 0;
                this.thumbOffsetPercent = scrollProgress * (100 - this.thumbWidthPercent);
            }
        },

        scrollByPage(direction) {
            const track = this.$refs.track;
            if (!track) return;
            const amount = track.clientWidth * direction;
            track.scrollBy({ left: amount, behavior: 'smooth' });
        },

        scrollToDot(dotIndex) {
            const track = this.$refs.track;
            if (!track) return;
            const targetLeft = dotIndex * track.clientWidth;
            track.scrollTo({ left: targetLeft, behavior: 'smooth' });
            this.activeDot = dotIndex;
        }
     }"
     class="relative w-full">

    {{-- ====================================================================
         1. HORIZONTAL PRODUCT TRACK + DESKTOP CIRCULAR ARROWS
         Mobile (320–767px): 2 full cards + ~10% peek (gap: 12px)
         Tablet (768–1024px): 3 full cards + small peek (gap: 16px)
         Desktop (1025px+): 4 cards side-by-side (gap: 20px)
         ==================================================================== --}}
    <div class="relative">

        {{-- Desktop Left Circular Arrow Button (40x40px, vertically centered on images, hidden at start) --}}
        <button type="button"
                x-show="!atStart && productCount > 4"
                x-cloak
                @click="scrollByPage(-1)"
                aria-label="Previous sarees"
                class="hidden lg:inline-flex items-center justify-center w-[40px] h-[40px] rounded-full bg-bg-surface text-text-primary border border-border-subtle hover:bg-brand-primary hover:text-text-light transition-colors duration-200 absolute -left-[20px] top-[38%] -translate-y-1/2 z-20 cursor-pointer">
            <svg class="w-[18px] h-[18px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
        </button>

        {{-- Scrollable Cards Row --}}
        <div x-ref="track"
             @scroll.passive="updateMetrics()"
             class="flex items-stretch gap-[12px] md:gap-[16px] lg:gap-[20px] overflow-x-auto no-scrollbar snap-x snap-mandatory scroll-smooth pb-[4px]">

            @foreach($sliderProducts as $saree)
                <div class="shrink-0 snap-start w-[44.5%] md:w-[30.5%] lg:w-[calc(25%-15px)]">
                    <x-product.card :saree="$saree" :instancePrefix="$sliderId" />
                </div>
            @endforeach

            {{-- Mobile & Tablet "View All [Category] →" End Card (Hidden on Desktop) --}}
            <div class="shrink-0 snap-start w-[44.5%] md:w-[30.5%] lg:hidden flex">
                <a href="{{ url($viewAllUrl) }}"
                   class="w-full bg-bg-surface border border-border-subtle hover:border-brand-primary transition-colors duration-200 flex flex-col items-center justify-center p-[16px] text-center">
                    <div class="aspect-saree w-full flex flex-col items-center justify-center gap-[10px]">
                        <span class="font-heading font-semibold text-[18px] md:text-[20px] leading-[1.25] text-brand-primary">
                            {{ $viewAllLabel }} →
                        </span>
                        <span class="font-body text-[12px] text-text-muted">
                            {{ $displayTotalCount }} {{ $displayTotalCount === 1 ? 'Saree' : 'Sarees' }}
                        </span>
                    </div>
                </a>
            </div>
        </div>

        {{-- Desktop Right Circular Arrow Button (40x40px, vertically centered on images, hidden at end) --}}
        <button type="button"
                x-show="!atEnd && productCount > 4"
                x-cloak
                @click="scrollByPage(1)"
                aria-label="Next sarees"
                class="hidden lg:inline-flex items-center justify-center w-[40px] h-[40px] rounded-full bg-bg-surface text-text-primary border border-border-subtle hover:bg-brand-primary hover:text-text-light transition-colors duration-200 absolute -right-[20px] top-[38%] -translate-y-1/2 z-20 cursor-pointer">
            <svg class="w-[18px] h-[18px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
            </svg>
        </button>
    </div>

    {{-- ====================================================================
         2. BOTTOM SLIDER INDICATORS
         A. Mobile & Tablet (320–1024px): Slim Progress Bar (120px Mobile / 160px Tablet, 3px tall)
         B. Desktop (1025px+): 3-Dot Navigation Indicator (Active 24x8px --brand-primary pill, Inactive 8x8px --brand-accent dot)
         ==================================================================== --}}

    {{-- A. Touch Slim Progress Bar (Hidden if <= 2 products on mobile) --}}
    @if($productCount > 2)
    <div class="flex lg:hidden justify-center mt-[16px]" aria-hidden="true">
        <div class="relative w-[120px] md:w-[160px] h-[3px] bg-border-subtle overflow-hidden rounded-full">
            <div class="absolute top-0 bottom-0 bg-brand-primary rounded-full transition-all duration-150 ease-out"
                 :style="`width: ${thumbWidthPercent}%; left: ${thumbOffsetPercent}%;`"></div>
        </div>
    </div>
    @endif

    {{-- B. Desktop 3-Dot Navigation Indicator (Hidden if <= 4 products) --}}
    @if($desktopDotCount > 1)
    <div class="hidden lg:flex items-center justify-center gap-[8px] mt-[24px]" role="tablist" aria-label="Slider pagination">
        @for($i = 0; $i < $desktopDotCount; $i++)
            <button type="button"
                    @click="scrollToDot({{ $i }})"
                    :aria-label="'Show products ' . ({{ $i * 4 + 1 }}) . ' to ' . ({{ min($productCount, ($i + 1) * 4) }})"
                    :aria-selected="activeDot === {{ $i }}"
                    :class="activeDot === {{ $i }}
                        ? 'w-[24px] h-[8px] bg-brand-primary'
                        : 'w-[8px] h-[8px] bg-brand-accent hover:bg-brand-primary'"
                    class="rounded-full transition-all duration-200 cursor-pointer"></button>
        @endfor
    </div>
    @endif
</div>
@endif