@props(['product', 'resource'])

@php
    $productSlug = \Illuminate\Support\Str::slug($product->name);
    $imageUrl = Storage::url($resource->file);
    $caption = $resource->caption ?: 'Fibbers Archive Item';
    
    $hasPhotoTeeWhite = file_exists(public_path('images/mockups/tshirt-white.jpg'));
    $hasPhotoTeeBlack = file_exists(public_path('images/mockups/tshirt-black.jpg'));
    $hasPhotoMug = file_exists(public_path('images/mockups/mug-white.jpg'));
    $hasPhotoHoodieWhite = file_exists(public_path('images/mockups/hoodie-white.jpg'));
    $hasPhotoHoodieBlack = file_exists(public_path('images/mockups/hoodie-black.jpg'));
    $hasArtPrintPortrait = file_exists(public_path('images/mockups/art-print-portrait.jpg'));
    $hasArtPrintLandscape = file_exists(public_path('images/mockups/art-print-landscape.jpg'));

    $resourcePath = public_path('storage/' . $resource->file);
    $isLandscape = false;
    if (file_exists($resourcePath)) {
        $imgSize = @getimagesize($resourcePath);
        if ($imgSize && $imgSize[0] > $imgSize[1]) {
            $isLandscape = true;
        }
    }
@endphp

<div class="space-y-4">
    <!-- Main Display Stage: Neutral Studio Backdrop -->
    <div class="relative aspect-square w-full rounded-none overflow-hidden border border-white/20 bg-[#a0a5ac] shadow-2xl flex items-center justify-center select-none group">

        <!-- ======================================================== -->
        <!-- MODE 1: ARTWORK CLOSE-UP                                  -->
        <!-- ======================================================== -->
        <div x-show="viewMode === 'artwork'" x-cloak class="relative z-10 w-full h-full flex flex-col items-center justify-center p-4 bg-black/60">
            <div class="relative max-h-full max-w-full rounded-none overflow-hidden shadow-2xl border border-white/20 bg-black/40">
                <img src="{{ $imageUrl }}" alt="{{ $caption }}" class="max-h-[400px] w-auto max-w-full object-contain">
            </div>
            <p class="text-[10px] text-gray-300 uppercase tracking-widest mt-3 font-mono">Original Artifact Detail</p>
        </div>

        <!-- ======================================================== -->
        <!-- MODE 2: PHOTOGRAPHIC STUDIO MOCKUP PREVIEW                -->
        <!-- ======================================================== -->
        <div x-show="viewMode === 'mockup'" class="relative z-10 w-full h-full flex items-center justify-center">

            {{-- -------------------------------------------------------- --}}
            {{-- CASE 1: PHOTOGRAPHIC T-SHIRT (WHITE & BLACK STUDIO)       --}}
            {{-- -------------------------------------------------------- --}}
            @if($productSlug === 't-shirt')
                <div class="relative w-full h-full flex items-center justify-center">
                    @if($hasPhotoTeeBlack)
                        <img id="mockup-bg-tshirt-black" x-show="selectedColor === 'Black'" src="{{ asset('images/mockups/tshirt-black.jpg') }}" alt="Black T-Shirt Mockup" 
                             class="w-full h-full object-cover select-none">
                    @endif

                    @if($hasPhotoTeeWhite)
                        <img id="mockup-bg-tshirt-white" x-show="selectedColor === 'White'" x-cloak src="{{ asset('images/mockups/tshirt-white.jpg') }}" alt="White T-Shirt Mockup" 
                             class="w-full h-full object-cover select-none">
                    @endif

                    <!-- Printable Chest Area Overlay -->
                    <div class="absolute top-[30%] left-[30%] w-[40%] h-[32%] flex items-center justify-center pointer-events-none">
                        <div class="relative w-full h-full flex items-center justify-center p-1">
                            <img src="{{ $imageUrl }}" alt="{{ $caption }}" 
                                class="mockup-artwork-img max-w-full max-h-full object-contain rounded-none select-none transition-all duration-200"
                                :class="selectedColor === 'White' 
                                    ? 'mix-blend-multiply opacity-90' 
                                    : 'opacity-95 contrast-105'">
                        </div>
                    </div>
                </div>

            {{-- -------------------------------------------------------- --}}
            {{-- CASE 2: PHOTOGRAPHIC CERAMIC MUG                          --}}
            {{-- -------------------------------------------------------- --}}
            @elseif($productSlug === 'mug')
                <div class="relative w-full h-full flex items-center justify-center"
                     x-data="{
                         warpReady: false,
                         initMugWarp() {
                             const img = new Image();
                             img.onload = () => {
                                 const canvas = this.$refs.mugCanvas;
                                 if (!canvas) return;
                                 const ctx = canvas.getContext('2d');
                                 const cw = canvas.width;
                                 const ch = canvas.height;
                                 ctx.clearRect(0, 0, cw, ch);
                                 ctx.imageSmoothingEnabled = true;
                                 ctx.imageSmoothingQuality = 'high';

                                 const aspect = img.width / img.height;
                                 const maxW = cw * 0.94;
                                 const maxH = ch * 0.92;
                                 let targetW, targetH;

                                 if (aspect > (maxW / maxH)) {
                                     targetW = maxW;
                                     targetH = maxW / aspect;
                                 } else {
                                     targetH = maxH;
                                     targetW = maxH * aspect;
                                 }

                                 const cx = cw / 2;
                                 const baseY = (ch - targetH) / 2;
                                 // Curvature: subtle horizontal wrapping and gentle rim perspective dip
                                 const thetaMax = 0.38 * (targetW / maxW);
                                 const D = 4.5 * (targetW / maxW);
                                 const N = 180; // High-precision anti-aliased micro-slices
                                 const srcStripW = img.width / N;

                                 for (let i = 0; i < N; i++) {
                                     const u = i / N;
                                     const uNext = (i + 1) / N;
                                     const t = 2 * u - 1; // -1 (left edge) to +1 (right edge)
                                     const tNext = 2 * uNext - 1;

                                     // Cylindrical horizontal projection (curves edges backwards subtly)
                                     const x1 = cx + (targetW / 2) * (Math.sin(t * thetaMax) / Math.sin(thetaMax));
                                     const x2 = cx + (targetW / 2) * (Math.sin(tNext * thetaMax) / Math.sin(thetaMax));
                                     const w = Math.max(0.65, (x2 - x1) + 0.65);

                                     // Gentle downward perspective dip matching rim ellipse
                                     const dy = D * (1 - t * t);
                                     const y = baseY + dy;

                                     ctx.drawImage(
                                         img,
                                         i * srcStripW, 0, srcStripW, img.height,
                                         x1, y, w, targetH
                                     );
                                 }
                                 this.warpReady = true;
                             };
                             img.src = '{{ $imageUrl }}';
                         }
                     }"
                     x-init="initMugWarp()">
                    @if($hasPhotoMug)
                        <img id="mockup-bg-mug" src="{{ asset('images/mockups/mug-white.jpg') }}" alt="Ceramic Mug Mockup" 
                             class="w-full h-full object-cover select-none">
                    @endif

                    <!-- Printable Front Face Area Overlay -->
                    <div class="absolute top-[33%] left-[29%] w-[36%] h-[34%] flex items-center justify-center pointer-events-none">
                        <div class="relative w-full h-full flex items-center justify-center">
                            <!-- 3D Cylindrically Warped Canvas -->
                            <canvas x-ref="mugCanvas" id="mockup-canvas-mug" width="400" height="400"
                                class="w-full h-full object-contain mix-blend-multiply opacity-95"
                                x-show="warpReady" x-cloak></canvas>

                            <!-- Instant Fallback while canvas initializes -->
                            <img src="{{ $imageUrl }}" alt="{{ $caption }}" 
                                x-show="!warpReady"
                                class="mockup-artwork-img max-w-full max-h-full object-contain rounded-none select-none mix-blend-multiply opacity-95">
                        </div>
                    </div>
                </div>

            {{-- -------------------------------------------------------- --}}
            {{-- CASE 3: HOODIE (PHOTOGRAPHIC IF AVAILABLE / FALLBACK)      --}}
            {{-- -------------------------------------------------------- --}}
            @elseif($productSlug === 'hoodie')
                <div class="relative w-full h-full flex items-center justify-center">
                    @if($hasPhotoHoodieWhite || $hasPhotoHoodieBlack)
                        @if($hasPhotoHoodieBlack)
                            <img id="mockup-bg-hoodie-black" x-show="selectedColor === 'Black'" src="{{ asset('images/mockups/hoodie-black.jpg') }}" alt="Black Hoodie Mockup" 
                                 class="w-full h-full object-cover select-none">
                        @endif
                        @if($hasPhotoHoodieWhite)
                            <img id="mockup-bg-hoodie-white" x-show="selectedColor === 'White'" x-cloak src="{{ asset('images/mockups/hoodie-white.jpg') }}" alt="White Hoodie Mockup" 
                                 class="w-full h-full object-cover select-none">
                        @endif

                        <!-- Printable Chest Area Overlay (Centered between collar and kangaroo pocket) -->
                        <div class="absolute top-[38%] left-[31%] w-[38%] h-[25%] flex items-center justify-center pointer-events-none">
                            <div class="relative w-full h-full flex items-center justify-center p-1">
                                <img src="{{ $imageUrl }}" alt="{{ $caption }}" 
                                    class="mockup-artwork-img max-w-full max-h-full object-contain rounded-none select-none transition-all duration-200"
                                    :class="selectedColor === 'White' 
                                        ? 'mix-blend-multiply opacity-90' 
                                        : 'opacity-95 contrast-105'">
                            </div>
                        </div>
                    @else
                        <!-- Vector Graphic Fallback until hoodie-white.jpg / hoodie-black.jpg is added -->
                        <div class="relative w-full max-w-[440px] aspect-square flex items-center justify-center p-4">
                            <svg viewBox="0 0 500 500" class="w-full h-full drop-shadow-[0_15px_30px_rgba(0,0,0,0.3)]" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <ellipse cx="250" cy="445" rx="145" ry="12" fill="#181a20" opacity="0.3"/>
                                <path d="M162 94 C138 32, 190 18, 250 18 C310 18, 362 32, 338 94 Z"
                                    :fill="selectedColor === 'White' ? '#e5e7ef' : '#141418'"
                                    :stroke="selectedColor === 'White' ? '#18181b' : '#0a0a0d'" stroke-width="3.5" stroke-linejoin="round"/>
                                <path d="M174 92 C204 118, 296 118, 326 92 C308 52, 192 52, 174 92 Z"
                                    :fill="selectedColor === 'White' ? '#c8cad6' : '#0a0a0c'"
                                    :stroke="selectedColor === 'White' ? '#18181b' : '#0a0a0d'" stroke-width="2.5"/>
                                <path d="M162 94 L88 120 C74 125, 62 138, 56 155 L36 375 C32 390, 42 402, 56 404 L94 408 C106 410, 118 402, 120 390 L125 355 C124 380, 124 400, 124 418 C124 430, 134 440, 146 440 L354 440 C366 440, 376 430, 376 418 C376 400, 376 380, 375 355 L380 390 C382 402, 394 410, 406 408 L444 404 C458 402, 468 390, 464 375 L444 155 C438 138, 426 125, 412 120 L338 94 C308 122, 192 122, 162 94 Z"
                                    :fill="selectedColor === 'White' ? '#ffffff' : '#1e1e24'"
                                    :stroke="selectedColor === 'White' ? '#18181b' : '#0c0c0f'" stroke-width="3.5" stroke-linejoin="round"/>
                                <path d="M172 95 Q250 126 328 95" :stroke="selectedColor === 'White' ? '#18181b' : '#0a0a0d'" stroke-width="3"/>
                                <path d="M38 385 L96 390 L94 408 L36 403 Z" :fill="selectedColor === 'White' ? '#f4f5f8' : '#16161a'" :stroke="selectedColor === 'White' ? '#18181b' : '#717684'" stroke-width="2.5"/>
                                <path d="M462 385 L404 390 L406 408 L464 403 Z" :fill="selectedColor === 'White' ? '#f4f5f8' : '#16161a'" :stroke="selectedColor === 'White' ? '#18181b' : '#717684'" stroke-width="2.5"/>
                                <path d="M164 310 L336 310 L354 395 C354 400, 348 404, 342 404 L158 404 C152 404, 146 400, 146 395 Z"
                                    :fill="selectedColor === 'White' ? '#f8f9fc' : '#23242b'" :stroke="selectedColor === 'White' ? '#18181b' : '#8e95a5'" stroke-width="3"/>
                                <path d="M125 418 L375 418" :stroke="selectedColor === 'White' ? '#18181b' : '#717684'" stroke-width="2.5" stroke-dasharray="5,3"/>
                                <path d="M214 116 C212 155, 206 185, 204 218" :stroke="selectedColor === 'White' ? '#18181b' : '#e5e7eb'" stroke-width="3" fill="none"/>
                                <circle cx="204" cy="222" r="3.5" :fill="selectedColor === 'White' ? '#18181b' : '#e5e7eb'"/>
                                <path d="M286 116 C288 155, 294 185, 296 218" :stroke="selectedColor === 'White' ? '#18181b' : '#e5e7eb'" stroke-width="3" fill="none"/>
                                <circle cx="296" cy="222" r="3.5" :fill="selectedColor === 'White' ? '#18181b' : '#e5e7eb'"/>
                            </svg>
                            <div class="absolute top-[38%] left-[31%] w-[38%] h-[25%] flex items-center justify-center pointer-events-none">
                                <div class="relative w-full h-full flex items-center justify-center p-1">
                                    <img src="{{ $imageUrl }}" alt="{{ $caption }}" 
                                        class="mockup-artwork-img max-w-full max-h-full object-contain rounded-none select-none"
                                        :class="selectedColor === 'White' ? 'mix-blend-multiply opacity-90' : 'opacity-95 contrast-105'">
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

            {{-- -------------------------------------------------------- --}}
            {{-- CASE 4: PHOTOGRAPHIC FRAMED ART PRINT                     --}}
            {{-- -------------------------------------------------------- --}}
            @elseif($productSlug === 'art-print')
                <div class="relative w-full h-full flex items-center justify-center"
                     x-data="{
                         printOrientation: '{{ $isLandscape ? 'landscape' : 'portrait' }}',
                         detectOrientation(img) {
                             if (img.naturalWidth && img.naturalHeight) {
                                 this.printOrientation = (img.naturalWidth > img.naturalHeight) ? 'landscape' : 'portrait';
                             }
                         }
                     }">

                    <!-- Hidden probe image to guarantee 100% accurate client-side orientation detection -->
                    <img src="{{ $imageUrl }}" class="hidden" @load="detectOrientation($event.target)" alt="">

                    <!-- Portrait Frame Mockup -->
                    <div x-show="printOrientation === 'portrait'" class="relative w-full h-full flex items-center justify-center">
                        @if($hasArtPrintPortrait)
                            <img id="mockup-bg-art-print-portrait" src="{{ asset('images/mockups/art-print-portrait.jpg') }}" alt="Art Print Portrait Mockup" 
                                 class="w-full h-full object-cover select-none pointer-events-none">
                        @endif

                        <!-- Portrait Aperture Opening Overlay (Centred with 20% size reduction) -->
                        <div class="absolute top-[21.5%] left-[27.5%] w-[45.0%] h-[57.5%] flex items-center justify-center pointer-events-none overflow-hidden shadow-[inset_0_2px_6px_rgba(0,0,0,0.35)] bg-[#fdfdfd]">
                            <img id="mockup-fg-art-print-portrait" src="{{ $imageUrl }}" alt="{{ $caption }}" 
                                 class="mockup-artwork-img w-[80%] h-[80%] object-contain select-none transition-all duration-200">
                        </div>
                    </div>

                    <!-- Landscape Frame Mockup -->
                    <div x-show="printOrientation === 'landscape'" x-cloak class="relative w-full h-full flex items-center justify-center">
                        @if($hasArtPrintLandscape)
                            <img id="mockup-bg-art-print-landscape" src="{{ asset('images/mockups/art-print-landscape.jpg') }}" alt="Art Print Landscape Mockup" 
                                 class="w-full h-full object-cover select-none pointer-events-none">
                        @endif

                        <!-- Landscape Aperture Opening Overlay (Centred with 20% size reduction) -->
                        <div class="absolute top-[26.2%] left-[20.8%] w-[58.5%] h-[47.2%] flex items-center justify-center pointer-events-none overflow-hidden shadow-[inset_0_2px_6px_rgba(0,0,0,0.35)] bg-[#fdfdfd]">
                            <img id="mockup-fg-art-print-landscape" src="{{ $imageUrl }}" alt="{{ $caption }}" 
                                 class="mockup-artwork-img w-[80%] h-[80%] object-contain select-none transition-all duration-200">
                        </div>
                    </div>

                    <!-- Subtle reflection / protective glass glare sheen -->
                    <div class="absolute inset-0 pointer-events-none bg-gradient-to-tr from-transparent via-white/[0.03] to-transparent"></div>
                </div>

            {{-- -------------------------------------------------------- --}}
            {{-- CASE 5: GENERIC FALLBACK                                  --}}
            {{-- -------------------------------------------------------- --}}
            @else
                <div class="relative max-h-full max-w-full rounded-none overflow-hidden shadow-2xl border border-white/20 bg-black/40 p-2">
                    <img src="{{ $imageUrl }}" alt="{{ $caption }}" class="max-h-[340px] w-auto max-w-full object-contain">
                </div>
            @endif

        </div>

        <!-- Subtle Watermark / Fibbers Authenticity Seal in Bottom Right -->
        <div class="absolute bottom-3 right-4 flex items-center space-x-1.5 opacity-60 group-hover:opacity-100 transition-opacity z-20 pointer-events-none">
            <span class="text-[9px] font-black uppercase tracking-widest text-gray-200 font-mono">Official Fibbers Archive Merch</span>
        </div>
    </div>

    <!-- Garment Colour Quick Swatches (For T-shirt & Hoodie) -->
    @if(in_array($productSlug, ['t-shirt', 'hoodie']))
        <div class="flex items-center justify-between p-3.5 rounded-none bg-white/5 border border-white/20">
            <div class="flex items-center space-x-2">
                <span class="text-xs font-bold text-pink-500 uppercase">Colour:</span>
                <span class="text-xs font-bold text-white uppercase" x-text="selectedColor"></span>
            </div>
            <div class="flex items-center space-x-2">
                <!-- Black Swatch -->
                <button type="button" 
                    @click="selectedColor = 'Black'"
                    :class="selectedColor === 'Black' ? 'ring-2 ring-pink-500 scale-110' : 'opacity-70 hover:opacity-100'"
                    class="w-7 h-7 rounded-none bg-[#1e1e24] border border-white/20 shadow-md transition-all flex items-center justify-center cursor-pointer outline-none focus:outline-none"
                    title="Black">
                </button>
                <!-- White Swatch -->
                <button type="button" 
                    @click="selectedColor = 'White'"
                    :class="selectedColor === 'White' ? 'ring-2 ring-pink-500 scale-110' : 'opacity-70 hover:opacity-100'"
                    class="w-7 h-7 rounded-none bg-white border border-gray-300 shadow-md transition-all flex items-center justify-center cursor-pointer outline-none focus:outline-none"
                    title="White">
                </button>
            </div>
        </div>
    @endif
</div>