{#
  Product Gallery Components
  ==========================
  Image gallery with thumbnails, zoom, and lightbox for product detail pages.

  Usage:
    {% from 'shared/macros/storefront/product-gallery.html' import product_gallery, gallery_thumbnails %}
#}


{#
  Product Gallery
  ===============
  Full image gallery with main image and thumbnails.

  Parameters:
    - images_var: Alpine.js expression for images array (default: 'product.images')
    - selected_var: Alpine.js variable for selected image index (default: 'selectedImage')
    - show_thumbnails: Show thumbnail navigation (default: true)
    - enable_zoom: Enable hover zoom on main image (default: true)
    - enable_lightbox: Enable fullscreen lightbox (default: true)
    - max_thumbnails: Max thumbnails to show (default: 5)
    - aspect_ratio: Main image aspect ratio (default: 'square')

  Expected image object:
    {
      id: 1,
      url: 'https://...',
      thumbnail_url: 'https://...',
      alt: 'Product image'
    }

  Usage:
    {{ product_gallery(images_var='product.images') }}
#}
{% macro product_gallery(
    images_var='product.images',
    selected_var='selectedImage',
    show_thumbnails=true,
    enable_zoom=true,
    enable_lightbox=true,
    max_thumbnails=5,
    aspect_ratio='square'
) %}
{% set aspects = {
    'square': 'aspect-square',
    '4:3': 'aspect-[4/3]',
    '3:4': 'aspect-[3/4]',
    '16:9': 'aspect-video',
    '3:2': 'aspect-[3/2]'
} %}
{% set aspect_class = aspects.get(aspect_ratio, 'aspect-square') %}

<div
    x-data="{
        {{ selected_var }}: 0,
        showLightbox: false,
        zoomActive: false,
        zoomX: 50,
        zoomY: 50,
        get images() { return {{ images_var }} || [] },
        get currentImage() { return this.images[this.{{ selected_var }}] || {} },
        next() {
            if (this.{{ selected_var }} < this.images.length - 1) {
                this.{{ selected_var }}++;
            } else {
                this.{{ selected_var }} = 0;
            }
        },
        prev() {
            if (this.{{ selected_var }} > 0) {
                this.{{ selected_var }}--;
            } else {
                this.{{ selected_var }} = this.images.length - 1;
            }
        },
        handleZoom(e) {
            if (!{{ 'true' if enable_zoom else 'false' }}) return;
            const rect = e.target.getBoundingClientRect();
            this.zoomX = ((e.clientX - rect.left) / rect.width) * 100;
            this.zoomY = ((e.clientY - rect.top) / rect.height) * 100;
        }
    }"
    class="space-y-4"
>
    {# Main Image Container #}
    <div class="relative group">
        {# Main Image #}
        <div
            class="relative {{ aspect_class }} bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden cursor-crosshair"
            {% if enable_zoom %}
            @mouseenter="zoomActive = true"
            @mouseleave="zoomActive = false"
            @mousemove="handleZoom($event)"
            {% endif %}
            {% if enable_lightbox %}
            @click="showLightbox = true"
            {% endif %}
        >
            {# Product Image #}
            <img
                :src="currentImage.url || currentImage.image_url || '/static/shared/images/placeholder.png'"
                :alt="currentImage.alt || 'Product image'"
                class="absolute inset-0 w-full h-full object-contain transition-transform duration-200"
                :class="zoomActive && 'scale-150'"
                :style="zoomActive ? `transform-origin: ${zoomX}% ${zoomY}%` : ''"
            />

            {# Zoom Indicator #}
            {% if enable_zoom %}
            <div
                x-show="!zoomActive"
                class="absolute bottom-3 right-3 bg-black/50 text-white text-xs px-2 py-1 rounded flex items-center gap-1"
            >
                <span x-html="$icon('zoom-in', 'w-4 h-4')"></span>
                <span>Hover to zoom</span>
            </div>
            {% endif %}

            {# Lightbox Button #}
            {% if enable_lightbox %}
            <button
                type="button"
                @click.stop="showLightbox = true"
                class="absolute top-3 right-3 p-2 bg-white/80 dark:bg-gray-800/80 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity"
                title="View fullscreen"
            >
                <span x-html="$icon('arrows-expand', 'w-5 h-5 text-gray-700 dark:text-gray-300')"></span>
            </button>
            {% endif %}
        </div>

        {# Navigation Arrows #}
        <template x-if="images.length > 1">
            <div>
                <button
                    type="button"
                    @click="prev()"
                    class="absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-white/80 dark:bg-gray-800/80 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white dark:hover:bg-gray-800"
                >
                    <span x-html="$icon('chevron-left', 'w-5 h-5 text-gray-700 dark:text-gray-300')"></span>
                </button>
                <button
                    type="button"
                    @click="next()"
                    class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-white/80 dark:bg-gray-800/80 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white dark:hover:bg-gray-800"
                >
                    <span x-html="$icon('chevron-right', 'w-5 h-5 text-gray-700 dark:text-gray-300')"></span>
                </button>
            </div>
        </template>

        {# Image Counter #}
        <template x-if="images.length > 1">
            <div class="absolute bottom-3 left-3 bg-black/50 text-white text-xs px-2 py-1 rounded">
                <span x-text="({{ selected_var }} + 1) + ' / ' + images.length"></span>
            </div>
        </template>
    </div>

    {# Thumbnails #}
    {% if show_thumbnails %}
    <div x-show="images.length > 1" class="relative">
        <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-thin">
            <template x-for="(image, index) in images.slice(0, {{ max_thumbnails }})" :key="image.id || index">
                <button
                    type="button"
                    @click="{{ selected_var }} = index"
                    class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all"
                    :class="{{ selected_var }} === index
                        ? 'border-purple-500 dark:border-purple-400 ring-2 ring-purple-500/30'
                        : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'"
                >
                    <img
                        :src="image.thumbnail_url || image.url || image.image_url"
                        :alt="image.alt || 'Thumbnail ' + (index + 1)"
                        class="w-full h-full object-cover"
                    />
                </button>
            </template>

            {# More Images Indicator #}
            <template x-if="images.length > {{ max_thumbnails }}">
                <button
                    type="button"
                    @click="showLightbox = true"
                    class="flex-shrink-0 w-16 h-16 rounded-lg bg-gray-100 dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                >
                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400" x-text="'+' + (images.length - {{ max_thumbnails }})"></span>
                </button>
            </template>
        </div>
    </div>
    {% endif %}

    {# Lightbox Modal #}
    {% if enable_lightbox %}
    <div
        x-show="showLightbox"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        @keydown.escape.window="showLightbox = false"
        @keydown.arrow-left.window="showLightbox && prev()"
        @keydown.arrow-right.window="showLightbox && next()"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
        style="display: none;"
    >
        {# Close Button #}
        <button
            type="button"
            @click="showLightbox = false"
            class="absolute top-4 right-4 p-2 text-white hover:text-gray-300 transition-colors"
        >
            <span x-html="$icon('x', 'w-8 h-8')"></span>
        </button>

        {# Lightbox Image #}
        <div class="relative max-w-5xl max-h-[90vh] mx-4">
            <img
                :src="currentImage.url || currentImage.image_url"
                :alt="currentImage.alt || 'Product image'"
                class="max-w-full max-h-[90vh] object-contain"
            />
        </div>

        {# Lightbox Navigation #}
        <template x-if="images.length > 1">
            <div>
                <button
                    type="button"
                    @click="prev()"
                    class="absolute left-4 top-1/2 -translate-y-1/2 p-3 text-white hover:text-gray-300 transition-colors"
                >
                    <span x-html="$icon('chevron-left', 'w-10 h-10')"></span>
                </button>
                <button
                    type="button"
                    @click="next()"
                    class="absolute right-4 top-1/2 -translate-y-1/2 p-3 text-white hover:text-gray-300 transition-colors"
                >
                    <span x-html="$icon('chevron-right', 'w-10 h-10')"></span>
                </button>
            </div>
        </template>

        {# Lightbox Thumbnails #}
        <div x-show="images.length > 1" class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
            <template x-for="(image, index) in images" :key="image.id || index">
                <button
                    type="button"
                    @click="{{ selected_var }} = index"
                    class="w-12 h-12 rounded overflow-hidden border-2 transition-all"
                    :class="{{ selected_var }} === index
                        ? 'border-white'
                        : 'border-transparent opacity-60 hover:opacity-100'"
                >
                    <img
                        :src="image.thumbnail_url || image.url || image.image_url"
                        :alt="image.alt || 'Thumbnail'"
                        class="w-full h-full object-cover"
                    />
                </button>
            </template>
        </div>

        {# Image Counter #}
        <div class="absolute top-4 left-4 text-white text-sm">
            <span x-text="({{ selected_var }} + 1) + ' / ' + images.length"></span>
        </div>
    </div>
    {% endif %}
</div>
{% endmacro %}


{#
  Gallery Thumbnails Only
  =======================
  Standalone thumbnail strip for custom layouts.

  Parameters:
    - images_var: Alpine.js expression for images array
    - selected_var: Alpine.js variable for selected index
    - orientation: 'horizontal' | 'vertical' (default: 'horizontal')
    - size: 'sm' | 'md' | 'lg' (default: 'md')

  Usage:
    {{ gallery_thumbnails(images_var='product.images', orientation='vertical') }}
#}
{% macro gallery_thumbnails(
    images_var='product.images',
    selected_var='selectedImage',
    orientation='horizontal',
    size='md'
) %}
{% set sizes = {
    'sm': {'container': 'w-12 h-12', 'gap': 'gap-1'},
    'md': {'container': 'w-16 h-16', 'gap': 'gap-2'},
    'lg': {'container': 'w-20 h-20', 'gap': 'gap-3'}
} %}
{% set s = sizes[size] %}
{% set is_vertical = orientation == 'vertical' %}

<div class="flex {{ 'flex-col' if is_vertical else 'flex-row' }} {{ s.gap }} {{ 'overflow-y-auto' if is_vertical else 'overflow-x-auto' }}">
    <template x-for="(image, index) in {{ images_var }}" :key="image.id || index">
        <button
            type="button"
            @click="{{ selected_var }} = index"
            class="flex-shrink-0 {{ s.container }} rounded-lg overflow-hidden border-2 transition-all"
            :class="{{ selected_var }} === index
                ? 'border-purple-500 dark:border-purple-400'
                : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'"
        >
            <img
                :src="image.thumbnail_url || image.url || image.image_url"
                :alt="image.alt || 'Thumbnail ' + (index + 1)"
                class="w-full h-full object-cover"
            />
        </button>
    </template>
</div>
{% endmacro %}


{#
  Simple Image Viewer
  ===================
  Single image with optional lightbox (for simple product pages).

  Parameters:
    - image_var: Alpine.js expression for image object or URL string
    - enable_lightbox: Enable click to enlarge (default: true)
    - aspect_ratio: Image aspect ratio (default: 'square')

  Usage:
    {{ simple_image_viewer(image_var='product.image_url') }}
#}
{% macro simple_image_viewer(
    image_var='product.image_url',
    enable_lightbox=true,
    aspect_ratio='square'
) %}
{% set aspects = {
    'square': 'aspect-square',
    '4:3': 'aspect-[4/3]',
    '3:4': 'aspect-[3/4]',
    '16:9': 'aspect-video'
} %}
{% set aspect_class = aspects.get(aspect_ratio, 'aspect-square') %}

<div x-data="{ showLightbox: false }">
    <div
        class="relative {{ aspect_class }} bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden {{ 'cursor-pointer' if enable_lightbox else '' }}"
        {% if enable_lightbox %}@click="showLightbox = true"{% endif %}
    >
        <img
            :src="typeof {{ image_var }} === 'string' ? {{ image_var }} : ({{ image_var }}.url || {{ image_var }}.image_url || '/static/shared/images/placeholder.png')"
            :alt="typeof {{ image_var }} === 'object' ? {{ image_var }}.alt : 'Product image'"
            class="absolute inset-0 w-full h-full object-contain"
        />

        {% if enable_lightbox %}
        <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors flex items-center justify-center">
            <span class="opacity-0 hover:opacity-100 transition-opacity" x-html="$icon('zoom-in', 'w-8 h-8 text-white drop-shadow-lg')"></span>
        </div>
        {% endif %}
    </div>

    {% if enable_lightbox %}
    {# Lightbox #}
    <div
        x-show="showLightbox"
        x-transition
        @click="showLightbox = false"
        @keydown.escape.window="showLightbox = false"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
        style="display: none;"
    >
        <button
            type="button"
            @click="showLightbox = false"
            class="absolute top-4 right-4 p-2 text-white hover:text-gray-300"
        >
            <span x-html="$icon('x', 'w-8 h-8')"></span>
        </button>
        <img
            :src="typeof {{ image_var }} === 'string' ? {{ image_var }} : ({{ image_var }}.url || {{ image_var }}.image_url)"
            :alt="typeof {{ image_var }} === 'object' ? {{ image_var }}.alt : 'Product image'"
            class="max-w-full max-h-[90vh] object-contain"
        />
    </div>
    {% endif %}
</div>
{% endmacro %}