(function () {
  const previewBase = document.body.getAttribute('data-preview-base') || '';
  const inEditorFrame = document.body.classList.contains('is-editor') && window.parent && window.parent !== window;

  // Slideshow: autoplay + controale.
  document.querySelectorAll('[data-sg-slideshow]').forEach((root) => {
    const slides = Array.from(root.querySelectorAll('[data-sg-slide]'));
    const dots = Array.from(root.querySelectorAll('[data-sg-slide-dot]'));
    if (slides.length < 2) return;
    let index = 0;
    let timer = null;
    const go = (next) => {
      index = (next + slides.length) % slides.length;
      slides.forEach((s, i) => s.classList.toggle('is-active', i === index));
      dots.forEach((d, i) => d.classList.toggle('is-active', i === index));
    };
    const speed = parseInt(root.getAttribute('data-sg-autoplay') || '0', 10);
    const restart = () => {
      if (!speed) return;
      if (timer) clearInterval(timer);
      timer = setInterval(() => go(index + 1), speed * 1000);
    };
    root.addEventListener('click', (e) => {
      if (e.target.closest('[data-sg-slide-prev]')) { go(index - 1); restart(); }
      else if (e.target.closest('[data-sg-slide-next]')) { go(index + 1); restart(); }
      else {
        const dot = e.target.closest('[data-sg-slide-dot]');
        if (dot) { go(parseInt(dot.getAttribute('data-sg-slide-dot'), 10) || 0); restart(); }
      }
    });
    restart();
  });

  const galleryImages = (gallery) => Array.from(gallery.querySelectorAll('.sg-gallery__img'));
  const galleryThumbs = (gallery) => Array.from(gallery.querySelectorAll('[data-sg-thumb]'));
  const galleryIndex = (gallery) => {
    const imgs = galleryImages(gallery);
    const current = imgs.findIndex((img) => img.classList.contains('is-active'));
    return current < 0 ? 0 : current;
  };
  const thumbsTrack = (gallery) => gallery.querySelector('[data-sg-thumbs-track]');
  const syncThumbsNav = (gallery) => {
    const track = thumbsTrack(gallery);
    const prev = gallery.querySelector('[data-sg-thumbs-prev]');
    const next = gallery.querySelector('[data-sg-thumbs-next]');
    if (!track || (!prev && !next)) return;
    const max = track.scrollWidth - track.clientWidth;
    const canScroll = max > 4;
    if (prev) prev.hidden = !canScroll || track.scrollLeft <= 4;
    if (next) next.hidden = !canScroll || track.scrollLeft >= max - 4;
  };
  const scrollThumbs = (gallery, dir) => {
    const track = thumbsTrack(gallery);
    if (!track) return;
    const step = Math.round(track.clientWidth * 0.85) || 240;
    track.scrollBy({ left: dir * step, behavior: 'smooth' });
  };
  const activateGallery = (gallery, index) => {
    const imgs = galleryImages(gallery);
    if (!imgs.length) return;
    const next = ((index % imgs.length) + imgs.length) % imgs.length;
    imgs.forEach((img, i) => img.classList.toggle('is-active', i === next));
    galleryThumbs(gallery).forEach((thumb, i) => {
      const media = thumb.getAttribute('data-sg-thumb');
      const match = media
        ? imgs[next] && imgs[next].getAttribute('data-sg-media') === media
        : i === next;
      thumb.classList.toggle('is-active', match);
      if (match) {
        const box = thumb.closest('[data-sg-thumbs-track]') || thumb.closest('.sg-gallery__thumbs');
        if (box) {
          const left = thumb.offsetLeft - box.clientWidth / 2 + thumb.offsetWidth / 2;
          const top = thumb.offsetTop - box.clientHeight / 2 + thumb.offsetHeight / 2;
          box.scrollTo({
            left: Math.max(0, left),
            top: Math.max(0, top),
            behavior: 'smooth',
          });
        }
      }
    });
    gallery.querySelectorAll('[data-sg-gallery-dot]').forEach((dot, i) => {
      dot.classList.toggle('is-active', i === next);
    });
    syncThumbsNav(gallery);
  };
  const stepGallery = (gallery, delta) => activateGallery(gallery, galleryIndex(gallery) + delta);

  document.querySelectorAll('[data-sg-gallery]').forEach((gallery) => {
    const track = thumbsTrack(gallery);
    if (track) {
      track.addEventListener('scroll', () => syncThumbsNav(gallery), { passive: true });
      syncThumbsNav(gallery);
    }
    if (!gallery.classList.contains('sg-gallery--slideshow')) return;
    const main = gallery.querySelector('.sg-gallery__stage') || gallery.querySelector('.sg-gallery__main');
    if (!main || galleryImages(gallery).length < 2) return;
    let startX = null;
    main.addEventListener('touchstart', (event) => {
      startX = event.changedTouches[0].clientX;
    }, { passive: true });
    main.addEventListener('touchend', (event) => {
      if (startX == null) return;
      const dx = event.changedTouches[0].clientX - startX;
      startX = null;
      if (Math.abs(dx) < 48) return;
      stepGallery(gallery, dx < 0 ? 1 : -1);
    }, { passive: true });
  });
  window.addEventListener('resize', () => {
    document.querySelectorAll('[data-sg-gallery]').forEach((gallery) => syncThumbsNav(gallery));
  });

  const clampQty = (input) => {
    const max = parseInt(input.getAttribute('max') || '0', 10);
    let val = parseInt(input.value, 10);
    if (Number.isNaN(val)) val = 1;
    if (max > 0) val = Math.min(max, val);
    input.value = String(Math.max(1, val));
  };
  document.addEventListener('input', (event) => {
    if (event.target.matches && event.target.matches('.sg-qty input')) clampQty(event.target);
  });
  document.addEventListener('change', (event) => {
    if (event.target.matches && event.target.matches('.sg-qty input')) clampQty(event.target);
  });

  // În editor: bară de acțiuni pe secțiunea peste care e mouse-ul (ascunde / șterge).
  if (inEditorFrame) {
    const bar = document.createElement('div');
    bar.className = 'sg-editor-bar';
    bar.innerHTML =
      '<button type="button" data-sg-act="remove" title="Șterge">' +
      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><path d="M4 7h16M9 7V5h6v2M6.5 7l1 13h9l1-13M10 11v6M14 11v6"/></svg></button>' +
      '<button type="button" data-sg-act="hide" title="Ascunde">' +
      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="16" height="16"><path d="M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12z"/><circle cx="12" cy="12" r="2.8"/></svg></button>';
    bar.style.display = 'none';
    document.body.appendChild(bar);
    let barSection = null;

    document.addEventListener('mouseover', (event) => {
      const section = event.target.closest('[data-sg-section]');
      if (section) {
        barSection = section.getAttribute('data-sg-section');
        const rect = section.getBoundingClientRect();
        bar.style.display = 'flex';
        bar.style.top = Math.max(4, rect.top + window.scrollY + 6) + 'px';
        bar.style.left = rect.right - bar.offsetWidth - 6 + window.scrollX + 'px';
      } else if (!event.target.closest('.sg-editor-bar')) {
        bar.style.display = 'none';
      }
    });

    bar.addEventListener('click', (event) => {
      event.stopPropagation();
      const btn = event.target.closest('[data-sg-act]');
      if (!btn || !barSection) return;
      const type = btn.getAttribute('data-sg-act') === 'remove' ? 'sg-remove-section' : 'sg-toggle-section';
      window.parent.postMessage({ type, id: barSection }, '*');
    });
  }

  const openLightbox = (src) => {
    const overlay = document.createElement('div');
    overlay.className = 'sg-lightbox';
    overlay.innerHTML = '<img src="' + src + '" alt=""><button type="button" aria-label="Închide">×</button>';
    overlay.addEventListener('click', () => overlay.remove());
    document.body.appendChild(overlay);
  };

  document.addEventListener('click', (event) => {
    // Cantitate +/- (limitată la stocul disponibil prin atributul max).
    const qty = event.target.closest('[data-sg-qty]');
    if (qty) {
      const input = qty.parentElement.querySelector('input');
      if (input) {
        const step = parseInt(qty.getAttribute('data-sg-qty'), 10) || 1;
        const max = parseInt(input.getAttribute('max') || '0', 10);
        let next = (parseInt(input.value, 10) || 1) + step;
        if (max > 0) next = Math.min(max, next);
        input.value = Math.max(1, next);
      }
      return;
    }

    const menuOpen = event.target.closest('[data-sg-menu-open]');
    if (menuOpen) {
      event.preventDefault();
      document.body.classList.add('sg-menu-open');
      return;
    }
    const menuClose = event.target.closest('[data-sg-menu-close]');
    if (menuClose) {
      event.preventDefault();
      document.body.classList.remove('sg-menu-open');
      return;
    }

    const thumbsNav = event.target.closest('[data-sg-thumbs-prev], [data-sg-thumbs-next]');
    if (thumbsNav) {
      event.preventDefault();
      const gallery = thumbsNav.closest('[data-sg-gallery]');
      if (gallery) scrollThumbs(gallery, thumbsNav.hasAttribute('data-sg-thumbs-next') ? 1 : -1);
      return;
    }

    const galleryNav = event.target.closest('[data-sg-gallery-prev], [data-sg-gallery-next]');
    if (galleryNav) {
      event.preventDefault();
      const gallery = galleryNav.closest('[data-sg-gallery]');
      if (gallery) stepGallery(gallery, galleryNav.hasAttribute('data-sg-gallery-next') ? 1 : -1);
      return;
    }

    const galleryDot = event.target.closest('[data-sg-gallery-dot]');
    if (galleryDot) {
      event.preventDefault();
      const gallery = galleryDot.closest('[data-sg-gallery]');
      if (gallery) activateGallery(gallery, parseInt(galleryDot.getAttribute('data-sg-gallery-dot') || '0', 10));
      return;
    }

    // Miniaturi galerie produs.
    const thumb = event.target.closest('[data-sg-thumb]');
    if (thumb) {
      event.preventDefault();
      const gallery = thumb.closest('[data-sg-gallery]') || thumb.closest('.sg-gallery');
      const thumbs = Array.from(gallery.querySelectorAll('[data-sg-thumb]'));
      activateGallery(gallery, thumbs.indexOf(thumb));
      return;
    }

    // Pastile variante (vizual).
    const pill = event.target.closest('[data-sg-pill]');
    if (pill) {
      event.preventDefault();
      pill.parentElement.querySelectorAll('[data-sg-pill]').forEach((b) => b.classList.toggle('is-active', b === pill));
      return;
    }

    // Zoom lightbox pe imaginea de produs.
    const zoom = event.target.closest('[data-sg-zoom]');
    if (zoom && !inEditorFrame) {
      event.preventDefault();
      openLightbox(zoom.getAttribute('src'));
      return;
    }

    if (event.target.closest('[data-sg-slideshow] button')) return;

    const section = event.target.closest('[data-sg-section]');
    if (inEditorFrame && section) {
      event.preventDefault();
      window.parent.postMessage({ type: 'sg-select-section', id: section.getAttribute('data-sg-section') }, '*');
      return;
    }

    if (!previewBase || inEditorFrame) return;
    const link = event.target.closest('a[href]');
    if (!link) return;
    const href = link.getAttribute('href') || '';
    if (/^(https?:)?\/\//.test(href) || href.startsWith('mailto:') || href.startsWith('#')) return;
    if (href.startsWith(previewBase)) return;

    const path = href.split('?')[0];
    let next = '';
    const product = path.match(/^\/products\/([^/]+)/);
    const collection = path.match(/^\/collections\/([^/]+)/);
    const page = path.match(/^\/pages\/([^/]+)/);
    if (product) next = previewBase + '?template=product&handle=' + encodeURIComponent(product[1]);
    else if (collection) next = previewBase + '?template=collection&handle=' + encodeURIComponent(collection[1]);
    else if (page) next = previewBase + '?template=page&handle=' + encodeURIComponent(page[1]);
    else if (path === '/cart') next = previewBase + '?template=cart';
    else if (path === '/search') next = previewBase + '?template=search';
    else if (path === '/collections') next = previewBase + '?template=list-collections';
    else if (path === '/' || path === '/account') {
      next = previewBase + '?template=index';
    }
    if (next) {
      event.preventDefault();
      window.location.href = next;
    }
  });
})();