@props(['saree'])

@php
    $badge = $saree['primaryBadge'] ?? null;
@endphp

<div class="w-full">
    {{-- ====================================================================
         1. DESKTOP VERTICAL THUMBNAILS + MAIN 3:4 PORTRAIT FRAME
         ==================================================================== --}}
    <div class="flex flex-col lg:flex-row gap-[12px] lg:gap-[16px] items-start">

        {{-- Desktop Left Vertical Column of 3:4 Thumbnails (72px x 96px) --}}
        <div class="hidden lg:flex flex-col gap-[10px] w-[72px] shrink-0">
            <template x-for="(img, idx) in images" :key="idx">
                <button type="button"
                        @click="setImage(idx)"
                        :aria-label="'Select saree photo ' + (idx + 1)"
                        :class="activeIndex === idx
                            ? 'border-[2px] border-brand-primary opacity-100'
                            : 'border border-border-subtle opacity-70 hover:opacity-100'"
                        class="w-[72px] h-[96px] bg-bg-surface overflow-hidden transition-all duration-150 cursor-pointer">
                    <img :src="img.url"
                         :alt="img.alt"
                         class="w-full h-full object-cover object-top">
                </button>
            </template>
        </div>

        {{-- Main 3:4 Portrait Frame (--bg-surface bg, 1px --border-subtle border) --}}
        <div class="flex-1 w-full">
            <div class="relative w-full aspect-saree bg-bg-surface border border-border-subtle overflow-hidden select-none cursor-zoom-in"
                 @mousemove="handleHoverMove($event)"
                 @mouseleave="handleHoverLeave()"
                 @touchstart.passive="handleTouchStart($event)"
                 @touchend.passive="handleTouchEnd($event)"
                 @click="openGalleryLightbox($el)">

                {{-- Main Saree Photo with 2.5x Desktop Hover Weave Magnifier --}}
                <img :src="currentImage.url"
                     :alt="currentImage.alt || saree.title"
                     :style="isHoverZooming
                        ? `transform: scale(2.5); transform-origin: ${zoomX}% ${zoomY}%;`
                        : 'transform: scale(1); transform-origin: 50% 50%;'"
                     class="w-full h-full object-cover object-top transition-transform duration-150 ease-out">

                {{-- Top-Left Status Badge (Maximum 1 Badge: SOLD OUT > -15% > NEW) --}}
                @if($badge)
                    <div class="absolute top-[14px] left-[14px] z-10 pointer-events-none">
                        @if($badge['type'] === 'soldout')
                            <span class="badge-soldout">{{ $badge['label'] }}</span>
                        @else
                            <span class="badge-accent">{{ $badge['label'] }}</span>
                        @endif
                    </div>
                @endif

                {{-- Prev / Next Navigation Arrows (< >) (44px Mobile / 40px Desktop) --}}
                <template x-if="images.length > 1">
                    <div>
                        <button type="button"
                                @click.stop="prevImage()"
                                aria-label="Previous saree angle"
                                class="absolute left-[12px] top-1/2 -translate-y-1/2 z-10 w-[44px] h-[44px] lg:w-[40px] lg:h-[40px] rounded-full bg-bg-main/85 border border-border-subtle text-text-primary hover:bg-brand-primary hover:text-text-light inline-flex items-center justify-center transition-colors duration-200 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>
                        <button type="button"
                                @click.stop="nextImage()"
                                aria-label="Next saree angle"
                                class="absolute right-[12px] top-1/2 -translate-y-1/2 z-10 w-[44px] h-[44px] lg:w-[40px] lg:h-[40px] rounded-full bg-bg-main/85 border border-border-subtle text-text-primary hover:bg-brand-primary hover:text-text-light inline-flex items-center justify-center transition-colors duration-200 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>
                </template>

                {{-- Bottom-Right Weave Zoom Pill ([ 🔍 Tap to Zoom ] / [ 🔍 Click to Zoom ]) --}}
                <button type="button"
                        @click.stop="openGalleryLightbox($el)"
                        aria-label="Open full-screen weave zoom lightbox"
                        class="absolute bottom-[12px] right-[12px] z-10 px-[12px] py-[6px] bg-bg-main/90 border border-border-subtle text-text-primary hover:bg-brand-primary hover:text-text-light font-body font-medium text-[12px] inline-flex items-center gap-[5px] transition-colors duration-200 cursor-pointer">
                    <span aria-hidden="true">🔍</span>
                    <span class="lg:hidden">Tap to Zoom</span>
                    <span class="hidden lg:inline">Click to Zoom</span>
                </button>
            </div>

            {{-- Mobile & Tablet Pagination Dots + Horizontal 3:4 Thumbnail Strip (56px x 75px) --}}
            <div class="lg:hidden pt-[12px] space-y-[12px]">
                {{-- Centered Pagination Dots --}}
                <template x-if="images.length > 1">
                    <div class="flex items-center justify-center gap-[6px]">
                        <template x-for="(img, idx) in images" :key="idx">
                            <button type="button"
                                    @click="setImage(idx)"
                                    :aria-label="'Go to photo ' + (idx + 1)"
                                    :class="activeIndex === idx
                                        ? 'w-[22px] h-[7px] bg-brand-primary'
                                        : 'w-[7px] h-[7px] bg-brand-accent'"
                                    class="rounded-full transition-all duration-200 cursor-pointer"></button>
                        </template>
                    </div>
                </template>

                {{-- Horizontal Scrollable Strip of Compact 3:4 Thumbnails (56px x 75px) --}}
                <div class="flex items-center gap-[8px] overflow-x-auto no-scrollbar pb-[2px]">
                    <template x-for="(img, idx) in images" :key="idx">
                        <button type="button"
                                @click="setImage(idx)"
                                :aria-label="'Select thumbnail ' + (idx + 1)"
                                :class="activeIndex === idx
                                    ? 'border-[2px] border-brand-primary opacity-100'
                                    : 'border border-border-subtle opacity-70'"
                                class="w-[56px] h-[75px] shrink-0 bg-bg-surface overflow-hidden transition-all duration-150 cursor-pointer">
                            <img :src="img.url"
                                 :alt="img.alt"
                                 class="w-full h-full object-cover object-top">
                        </button>
                    </template>
                </div>
            </div>
        </div>
    </div>

    {{-- ====================================================================
         2. FULL-SCREEN PINCH-TO-ZOOM LIGHTBOX (z-lightbox, --bg-main canvas)
         Supports Product Gallery Zoom (up to 4x) & Customer Review Photo View
         ==================================================================== --}}
    <div x-show="$store.ui.lightboxOpen"
         x-cloak
         class="fixed inset-0 z-lightbox bg-bg-main flex flex-col justify-between overflow-hidden"
         role="dialog"
         aria-modal="true"
         aria-label="Full-screen saree weave zoom viewer">

        {{-- Lightbox Top Bar --}}
        <div class="h-[60px] px-[16px] md:px-[24px] border-b border-border-subtle flex items-center justify-between shrink-0 bg-bg-main z-20">
            <div class="font-body text-[13px] text-text-muted truncate pr-[12px]">
                <template x-if="lightboxMode === 'gallery'">
                    <span x-text="`${saree.title} (${activeIndex + 1} / ${images.length}) — Pinch or tap image to zoom up to 4×`"></span>
                </template>
                <template x-if="lightboxMode === 'review' && activeReviewPhoto">
                    <span x-text="`Customer Photo by ${activeReviewPhoto.reviewerName} (${activeReviewPhoto.city})`"></span>
                </template>
            </div>

            <div class="flex items-center gap-[10px] shrink-0">
                <button type="button"
                        @click="toggleLightboxZoom()"
                        class="h-[36px] px-[12px] bg-bg-surface border border-border-subtle text-text-primary hover:bg-brand-primary hover:text-text-light font-body font-semibold text-[12px] cursor-pointer"
                        x-text="lightboxZoomScale > 1 ? `Zoom: ${lightboxZoomScale.toFixed(1)}× (Reset)` : 'Zoom 2.5×'">
                </button>
                <button type="button"
                        @click="closeLightbox()"
                        aria-label="Close zoom viewer"
                        class="btn-icon">
                    ✕
                </button>
            </div>
        </div>

        {{-- Lightbox Center Interactive Canvas --}}
        <div class="flex-1 relative flex items-center justify-center overflow-auto p-[16px]"
             @touchstart="handleLightboxPinchStart($event)"
             @touchmove="handleLightboxPinchMove($event)">

            {{-- Gallery Mode Image --}}
            <template x-if="lightboxMode === 'gallery'">
                <div class="relative max-w-[640px] w-full aspect-saree bg-bg-surface border border-border-subtle overflow-hidden flex items-center justify-center">
                    <img :src="currentImage.url"
                         :alt="currentImage.alt || saree.title"
                         @click="toggleLightboxZoom()"
                         :style="`transform: scale(${lightboxZoomScale});`"
                         class="w-full h-full object-contain transition-transform duration-150 ease-out cursor-zoom-in">
                </div>
            </template>

            {{-- Customer Review Photo Mode --}}
            <template x-if="lightboxMode === 'review' && activeReviewPhoto">
                <div class="max-w-[520px] w-full bg-bg-surface border border-border-subtle overflow-hidden">
                    <div class="aspect-hero-mobile bg-bg-main overflow-hidden">
                        <img :src="activeReviewPhoto.photoUrl"
                             :alt="'Review photo by ' + activeReviewPhoto.reviewerName"
                             @click="toggleLightboxZoom()"
                             :style="`transform: scale(${lightboxZoomScale});`"
                             class="w-full h-full object-cover object-top transition-transform duration-150">
                    </div>
                    <div class="p-[16px] space-y-[6px] border-t border-border-subtle">
                        <div class="flex items-center justify-between">
                            <span class="font-body font-semibold text-[14px] text-text-primary"
                                  x-text="`${activeReviewPhoto.reviewerName} — ${activeReviewPhoto.city}`"></span>
                            <span class="text-brand-primary text-[14px]">★★★★★</span>
                        </div>
                        <p class="font-body text-[14px] text-text-primary" x-text="`“${activeReviewPhoto.comment}”`"></p>
                    </div>
                </div>
            </template>

            {{-- Lightbox Prev / Next Arrows (Gallery Mode) --}}
            <template x-if="lightboxMode === 'gallery' && images.length > 1">
                <div>
                    <button type="button"
                            @click="prevImage()"
                            aria-label="Previous photo"
                            class="fixed left-[16px] top-1/2 -translate-y-1/2 z-30 btn-icon">
                        ←
                    </button>
                    <button type="button"
                            @click="nextImage()"
                            aria-label="Next photo"
                            class="fixed right-[16px] top-1/2 -translate-y-1/2 z-30 btn-icon">
                        →
                    </button>
                </div>
            </template>
        </div>

        {{-- Lightbox Bottom Thumbnail Bar (Gallery Mode) --}}
        <template x-if="lightboxMode === 'gallery' && images.length > 1">
            <div class="h-[88px] px-[16px] border-t border-border-subtle bg-bg-main flex items-center justify-center gap-[10px] overflow-x-auto no-scrollbar shrink-0">
                <template x-for="(img, idx) in images" :key="idx">
                    <button type="button"
                            @click="setImage(idx)"
                            :class="activeIndex === idx ? 'border-[2px] border-brand-primary opacity-100' : 'border border-border-subtle opacity-60'"
                            class="w-[48px] h-[64px] shrink-0 bg-bg-surface overflow-hidden cursor-pointer">
                        <img :src="img.url" :alt="img.alt" class="w-full h-full object-cover object-top">
                    </button>
                </template>
            </div>
        </template>
    </div>
</div>