@php
    $galleryTitle = $resource->caption ?: ($resource->imageCategory->name ?? 'Archive Artifact');
    $ogImage = $resource->thumbnail(1200, 630) ?? ($resource->file ? Storage::url($resource->file) : asset('images/hero.png'));
    $galleryDesc = !empty(trim($resource->description ?? '')) 
        ? \Illuminate\Support\Str::limit(strip_tags($resource->description), 155) 
        : ($resource->caption ? $resource->caption . ' from the historical live music archive of Fibbers, York.' : 'Historical live music artifact from the Fibbers York archive.');

    $imageSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'ImageObject',
        'name' => $galleryTitle,
        'contentUrl' => $resource->file ? Storage::url($resource->file) : null,
        'thumbnailUrl' => $ogImage,
        'description' => $galleryDesc,
    ];
    $bandName = isset($associatedBands) && $associatedBands->isNotEmpty() ? $associatedBands->first()->name : null;
    $bandBySlug = isset($associatedBands) ? $associatedBands->keyBy('slug') : collect();
    $bandByName = isset($associatedBands) ? $associatedBands->keyBy(fn($b) => mb_strtolower($b->name)) : collect();
    $backLinkUrl = $backUrl ?? route('gallery.index', \Illuminate\Support\Str::slug($resource->imageCategory->name ?? 'band-posters'));
@endphp

<x-main-layout 
    :title="$galleryTitle" 
    :description="$galleryDesc" 
    :image="$ogImage" 
    type="article"
    :schema="$imageSchema"
>
    <div x-data="galleryItemPage()" @keydown.escape.window="closeLightbox()" class="max-w-7xl mx-auto px-4 py-8 lg:py-16">
        
        <!-- Top Navigation & Action Bar -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 pb-6 border-b border-white/10">
            <!-- Back Link (Preserves Pagination & Category Context) -->
            <a href="{{ $backLinkUrl }}"
                class="inline-flex items-center text-pink-500 hover:text-white font-bold uppercase tracking-widest text-xs sm:text-sm transition group">
                <svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1.5 transition duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" />
                </svg>
                <span>Back to {{ $resource->imageCategory->name ?? 'Gallery' }}</span>
            </a>

            <!-- Quick Merch CTA Link -->
            <a href="{{ route('orders.create', [$resource->id, 1]) }}" 
               class="inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:px-5 sm:py-2.5 bg-pink-600 hover:bg-pink-500 text-white font-black text-xs uppercase tracking-wider rounded-none shadow-[0_4px_14px_rgba(219,39,119,0.4)] hover:shadow-pink-600/60 transition-all shrink-0">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
                <span>Buy Merch With This Image</span>
            </a>
        </div>

        <!-- Headline & Context Bar (Cleanly placed outside the image) -->
        <div class="mb-8">
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-normal text-white uppercase tracking-tight leading-tight">
                {{ $resource->caption ?: 'Untitled Artifact' }}
            </h1>

            <div class="flex flex-wrap items-center gap-x-3 mt-1.5 sm:mt-2 text-sm sm:text-base font-bold uppercase tracking-wider">
                <a href="{{ route('gallery.index', \Illuminate\Support\Str::slug($resource->imageCategory->name ?? '')) }}"
                   class="text-pink-600 hover:text-pink-500 transition">
                    {{ $resource->imageCategory->name ?? 'General Archive' }}
                </a>
                @if ($resource->calendar_month || $resource->calendar_year)
                    <span class="text-white">
                        {{ $resource->calendar_month ? date('F', mktime(0, 0, 0, $resource->calendar_month, 1)) : '' }} {{ $resource->calendar_year }}
                    </span>
                @endif
            </div>
        </div>

        <!-- Main Display: Image Stage & Metadata Column -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-start">
            
            <!-- LEFT: Archival Image Stage (Uncropped, pure, no overlay) -->
            <div class="lg:col-span-8 flex flex-col">
                <div class="group relative bg-[#0c0c0e] border border-white/10 rounded-none shadow-2xl p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-[420px] lg:min-h-[640px] overflow-hidden">
                    
                    <!-- Ambient Stage Texture -->
                    <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_70%)] pointer-events-none"></div>

                    <!-- Uncropped Image with Natural Aspect Ratio -->
                    <img src="{{ Storage::url($resource->file) }}" 
                         alt="{{ $resource->altText($bandName) }}"
                         @click="openLightbox()"
                         class="max-w-full max-h-[74vh] w-auto h-auto object-contain drop-shadow-[0_12px_36px_rgba(0,0,0,0.9)] select-none cursor-zoom-in transition-transform duration-300 group-hover:scale-[1.01]">

                    <!-- Bottom-right Zoom Hint (Non-intrusive) -->
                    <button type="button" 
                            @click="openLightbox()"
                            class="absolute bottom-3 right-3 px-3 py-1.5 bg-black/80 hover:bg-pink-600 text-white text-[11px] font-bold uppercase tracking-wider border border-white/20 hover:border-pink-500 rounded-none transition flex items-center gap-1.5 shadow-lg backdrop-blur-sm cursor-pointer select-none">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"/>
                        </svg>
                        <span>Zoom & Inspect</span>
                    </button>
                </div>

                <!-- Helpful Helper Caption below image -->
                <div class="flex items-center justify-center mt-3 px-1 text-center">
                    <button type="button" @click="openLightbox()" class="text-pink-400 hover:text-pink-300 font-bold uppercase tracking-wider text-[10px] inline-flex items-center gap-1.5 cursor-pointer transition-colors">
                        <span>Click image to view full-screen</span>
                    </button>
                </div>
            </div>

            <!-- RIGHT: Metadata & Association Sidebar -->
            <div class="lg:col-span-4 space-y-6">
                
                @php
                    $hasDescription = !empty(trim($resource->description ?? ''));
                    $hasBands = isset($associatedBands) && $associatedBands->isNotEmpty();
                    $hasTags = $resource->tags->isNotEmpty();
                    $hasSidebarInfo = $hasDescription || $hasBands || $hasTags;
                @endphp

                @if ($hasSidebarInfo)
                    <!-- Information Panel -->
                    <div class="glass-panel p-6 sm:p-7 rounded-none border border-white/10 space-y-6">
                        
                        <!-- Field Notes / Description -->
                        @if ($hasDescription)
                            <div>
                                <h4 class="text-[10px] font-black uppercase tracking-[0.2em] text-pink-600 mb-2">Field Notes</h4>
                                <p class="text-gray-300 text-sm leading-relaxed italic border-l-2 border-pink-600/40 pl-3">
                                    "{{ $resource->description }}"
                                </p>
                            </div>
                        @endif

                        <!-- Associated Bands (Adaptive for 1-2 vs 20-30 bands) -->
                        @if ($hasBands)
                            @php
                                $bandCount = $associatedBands->count();
                            @endphp

                            <div class="{{ $hasDescription ? 'pt-6 border-t border-white/10' : '' }}" x-data="{ bandSearch: '', showAll: false }">
                                <div class="flex items-center justify-between mb-3">
                                    <h4 class="text-xl sm:text-2xl font-normal uppercase tracking-wider text-white">
                                        Bands
                                    </h4>
                                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">
                                        {{ $bandCount }} {{ \Illuminate\Support\Str::plural('Artist', $bandCount) }}
                                    </span>
                                </div>

                                @if ($bandCount === 1)
                                    <!-- Single Band Hero Presentation -->
                                    @php $singleBand = $associatedBands->first(); @endphp
                                    <div class="p-4 rounded-none bg-white/[0.03] border border-white/10 hover:border-pink-500/40 transition group">
                                        <div class="flex items-center justify-between gap-3">
                                            <div>
                                                <a href="{{ route('bands.show', $singleBand) }}" class="text-base font-bold text-white group-hover:text-pink-400 transition flex items-center gap-1.5">
                                                    {{ $singleBand->name }}
                                                    <svg class="w-3.5 h-3.5 opacity-60 group-hover:opacity-100 group-hover:translate-x-0.5 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                                    </svg>
                                                </a>
                                                <p class="text-xs text-gray-400 mt-0.5">
                                                    {{ $singleBand->events_count }} {{ \Illuminate\Support\Str::plural('gig', $singleBand->events_count) }} at Fibbers
                                                </p>
                                            </div>
                                            <a href="{{ route('bands.show', $singleBand) }}" class="shrink-0 px-3 py-1.5 rounded-none bg-pink-600 hover:bg-pink-500 text-white text-[11px] font-black uppercase tracking-wider transition shadow-sm">
                                                View Archive
                                            </a>
                                        </div>
                                    </div>
                                @else
                                    <!-- Multi-Band Layout (Handles up to 30+ bands cleanly) -->
                                    @if($bandCount > 10)
                                        <!-- Search filter for 10+ bands -->
                                        <div class="mb-3">
                                            <input type="text" 
                                                   x-model="bandSearch" 
                                                   placeholder="Filter bands..." 
                                                   class="w-full bg-white/5 border border-white/15 rounded-none py-1.5 px-3 text-xs text-white placeholder-gray-500 focus:outline-none focus:ring-0 focus:ring-offset-0 focus:border-pink-500 uppercase tracking-wider">
                                        </div>
                                    @endif

                                    <div class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-pink-600/30">
                                        @foreach($associatedBands as $index => $band)
                                            <a href="{{ route('bands.show', $band) }}" 
                                               x-show="(!bandSearch && (showAll || {{ $index }} < 8)) || (bandSearch && '{{ mb_strtolower($band->name) }}'.includes(bandSearch.toLowerCase()))"
                                               class="px-2.5 py-1 rounded-none bg-white/5 hover:bg-pink-600/20 border border-white/10 hover:border-pink-500/40 text-xs font-semibold uppercase tracking-wider text-gray-300 hover:text-white transition inline-block">
                                                {{ $band->name }}
                                            </a>
                                        @endforeach
                                    </div>

                                    @if($bandCount > 8)
                                        <div class="mt-2.5" x-show="!bandSearch">
                                            <button type="button" 
                                                    @click="showAll = !showAll" 
                                                    class="text-[11px] font-bold text-pink-400 hover:text-pink-300 uppercase tracking-wider transition cursor-pointer">
                                                <span x-show="!showAll">+ Show all {{ $bandCount }} artists &darr;</span>
                                                <span x-show="showAll" x-cloak>&uarr; Show fewer artists</span>
                                            </button>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        @endif

                        <!-- Tags List (Adaptive for 1-2 vs 30+ tags) -->
                        @if ($hasTags)
                            @php
                                $tagCount = $resource->tags->count();
                            @endphp
                            <div class="{{ ($hasDescription || $hasBands) ? 'pt-6 border-t border-white/10' : '' }}" x-data="{ showAllTags: false }">
                                <div class="mb-3">
                                    <h4 class="text-xl sm:text-2xl font-normal uppercase tracking-wider text-white">
                                        Tags
                                    </h4>
                                </div>

                                <div class="flex flex-wrap gap-1.5">
                                    @foreach ($resource->tags as $tagIndex => $tag)
                                        <div x-show="showAllTags || {{ $tagIndex }} < 10" class="inline-block">
                                            <a href="{{ route('gallery.index', ['tag' => $tag->slug ?: \Illuminate\Support\Str::slug($tag->name)]) }}" 
                                               title="Filter gallery by #{{ $tag->name }}"
                                               class="px-2.5 py-1 rounded-none bg-white/5 hover:bg-pink-600 border border-white/20 hover:border-pink-500 text-[10px] font-bold text-gray-300 hover:text-white uppercase tracking-widest transition-all duration-200 inline-block shadow-sm">
                                                #{{ $tag->name }}
                                            </a>
                                        </div>
                                    @endforeach
                                </div>

                                @if($tagCount > 10)
                                    <div class="mt-2.5">
                                        <button type="button" 
                                                @click="showAllTags = !showAllTags" 
                                                class="text-[11px] font-bold text-pink-400 hover:text-pink-300 uppercase tracking-wider transition cursor-pointer">
                                            <span x-show="!showAllTags">+ {{ $tagCount - 10 }} more tags &darr;</span>
                                            <span x-show="showAllTags" x-cloak>&uarr; Show fewer tags</span>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                @endif

                <!-- Sidebar Merchandise Teaser Card -->
                <div class="glass-panel p-6 border border-pink-500/30 rounded-none relative overflow-hidden group">
                    <div class="absolute -right-8 -bottom-8 w-32 h-32 bg-pink-600/10 blur-2xl pointer-events-none"></div>
                    
                    <span class="text-[10px] font-black uppercase tracking-[0.2em] text-pink-500 block mb-1">Own A Piece Of History</span>
                    <h4 class="text-xl font-black text-white uppercase mb-2">Buy Merch With This Image</h4>
                    <p class="text-xs text-gray-400 leading-relaxed mb-5">
                        High quality art prints and custom T-shirts, Hoodies & Mugs from only £10.00. Super-cool AND you're supporting the archive!
                    </p>

                    <a href="{{ route('orders.create', [$resource->id, 1]) }}" 
                       class="w-full py-3.5 bg-pink-600 hover:bg-pink-500 text-white font-black text-xs uppercase tracking-wider rounded-none shadow-[0_4px_14px_rgba(219,39,119,0.4)] transition flex items-center justify-center gap-2">
                        <span>Choose Merch Products</span>
                        <span>&rarr;</span>
                    </a>
                </div>

            </div>
        </div>

        <!-- ================================================================= -->
        <!-- INTERACTIVE PAN & ZOOM LIGHTBOX MODAL (ALPINE.JS)                 -->
        <!-- ================================================================= -->
        <div x-show="lightboxOpen" 
             x-cloak 
             x-transition:enter="transition-opacity ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-50 flex flex-col bg-black/95 backdrop-blur-md select-none">
            
            <!-- Lightbox Header Controls -->
            <div class="h-16 px-4 sm:px-8 border-b border-white/10 flex items-center justify-between bg-black/80 z-20 shrink-0">
                <div class="flex items-center gap-3 truncate max-w-md">
                    <span class="text-xs font-black uppercase tracking-widest text-pink-500 shrink-0">Archive Detail</span>
                    <span class="text-sm font-bold text-white uppercase truncate">{{ $resource->caption ?: 'Artifact' }}</span>
                </div>

                <!-- Zoom Tools & Close -->
                <div class="flex items-center gap-2 sm:gap-3">
                    <!-- Zoom Out -->
                    <button type="button" 
                            @click="zoomOut()" 
                            :disabled="zoomLevel <= 1"
                            class="w-9 h-9 flex items-center justify-center border border-white/20 hover:border-pink-500 text-white disabled:opacity-30 disabled:hover:border-white/20 rounded-none bg-white/5 hover:bg-pink-600 transition cursor-pointer"
                            title="Zoom Out">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 12H4"/></svg>
                    </button>

                    <!-- Zoom Scale Display -->
                    <span class="text-xs font-mono font-bold text-gray-300 w-14 text-center select-none" x-text="Math.round(zoomLevel * 100) + '%'"></span>

                    <!-- Zoom In -->
                    <button type="button" 
                            @click="zoomIn()" 
                            :disabled="zoomLevel >= 4"
                            class="w-9 h-9 flex items-center justify-center border border-white/20 hover:border-pink-500 text-white disabled:opacity-30 disabled:hover:border-white/20 rounded-none bg-white/5 hover:bg-pink-600 transition cursor-pointer"
                            title="Zoom In">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
                    </button>

                    <!-- Reset 1:1 -->
                    <button type="button" 
                            @click="resetZoom()" 
                            class="px-2.5 h-9 flex items-center justify-center border border-white/20 hover:border-white text-xs font-bold text-gray-300 hover:text-white rounded-none bg-white/5 transition cursor-pointer"
                            title="Reset Zoom">
                        1:1
                    </button>

                    <div class="h-6 w-px bg-white/20 mx-1"></div>

                    <!-- Close Lightbox -->
                    <button type="button" 
                            @click="closeLightbox()" 
                            class="px-3 h-9 flex items-center justify-center gap-1.5 bg-pink-600 hover:bg-pink-500 text-white text-xs font-black uppercase tracking-wider rounded-none transition cursor-pointer"
                            title="Close (Esc)">
                        <span>Close</span>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>

            <!-- Lightbox Viewport & Drag Canvas -->
            <div class="flex-1 relative overflow-hidden flex items-center justify-center p-4"
                 @wheel="handleWheel($event)"
                 @mousedown="startDrag($event)"
                 @mousemove="onDrag($event)"
                 @mouseup="stopDrag()"
                 @mouseleave="stopDrag()"
                 @touchstart="startDrag($event)"
                 @touchmove="onDrag($event)"
                 @touchend="stopDrag()">

                <div class="relative flex items-center justify-center transition-transform"
                     :style="`transform: translate(${panX}px, ${panY}px) scale(${zoomLevel}); transition-duration: ${isDragging ? '0ms' : '150ms'}; cursor: ${zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'zoom-in'};`">
                    
                    <img src="{{ Storage::url($resource->file) }}" 
                         alt="{{ $galleryTitle }}"
                         @dblclick="toggleZoom($event)"
                         draggable="false"
                         class="max-h-[82vh] max-w-[92vw] w-auto h-auto object-contain select-none shadow-2xl pointer-events-auto">
                </div>

                <!-- Subtle Help Overlay Pill -->
                <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-black/80 border border-white/10 text-[11px] text-gray-400 uppercase tracking-widest pointer-events-none rounded-none backdrop-blur-sm select-none">
                    <span class="hidden sm:inline">Double-click or wheel to zoom • Drag to pan • Esc to exit</span>
                    <span class="sm:hidden">Pinch or tap +/- to zoom • Drag to pan</span>
                </div>
            </div>
        </div>

    </div>

    <!-- Alpine Component Script for Lightbox and Navigation -->
    <script>
        function galleryItemPage() {
            return {
                lightboxOpen: false,
                zoomLevel: 1,
                panX: 0,
                panY: 0,
                isDragging: false,
                startX: 0,
                startY: 0,

                openLightbox() {
                    this.lightboxOpen = true;
                    this.zoomLevel = 1;
                    this.panX = 0;
                    this.panY = 0;
                    document.body.style.overflow = 'hidden';
                },
                closeLightbox() {
                    this.lightboxOpen = false;
                    this.zoomLevel = 1;
                    this.panX = 0;
                    this.panY = 0;
                    document.body.style.overflow = '';
                },
                zoomIn() {
                    this.zoomLevel = Math.min(Number((this.zoomLevel + 0.5).toFixed(2)), 4);
                },
                zoomOut() {
                    this.zoomLevel = Math.max(Number((this.zoomLevel - 0.5).toFixed(2)), 1);
                    if (this.zoomLevel === 1) {
                        this.panX = 0;
                        this.panY = 0;
                    }
                },
                resetZoom() {
                    this.zoomLevel = 1;
                    this.panX = 0;
                    this.panY = 0;
                },
                toggleZoom(e) {
                    if (this.zoomLevel > 1) {
                        this.resetZoom();
                    } else {
                        this.zoomLevel = 2.5;
                    }
                },
                handleWheel(e) {
                    e.preventDefault();
                    if (e.deltaY < 0) {
                        this.zoomLevel = Math.min(Number((this.zoomLevel + 0.25).toFixed(2)), 4);
                    } else {
                        this.zoomLevel = Math.max(Number((this.zoomLevel - 0.25).toFixed(2)), 1);
                        if (this.zoomLevel === 1) {
                            this.panX = 0;
                            this.panY = 0;
                        }
                    }
                },
                startDrag(e) {
                    if (this.zoomLevel <= 1) return;
                    this.isDragging = true;
                    const clientX = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
                    const clientY = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : 0);
                    this.startX = clientX - this.panX;
                    this.startY = clientY - this.panY;
                },
                onDrag(e) {
                    if (!this.isDragging) return;
                    const clientX = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
                    const clientY = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : 0);
                    this.panX = clientX - this.startX;
                    this.panY = clientY - this.startY;
                },
                stopDrag() {
                    this.isDragging = false;
                }
            };
        }
    </script>
</x-main-layout>