{% comment %}
  Wishlist Go — Product Wishlist Button Block
  Handles HTML placement for themes that support product section blocks (OS 2.0).
  icon_style and stroke_width are centralised in the app-embed (#wl-root).
  All other settings (button style, colors, labels) live in the
  "Wishlist Go Product Button" app embed (#wl-product-embed).
{% endcomment %}

{% assign handle = product.handle %}

<button
  class="wl-product-btn wl-product-btn--block"
  data-handle="{{ handle }}"
  aria-label="Add to wishlist"
  aria-pressed="false"
  {{ block.shopify_attributes }}
>
  <span class="wl-product-btn__icon">
    <svg id="wl-product-block-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
         width="20"
         height="20"
         aria-hidden="true"
         focusable="false">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
    </svg>
  </span>
  <span class="wl-product-btn__text">Add to Wishlist</span>
</button>

<script>
(function () {
  var handle = {{ handle | json }};
  if (!handle) return;

  var btn   = document.querySelector('.wl-product-btn[data-handle="{{ handle }}"]');
  if (!btn) return;

  var textEl = btn.querySelector('.wl-product-btn__text');
  var svgEl  = btn.querySelector('svg');

  function getEmbed()  { return document.getElementById('wl-product-embed'); }
  function getRootEl() { return document.getElementById('wl-root'); }

  // ── Apply styles from embed settings ─────────────────────────────────────
  function applyEmbedStyles() {
    var embed  = getEmbed();
    var rootEl = getRootEl();
    if (!embed) return;

    // Centralised settings
    var iconStyle   = (rootEl && rootEl.dataset.iconStyle)   || 'heart';
    var strokeWidth = (rootEl && rootEl.dataset.strokeWidth) || '2';

    var buttonStyle      = embed.dataset.buttonStyle || 'inline';
    var labelAdd         = embed.dataset.labelAdd || 'Add to Wishlist';
    var iconColor        = embed.dataset.iconColor || '#111111';
    var iconHoverColor   = embed.dataset.iconHoverColor || '#333333';
    var activeColor      = embed.dataset.activeColor || '#e53e3e';
    var bgColor          = embed.dataset.buttonBgColor || '#ffffff';
    var textColor        = embed.dataset.buttonTextColor || '#111111';
    var borderColor      = embed.dataset.buttonBorderColor || '#111111';
    var bw               = embed.dataset.borderWidth || '2';
    var br               = embed.dataset.borderRadius || '4';
    var hoverBg          = embed.dataset.buttonHoverBgColor || '#111111';
    var hoverText        = embed.dataset.buttonHoverTextColor || '#ffffff';
    var activeBg         = embed.dataset.activeBgColor || '#fff0f0';
    var activeText       = embed.dataset.activeTextColor || '#e53e3e';
    var activeBorder     = embed.dataset.activeBorderColor || '#e53e3e';
    var paddingTop       = embed.dataset.paddingTop || '0';
    var paddingRight     = embed.dataset.paddingRight || '0';
    var paddingBottom    = embed.dataset.paddingBottom || '0';
    var paddingLeft      = embed.dataset.paddingLeft || '0';
    var isFull           = buttonStyle === 'full';

    // Update button class
    btn.className = 'wl-product-btn wl-product-btn--' + buttonStyle + ' wl-product-btn--block';

    // Update icon path and stroke
    var HEART_PATH    = 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z';
    var BOOKMARK_PATH = 'M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z';
    if (svgEl) {
      svgEl.querySelector('path').setAttribute('d', iconStyle === 'bookmark' ? BOOKMARK_PATH : HEART_PATH);
      svgEl.setAttribute('stroke-width', strokeWidth);
    }

    // Update label
    if (textEl) textEl.textContent = labelAdd;

    // Apply styles
    if (isFull) {
      btn.style.cssText = [
        'display:flex', 'align-items:center', 'justify-content:center',
        'gap:8px', 'width:100%', 'cursor:pointer',
        'padding:' + paddingTop + 'px ' + paddingRight + 'px ' + paddingBottom + 'px ' + paddingLeft + 'px',
        'border:' + bw + 'px solid ' + borderColor,
        'border-radius:' + br + 'px',
        'background:' + bgColor,
        'color:' + textColor,
        'font-size:inherit', 'font-weight:inherit',
        'transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease'
      ].join(';');
      btn.addEventListener('mouseenter', function () {
        if (!btn.classList.contains('wl-product-btn--active')) {
          btn.style.background = hoverBg;
          btn.style.color = hoverText;
        }
      });
      btn.addEventListener('mouseleave', function () {
        if (!btn.classList.contains('wl-product-btn--active')) {
          btn.style.background = bgColor;
          btn.style.color = textColor;
        }
      });
      // Store for syncState
      btn._activeBg     = activeBg;
      btn._activeText   = activeText;
      btn._activeBorder = activeBorder;
      btn._bgColor      = bgColor;
      btn._textColor    = textColor;
      btn._borderColor  = borderColor;
    } else {
      btn.style.cssText = [
        'display:inline-flex', 'align-items:center', 'gap:8px',
        'background:none', 'border:none', 'cursor:pointer',
        'padding:' + paddingTop + 'px ' + paddingRight + 'px ' + paddingBottom + 'px ' + paddingLeft + 'px',
        'color:' + iconColor,
        'font-size:inherit', 'font-weight:inherit',
        'transition:color 0.15s ease'
      ].join(';');
      btn.addEventListener('mouseenter', function () {
        if (!btn.classList.contains('wl-product-btn--active')) btn.style.color = iconHoverColor;
      });
      btn.addEventListener('mouseleave', function () {
        if (!btn.classList.contains('wl-product-btn--active')) btn.style.color = iconColor;
      });
      // Store for syncState
      btn._iconColor   = iconColor;
      btn._activeColor = activeColor;
    }

    btn._isFull = isFull;
  }

  // ── Sync wishlist state ───────────────────────────────────────────────────
  function syncState() {
    if (!window.Wishlist) return;
    var embed      = getEmbed();
    var inList     = window.Wishlist.hasByHandle(handle);
    var labelAdd   = (embed && embed.dataset.labelAdd)   || 'Add to Wishlist';
    var labelAdded = (embed && embed.dataset.labelAdded) || 'Added to Wishlist';

    btn.classList.toggle('wl-product-btn--active', inList);
    btn.setAttribute('aria-pressed', String(inList));
    btn.setAttribute('aria-label', inList ? 'Remove from wishlist' : 'Add to wishlist');
    if (textEl) textEl.textContent = inList ? labelAdded : labelAdd;
    if (svgEl)  svgEl.setAttribute('fill', inList ? 'currentColor' : 'none');

    if (btn._isFull) {
      btn.style.background  = inList ? btn._activeBg     : btn._bgColor;
      btn.style.color       = inList ? btn._activeText   : btn._textColor;
      btn.style.borderColor = inList ? btn._activeBorder : btn._borderColor;
    } else {
      btn.style.color = inList ? btn._activeColor : btn._iconColor;
    }
  }

  // ── Click handler ─────────────────────────────────────────────────────────
  async function handleClick() {
    if (!window.Wishlist) return;
    btn.style.opacity = '0.6';
    btn.style.pointerEvents = 'none';
    try {
      await window.Wishlist.toggle(handle);
      syncState();
    } catch (err) {
      console.error('[Wishlist] Block button toggle failed:', err);
    } finally {
      btn.style.opacity = '';
      btn.style.pointerEvents = '';
    }
  }

  // ── Init ─────────────────────────────────────────────────────────────────
  function init() {
    applyEmbedStyles();
    syncState();
    btn.addEventListener('click', handleClick);
    document.addEventListener('wishlist:add',    syncState);
    document.addEventListener('wishlist:remove', syncState);
    document.addEventListener('wishlist:sync',   syncState);
  }

  if (window.Wishlist) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();
</script>

{% schema %}
{
  "name": "Wishlist Button",
  "target": "section",
  "enabled_on": {
    "templates": ["product"]
  },
  "settings": []
}
{% endschema %}