/* WISAL / Salla — paste as JavaScript, without <script> tags. */
(() => {
  'use strict';

  const CONFIG = {
    logo: 'https://cdn.files.salla.network/other/2091978749/4f87500c-b442-4a62-befb-4e8a8d18f362-original.webp',

    merchantUrl: '',

    singleCategoryAsClosing: true,

    showFaqLink: false,

    products: {
      white: {
        path: '/wisal-tap-white/p1825402376',
        select: 'option-1809512439',
        annual: '855213910',
        monthly: '214345303'
      },

      black: {
        path: '/wisal-tap-black/p800788320',
        select: 'option-2000972309',
        annual: '586745011',
        monthly: '1399017711'
      }
    }
  };

  const SECTIONS = [
    {
      id: 'features',
      label: 'المميزات',
      selector: '.wisal-suite-comparison'
    },
    {
      id: 'how-it-works',
      label: 'كيف يعمل',
      selector: '.wisal-suite-how'
    },
    {
      id: 'customer-experience',
      label: 'تجربة العميل',
      selector: '.wisal-suite-experience'
    },
    {
      id: 'pricing',
      label: 'الأسعار',
      selector: '.wisal-suite-purchase'
    },
    ...(CONFIG.showFaqLink
      ? [{
          id: 'faq',
          label: 'الأسئلة الشائعة',
          selector: '.wisal-suite-faq'
        }]
      : [])
  ];

  const HOSTS = [
    '[component-name="wisal-main-hero"]',
    '[component-name="hero-wisal"]',
    '[component-name="wisal-experience"]'
  ].join(', ');

  const STYLE_ID = 'wisal-ui-shadow-v3';

  /* External CSS cannot cross Shadow DOM. */
  const HERO_CSS = `
    :host {
      display: block;
      min-width: 0;
      max-width: 100%;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    .hero-section {
      width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .text-column,
    .image-column,
    .feature-item {
      min-width: 0;
    }

    .image-bg-glow {
      max-width: 100%;
      pointer-events: none;
    }

    .device-image {
      display: block;
      max-width: min(520px, 100%);
      height: auto;
    }

    .cta-button {
      max-width: 100%;
      height: auto;
      min-height: 54px;
      padding-block: 12px;
      white-space: normal;
    }

    .description,
    .main-title,
    .feature-item {
      overflow-wrap: anywhere;
    }

    @media (max-width: 767px) {
      .hero-section {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 20px;
      }

      .cta-button {
        width: 100%;
        min-width: 0;
      }

      .features-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .device-image {
        max-width: min(320px, 100%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cta-button {
        transition: none;
      }
    }
  `;

  const SUITE_CSS = `
    :host,
    .wisal-suite-root {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    .wisal-suite-container {
      width: 100%;
      max-width: var(--container-max, 1200px);
      min-width: 0;
    }

    .comparison-grid,
    .purchase-grid,
    .ops-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .how-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cats-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comparison-grid > *,
    .purchase-grid > *,
    .ops-grid > *,
    .how-grid > *,
    .cats-grid > *,
    .comp-list li > div,
    .plan-features li {
      min-width: 0;
    }

    h2,
    h3,
    p,
    li,
    .section-desc {
      overflow-wrap: anywhere;
    }

    .wisal-suite-purchase .wisal-suite-section-header h2 {
      color: var(--wisal-suite-dark-text, #f3f6f4);
    }

    .wisal-suite-purchase .wisal-suite-section-header .section-desc {
      color: #d9e8e0;
    }

    .wisal-suite-purchase .wisal-suite-section-badge {
      color: var(--wisal-suite-accent, #35d07f);
      background: rgb(53 208 127 / 10%);
    }

    .plan-btn,
    .color-btn,
    .plan-tab {
      min-height: 44px;
    }

    .plan-btn:focus-visible,
    .color-btn:focus-visible,
    .plan-tab:focus-visible,
    .cat-link:focus-visible {
      outline: 3px solid #6cc9a4;
      outline-offset: 4px;
    }

    .phone-frame {
      max-width: 100%;
    }

    [data-wisal-empty="true"] {
      display: none !important;
    }

    .wisal-suite-categories[data-wisal-single-cta="true"] {
      padding-block: 56px;
    }

    [data-wisal-single-cta="true"] .wisal-suite-section-header,
    [data-wisal-single-cta="true"] .cat-icon {
      display: none;
    }

    [data-wisal-single-cta="true"] .cats-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    [data-wisal-single-cta="true"] .cat-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 40px;
      align-items: center;
      padding: 40px;
      width: 100%;
      border-radius: 24px;
      background: var(--wisal-suite-white, #fff);
      transform: none;
    }

    [data-wisal-single-cta="true"] .cat-card h3 {
      grid-column: 1;
      grid-row: 1;
      margin: 0 0 12px;
      font-size: clamp(25px, 2.5vw, 34px);
      line-height: 1.45;
      color: var(--wisal-suite-text-main, #17231e);
    }

    [data-wisal-single-cta="true"] .cat-card p {
      grid-column: 1;
      grid-row: 2;
      max-width: 720px;
      margin: 0;
      font-size: 17px;
      line-height: 1.85;
    }

    [data-wisal-single-cta="true"] .cat-link {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      display: inline-flex;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 14px 24px;
      border-radius: 12px;
      background: var(--wisal-suite-primary, #003527);
      color: #fff;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
    }

    @media (max-width: 959px) {
      .comparison-grid,
      .purchase-grid,
      .ops-grid,
      .cats-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      [data-wisal-single-cta="true"] .cat-card {
        column-gap: 24px;
        padding: 28px;
      }
    }

    @media (max-width: 767px) {
      .how-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .wisal-suite-purchase,
      .wisal-suite-how,
      .wisal-suite-ops,
      .wisal-suite-experience {
        padding-block: var(--section-spacing-mobile, 56px);
      }

      .wisal-suite-section-header {
        margin-bottom: 28px;
      }

      .plan-features {
        grid-template-columns: minmax(0, 1fr);
      }

      .plan-price .amount {
        font-size: 32px;
      }

      .wisal-suite-categories[data-wisal-single-cta="true"] {
        padding-block: 32px;
      }

      [data-wisal-single-cta="true"] .cat-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
      }

      [data-wisal-single-cta="true"] .cat-card p {
        font-size: 16px;
      }

      [data-wisal-single-cta="true"] .cat-link {
        align-self: stretch;
        width: 100%;
        margin-top: 24px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cat-card,
      .plan-panel,
      .device-layer {
        transition: none;
      }
    }
  `;

  window.WisalUI?.destroy?.();

  const abort = new AbortController();
  const observers = new Map();
  const nativeOrigins = new Map();
  const nativeAttributes = new Map();
  const sourceLinks = new Map();
  const inertStates = new Map();
  const legacyHosts = new Set();
  const timers = new Set();

  let header;
  let menu;
  let slot;
  let documentObserver;
  let resizeObserver;

  let frame = 0;
  let pendingScroll = null;
  let appliedPlan = false;
  let stopped = false;
  let cssRetries = 0;

  const isHome = () => location.pathname === '/';

  const setAttr = (element, name, value) => {
    if (element.getAttribute(name) !== value) {
      element.setAttribute(name, value);
    }
  };

  const on = (node, type, handler, extra = {}) => {
    node.addEventListener(type, handler, {
      ...extra,
      signal: abort.signal
    });
  };

  function later(fn, delay) {
    const id = setTimeout(() => {
      timers.delete(id);

      if (!stopped) {
        fn();
      }
    }, delay);

    timers.add(id);
  }

  function safeUrl(value) {
    if (!value) {
      return '';
    }

    try {
      const url = new URL(value, location.origin);

      return ['https:', 'http:'].includes(url.protocol)
        ? url.href
        : '';
    } catch {
      return '';
    }
  }

  function links(mobile = false) {
    return SECTIONS.map(section => `
      <a
        href="/#${section.id}"
        data-wisal-section="${section.id}"
        ${mobile ? 'class="wisal-mobile-link"' : ''}
      >${section.label}</a>
    `).join('');
  }

  function buildHeader() {
    const merchant = safeUrl(CONFIG.merchantUrl);

    const merchantLink = merchant
      ? `
        <a
          class="wisal-btn wisal-btn--ghost"
          href="${merchant
            .replaceAll('&', '&amp;')
            .replaceAll('"', '&quot;')}"
        >دخول التاجر</a>
      `
      : '';

    const element = document.createElement('header');

    element.id = 'wisal-global-header';
    element.className = 'wisal-global-header';
    element.dir = 'rtl';
    element.hidden = true;

    element.innerHTML = `
      <div class="wisal-global-header__bar">
        <a
          class="wisal-global-header__brand"
          href="/"
          aria-label="وصال - الرئيسية"
        >
          <img
            src="${CONFIG.logo}"
            alt="وصال"
            width="104"
            height="44"
          >
        </a>

        <nav
          class="wisal-global-header__nav"
          aria-label="التنقل الرئيسي"
        >
          ${links()}
        </nav>

        <div class="wisal-global-header__actions">
          <div
            class="wisal-global-header__native"
            data-wisal-native
          ></div>

          <div class="wisal-desktop-action">
            ${merchantLink}
          </div>

          <a
            class="wisal-btn wisal-btn--primary wisal-desktop-action"
            href="${CONFIG.products.white.path}"
          >اطلب وصال</a>
        </div>

        <details class="wisal-global-header__menu">
          <summary aria-label="قائمة التنقل">
            <span></span>
            <span></span>
            <span></span>
          </summary>

          <div class="wisal-global-header__panel">
            <nav aria-label="التنقل على الجوال">
              ${links(true)}
            </nav>

            <div class="wisal-global-header__panel-actions">
              ${merchantLink}

              <a
                class="wisal-btn wisal-btn--primary"
                href="${CONFIG.products.white.path}"
              >اطلب وصال</a>
            </div>
          </div>
        </details>
      </div>
    `;

    const old = document.getElementById(element.id);

    const oldNative = old
      ? [...old.querySelectorAll(
          'salla-user-menu, salla-cart-summary'
        )]
      : [];

    const nativeHeader = document.querySelector(
      'header.store-header'
    );

    for (const node of oldNative) {
      nativeHeader?.append(node);
    }

    old?.remove();

    document.documentElement.classList.remove(
      'wisal-global-ready'
    );

    document.body.prepend(element);

    header = element;
    menu = element.querySelector('details');
    slot = element.querySelector('[data-wisal-native]');
  }

  function measureHeader() {
    if (header.hidden) {
      return;
    }

    const height = Math.ceil(
      header.getBoundingClientRect().bottom + 12
    );

    document.documentElement.style.setProperty(
      '--wisal-header-space',
      `${height}px`
    );
  }

  function mountNative() {
    const original = document.querySelector(
      'header.store-header'
    );

    if (!original) {
      return;
    }

    const user =
      slot.querySelector('salla-user-menu') ||
      original.querySelector('salla-user-menu');

    const cart =
      slot.querySelector('salla-cart-summary') ||
      original.querySelector('salla-cart-summary');

    if (!user || !cart) {
      return;
    }

    if (!nativeAttributes.has(user)) {
      nativeAttributes.set(
        user,
        user.getAttribute('avatar-only')
      );
    }

    setAttr(user, 'avatar-only', 'true');

    for (const node of [user, cart]) {
      if (node.parentElement !== slot) {
        nativeOrigins.set(node, {
          parent: node.parentNode,
          next: node.nextSibling
        });

        // Move the real nodes; do not clone Salla components.
        slot.append(node);
      }
    }

    header.hidden = false;

    document.documentElement.classList.add(
      'wisal-global-ready'
    );

    measureHeader();
  }

  function roots() {
    return [...document.querySelectorAll(HOSTS)]
      .map(host => host.shadowRoot)
      .filter(Boolean);
  }

  function visible(element) {
    return (
      !!element &&
      !element.hidden &&
      element.getBoundingClientRect().width > 0 &&
      element.getBoundingClientRect().height > 0
    );
  }

  function targetFor(id) {
    const config = SECTIONS.find(section => section.id === id);

    if (!config) {
      return null;
    }

    const direct = document.getElementById(id);

    if (visible(direct)) {
      return direct;
    }

    for (const root of roots()) {
      const element =
        root.getElementById(id) ||
        root.querySelector(config.selector);

      if (
        visible(element) &&
        element.dataset.wisalEmpty !== 'true'
      ) {
        return element;
      }
    }

    return null;
  }

  function hashId() {
    try {
      return decodeURIComponent(location.hash.slice(1));
    } catch {
      return '';
    }
  }

  function requestScroll(id, smooth, push = false) {
    if (!SECTIONS.some(section => section.id === id)) {
      return;
    }

    pendingScroll = {
      id,
      smooth,
      push,
      expires: Date.now() + 12000
    };

    flushScroll();
  }

  function flushScroll() {
    if (!pendingScroll || !isHome()) {
      return;
    }

    if (Date.now() > pendingScroll.expires) {
      pendingScroll = null;
      return;
    }

    const target = targetFor(pendingScroll.id);

    if (!target) {
      return;
    }

    const request = pendingScroll;

    pendingScroll = null;
    menu.open = false;

    const offset = header.hidden
      ? 16
      : header.getBoundingClientRect().bottom + 12;

    const top = Math.max(
      0,
      scrollY + target.getBoundingClientRect().top - offset
    );

    const reduce = matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;

    window.scrollTo({
      top,
      behavior: request.smooth && !reduce
        ? 'smooth'
        : 'auto'
    });

    if (request.push && hashId() !== request.id) {
      history.pushState(
        history.state,
        '',
        `/#${request.id}`
      );
    }
  }

  function updatePlanLinks(root) {
    const color = root.querySelector('.color-btn.black.active')
      ? 'black'
      : 'white';

    const panels = [...root.querySelectorAll('.plan-panel')];

    // Current component order: annual, then monthly.
    panels.forEach((panel, index) => {
      if (!inertStates.has(panel)) {
        inertStates.set(panel, panel.inert);
      }

      panel.inert = (
        panel.getAttribute('aria-hidden') === 'true'
      );

      const plan = ['annual', 'monthly'][index];

      const link = panel.querySelector('a.plan-btn');

      if (!link || !plan) {
        return;
      }

      let raw = link.getAttribute('href') || '';

      const previous = sourceLinks.get(link);

      if (previous && raw === previous.applied) {
        raw = previous.source;
      }

      const url = safeUrl(raw);

      const destination = url
        ? new URL(url)
        : null;

      const isGeneric = (
        !raw.trim() ||
        ['#', '/'].includes(raw.trim())
      );

      const isKnownProduct = (
        destination?.origin === location.origin &&
        Object.values(CONFIG.products).some(
          product => product.path === destination.pathname
        )
      );

      // Preserve an explicit custom purchase URL.
      if (!isGeneric && !isKnownProduct) {
        return;
      }

      const next = new URL(
        isKnownProduct
          ? url
          : CONFIG.products[color].path,
        location.origin
      );

      next.pathname = CONFIG.products[color].path;

      next.searchParams.set('wisal_plan', plan);

      const href = next.pathname + next.search + next.hash;

      sourceLinks.set(link, {
        source: raw,
        applied: href
      });

      setAttr(link, 'href', href);
    });
  }

  function patchRoot(root) {
    const hero = (
      root.host.getAttribute('component-name') !==
      'wisal-experience'
    );

    if (!root.getElementById(STYLE_ID)) {
      const style = document.createElement('style');

      style.id = STYLE_ID;
      style.textContent = hero ? HERO_CSS : SUITE_CSS;

      root.append(style);
    }

    if (!observers.has(root)) {
      const observer = new MutationObserver(schedule);

      observer.observe(root, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: [
          'class',
          'aria-hidden',
          'href'
        ]
      });

      observers.set(root, observer);
    }

    if (hero) {
      return;
    }

    const faq = root.querySelector('.wisal-suite-faq');

    if (faq) {
      setAttr(
        faq,
        'data-wisal-empty',
        String(!faq.querySelector('.faq-item'))
      );
    }

    const categories = root.querySelector(
      '.wisal-suite-categories'
    );

    if (categories) {
      const cards = categories.querySelectorAll(
        '.cats-grid > .cat-card'
      );

      const closing = (
        CONFIG.singleCategoryAsClosing &&
        cards.length === 1 &&
        !!cards[0].querySelector('a.cat-link')
      );

      setAttr(
        categories,
        'data-wisal-empty',
        String(cards.length === 0)
      );

      setAttr(
        categories,
        'data-wisal-single-cta',
        String(closing)
      );
    }

    updatePlanLinks(root);
  }

  function preselectPlan() {
    if (appliedPlan) {
      return;
    }

    const plan = new URLSearchParams(
      location.search
    ).get('wisal_plan');

    if (!['annual', 'monthly'].includes(plan)) {
      return;
    }

    const product = Object.values(CONFIG.products).find(
      product => location.pathname.endsWith(product.path)
    );

    if (!product) {
      return;
    }

    const select = document.getElementById(product.select);

    if (
      !select ||
      ![...select.options].some(
        option => option.value === product[plan]
      )
    ) {
      return;
    }

    appliedPlan = true;

    select.value = product[plan];

    select.dispatchEvent(
      new Event('change', {
        bubbles: true
      })
    );

    // Salla recalculates the real price.
    // Never replace price text or cart amounts.
  }

  function refresh() {
    frame = 0;

    if (stopped) {
      return;
    }

    mountNative();

    document.querySelectorAll(
      '.wisal-nav-shell'
    ).forEach(shell => {
      const host = shell.parentElement;

      const standalone = (
        host?.matches('[component-name="html-content"]') &&
        [...host.childNodes].every(node => (
          node === shell ||
          node.nodeType === 8 ||
          (
            node.nodeType === 3 &&
            !node.textContent.trim()
          )
        ))
      );

      const block = standalone && host.closest(
        '.s-block-html-content, .s-block--bundle-html-content'
      );

      if (
        block &&
        !block.classList.contains('wisal-header-host')
      ) {
        block.classList.add('wisal-header-host');
        legacyHosts.add(block);
      }
    });

    for (const root of roots()) {
      patchRoot(root);
    }

    if (
      isHome() &&
      roots().some(root => (
        root.host.getAttribute('component-name') ===
        'wisal-experience'
      ))
    ) {
      header.querySelectorAll(
        '[data-wisal-section]'
      ).forEach(link => {
        const hidden = !targetFor(
          link.dataset.wisalSection
        );

        if (link.hidden !== hidden) {
          link.hidden = hidden;
        }
      });
    }

    preselectPlan();
    flushScroll();
  }

  function schedule() {
    if (!stopped && !frame) {
      frame = requestAnimationFrame(refresh);
    }
  }

  function click(event) {
    const path = event.composedPath();

    if (menu.open && !path.includes(header)) {
      menu.open = false;
    }

    if (
      event.defaultPrevented ||
      event.button !== 0 ||
      event.metaKey ||
      event.ctrlKey ||
      event.shiftKey ||
      event.altKey
    ) {
      return;
    }

    const link = path.find(node => (
      node?.matches?.('a[data-wisal-section]')
    ));

    if (
      !link ||
      link.target === '_blank' ||
      link.hasAttribute('download')
    ) {
      return;
    }

    menu.open = false;

    // Preserve normal navigation from internal pages.
    if (!isHome()) {
      return;
    }

    event.preventDefault();

    requestScroll(
      link.dataset.wisalSection,
      true,
      true
    );
  }

  function destroy() {
    stopped = true;

    abort.abort();

    cancelAnimationFrame(frame);

    timers.forEach(clearTimeout);

    documentObserver?.disconnect();
    resizeObserver?.disconnect();

    observers.forEach(observer => {
      observer.disconnect();
    });

    observers.forEach((_, root) => {
      root.getElementById(STYLE_ID)?.remove();

      root.querySelectorAll(
        '[data-wisal-empty], [data-wisal-single-cta]'
      ).forEach(element => {
        element.removeAttribute('data-wisal-empty');
        element.removeAttribute('data-wisal-single-cta');
      });
    });

    for (const [link, state] of sourceLinks) {
      if (link.getAttribute('href') === state.applied) {
        link.setAttribute('href', state.source);
      }
    }

    inertStates.forEach((inert, panel) => {
      panel.inert = inert;
    });

    legacyHosts.forEach(block => {
      block.classList.remove('wisal-header-host');
    });

    for (const [node, origin] of nativeOrigins) {
      const parent = origin.parent?.isConnected
        ? origin.parent
        : document.querySelector('header.store-header');

      if (parent) {
        parent.insertBefore(
          node,
          origin.next?.parentNode === parent
            ? origin.next
            : null
        );
      }
    }

    nativeAttributes.forEach((value, node) => {
      if (value === null) {
        node.removeAttribute('avatar-only');
      } else {
        node.setAttribute('avatar-only', value);
      }
    });

    header?.remove();

    document.documentElement.classList.remove(
      'wisal-global-ready'
    );

    document.documentElement.style.removeProperty(
      '--wisal-header-space'
    );
  }

  window.WisalUI = {
    version: 3,
    refresh: schedule,
    destroy
  };

  function init() {
    if (stopped) {
      return;
    }

    // Leave Salla's original header in place if CSS is unavailable.
    const cssVersion = getComputedStyle(
      document.documentElement
    ).getPropertyValue('--wisal-ui-version').trim();

    if (cssVersion !== '3') {
      if (++cssRetries <= 20) {
        later(init, 500);
      }

      return;
    }

    buildHeader();

    on(document, 'click', click);

    on(document, 'keydown', event => {
      if (event.key === 'Escape' && menu.open) {
        menu.open = false;
        menu.querySelector('summary').focus();
      }
    });

    on(menu, 'toggle', () => {
      menu.querySelector('summary').setAttribute(
        'aria-expanded',
        String(menu.open)
      );
    });

    on(window, 'resize', () => {
      if (innerWidth > 1100) {
        menu.open = false;
      }

      measureHeader();
    });

    on(window, 'hashchange', () => {
      requestScroll(hashId(), false);
    });

    on(window, 'popstate', () => {
      requestScroll(hashId(), false);
    });

    on(window, 'wheel', () => {
      pendingScroll = null;
    }, {
      passive: true
    });

    on(window, 'touchstart', () => {
      pendingScroll = null;
    }, {
      passive: true
    });

    on(window, 'load', schedule, {
      once: true
    });

    documentObserver = new MutationObserver(schedule);

    documentObserver.observe(document.body, {
      childList: true,
      subtree: true
    });

    if ('ResizeObserver' in window) {
      resizeObserver = new ResizeObserver(
        measureHeader
      );

      resizeObserver.observe(header);
    }

    refresh();

    [
      100,
      350,
      1000,
      2200,
      4500,
      8000,
      12000
    ].forEach(delay => {
      later(schedule, delay);
    });

    document.fonts?.ready.then(() => {
      if (!stopped) {
        measureHeader();
      }
    });

    if (isHome()) {
      requestScroll(hashId(), false);
    }
  }

  if (document.readyState === 'loading') {
    on(document, 'DOMContentLoaded', init, {
      once: true
    });
  } else {
    init();
  }
})();