@extends('storefront.layout')

@section('title', 'Shop — ' . $sfStore->name)

@section('content')
    <nav class="sf-crumb" aria-label="Breadcrumb">
        <a href="{{ route('storefront.home', ['slug' => $sfStore->slug]) }}">Home</a>
        <span aria-hidden="true"> / </span>
        <span>Shop</span>
    </nav>

    <div class="sf-section-head">
        <h1 class="sf-section-title" style="font-size:clamp(1.5rem,3vw,1.85rem);">Shop</h1>
    </div>

    @if($categories->isNotEmpty())
        <div class="sf-chips">
            <a class="sf-chip {{ $activeCategoryId === null ? 'sf-chip--active' : '' }}" href="{{ route('storefront.shop', array_filter(['slug' => $sfStore->slug, 'q' => $searchQuery ?: null])) }}">All</a>
            @foreach($categories as $cat)
                <a class="sf-chip {{ (int) $activeCategoryId === (int) $cat->id ? 'sf-chip--active' : '' }}"
                   href="{{ route('storefront.shop', array_filter(['slug' => $sfStore->slug, 'category' => $cat->id, 'q' => $searchQuery ?: null])) }}">{{ $cat->name }}</a>
            @endforeach
        </div>
    @endif

    <form class="sf-toolbar" method="get" action="{{ route('storefront.shop', ['slug' => $sfStore->slug]) }}" role="search">
        @if($activeCategoryId)
            <input type="hidden" name="category" value="{{ $activeCategoryId }}">
        @endif
        <div class="sf-search">
            <svg class="sf-search__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <input type="search" name="q" value="{{ $searchQuery }}" placeholder="Search name, SKU, description…" autocomplete="off" aria-label="Search products">
        </div>
        <button type="submit" class="sf-btn sf-btn--outline">Search</button>
    </form>

    @if($products->isEmpty())
        <div class="sf-empty">
            <p class="sf-empty__title">No products found</p>
            <p class="sf-empty__text">Try another search or category, or return to the <a href="{{ route('storefront.home', ['slug' => $sfStore->slug]) }}">home page</a>.</p>
        </div>
    @else
        <div class="sf-grid sf-grid--3" id="sfShopGrid" data-next-page="{{ $products->nextPageUrl() ?? '' }}">
            @include('storefront.partials.product-grid-items', ['products' => $products])
        </div>
        <div id="sfShopSentinel" style="height:1px"></div>
        <div id="sfShopLoading" class="sf-scroll-loader d-none" aria-live="polite" aria-busy="true">
            <div class="sf-scroll-loader__grid">
                @for($i = 0; $i < 6; $i++)
                    <div class="sf-skeleton-card">
                        <div class="sf-skeleton sf-skeleton--media"></div>
                        <div class="sf-skeleton-card__body">
                            <div class="sf-skeleton sf-skeleton--line-lg"></div>
                            <div class="sf-skeleton sf-skeleton--line-sm"></div>
                            <div class="sf-skeleton sf-skeleton--line-md"></div>
                        </div>
                    </div>
                @endfor
            </div>
            <p class="sf-scroll-loader__text">Loading more products…</p>
        </div>
        <p id="sfShopEndState" class="sf-scroll-end d-none">You have reached the end of the catalog.</p>
    @endif

    @include('storefront.partials.float-cart')
@endsection

@push('scripts')
<script>
(function () {
    var grid = document.getElementById('sfShopGrid');
    var sentinel = document.getElementById('sfShopSentinel');
    var loader = document.getElementById('sfShopLoading');
    var endState = document.getElementById('sfShopEndState');
    if (!grid || !sentinel || !('IntersectionObserver' in window)) return;

    var loading = false;
    var hasUserScrolled = false;
    var lastRequestedUrl = '';
    var loaderTimer = null;
    function showLoader() {
        if (!loader) return;
        loader.removeAttribute('hidden');
        loader.classList.remove('d-none');
    }
    function hideLoader() {
        if (loaderTimer) {
            clearTimeout(loaderTimer);
            loaderTimer = null;
        }
        if (!loader) return;
        loader.classList.add('d-none');
        loader.setAttribute('hidden', 'hidden');
    }
    function finalizeNoMore() {
        hideLoader();
        if (loader) loader.style.display = 'none';
        if (endState) endState.classList.remove('d-none');
    }
    function showLoaderDelayed() {
        if (!loader) return;
        hideLoader();
        loaderTimer = setTimeout(function () {
            if (loading) showLoader();
        }, 3000);
    }
    function fadeInNewCards(startIndex) {
        var cards = grid.querySelectorAll('.sf-card');
        for (var i = startIndex; i < cards.length; i++) {
            cards[i].classList.add('sf-fade-in-new');
        }
    }

    async function loadNext() {
        var next = grid.getAttribute('data-next-page') || '';
        if (!next) {
            finalizeNoMore();
            obs.disconnect();
            return;
        }
        if (loading) return;
        // Guard against accidental endless loop if backend returns same next page repeatedly.
        if (next === lastRequestedUrl) {
            obs.disconnect();
            finalizeNoMore();
            return;
        }
        loading = true;
        lastRequestedUrl = next;
        obs.unobserve(sentinel);
        showLoaderDelayed();
        var cardCountBefore = grid.querySelectorAll('.sf-card').length;
        try {
            var res = await fetch(next, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } });
            var data = await res.json();
            if (!data || !data.ok) return;
            if (data.html) {
                requestAnimationFrame(function () {
                    grid.insertAdjacentHTML('beforeend', data.html);
                    fadeInNewCards(cardCountBefore);
                });
            }
            grid.setAttribute('data-next-page', data.next_page_url || '');
            if (!data.next_page_url) {
                obs.disconnect();
                finalizeNoMore();
            }
        } catch (e) {
            // noop: fail silently
        } finally {
            hideLoader();
            loading = false;
            if (grid.getAttribute('data-next-page')) {
                obs.observe(sentinel);
            }
        }
    }

    var obs = new IntersectionObserver(function (entries) {
        if (!entries[0] || !entries[0].isIntersecting) return;
        // Only start lazy-loading after user actually scrolls.
        if (!hasUserScrolled) return;
        loadNext();
    }, { root: null, threshold: 0, rootMargin: '120px 0px 120px 0px' });

    function enableAfterInteraction() { hasUserScrolled = true; }
    window.addEventListener('wheel', enableAfterInteraction, { passive: true, once: true });
    window.addEventListener('touchmove', enableAfterInteraction, { passive: true, once: true });
    window.addEventListener('keydown', enableAfterInteraction, { once: true });
    window.addEventListener('pointerdown', enableAfterInteraction, { once: true });

    obs.observe(sentinel);
    // If only one page exists, show end state immediately and ensure loader stays hidden.
    if (!(grid.getAttribute('data-next-page') || '')) {
        finalizeNoMore();
    }
})();
</script>
@endpush