{% comment %} Wishlist Go — Header Icon Embed (sitewide, all header icon settings live here) {% endcomment %}

<div
  id="wl-header-embed"
  data-icon-size="{{ block.settings.icon_size }}"
  data-icon-color="{{ block.settings.icon_color }}"
  data-icon-hover-color="{{ block.settings.icon_hover_color }}"
  data-badge-color="{{ block.settings.badge_color }}"
  data-badge-text-color="{{ block.settings.badge_text_color }}"
  data-custom-selector-enabled="{{ block.settings.enable_custom_selector }}"
  data-custom-selector="{{ block.settings.custom_selector | escape }}"
  data-custom-selector-mode="{{ block.settings.custom_selector_mode | escape }}"
  style="display:none;"
></div>

<style>
  #wl-header-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: {{ block.settings.icon_color }};
    transition: color 0.15s ease;
    line-height: 1;
  }

  #wl-header-btn:hover {
    color: {{ block.settings.icon_hover_color }};
  }

  #wl-header-btn svg {
    width: {{ block.settings.icon_size }}px;
    height: {{ block.settings.icon_size }}px;
    display: block;
  }

  #wl-header-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: {{ block.settings.badge_color }};
    color: {{ block.settings.badge_text_color }};
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
  }
</style>

<script>
(function () {

  var embedEl = document.getElementById('wl-header-embed');
  if (!embedEl) return;

  // ── Read settings — icon_style and stroke_width come from the
  //    centralised app-embed #wl-root element ────────────────────────────────
  var rootEl             = document.getElementById('wl-root');
  var iconStyle          = (rootEl && rootEl.dataset.iconStyle)    || 'heart';
  var strokeWidth        = (rootEl && rootEl.dataset.strokeWidth)  || '2';

  var iconSize           = embedEl.dataset.iconSize || '24';
  var iconColor          = embedEl.dataset.iconColor || '#111111';
  var iconHoverColor     = embedEl.dataset.iconHoverColor || '#333333';
  var badgeColor         = embedEl.dataset.badgeColor || '#e53e3e';
  var badgeTextColor     = embedEl.dataset.badgeTextColor || '#ffffff';
  var customSelectorEnabled = embedEl.dataset.customSelectorEnabled === 'true';
  var customSelector     = embedEl.dataset.customSelector || '';
  var customSelectorMode = embedEl.dataset.customSelectorMode || 'event_only';

  // ── SVG icons ─────────────────────────────────────────────────────────────
  var HEART_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"'
    + ' stroke="currentColor" stroke-width="' + strokeWidth + '" stroke-linecap="round" stroke-linejoin="round"'
    + ' 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>';

  var BOOKMARK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"'
    + ' stroke="currentColor" stroke-width="' + strokeWidth + '" stroke-linecap="round" stroke-linejoin="round"'
    + ' aria-hidden="true" focusable="false">'
    + '<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>'
    + '</svg>';

  var iconSVG = iconStyle === 'bookmark' ? BOOKMARK_SVG : HEART_SVG;

  // ── Badge HTML ─────────────────────────────────────────────────────────────
  var BADGE_HTML = '<span id="wl-header-count" style="display:none;" aria-hidden="true"></span>'
    + '<span class="visually-hidden" id="wl-header-count-sr"></span>';

  // ── Build the injected button ──────────────────────────────────────────────
  function buildButton() {
    var btn = document.createElement('button');
    btn.id = 'wl-header-btn';
    btn.setAttribute('aria-label', 'Open wishlist');
    btn.setAttribute('aria-haspopup', 'dialog');
    btn.innerHTML = iconSVG + BADGE_HTML;
    btn.addEventListener('click', function () {
      window.WishlistUI && window.WishlistUI.open();
    });
    return btn;
  }

  // ── Badge updater ──────────────────────────────────────────────────────────
  function updateHeaderCount() {
    var badge = document.getElementById('wl-header-count');
    var sr    = document.getElementById('wl-header-count-sr');
    if (!badge || !window.Wishlist) return;
    var n = window.Wishlist.count();
    if (n > 0) {
      var display = n > 99 ? '99+' : String(n);
      badge.textContent = display;
      if (sr) sr.textContent = display + (n === 1 ? ' item' : ' items');
      badge.style.display = '';
    } else {
      badge.style.display = 'none';
    }
  }

  function bindBadgeEvents() {
    document.addEventListener('wishlist:add',    updateHeaderCount);
    document.addEventListener('wishlist:remove', updateHeaderCount);
    document.addEventListener('wishlist:clear',  updateHeaderCount);
    document.addEventListener('wishlist:sync',   updateHeaderCount);
  }

  // ── Custom selector handling ───────────────────────────────────────────────
  function handleCustomSelector() {
    if (!customSelectorEnabled || !customSelector) return;

    var target = document.querySelector(customSelector);
    if (!target) {
      console.warn('[Wishlist] Header embed: custom selector "' + customSelector + '" not found.');
      return;
    }

    if (customSelectorMode === 'inject_button') {
      var btn = buildButton();
      target.appendChild(btn);
      console.log('[Wishlist] Header icon injected into "' + customSelector + '"');
    } else {
      target.addEventListener('click', function () {
        window.WishlistUI && window.WishlistUI.open();
      });
      console.log('[Wishlist] Wishlist open event attached to "' + customSelector + '"');
    }
  }

  // ── Init ──────────────────────────────────────────────────────────────────
  function init() {
    var blockBtn = document.getElementById('wl-header-btn');
    if (!blockBtn) {
      handleCustomSelector();
    }
    updateHeaderCount();
    bindBadgeEvents();
  }

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

})();
</script>

{% schema %}
{
  "name": "Wishlist Go Header Icon",
  "target": "body",
  "settings": [
    {
      "type": "header",
      "content": "Icon"
    },
    {
      "type": "range",
      "id": "icon_size",
      "label": "Icon size",
      "min": 16,
      "max": 40,
      "step": 2,
      "default": 24,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "icon_color",
      "label": "Icon color",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "icon_hover_color",
      "label": "Icon hover color",
      "default": "#333333"
    },
    {
      "type": "header",
      "content": "Badge"
    },
    {
      "type": "color",
      "id": "badge_color",
      "label": "Badge background color",
      "default": "#e53e3e"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Badge text color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Custom Selector"
    },
    {
      "type": "checkbox",
      "id": "enable_custom_selector",
      "label": "Enable custom selector",
      "default": false,
      "info": "Use this for themes that don't support blocks in the header (e.g. Horizon). Enter a CSS selector to target your header's icon area."
    },
    {
      "type": "text",
      "id": "custom_selector",
      "label": "CSS selector",
      "placeholder": ".header__icons, .site-nav__icons",
      "info": "The CSS selector of the element in your header to target.",
      "visible_if": "{{ block.settings.enable_custom_selector == true }}"
    },
    {
      "type": "select",
      "id": "custom_selector_mode",
      "label": "Mode",
      "options": [
        { "value": "event_only",     "label": "Event only (attach click to existing element)" },
        { "value": "inject_button",  "label": "Inject icon button into element" }
      ],
      "default": "event_only",
      "info": "Event only: your theme element opens the wishlist on click. Inject: our icon button is added inside the selected element.",
      "visible_if": "{{ block.settings.enable_custom_selector == true }}"
    }
  ]
}
{% endschema %}