/* Add custom Js styles below */ 
(function () {
  function tagPromotions() {
    document.querySelectorAll('.product-card__promotion, .promotion-title').forEach(function (el) {
      el.setAttribute(
        'data-promotion',
        el.textContent.trim() === 'وصلت حديثاً' ? 'new-arrival' : 'other'
      );
    });
  }

  tagPromotions();

  new MutationObserver(tagPromotions).observe(document.body, {
    childList: true,
    subtree: true,
  });
})();

(function () {

  const INSTALLMENTS = 4;
  const FREQUENTLY_BOUGHT_TITLE = { ar: 'قد يعجبك أيضاً', en: 'You may also like' };

  function findInShadow(root, selector) {
    if (!root) return null;


    const light = root.querySelector(selector);
    if (light) return light;


    const sr = root.shadowRoot;
    if (sr) {
      const inShadow = sr.querySelector(selector);
      if (inShadow) return inShadow;


      const allEls = sr.querySelectorAll('*');
      for (const el of allEls) {
        if (el.shadowRoot) {
          const deep = findInShadow(el, selector);
          if (deep) return deep;
        }
      }
    }
    return null;
  }

  const COMPANIES = [
    {
      key:  'tamara',
      name: { ar: 'تمارا', en: 'Tamara' },
      logo: 'https://nussuq-dev.com/sonbol/tamara.webp',
      findTarget: sallaEl => {
        const tamaraWidget = sallaEl.querySelector('tamara-widget');
        if (!tamaraWidget) return null;

        const learnMore = findInShadow(tamaraWidget, '.tamara-inline-learn-more-link');
        if (learnMore) return learnMore;


        return tamaraWidget;
      },
    },
    {
      key:  'tabby',
      name: { ar: 'تابي', en: 'Tabby' },
      logo: 'https://nussuq-dev.com/sonbol/tabby.png',
      findTarget: sallaEl => {
        const newTarget = sallaEl.querySelector('[data-test="widget-learn-more"]');
        if (newTarget) return newTarget;

        const wrap = sallaEl.querySelector('#tabbyPromo') || document.querySelector('#tabbyPromo');
        if (!wrap) return null;

        const portal = wrap.querySelector('span.styles__containerPortal--c9f84');
        if (!portal) return null;

        const lightTarget = portal.querySelector('[data-test="widget-learn-more"]');
        if (lightTarget) return lightTarget;

        return portal.shadowRoot
          ? portal.shadowRoot.querySelector('[data-test="widget-learn-more"]')
          : null;
      },
    },
  ];

  const TEXT = {
    ar: (n, amount) => `${n} دفعات بدون فوائد بقيمة <span class="drs-amount">${amount} <span class="sicon-sar"></span></span>`,
    en: (n, amount) => `${n} interest-free payments of <span class="drs-amount">${amount} SAR</span>`,
  };

  function getLang() {
    const lang = (document.documentElement.lang || '').toLowerCase();
    return lang.startsWith('ar') || document.body.classList.contains('rtl') ? 'ar' : 'en';
  }

  const fmt = n => Number.isInteger(n) ? String(n) : n.toFixed(2);

  function dispatchClick(el) {
    try { el.click(); } catch (e) {}
    try {
      el.dispatchEvent(new MouseEvent('click', {
        bubbles: false,
        cancelable: true,
        composed: false,
        view: window,
      }));
    } catch (e) {}
  }

  function buildWidget(price, lang, sallaEl) {
    const isRTL = lang === 'ar';
    const per   = fmt(Math.round((price / INSTALLMENTS) * 100) / 100);

    const wrap = document.createElement('div');
    wrap.id = 'drs-inst-widget';
    wrap.style.cssText = `direction:${isRTL?'rtl':'ltr'};margin:8px 0;`;
    wrap.innerHTML = `
      <style>
        #drs-inst-widget, #drs-inst-widget * { box-sizing:border-box; font-family:inherit; }
        #drs-inst-widget .drs-bar {
          display:flex; align-items:center; justify-content:space-between;
          gap:12px; background:#fff; border:1px solid #ddd; border-radius:12px;
          padding:10px 14px; flex-wrap:wrap;
          flex-direction:${isRTL?'row-reverse':'row'};
        }
        #drs-inst-widget .drs-text {
          flex:1; min-width:0;
          font-size:13px; font-weight:500; color:#1a1a2e; line-height:1.5;
          text-align:${isRTL?'right':'left'};
        }
        #drs-inst-widget .drs-amount { font-weight:700; white-space:nowrap; }
        #drs-inst-widget .drs-logos  { display:flex; gap:8px; flex-wrap:wrap; }
        #drs-inst-widget .drs-logo-card {
          display:inline-flex; align-items:center; gap:8px;
          padding:0; background:#fff;
          border:none; border-radius:10px;
          cursor:pointer; min-height:34px;
          transition:border-color .15s, box-shadow .15s;
        }
        #drs-inst-widget .drs-info-icon { color:#b8b8b8; display:none; }
        #drs-inst-widget .drs-logo-img  {
          height:20px; width:auto; max-width:80px;
          object-fit:contain; display:block;
        }
      </style>
      <div class="drs-bar">
        <div class="drs-logos">
          ${COMPANIES.map(c => `
            <button type="button" class="drs-logo-card" data-provider="${c.key}" aria-label="${c.name[lang]}">
              <span class="drs-info-icon">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"/>
                  <line x1="12" y1="16" x2="12" y2="12"/>
                  <line x1="12" y1="8" x2="12.01" y2="8"/>
                </svg>
              </span>
              <img src="${c.logo}" alt="${c.name[lang]}" class="drs-logo-img"/>
            </button>
          `).join('')}
        </div>
        <div class="drs-text">${TEXT[lang](INSTALLMENTS, per)}</div>
      </div>
    `;

    wrap.querySelectorAll('.drs-logo-card').forEach(card => {
      card.addEventListener('click', e => {
        e.preventDefault();
        e.stopPropagation();
        const company = COMPANIES.find(c => c.key === card.dataset.provider);
        const target  = company && company.findTarget(sallaEl);
        if (target) dispatchClick(target);
      });
    });

    return wrap;
  }

  function injectInstallment() {
    if (document.getElementById('drs-inst-widget')) return;
    const sallaEl = document.querySelector('salla-installment');
    if (!sallaEl) return;

    let price = parseFloat(sallaEl.getAttribute('price') || '0');

    if (!price) {
      const tamaraWidget = sallaEl.querySelector('tamara-widget');
      price = parseFloat(tamaraWidget?.getAttribute('amount') || '0');
    }

    if (!price) return;

    sallaEl.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;';
    sallaEl.parentNode.insertBefore(buildWidget(price, getLang(), sallaEl), sallaEl.nextSibling);
  }

  function patchFrequentlyBought() {
    const newTitle = FREQUENTLY_BOUGHT_TITLE[getLang()];
    if (!newTitle) return;
    document.querySelectorAll('h2,h3,p,span').forEach(el => {
      if (!el.dataset.drsPatched && !el.children.length && el.textContent.trim() === 'عادة ما يتم شراؤه مع') {
        el.textContent = newTitle;
        el.dataset.drsPatched = '1';
      }
    });
  }

  function run() {
    injectInstallment();
    patchFrequentlyBought();
  }

  new MutationObserver(run).observe(document.body, { childList: true, subtree: true });
  document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', run) : run();
  setTimeout(run, 1000);
  setTimeout(run, 2500);
})();