/* ─────────────────────────────────────────
   UTILS
───────────────────────────────────────── */

const waitFor = (selector, {
        attempts = 10,
        interval = 200
    } = {}) =>
    new Promise((resolve, reject) => {
        let tries = 0;
        const poll = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(poll);
                resolve(el);
                return;
            }
            if (++tries >= attempts) {
                clearInterval(poll);
                reject(new Error(`"${selector}" not found`));
            }
        }, interval);
    });

const waitForImages = (imgs) =>
    Promise.all(imgs.map(img =>
        img.complete && img.naturalWidth > 0 ?
        Promise.resolve() :
        new Promise(resolve => {
            img.addEventListener('load', resolve, {
                once: true
            });
            img.addEventListener('error', resolve, {
                once: true
            });
        })
    ));

const marquee = (el, speed) => {
    const setW = el.scrollWidth;
    if (!setW) return;
    const clones = 4;
    const children = [...el.children];
    for (let i = 0; i < clones; i++) children.forEach(n => el.appendChild(n.cloneNode(true)));
    let pos = 0;
    const tick = () => {
        pos += speed;
        if (pos >= setW) pos -= setW;
        el.style.transform = `translateX(${pos}px)`;
        requestAnimationFrame(tick);
    };
    tick();
};


/* ─────────────────────────────────────────
   HOME PAGE
───────────────────────────────────────── */

const initHomePage = async () => {
    // Brand logo scroll
    waitFor('#brandTrack').then(async track => {
        const imgs = [...track.querySelectorAll('img')];
        if (!imgs.length) return;
        await waitForImages(imgs);
        marquee(track, 1);
    }).catch(() => {});

    // Banner marquee
    waitFor('#bannerScroll').then(el => {
        if (!el.children.length) return;
        marquee(el, 0.8);
    }).catch(() => {});

};


/* ─────────────────────────────────────────
   PRODUCT PAGE
───────────────────────────────────────── */

const initProductPage = async () => {

  // ── Helpers & data (declared first) ────
  const optionData = {
    '246466816':   { discount: '-50%' },
    '2010028400':  { discount: '-63%' },
    '1101772913':  { discount: '-64%' },
  };

  const fmt = v => salla.helpers.money(v);

  const updatePriceRow = (wrap, { price, regular_price, has_sale_price }) => {
    const row = wrap.querySelector('.tsm-price-row');
    if (!row) return;
    row.innerHTML = has_sale_price
      ? `<b>${fmt(price)}</b><s>${fmt(regular_price)}</s>`
      : `<b>${fmt(price)}</b>`;
  };

  const fetchPrice = (input, form) => new Promise(resolve => {
    input.checked = true;
    salla.event.once('product::price.updated', resolve);
    salla.product.getPrice(new FormData(form));
  });


  // ── Option card enrichment ─────────────
  waitFor('.s-product-options-thumbnails-wrapper').then(async () => {
    const wraps = [...document.querySelectorAll('.s-product-options-thumbnails-wrapper > div')];
    const form  = document.querySelector('.product-form');
    const originalChecked = document.querySelector(
      '.s-product-options-thumbnails-wrapper input[type=radio]:checked'
    );

    // Inject static elements
    wraps.forEach(wrap => {
      const input = wrap.querySelector('input[type=radio]');
      if (!input) return;
      const data = optionData[input.dataset.itemid];
      if (!data) return;

      const label = wrap.querySelector('label.go-to-slide');
      if (!label.querySelector('.tsm-badge')) {
        const badge = document.createElement('span');
        badge.className = 'tsm-badge';
        badge.textContent = data.discount;
        label.appendChild(badge);
      }

      if (!wrap.querySelector('.tsm-price-row')) {
        const row = document.createElement('div');
        row.className = 'tsm-price-row';
        wrap.appendChild(row);
      }

      wrap.addEventListener('click', () => input.click());
    });

    // Prefill all cards serially
    if (form) {
      for (const wrap of wraps) {
        const input = wrap.querySelector('input[type=radio]');
        if (!input || !optionData[input.dataset.itemid]) continue;
        const result = await fetchPrice(input, form);
        updatePriceRow(wrap, result.data);
      }
      if (originalChecked) originalChecked.click();
    }

    // Live updates on manual selection
    salla.event.on('product::price.updated', (result) => {
      const checked = document.querySelector(
        '.s-product-options-thumbnails-wrapper input[type=radio]:checked'
      );
      if (!checked) return;
      updatePriceRow(checked.closest('div'), result.data);
    });

  }).catch(() => {});


  // ── Payments block ─────────────────────
  waitFor('.s-payments-list-wrap').then(el => {
    el.innerHTML = `
      <div class="s-features-grid">
        <div class="s-feature-card">
          <img src="https://cdn.files.salla.network/homepage/504871843/b326331d-f8e4-475a-b24d-d70cf48ac2c4.webp" alt="" loading="lazy">
          <h3>طرق دفع</h3>
          <p>مدى وفيزا<br>الدفع عند الاستلام</p>
        </div>
        <div class="s-feature-card">
          <img src="https://i.postimg.cc/xCqkR4WD/delivery-truck.png" alt="" loading="lazy">
          <h3>توصيل اكسبريس</h3>
          <p>داخل الرياض<br>خلال ٦ ساعات</p>
        </div>
        <div class="s-feature-card">
          <img src="https://i.postimg.cc/MKmWqx3f/view.webp" alt="" loading="lazy">
          <h3>ضمان ذهبي</h3>
          <p>عينة مجانية<br>استرجاع مرن</p>
        </div>
      </div>
      <div class="s-installment-banner">
        <div class="s-installment-text">
          قسمها إلى 4 دفعات بقيمة <span>31.25 ر.س</span>
        </div>
        <div class="s-logos-wrapper">
          <img class="bnpl-logo" src="https://i.postimg.cc/k4J88jpZ/Screenshot-2026-01-23-0012578.jpg" alt="" loading="lazy">
          <span class="s-or-divider">أو</span>
          <img class="bnpl-logo" src="https://i.postimg.cc/13RfvgHc/Screenshot-2026-01-23-001257.jpg" alt="" loading="lazy">
        </div>
      </div>
    `;
  }).catch(() => {});


  // ── Reviews section ────────────────────
  waitFor('.product-more-info.vertical').then(anchor => {
    const section = document.createElement('section');
    section.id = 'premium-reviews-section';

    const reviews = [
      {
        name: 'أريج السعد',
        rating: 5,
        date: '2026-03-26',
        text: 'من أول استخدام، الرائحة تأخذك لعالم ثاني. ثبات ونظافة لا توصف، وفعلاً لطيف جداً على البشرة الحساسة.'
      },
      {
        name: 'ليلى الحارثي',
        rating: 5,
        date: '2026-03-20',
        text: 'التغليف، التفاصيل، والجودة.. كل شيء ينطق فخامة. أفضل غسول حميمي جربته بلا منازع.'
      },
      {
        name: 'نورة عبدالله',
        rating: 5,
        date: '2026-04-01',
        text: 'كنت متخوفة من تجربة شيء جديد، لكن النتيجة أبهرتني. شعور بالانتعاش يدوم طويلاً والرائحة طبيعية وغير مزعجة.'
      }
    ];

    function daysAgo(dateStr) {
      const now  = new Date();
      const then = new Date(dateStr);
      const diff = Math.floor((now - then) / (1000 * 60 * 60 * 24));
      if (diff === 0) return 'اليوم';
      if (diff === 1) return 'منذ يوم واحد';
      if (diff === 2) return 'منذ يومين';
      if (diff <= 10) return 'منذ ' + diff + ' أيام';
      return 'منذ ' + diff + ' يوم';
    }

    function starsHTML(count) {
      return '<span class="pr-stars">' + '★'.repeat(count) + '</span>';
    }

    const reviewCards = reviews.map(r => `
      <div class="pr-card">
        <div class="pr-card-header">
          <span class="pr-date">${daysAgo(r.date)}</span>
          <div class="pr-author-block">
            <span class="pr-author-name">${r.name}</span>
            ${starsHTML(r.rating)}
          </div>
        </div>
        <p class="pr-text">${r.text}</p>
      </div>
    `).join('');

    section.innerHTML = `
      <div class="pr-wrapper">
        <div class="pr-section-header">
          <span class="pr-sub-title">صدى تجاربكم</span>
          <h2 class="pr-main-title">آراء تفيض بالجمال</h2>
        </div>
        <div class="pr-cards-list">
          ${reviewCards}
        </div>
      </div>
    `;
    anchor.after(section);
  }).catch(() => {});

};

/* ─────────────────────────────────────────
   BOOT — detect page type and initialise
───────────────────────────────────────── */

const isHome = () => document.body.classList.contains('index');
const isProduct = () => document.body.classList.contains('product-single');

const boot = () => {
    if (isHome()) initHomePage();
    if (isProduct()) initProductPage();
};

document.readyState === 'loading' ?
    document.addEventListener('DOMContentLoaded', boot) :
    boot();