@extends('layouts.app')

@section('title', $saree['title'] . ' | ' . ($storeConfig['brandName'] ?? 'Aangina'))
@section('meta_description', $saree['shortDescription'] ?? ($saree['title'] . ' — Authentic handwoven saree with Cash on Delivery across Bangladesh.'))
@section('og_title', $saree['title'] . ' — ' . $saree['formattedPrice'] . ' | ' . ($storeConfig['brandName'] ?? 'Aangina'))
@section('og_description', $saree['shortDescription'] ?? 'Handwoven in Bangladesh. Cash on Delivery available nationwide.')
@section('og_image', url($saree['images'][0]['url'] ?? '/images/sarees/saree-crimson-1.svg'))

@section('content')
@php
    $inStock = (bool) ($saree['inStock'] ?? false);
    $isLowStock = (bool) ($saree['isLowStock'] ?? false);
    $stockQty = (int) ($saree['stockQty'] ?? 0);
    $discountPercent = (int) ($saree['discountPercent'] ?? 0);
    $siblingVariants = $saree['siblingVariants'] ?? [];
    $sizes = $saree['sizes'] ?? [];
@endphp

<div
    x-data="pdpPageManager({
        saree: @js($saree),
        allCatalogLookup: @js($allCatalogLookup)
    })"
    class="pb-20 lg:pb-24"
>
    <div class="container-boutique pt-4 sm:pt-6">
        {{-- =================================================================
             1. BREADCRUMB TRAIL
             ================================================================= --}}
        <nav aria-label="Breadcrumb" class="mb-5 sm:mb-7">
            <ol class="flex flex-wrap items-center gap-1.5 text-[12px] sm:text-[13px] text-text-muted">
                <li>
                    <a href="{{ route('home') }}" class="hover:text-brand-primary transition-colors">Home</a>
                </li>
                <li aria-hidden="true" class="text-border-subtle">/</li>
                <li>
                    <a href="{{ route('sarees.hub') }}" class="hover:text-brand-primary transition-colors">Sarees</a>
                </li>
                <li aria-hidden="true" class="text-border-subtle">/</li>
                <li>
                    <a href="{{ route('category.show', $saree['subCategorySlug']) }}" class="hover:text-brand-primary transition-colors">
                        {{ $saree['subCategoryName'] }}
                    </a>
                </li>
                <li aria-hidden="true" class="text-border-subtle">/</li>
                <li class="text-text-primary font-medium truncate max-w-[200px] sm:max-w-[340px]" aria-current="page">
                    {{ $saree['title'] }}
                </li>
            </ol>
        </nav>

        {{-- =================================================================
             2. ABOVE-THE-FOLD 2-COLUMN SPLIT (Left 55% Gallery | Right 45% Sticky Info)
             ================================================================= --}}
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
            {{-- LEFT COLUMN (55% / 7 cols on Desktop): 3:4 Gallery + 2.5x Weave Zoom + Lightbox --}}
            <div class="lg:col-span-7">
                <x-pdp.gallery :saree="$saree" />
            </div>

            {{-- RIGHT COLUMN (45% / 5 cols on Desktop): Sticky Conversion & Saree Details --}}
            <div class="lg:col-span-5 lg:sticky lg:top-[92px] space-y-5">
                {{-- 5A. Category Overline, SKU & H1 Product Title --}}
                <div>
                    <div class="flex flex-wrap items-center justify-between gap-2 mb-1.5">
                        <a
                            href="{{ route('category.show', $saree['subCategorySlug']) }}"
                            class="type-overline text-brand-primary hover:underline"
                        >
                            {{ $saree['subCategoryName'] }}
                        </a>
                        <span class="text-[12px] text-text-muted font-medium">
                            SKU: <strong class="text-text-primary font-semibold">{{ $saree['sku'] }}</strong>
                        </span>
                    </div>

                    <h1 class="type-h2 text-text-primary">
                        {{ $saree['title'] }}
                    </h1>

                    {{-- Quick Star Rating Anchor -> Scrolls smoothly to Customer Reviews --}}
                    <button
                        type="button"
                        @click="scrollToReviews()"
                        class="mt-2 inline-flex items-center gap-2 text-left group focus:outline-none"
                    >
                        <span class="text-brand-primary text-[14px] tracking-tight">★★★★★</span>
                        <span class="text-[13px] font-semibold text-text-primary" x-text="ratingAvgFormatted"></span>
                        <span class="text-[13px] text-text-muted group-hover:text-brand-primary underline underline-offset-2 transition-colors">
                            (<span x-text="reviewCount"></span> Verified Review<span x-show="reviewCount !== 1">s</span>)
                        </span>
                    </button>
                </div>

                {{-- 5B. Price Display, Discount Savings Pill & Stock Status --}}
                <div class="pt-3 border-t border-border-subtle space-y-2">
                    <div class="flex flex-wrap items-baseline gap-3">
                        <span class="font-body text-[22px] lg:text-[26px] font-bold text-text-primary leading-none">
                            {{ $saree['formattedPrice'] }}
                        </span>

                        @if(!empty($saree['formattedOldPrice']))
                            <span class="font-body text-[15px] text-text-muted line-through">
                                {{ $saree['formattedOldPrice'] }}
                            </span>
                        @endif

                        @if($discountPercent > 0)
                            <span class="badge-accent">
                                SAVE {{ $discountPercent }}%
                            </span>
                        @endif
                    </div>

                    {{-- Stock Status Indicator --}}
                    <div class="flex flex-wrap items-center gap-3 text-[13px]">
                        @if($inStock)
                            <span class="inline-flex items-center gap-1.5 font-semibold text-state-success">
                                <span>●</span> In Stock — Ready to Ship
                            </span>
                            @if($isLowStock)
                                <span class="inline-flex items-center px-2 py-0.5 bg-surface border border-border-subtle text-[12px] font-semibold text-brand-primary">
                                    Only {{ $stockQty }} {{ $stockQty === 1 ? 'piece' : 'pieces' }} left in this weave!
                                </span>
                            @endif
                        @else
                            <span class="inline-flex items-center gap-1.5 font-semibold text-state-error">
                                <span>●</span> Out of Stock — Artisan Loom Restocking
                            </span>
                        @endif
                    </div>
                </div>

                {{-- 5C. At-a-Glance Saree Highlights Box (2x2 Quick-Spec Grid) --}}
                <x-pdp.highlights-box :saree="$saree" />

                {{-- 5D. Conditional Color / Weave Sibling Variants (Links to sibling product slugs) --}}
                @if(!empty($siblingVariants) && count($siblingVariants) > 1)
                    <div class="pt-1 space-y-2">
                        <div class="text-[13px] text-text-muted">
                            Color in This Design:
                            <strong class="text-text-primary font-semibold">{{ $saree['specs']['colorFamily'] ?? 'Selected Shade' }}</strong>
                        </div>
                        <div class="flex flex-wrap items-center gap-2.5">
                            @foreach($siblingVariants as $variant)
                                @php
                                    $isCurrentVariant = ($variant['productSlug'] ?? '') === $saree['slug'];
                                @endphp
                                <a
                                    href="{{ route('product.show', $variant['productSlug']) }}"
                                    class="inline-flex items-center gap-2 px-3 py-1.5 border text-[12px] font-medium transition-all {{ $isCurrentVariant ? 'border-brand-primary bg-surface text-text-primary font-semibold' : 'border-border-subtle bg-main text-text-muted hover:border-brand-primary hover:text-text-primary' }}"
                                    title="{{ $variant['colorName'] }}"
                                >
                                    <span
                                        class="w-4 h-4 rounded-full border border-border-subtle shrink-0"
                                        style="background-color: {{ $variant['swatchCode'] ?? 'var(--brand-primary)' }};"
                                    ></span>
                                    <span>{{ $variant['colorName'] }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Conditional Future-Proof Size Selector (Hidden for standard 12-Haat free-size sarees) --}}
                @if(!empty($sizes))
                    <div class="pt-1 space-y-2">
                        <span class="label-base">Select Size</span>
                        <div class="flex flex-wrap gap-2">
                            @foreach($sizes as $sz)
                                <button
                                    type="button"
                                    @click="selectedSize = '{{ $sz }}'"
                                    :class="selectedSize === '{{ $sz }}' ? 'pill-active' : 'pill-inactive'"
                                >
                                    {{ $sz }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- 5E. Quantity Stepper & Dual Conversion Stack (Observed by Mobile Sticky Bar) --}}
                <div x-ref="mainConversionStack" class="pt-2 space-y-3.5">
                    @if($inStock)
                        {{-- Quantity Stepper Row --}}
                        <div class="flex items-center justify-between gap-4">
                            <span class="text-[13px] font-semibold uppercase tracking-wider text-text-primary">
                                Quantity
                            </span>

                            <div class="flex items-center gap-3">
                                <div class="inline-flex items-center border border-border-subtle bg-main h-[44px]">
                                    <button
                                        type="button"
                                        @click="decrementQty()"
                                        :disabled="qty <= 1"
                                        class="w-[44px] h-full flex items-center justify-center text-text-primary hover:bg-surface disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                                        aria-label="Decrease quantity"
                                    >
                                        −
                                    </button>
                                    <span
                                        class="w-[44px] h-full flex items-center justify-center font-body font-semibold text-[15px] text-text-primary border-x border-border-subtle"
                                        x-text="qty"
                                    >1</span>
                                    <button
                                        type="button"
                                        @click="incrementQty()"
                                        :disabled="isAtMaxStock"
                                        class="w-[44px] h-full flex items-center justify-center text-text-primary hover:bg-surface disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                                        aria-label="Increase quantity"
                                    >
                                        +
                                    </button>
                                </div>
                            </div>
                        </div>

                        <p x-show="isAtMaxStock" x-cloak class="text-[12px] text-brand-primary font-medium text-right">
                            Maximum available handloom pieces ({{ $stockQty }}) selected.
                        </p>

                        {{-- Dual Action Buttons: ADD TO CART (.btn-secondary) + ORDER NOW (.btn-primary-lg) --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-3 pt-1">
                            <button
                                type="button"
                                @click="addToCart()"
                                class="btn-secondary h-[52px] w-full"
                            >
                                ADD TO CART
                            </button>

                            <button
                                type="button"
                                @click="orderNow()"
                                class="btn-primary-lg w-full"
                            >
                                ORDER NOW — COD
                            </button>
                        </div>
                    @else
                        <div class="pt-1">
                            <button
                                type="button"
                                disabled
                                class="btn-primary-lg w-full opacity-45 cursor-not-allowed"
                            >
                                SOLD OUT — CURRENTLY UNAVAILABLE
                            </button>
                        </div>
                    @endif
                </div>

                {{-- 5F.1 Bangladesh Delivery & Cash on Delivery Assurance Box --}}
                <x-pdp.trust-cod-box />

                {{-- 5F.2 Social Share Row (WhatsApp, Facebook/Messenger, Copy Link) --}}
                <x-pdp.share-bar :saree="$saree" />
            </div>
        </div>

        {{-- =================================================================
             3. BELOW-THE-FOLD: ACCORDIONS (Specs, Wash & Care, Delivery & COD)
             ================================================================= --}}
        <x-pdp.accordions :saree="$saree" />

        {{-- =================================================================
             4. BELOW-THE-FOLD: CUSTOMER REVIEWS & PHOTOS + WRITE A REVIEW MODAL
             ================================================================= --}}
        <x-pdp.reviews-section :saree="$saree" />

        {{-- =================================================================
             5. SIMILAR SAREES YOU MAY LIKE (4-Card Desktop / 2-Card Mobile Slider)
             ================================================================= --}}
        @if(!empty($similarSarees))
            <section class="mt-16 lg:mt-24 pt-12 border-t border-border-subtle" aria-label="Similar Sarees You May Like">
                <div class="flex items-end justify-between gap-4 mb-6">
                    <div>
                        <span class="type-overline text-brand-primary block mb-1">Curated For You</span>
                        <h2 class="type-h2 text-text-primary">Similar Sarees You May Like</h2>
                    </div>
                    <a href="{{ route('category.show', $saree['subCategorySlug']) }}" class="text-[13px] font-semibold text-brand-primary hover:underline shrink-0">
                        View All {{ $saree['subCategoryName'] }} →
                    </a>
                </div>

                <x-product.slider
                    :products="$similarSarees"
                    :viewAllUrl="route('category.show', $saree['subCategorySlug'])"
                    :viewAllLabel="'View All ' . $saree['subCategoryName']"
                />
            </section>
        @endif

        {{-- =================================================================
             6. RECENTLY VIEWED SAREES (Conditional — Shown when >= 2 sarees viewed)
             ================================================================= --}}
        <section
            x-show="recentlyViewedSarees.length > 0"
            x-cloak
            class="mt-14 lg:mt-20 pt-12 border-t border-border-subtle"
            aria-label="Recently Viewed Sarees"
        >
            <div class="flex items-end justify-between gap-4 mb-6">
                <div>
                    <span class="type-overline text-brand-primary block mb-1">Your Browsing Trail</span>
                    <h2 class="type-h2 text-text-primary">Recently Viewed Sarees</h2>
                </div>
                <a href="{{ route('sarees.hub') }}" class="text-[13px] font-semibold text-brand-primary hover:underline shrink-0">
                    Explore All Sarees →
                </a>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3.5 sm:gap-5 lg:gap-6">
                <template x-for="recent in recentlyViewedSarees.slice(0, 4)" :key="recent.slug">
                    <article class="group flex flex-col">
                        <a :href="recent.pdpUrl" class="relative block w-full aspect-saree overflow-hidden bg-surface border border-border-subtle">
                            <img
                                :src="recent.images && recent.images[0] ? recent.images[0].url : '{{ asset('images/sarees/saree-crimson-1.svg') }}'"
                                :alt="recent.title"
                                class="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105"
                                loading="lazy"
                            >
                        </a>
                        <div class="pt-3 flex flex-col gap-1">
                            <span class="text-[11px] uppercase tracking-wider text-text-muted" x-text="recent.subCategoryName"></span>
                            <a
                                :href="recent.pdpUrl"
                                class="font-body text-[14px] sm:text-[15px] font-medium text-text-primary group-hover:text-brand-primary line-clamp-1 transition-colors"
                                x-text="recent.title"
                            ></a>
                            <div class="flex items-baseline gap-2 mt-0.5">
                                <span class="text-[14px] sm:text-[15px] font-bold text-text-primary" x-text="recent.formattedPrice"></span>
                                <template x-if="recent.formattedOldPrice">
                                    <span class="text-[12px] text-text-muted line-through" x-text="recent.formattedOldPrice"></span>
                                </template>
                            </div>
                        </div>
                    </article>
                </template>
            </div>
        </section>
    </div>

    {{-- =====================================================================
         7. MOBILE STICKY BOTTOM CONVERSION BAR (Height 64px, shifts chat to 76px)
         ===================================================================== --}}
    <x-pdp.mobile-sticky-bar :saree="$saree" />
</div>
@endsection