{% doc %}
  @prompt
    product media
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-product-media-{{ ai_gen_id }} {
    display: grid;
    gap: {{ block.settings.spacing }}px;
    width: 100%;
  }

  .ai-product-media-main-{{ ai_gen_id }} {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: {{ block.settings.border_radius }}px;
    background-color: {{ block.settings.background_color }};
  }

  .ai-product-media-main-{{ ai_gen_id }} img,
  .ai-product-media-main-{{ ai_gen_id }} video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: {{ block.settings.border_radius }}px;
  }

  .ai-product-media-main-{{ ai_gen_id }} model-viewer {
    width: 100%;
    height: 600px;
    display: block;
  }

  .ai-product-media-placeholder-{{ ai_gen_id }} {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: {{ block.settings.border_radius }}px;
    position: relative;
  }

  .ai-product-media-placeholder-{{ ai_gen_id }} svg {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 300px;
  }

  .ai-product-media-empty-state-{{ ai_gen_id }} {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    font-size: 14px;
    color: #666;
    text-align: center;
    pointer-events: none;
  }

  .ai-product-media-thumbnails-{{ ai_gen_id }} {
    display: grid;
    grid-template-columns: repeat({{ block.settings.thumbnails_per_row }}, 1fr);
    gap: {{ block.settings.thumbnail_spacing }}px;
  }

  .ai-product-media-thumbnail-{{ ai_gen_id }} {
    position: relative;
    cursor: pointer;
    border-radius: {{ block.settings.thumbnail_border_radius }}px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    aspect-ratio: 1 / 1;
    background-color: {{ block.settings.thumbnail_background }};
  }

  .ai-product-media-thumbnail-{{ ai_gen_id }}:hover {
    opacity: 0.8;
  }

  .ai-product-media-thumbnail-{{ ai_gen_id }}.active {
    border-color: {{ block.settings.active_thumbnail_border }};
  }

  .ai-product-media-thumbnail-{{ ai_gen_id }} img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ai-product-media-thumbnail-icon-{{ ai_gen_id }} {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .ai-product-media-thumbnail-icon-{{ ai_gen_id }} svg {
    width: 16px;
    height: 16px;
    fill: white;
  }

  .ai-product-media-zoom-{{ ai_gen_id }} {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background-color: {{ block.settings.zoom_button_background }};
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 2;
  }

  .ai-product-media-zoom-{{ ai_gen_id }}:hover {
    background-color: {{ block.settings.zoom_button_hover }};
  }

  .ai-product-media-zoom-{{ ai_gen_id }} svg {
    width: 20px;
    height: 20px;
    stroke: {{ block.settings.zoom_button_icon }};
  }

  .ai-product-media-nav-{{ ai_gen_id }} {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: {{ block.settings.nav_button_background }};
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 2;
  }

  .ai-product-media-nav-{{ ai_gen_id }}:hover {
    background-color: {{ block.settings.nav_button_hover }};
  }

  .ai-product-media-nav-{{ ai_gen_id }} svg {
    width: 20px;
    height: 20px;
    stroke: {{ block.settings.nav_button_icon }};
  }

  .ai-product-media-nav-prev-{{ ai_gen_id }} {
    left: 16px;
  }

  .ai-product-media-nav-next-{{ ai_gen_id }} {
    right: 16px;
  }

  .ai-product-media-counter-{{ ai_gen_id }} {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    z-index: 2;
  }

  @media screen and (max-width: 749px) {
    .ai-product-media-thumbnails-{{ ai_gen_id }} {
      grid-template-columns: repeat({{ block.settings.thumbnails_per_row_mobile }}, 1fr);
    }
  }
{% endstyle %}

<product-media-gallery-{{ ai_gen_id }}
  class="ai-product-media-{{ ai_gen_id }}"
  {{ block.shopify_attributes }}
>
  <div class="ai-product-media-main-{{ ai_gen_id }}">
    {% if product.media.size > 0 %}
      {% for media in product.media %}
        <div
          class="ai-product-media-item-{{ ai_gen_id }}"
          data-media-id="{{ media.id }}"
          style="display: {% if forloop.first %}block{% else %}none{% endif %};"
        >
          {% case media.media_type %}
            {% when 'image' %}
              <img
                src="{{ media | image_url: width: 1200 }}"
                alt="{{ media.alt | escape }}"
                loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
                width="{{ media.width }}"
                height="{{ media.height }}"
              >
            {% when 'video' %}
              {{ media | video_tag: controls: true, autoplay: false }}
            {% when 'external_video' %}
              {{ media | external_video_tag }}
            {% when 'model' %}
              {{ media | model_viewer_tag }}
          {% endcase %}
        </div>
      {% endfor %}

      {% if block.settings.show_zoom %}
        <button
          class="ai-product-media-zoom-{{ ai_gen_id }}"
          aria-label="Zoom image"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            <line x1="11" y1="8" x2="11" y2="14"></line>
            <line x1="8" y1="11" x2="14" y2="11"></line>
          </svg>
        </button>
      {% endif %}

      {% if block.settings.show_navigation and product.media.size > 1 %}
        <button
          class="ai-product-media-nav-{{ ai_gen_id }} ai-product-media-nav-prev-{{ ai_gen_id }}"
          aria-label="Previous image"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </button>
        <button
          class="ai-product-media-nav-{{ ai_gen_id }} ai-product-media-nav-next-{{ ai_gen_id }}"
          aria-label="Next image"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>
      {% endif %}

      {% if block.settings.show_counter and product.media.size > 1 %}
        <div class="ai-product-media-counter-{{ ai_gen_id }}">
          <span class="ai-product-media-current-{{ ai_gen_id }}">1</span>
          /
          <span class="ai-product-media-total-{{ ai_gen_id }}">{{ product.media.size }}</span>
        </div>
      {% endif %}
    {% else %}
      <div class="ai-product-media-placeholder-{{ ai_gen_id }}">
        {{ 'product-1' | placeholder_svg_tag }}
        <div class="ai-product-media-empty-state-{{ ai_gen_id }}">
          Add product media to display here
        </div>
      </div>
    {% endif %}
  </div>

  {% if block.settings.show_thumbnails and product.media.size > 1 %}
    <div class="ai-product-media-thumbnails-{{ ai_gen_id }}">
      {% for media in product.media %}
        <button
          class="ai-product-media-thumbnail-{{ ai_gen_id }} {% if forloop.first %}active{% endif %}"
          data-media-id="{{ media.id }}"
          aria-label="View {{ media.media_type }}"
        >
          {% if media.preview_image %}
            <img
              src="{{ media.preview_image | image_url: width: 200 }}"
              alt="{{ media.alt | escape }}"
              loading="lazy"
              width="200"
              height="200"
            >
          {% endif %}
          {% if media.media_type == 'video' or media.media_type == 'external_video' %}
            <div class="ai-product-media-thumbnail-icon-{{ ai_gen_id }}">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
              >
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
            </div>
          {% elsif media.media_type == 'model' %}
            <div class="ai-product-media-thumbnail-icon-{{ ai_gen_id }}">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
              >
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                <line x1="12" y1="22.08" x2="12" y2="12"></line>
              </svg>
            </div>
          {% endif %}
        </button>
      {% endfor %}
    </div>
  {% endif %}
</product-media-gallery-{{ ai_gen_id }}>

<script>
  (function() {
    class ProductMediaGallery{{ ai_gen_id }} extends HTMLElement {
      constructor() {
        super();
        this.currentIndex = 0;
      }

      connectedCallback() {
        this.mediaItems = this.querySelectorAll('.ai-product-media-item-{{ ai_gen_id }}');
        this.thumbnails = this.querySelectorAll('.ai-product-media-thumbnail-{{ ai_gen_id }}');
        this.prevButton = this.querySelector('.ai-product-media-nav-prev-{{ ai_gen_id }}');
        this.nextButton = this.querySelector('.ai-product-media-nav-next-{{ ai_gen_id }}');
        this.counter = this.querySelector('.ai-product-media-current-{{ ai_gen_id }}');
        this.zoomButton = this.querySelector('.ai-product-media-zoom-{{ ai_gen_id }}');

        this.setupEventListeners();
      }

      setupEventListeners() {
        this.thumbnails.forEach((thumbnail, index) => {
          thumbnail.addEventListener('click', () => {
            this.showMedia(index);
          });
        });

        if (this.prevButton) {
          this.prevButton.addEventListener('click', () => {
            this.showPrevious();
          });
        }

        if (this.nextButton) {
          this.nextButton.addEventListener('click', () => {
            this.showNext();
          });
        }

        if (this.zoomButton) {
          this.zoomButton.addEventListener('click', () => {
            this.zoomImage();
          });
        }

        document.addEventListener('keydown', (e) => {
          if (e.key === 'ArrowLeft') {
            this.showPrevious();
          } else if (e.key === 'ArrowRight') {
            this.showNext();
          }
        });
      }

      showMedia(index) {
        this.mediaItems.forEach((item, i) => {
          item.style.display = i === index ? 'block' : 'none';
        });

        this.thumbnails.forEach((thumbnail, i) => {
          thumbnail.classList.toggle('active', i === index);
        });

        this.currentIndex = index;

        if (this.counter) {
          this.counter.textContent = index + 1;
        }

        this.pauseAllVideos();
      }

      showPrevious() {
        const newIndex = this.currentIndex === 0 ? this.mediaItems.length - 1 : this.currentIndex - 1;
        this.showMedia(newIndex);
      }

      showNext() {
        const newIndex = this.currentIndex === this.mediaItems.length - 1 ? 0 : this.currentIndex + 1;
        this.showMedia(newIndex);
      }

      pauseAllVideos() {
        this.querySelectorAll('video').forEach((video) => {
          video.pause();
        });
      }

      zoomImage() {
        const currentMedia = this.mediaItems[this.currentIndex];
        const img = currentMedia.querySelector('img');
        if (img) {
          const modal = document.createElement('div');
          modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; cursor: zoom-out;';
          
          const zoomedImg = img.cloneNode();
          zoomedImg.style.cssText = 'max-width: 90%; max-height: 90%; object-fit: contain;';
          
          modal.appendChild(zoomedImg);
          document.body.appendChild(modal);
          
          modal.addEventListener('click', () => {
            document.body.removeChild(modal);
          });
        }
      }
    }

    customElements.define('product-media-gallery-{{ ai_gen_id }}', ProductMediaGallery{{ ai_gen_id }});
  })();
</script>

{% schema %}
{
  "name": "Product media",
  "settings": [
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "spacing",
      "min": 0,
      "max": 40,
      "step": 4,
      "unit": "px",
      "label": "Spacing",
      "default": 16
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 8
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background",
      "default": "#f5f5f5"
    },
    {
      "type": "header",
      "content": "Thumbnails"
    },
    {
      "type": "checkbox",
      "id": "show_thumbnails",
      "label": "Show thumbnails",
      "default": true
    },
    {
      "type": "range",
      "id": "thumbnails_per_row",
      "min": 3,
      "max": 8,
      "step": 1,
      "label": "Thumbnails per row",
      "default": 5
    },
    {
      "type": "range",
      "id": "thumbnails_per_row_mobile",
      "min": 3,
      "max": 6,
      "step": 1,
      "label": "Thumbnails per row on mobile",
      "default": 4
    },
    {
      "type": "range",
      "id": "thumbnail_spacing",
      "min": 4,
      "max": 24,
      "step": 2,
      "unit": "px",
      "label": "Thumbnail spacing",
      "default": 8
    },
    {
      "type": "range",
      "id": "thumbnail_border_radius",
      "min": 0,
      "max": 16,
      "step": 2,
      "unit": "px",
      "label": "Thumbnail border radius",
      "default": 4
    },
    {
      "type": "color",
      "id": "thumbnail_background",
      "label": "Thumbnail background",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "active_thumbnail_border",
      "label": "Active thumbnail border",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Controls"
    },
    {
      "type": "checkbox",
      "id": "show_navigation",
      "label": "Show navigation arrows",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_counter",
      "label": "Show counter",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_zoom",
      "label": "Show zoom button",
      "default": true
    },
    {
      "type": "color",
      "id": "nav_button_background",
      "label": "Navigation button background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "nav_button_hover",
      "label": "Navigation button hover",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "nav_button_icon",
      "label": "Navigation button icon",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "zoom_button_background",
      "label": "Zoom button background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "zoom_button_hover",
      "label": "Zoom button hover",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "zoom_button_icon",
      "label": "Zoom button icon",
      "default": "#000000"
    }
  ],
  "presets": [
    {
      "name": "Product media"
    }
  ]
}
{% endschema %}
