{%- comment -%}
  Auto Discount Display — standalone snippet

  Use this snippet on themes where Shopify's Theme App Extension injection
  doesn't run reliably, e.g. page builders like Instant, Replo, Shogun,
  PageFly, GemPages, or any custom rendering pipeline that bypasses
  content_for_header.

  Install:
    1. Place this file in your theme's snippets/ folder.
    2. Add a single render tag to layout/theme.liquid, near </body>:
         {% raw %}{% render 'auto-discount-display' %}{% endraw %}
    3. Open the Auto Discount Display app and click "Sync discounts" once
       so the public metafield this snippet reads from is populated.

  This snippet reads from the public namespace
  shop.metafields['auto_discount_display']['discount_rules'] (not the $app
  namespace, which is only readable from within the Theme App Extension).

  The display logic is inlined below rather than loaded from a CDN URL,
  so the snippet stays in sync with the deployed app version automatically
  and does not depend on a versioned asset path.
{%- endcomment -%}
{%- assign rules_meta = shop.metafields['auto_discount_display']['discount_rules'] -%}
{%- if rules_meta and rules_meta.value.enabled -%}
  {%- assign should_run = false -%}
  {%- if request.page_type == 'product' -%}
    <script>
      window.AutoDiscountDisplay = {
        rules: {{ rules_meta.value | json }},
        context: {
          type: 'product',
          productId: '{{ product.id }}',
          collectionIds: [{% for c in product.collections %}'{{ c.id }}'{% unless forloop.last %},{% endunless %}{% endfor %}],
          variantPrices: {
            {%- for variant in product.variants -%}
              '{{ variant.id }}': {
                price: {{ variant.price }},
                compareAtPrice: {% if variant.compare_at_price %}{{ variant.compare_at_price }}{% else %}null{% endif %}
              }{% unless forloop.last %},{% endunless %}
            {%- endfor -%}
          },
          selectedVariantId: '{{ product.selected_or_first_available_variant.id }}',
          moneyFormat: {{ shop.money_format | json }},
          currency: {{ shop.currency | json }},
          badgeBg: {{ rules_meta.value.badgeBg | json }},
          badgeColor: {{ rules_meta.value.badgeColor | json }}
        }
      };
    </script>
    {%- assign should_run = true -%}
  {%- elsif request.page_type == 'collection' or request.page_type == 'index' -%}
    <script>
      window.AutoDiscountDisplay = {
        rules: {{ rules_meta.value | json }},
        context: {
          type: 'collection',
          collectionId: '{{ collection.id }}',
          moneyFormat: {{ shop.money_format | json }},
          currency: {{ shop.currency | json }},
          badgeBg: {{ rules_meta.value.badgeBg | json }},
          badgeColor: {{ rules_meta.value.badgeColor | json }}
        }
      };
    </script>
    {%- assign should_run = true -%}
  {%- endif -%}

  {%- if should_run -%}
    <script>
{% raw %}
(() => {
  //
  if (document.querySelector('.add-disc')) return;
  if (window.__addLoaded) return;
  window.__addLoaded = true;

  try {
    const cfg = window.AutoDiscountDisplay;
    if (!cfg || !cfg.rules || !cfg.context) return;

    const { rules, context: ctx } = cfg;
    if (!rules.enabled || !Array.isArray(rules.discounts) || rules.discounts.length === 0) return;

    // ── Discount matching ────────────────────────────────────────────────────
    // findApplicableDiscounts returns the single discount producing the lowest
    // price, wrapped in an array to keep all call sites uniform.
    // Shopify applies at most one product discount per line item — the best one wins.
    // combinesWith.productDiscounts controls whether this discount stacks with ORDER-level
    // and shipping discounts, not with other product discounts. Our single-best-wins
    // logic is therefore exactly consistent with Shopify checkout behavior.
    const blockedSet = new Set(rules.blockedIds || []);
    const now = Date.now();

    function isExpired(d) {
      return d.endsAt !== null && new Date(d.endsAt).getTime() < now;
    }

    function discountMatches(d, productId, collectionIds, handle) {
      const at = d.appliesTo;
      if (at.all) return true;
      if (handle && at.productHandles?.[handle]) return true;
      if (at.productIds?.length > 0 && productId && at.productIds.includes(productId)) return true;
      if (at.collectionIds?.length > 0 && collectionIds?.length > 0) {
        return at.collectionIds.some((id) => collectionIds.includes(id));
      }
      return false;
    }

    function findApplicableDiscounts(productId, collectionIds, handle, priceInCents) {
      const matching = rules.discounts.filter(d =>
        !blockedSet.has(d.id) &&
        !isExpired(d) &&
        discountMatches(d, productId, collectionIds, handle)
      );
      if (matching.length === 0) return [];

      let best = null;
      let lowestPrice = priceInCents;
      for (const d of matching) {
        const p = calcDiscounted(priceInCents, d);
        if (p < lowestPrice) { lowestPrice = p; best = d; }
      }
      return best ? [best] : [];
    }

    // Applies an array of discounts sequentially to a price in cents.
    function applyDiscounts(priceInCents, discounts) {
      return discounts.reduce((p, d) => calcDiscounted(p, d), priceInCents);
    }

    // ── Price math ───────────────────────────────────────────────────────────
    // All prices are integers in the store's lowest currency unit (cents).
    // Discount value: percentage stored as a number (e.g. 15 = 15%),
    //                 fixed_amount stored in major currency units (e.g. 10 = $10.00).
    function calcDiscounted(cents, d) {
      if (d.type === 'percentage') {
        return Math.ceil(cents * (1 - d.value / 100));
      }
      if (d.type === 'fixed_amount') {
        // Only apply when discount currency matches display currency.
        // Cross-currency would require live FX (CORS-blocked from storefront).
        if (!d.currencyCode || !ctx.currency || d.currencyCode !== ctx.currency) return cents;
        return Math.max(0, cents - Math.round(d.value * 100));
      }
      return cents;
    }

    // ── Money formatting ─────────────────────────────────────────────────────
    // Uses Shopify.formatMoney when available (included by most themes).
    // Falls back to manual substitution of the shop's money_format template string.
    function formatMoney(cents, fmt) {
      if (window.Shopify && typeof Shopify.formatMoney === 'function') {
        return Shopify.formatMoney(cents, fmt);
      }
      const amount = (cents / 100).toFixed(2);
      if (!fmt) return amount;
      return fmt
        .replace(/\{\{amount\}\}/g, amount)
        .replace(/\{\{amount_no_decimals\}\}/g, String(Math.round(cents / 100)))
        .replace(/\{\{amount_with_comma_separator\}\}/g, amount.replace('.', ','))
        .replace(/\{\{amount_no_decimals_with_comma_separator\}\}/g, String(Math.round(cents / 100)));
    }

    function formatDiscountValue(d, fmt) {
      if (d.type === 'percentage') return d.value + '%';
      return formatMoney(Math.round(d.value * 100), fmt);
    }

    // ── Parse displayed price text → cents ───────────────────────────────────
    // Used on collection pages where per-product server-side prices may not
    // be available for every visible card (e.g. products loaded via AJAX).
    function parseCents(text) {
      const raw = text.replace(/[^0-9.,]/g, '');
      if (!raw) return null;
      let n;
      const hasDot = raw.includes('.');
      const hasComma = raw.includes(',');
      if (hasDot && hasComma) {
        n = raw.lastIndexOf('.') > raw.lastIndexOf(',')
          ? parseFloat(raw.replace(/,/g, ''))             // 1,234.56
          : parseFloat(raw.replace(/\./g, '').replace(',', '.')); // 1.234,56
      } else if (hasComma) {
        const parts = raw.split(',');
        n = (parts.length === 2 && parts[1].length === 2)
          ? parseFloat(raw.replace(',', '.'))             // 10,99 → decimal comma
          : parseFloat(raw.replace(/,/g, ''));            // 1,234 → thousands separator
      } else {
        n = parseFloat(raw);
      }
      return isNaN(n) ? null : Math.round(n * 100);
    }

    // ── DOM injection ────────────────────────────────────────────────────────
    // Clears any previous injection first (so stale displays from a prior
    // variant never linger), then injects the new display if the discount
    // produces a visible price change.
    function injectDisplay(priceEl, origCents, discCents, fmt, discounts) {
      cleanupEl(priceEl);
      if (origCents <= 0 || origCents === discCents) return;

      priceEl.classList.add('add-orig');

      // Wrap priceEl + injected elements so a parent's text-align: center
      // doesn't apply to each child individually — the wrapper participates
      // in the parent's alignment as a single inline-flex unit.
      const wrapper = document.createElement('span');
      wrapper.className = 'add-wrap';
      priceEl.parentNode.insertBefore(wrapper, priceEl);
      wrapper.appendChild(priceEl);

      const span = document.createElement('span');
      span.className = 'add-disc';
      span.textContent = formatMoney(discCents, fmt);
      span.setAttribute('aria-label', 'Discounted price: ' + span.textContent);
      span.style.opacity = '0';
      wrapper.appendChild(span);
      requestAnimationFrame(() => { span.style.opacity = ''; });

      if (discounts && discounts.length > 0) {
        const labelText = discounts.length === 1
          ? discounts[0].title + ' · ' + formatDiscountValue(discounts[0], fmt) + ' off'
          : discounts.map(d => d.title + ' · ' + formatDiscountValue(d, fmt) + ' off').join(' · ');

        const label = document.createElement('span');
        label.className = 'add-label';
        label.style.setProperty('--add-badge-bg', ctx.badgeBg || '#000');
        label.style.setProperty('--add-badge-color', ctx.badgeColor || '#fff');

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', '12');
        svg.setAttribute('height', '12');
        svg.setAttribute('viewBox', '0 0 12 12');
        svg.setAttribute('aria-hidden', 'true');
        svg.style.cssText = 'vertical-align:-.1em;margin-right:.25em';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('clip-rule', 'evenodd');
        pathEl.setAttribute('d', 'M7 0h3a2 2 0 012 2v3a1 1 0 01-.3.7l-6 6a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4l6-6A1 1 0 017 0zm2 2a1 1 0 102 0 1 1 0 00-2 0z');
        pathEl.setAttribute('fill', 'currentColor');
        svg.appendChild(pathEl);
        label.appendChild(svg);
        label.appendChild(document.createTextNode(labelText));
        wrapper.appendChild(label);
      }
    }

    function cleanupEl(priceEl) {
      priceEl.classList.remove('add-orig');
      const parent = priceEl.parentElement;
      if (parent && parent.classList.contains('add-wrap')) {
        parent.parentNode.insertBefore(priceEl, parent);
        parent.remove();
        return;
      }
      const next = priceEl.nextElementSibling;
      if (next && next.classList.contains('add-disc')) {
        const afterDisc = next.nextElementSibling;
        if (afterDisc && afterDisc.classList.contains('add-label')) afterDisc.remove();
        next.remove();
      }
    }

    // ── Global styles (injected once per page) ───────────────────────────────
    if (!document.getElementById('add-styles')) {
      const s = document.createElement('style');
      s.id = 'add-styles';
      s.textContent =
        '.add-wrap{display:inline-flex;flex-wrap:wrap;align-items:baseline;text-align:left}' +
        '.add-wrap::after{content:"";flex-basis:100%;height:0;order:1}' +
        '.add-orig{text-decoration:line-through!important;opacity:.6!important;margin:0!important;padding:0!important;letter-spacing:normal!important}' +
        '.add-disc{display:inline-block;margin-left:.35em;vertical-align:baseline;transition:opacity .15s ease}' +
        '.add-label{display:flex;width:fit-content;align-items:center;gap:.3em;margin-top:.5em;padding:.15em .5em;border-radius:2em;font-size:.75em;background:var(--add-badge-bg,#000);color:var(--add-badge-color,#fff);order:2}';
      document.head.appendChild(s);
    }

    // ══ PRODUCT PAGE ══════════════════════════════════════════════════════════
    function initProduct() {
      const { productId, collectionIds = [], variantPrices = {}, selectedVariantId, moneyFormat } = ctx;
      const isEligible = rules.discounts.some(d => {
        if (blockedSet.has(d.id) || isExpired(d)) return false;
        return discountMatches(d, productId, collectionIds, undefined);
      });
      if (!isEligible) return;

      // Ordered from most-specific to most-generic; stops at first match.
      const PRICE_SELS = [
        '[data-product-price]',
        '.price-item--regular',
        '.price__regular .money',
        '.price__regular',
        '.product__price .money',
        '.product__price',
        'product-price span.price',
        'product-price .price',
        'span.price',
      ];

      // Scope all DOM searches to a container element to avoid injecting on
      // related-products recommendation cards or other unrelated price elements.
      // Quick view blocks pass ctx.scopeSelector so initProduct binds to the
      // modal's container instead of the main page's <product-info>.
      const scopeSel = ctx.scopeSelector || 'product-info';
      const productScope = document.querySelector(scopeSel) || document;

      function findPriceEl() {
        for (const sel of PRICE_SELS) {
          const els = productScope.querySelectorAll(sel);
          for (const el of els) {
            if (el.isConnected &&
                (el.offsetWidth > 0 || el.offsetHeight > 0)) return el;
          }
        }
        return null;
      }

      function getVariantId() {
        // URL is the most reliable source after section rendering completes.
        const param = new URLSearchParams(window.location.search).get('variant');
        if (param) return param;
        const input = document.querySelector('input[name="id"]');
        if (input?.value) return input.value;
        return selectedVariantId;
      }

      function findAllPriceEls() {
        for (const sel of PRICE_SELS) {
          const visible = [...productScope.querySelectorAll(sel)].filter(
            el => el.isConnected &&
                  (el.offsetWidth > 0 || el.offsetHeight > 0)
          );
          if (visible.length > 0) return visible;
        }
        return [];
      }

      function apply() {
        const vid = String(getVariantId());
        const priceData = variantPrices[vid];
        if (!priceData) return false;
        const priceEls = findAllPriceEls();
        if (priceEls.length === 0) return false;
        const discounts = findApplicableDiscounts(productId, collectionIds, undefined, priceData.price);
        if (discounts.length === 0) return false;
        const discCents = applyDiscounts(priceData.price, discounts);
        priceEls.forEach(el => {
          const priceContainer = el.closest('.price');
          const activeEl = priceContainer?.classList.contains('price--on-sale')
            ? (priceContainer.querySelector('.price-item--sale') || el)
            : el;
          injectDisplay(activeEl, priceData.price, discCents, moneyFormat, discounts);
        });
        return true;
      }

      apply();

      // Dawn's variant-radios renders radios with name="Color", "Size" etc. —
      // not name^="option". Listening at the container catches all option
      // changes regardless of the option name.
      const variantEl = document.querySelector('variant-radios, variant-selects');
      if (variantEl) {
        variantEl.addEventListener('change', () => setTimeout(apply, 20));
      }

      // Dawn updates the URL via history.replaceState on every variant switch,
      // before the section fetch completes. This fires apply() after the section
      // rendering has settled (250ms covers typical network latency for the fetch).
      const origReplaceState = history.replaceState.bind(history);
      history.replaceState = function(...args) {
        origReplaceState(...args);
        setTimeout(apply, 250);
      };

      // MO watches product-info for section-rendering DOM replacements.
      const moCfg = { childList: true, subtree: true, characterData: true };
      const mo = new MutationObserver(() => {
        mo.disconnect();
        if (!apply()) {
          setTimeout(() => { apply(); observe(); }, 50);
        } else {
          observe();
        }
      });

      function getContainer() {
        // Prefer product-info as the observation root so the MO catches
        // Dawn's section-rendering replacement of the entire product column.
        if (productScope !== document && productScope.isConnected) return productScope;
        const el = findPriceEl();
        if (!el) return null;
        return el.closest('.price-wrapper') ||
          el.closest('.price__container') ||
          el.closest('.product__info-container') ||
          el.parentElement;
      }

      function observe() {
        const c = getContainer();
        if (c) mo.observe(c, moCfg);
      }

      observe();
    }

    // ══ COLLECTION PAGE ═══════════════════════════════════════════════════════
    function initCollection() {
      const { collectionId = '', moneyFormat } = ctx;

      // Card-level price selectors, ordered most-specific first.
      const CARD_PRICE_SELS = [
        '.card__price .price-item--regular',
        '.card__price .money',
        '.card .price-item--regular',
        '.price-item--regular',
        '[data-product-price]',
        '.product-card__price .money',
        '.product__price .money',
        '.product__price',
        'span.price',
        '.price',
      ];

      function processCard(priceEl) {
        const link = priceEl.closest('a[href*="/products/"]') ||
          priceEl.closest('.card-wrapper')?.querySelector('a[href*="/products/"]') ||
          priceEl.closest('.product__info-container')?.querySelector('a[href*="/products/"]');
        let handle = null;
        if (link) {
          const match = link.getAttribute('href').match(/\/products\/([^?#/]+)/);
          if (match) handle = match[1];
        }

        const priceContainer = priceEl.closest('.price');
        const activePriceEl = priceContainer?.classList.contains('price--on-sale')
          ? (priceContainer.querySelector('.price-item--sale') || priceEl)
          : priceEl;

        const origCents = parseCents(activePriceEl.textContent);
        if (!origCents || origCents <= 0) return;

        const discounts = findApplicableDiscounts(null, [collectionId], handle, origCents);
        if (discounts.length === 0) return;
        const discCents = applyDiscounts(origCents, discounts);
        injectDisplay(activePriceEl, origCents, discCents, moneyFormat, discounts);
        priceContainer?.setAttribute('data-add-injected', '1');
      }

      let priceEls = null;
      for (const sel of CARD_PRICE_SELS) {
        const found = document.querySelectorAll(sel);
        if (found.length > 0) { priceEls = found; break; }
      }
      if (!priceEls || priceEls.length === 0) return;

      priceEls.forEach(processCard);

      // Watch for AJAX-loaded cards (infinite scroll, load-more, filtered views).
      let moTimer = null;
      const gridObserver = new MutationObserver(() => {
        clearTimeout(moTimer);
        moTimer = setTimeout(() => {
          gridObserver.disconnect();
          const seen = new Set();
          for (const sel of CARD_PRICE_SELS) {
            document.querySelectorAll(sel).forEach(el => {
              if (seen.has(el)) return;
              seen.add(el);
              const container = el.closest('.price');
              if (container?.getAttribute('data-add-injected') === '1') return;
              const activeEl = container?.classList.contains('price--on-sale')
                ? (container.querySelector('.price-item--sale') || el)
                : el;
              if (!activeEl.nextElementSibling?.classList.contains('add-disc')) {
                processCard(activeEl);
              }
            });
          }
          gridObserver.observe(document.body, { childList: true, subtree: true });
        }, 100);
      });
      gridObserver.observe(document.body, { childList: true, subtree: true });
    }

    // ══ CART PAGE ════════════════════════════════════════════════════════════
    function initCart() {
      const { items = [], moneyFormat } = ctx;
      if (items.length === 0) return;

      // Cart row wrappers — used to scope price element lookups per line item.
      const ROW_SELS = ['.cart-item', '.cart__item', '[data-cart-item]', '.cart__row', '.cart tbody tr'];
      // Price element within each row.
      const PRICE_SELS = [
        '.cart-item__price .price-item',
        '.cart-item__price .money',
        '.cart-item__price',
        '.price-item',
        '.money',
      ];

      let rows = null;
      for (const sel of ROW_SELS) {
        const r = document.querySelectorAll(sel);
        if (r.length > 0) { rows = r; break; }
      }

      items.forEach((item) => {
        const discounts = findApplicableDiscounts(item.productId, [], undefined, item.price);
        if (discounts.length === 0) return;
        const discCents = applyDiscounts(item.price, discounts);
        if (discCents === item.price) return;

        let priceEl = null;

        // Primary: find the price within the indexed row.
        if (rows && rows[item.lineIndex]) {
          for (const sel of PRICE_SELS) {
            priceEl = rows[item.lineIndex].querySelector(sel);
            if (priceEl) break;
          }
        }

        // Fallback: use positional match across all cart price elements.
        if (!priceEl) {
          const all = document.querySelectorAll(
            PRICE_SELS.map((s) => s.split(' ').pop()).join(','),
          );
          priceEl = all[item.lineIndex] || null;
        }

        if (!priceEl) return;
        injectDisplay(priceEl, item.price, discCents, moneyFormat, discounts);
      });
    }

    // ── Route to surface handler ─────────────────────────────────────────────
    switch (ctx.type) {
      case 'product':    initProduct();    break;
      case 'collection': initCollection(); break;
      case 'cart':       initCart();       break;
    }

  } catch (_) {
    // Silent fallback — never interrupt the storefront on any error.
  }
})();
{% endraw %}
    </script>
  {%- endif -%}
{%- endif -%}