<script>
(function() {
  // For Shopify, the API_ENDPOINT is relative to the merchant's store,
  // pointing to the path you configure in your Shopify App Proxy settings.
  const API_ENDPOINT = '/apps/frictionsentryproxy'; // Ensure this matches your App Proxy config

  function reportFrictionEvent(eventData) {
    const eventPayload = {
      ...eventData,
      timestamp: new Date().toISOString(),
      url: window.location.href,
      userAgent: navigator.userAgent,
    };

    const jsonData = JSON.stringify(eventPayload);

    // Use sendBeacon if available and reliable, otherwise fallback to fetch with keepalive.
    // This makes it more robust for events sent during page unload.
    try {
      if (navigator.sendBeacon) {
        // Create a blob to send. sendBeacon is more reliable with blobs.
        const blob = new Blob([jsonData], { type: 'application/json' });
        if (navigator.sendBeacon(API_ENDPOINT, blob)) {
          // Beacon was queued successfully.
          return;
        }
      }
    } catch (e) {
      // sendBeacon can throw errors in some strict security environments.
      console.error('FrictionSentry (Shopify): sendBeacon error, falling back to fetch.', e);
    }
    
    // Fallback to fetch for browsers that don't support sendBeacon or if queueing failed.
    sendWithFetch(jsonData);
  }

  function sendWithFetch(payloadBodyString) {
    try {
      fetch(API_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: payloadBodyString,
        keepalive: true, // Crucial for requests that might outlive the page.
      })
      .then(response => {
        if (!response.ok) {
          response.json().then(errData => {
            console.error('FrictionSentry (Shopify): Failed to report event (fetch) -', response.status, errData.message || response.statusText);
          }).catch(() => {
            console.error('FrictionSentry (Shopify): Failed to report event (fetch) -', response.status, response.statusText);
          });
        }
      })
      .catch(error => console.error('FrictionSentry (Shopify): Error reporting event (fetch) -', error));
    } catch (e) {
       console.error('FrictionSentry (Shopify): Error reporting event (fetch) -', e)
    }
  }

  // --- Verification Logic ---
  // This part is the same as the general snippet, but now uses the robust reporting function.
  try {
    const currentUrl = new URL(window.location.href);
    const isVerification = currentUrl.searchParams.get('fs_verify') === 'true';
    const verificationId = currentUrl.searchParams.get('fs_vid');
    
    if (isVerification && verificationId) {
      reportFrictionEvent({
        type: 'verificationTest',
        meta: { verificationId: verificationId }
      });
    }
  } catch(e) {
    // Silently fail if URL parsing fails.
  }
  // --- End Verification Logic ---


  window.addEventListener('error', function(event) {
    reportFrictionEvent({
      type: 'jsError',
      message: event.message,
      stackTrace: event.error && event.error.stack ? event.error.stack : (event.filename ? (event.filename + ':' + event.lineno + ':' + event.colno) : 'No stack available'),
    });
  });

  function getCssSelector(el) {
    if (!(el instanceof Element)) return 'not-an-element';
    if (!document.body.contains(el)) return 'element-not-in-dom';
    
    const path = [];
    let currentEl = el;
    while (currentEl && currentEl.nodeType === Node.ELEMENT_NODE) {
      let selector = currentEl.nodeName.toLowerCase();
      if (currentEl.id) {
        const id = currentEl.id.replace(/[!"#$%&'()*+,./:;<=>?@[\]^\`{|}~]/g, "\\$&");
        selector += '#' + id;
        path.unshift(selector);
        break;
      } else {
        let sib = currentEl, nth = 1;
        let foundMatchingSibling = false;
        while (sib = sib.previousElementSibling) {
          if (sib.nodeName.toLowerCase() === selector) nth++;
        }
        if (nth > 1) {
            selector += ":nth-of-type("+nth+")";
        } else {
            sib = currentEl.nextElementSibling;
            while(sib){
                if(sib.nodeName.toLowerCase() === selector){
                    foundMatchingSibling = true;
                    break;
                }
                sib = sib.nextElementSibling;
            }
            if(foundMatchingSibling && nth === 1){ 
                 selector += ":nth-of-type("+nth+")";
            }
        }
      }
      path.unshift(selector);
      if (!currentEl.parentElement) break;
      currentEl = currentEl.parentElement;
    }
    return path.length ? path.join(" > ") : 'selector-unavailable';
  }
  
  let lastClickedElementDetails = { element: null, time: 0, count: 0 };
  const RAGE_CLICK_COUNT_THRESHOLD = 3;
  const RAGE_CLICK_WINDOW_MS_THRESHOLD = 1000; 
  const DEAD_CLICK_TIMEOUT_MS_THRESHOLD = 2000;

  document.addEventListener('click', function(event) {
    const clickedElement = event.target;
    if (!(clickedElement instanceof Element)) return;

    const currentTime = Date.now();
    const cssSelector = getCssSelector(clickedElement);

    if (lastClickedElementDetails.element === clickedElement && (currentTime - lastClickedElementDetails.time) < RAGE_CLICK_WINDOW_MS_THRESHOLD) {
      lastClickedElementDetails.count++;
    } else {
      lastClickedElementDetails.element = clickedElement;
      lastClickedElementDetails.count = 1;
    }
    lastClickedElementDetails.time = currentTime;

    if (lastClickedElementDetails.count >= RAGE_CLICK_COUNT_THRESHOLD) {
      reportFrictionEvent({ type: 'rageClick', selector: cssSelector });
      lastClickedElementDetails.count = 0; 
    }

    const isPotentiallyInteractiveElement = clickedElement.tagName === 'A' || clickedElement.tagName === 'BUTTON' || clickedElement.closest('a, button') || clickedElement.getAttribute('role') === 'button' || window.getComputedStyle(clickedElement).cursor === 'pointer';
    if (isPotentiallyInteractiveElement) {
      const initialHref = window.location.href;
      let navigationOrMutationOccurred = false;

      const mutationObs = new MutationObserver(() => {
        if(!navigationOrMutationOccurred) {
            navigationOrMutationOccurred = true;
            clearTimeout(deadClickCheckTimer); 
            mutationObs.disconnect();
        }
      });
      mutationObs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });

      const handleBeforeUnload = () => {
        if(!navigationOrMutationOccurred) { 
            navigationOrMutationOccurred = true;
            clearTimeout(deadClickCheckTimer); 
            mutationObs.disconnect(); 
        }
      };
      window.addEventListener('beforeunload', handleBeforeUnload, { once: true });
      
      const deadClickCheckTimer = setTimeout(() => {
        mutationObs.disconnect(); 
        window.removeEventListener('beforeunload', handleBeforeUnload); 
        if (!navigationOrMutationOccurred && window.location.href === initialHref) {
          reportFrictionEvent({ type: 'deadClick', selector: cssSelector });
        }
      }, DEAD_CLICK_TIMEOUT_MS_THRESHOLD);
    }
  }, true); 

  console.log('Friction Sentry Analytics (Shopify) Loaded.');
})();
</script>