if (typeof window !== "undefined") {
  const frame = document.getElementById("kw_iframe");

  const loader = document.createElement("div");
  let loaded = false;

  startLoading();

  window.addEventListener("message", (event) => {
    switch (event.data.action) {
      case "update_height":
        if (!event.data.height) return;
        updateHeight(event.data.height);
        break;
      case "get_client_ip":
        getClientIp();
        break;
      case "step_navigated":
        stepNavigated(event.data.header_height);
        break;
      case "get_tracking_data":
        getTrackingData();
        break;
      case "get_offset":
        updateOffset();
        break;
      case "app_loaded":
        endLoading();
        updateOffset(1000);
        break;
    }
  });

  function updateHeight(height) {
    const $frame = document.getElementById("kw_iframe");
    if (!$frame) return;
    $frame.style.height = `${height}px`;

    if (window.parent !== window) {
      const parentFrame = window.frameElement;

      if (parentFrame) {
        parentFrame.style.height = `${height}px`;
      }
    }
    updateOffset();
  }

  function debounce(func, wait) {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  const debouncedUpdateOffset = debounce(() => {
    updateOffset();
  }, 10);

  window.addEventListener(
    "scroll",
    (event) => {
      debouncedUpdateOffset();
      handleScroll(event);
    },
    true
  );

  window.addEventListener("resize", () => {
    debouncedUpdateOffset();
  });

  async function updateOffset(delay) {
    if (delay) {
      await new Promise((resolve) => setTimeout(resolve, delay));
    }
    const $frame = document.getElementById("kw_iframe");
    if (!$frame) return;
    const rect = frame.getBoundingClientRect();
    const pageOffsetY = Math.abs(Math.floor(window.scrollY));
    const frameOffsetY = Math.floor(rect.top);
    const iframeHeight = Math.abs(Math.floor(rect.height));

    frame.contentWindow.postMessage(
      {
        action: "provide_offset",
        pageOffsetY,
        frameOffsetY,
        innerHeight: window.innerHeight,
        iframeHeight,
      },
      "*"
    );
  }

  function getClientIp() {
    fetch("https://api.ipify.org?format=json")
      .then((response) => response.json())
      .then((data) => {
        if (!data.ip) return;
        if (frame && frame.contentWindow) {
          frame.contentWindow.postMessage({ ip: data.ip }, "*");
        }
      });
  }

  function stepNavigated(headerHeight) {
    const $frame = document.getElementById("kw_iframe");
    if (!$frame) return;

    let rect = $frame.getBoundingClientRect();
    let targetPosition = rect.top + window.parent.scrollY;

    // Si el iframe está dentro de otro iframe, calcular y sumar su posición
    if (window.parent !== window && window.frameElement) {
      const parentRect = window.frameElement.getBoundingClientRect();
      targetPosition += parentRect.top;
    }

    if (headerHeight) {
      targetPosition -= headerHeight;
    }

    scrollToPosition(targetPosition);
  }

  let isScrollingProgrammatically = false;

  function scrollToPosition(targetPosition) {
    isScrollingProgrammatically = true;

    window.scrollTo({
      top: targetPosition,
      behavior: "smooth",
    });

    setTimeout(() => {
      isScrollingProgrammatically = false;
    }, 500);
  }

  function handleScroll(event) {
    if (isScrollingProgrammatically) {
      event.stopImmediatePropagation();
      return;
    }
  }

  function getTrackingData() {
    const urlParams = new URLSearchParams(window.location.search);

    const trackingData = {
      aff_id : urlParams.get("aff_id"),
      offer_id : urlParams.get("offer_id"),
      transaction_id : urlParams.get("transaction_id"),
      source : urlParams.get("source"),
      traffic_source : urlParams.get("traffic_source"),
      aff_sub: urlParams.get("aff_sub"),
      aff_sub2: urlParams.get("aff_sub2"),
      aff_sub3: urlParams.get("aff_sub3"),
      aff_sub4: urlParams.get("aff_sub4"),
      aff_sub5: urlParams.get("aff_sub5"),
    };

    const filteredTrackingData = Object.fromEntries(
      Object.entries(trackingData).filter(([_, value]) => value)
    );

    frame.contentWindow.postMessage(
      { trackingData: filteredTrackingData },
      "*"
    );
  }

  function startLoading() {
    const loadingIcon =
      '<svg stroke="#495057" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g class="kw_spinner"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3.9"></circle></g></svg>';
    const parent = frame.parentElement;
    frame.style.display = "none";
    setTimeout(() => {
      if (!loaded) {
        frame.style.display = "block";
      }
    }, 20000);

    loader.style.height = " 50px";
    loader.style.width = " 50px";
    loader.style.margin = "0 auto";
    loader.style.marginTop = "80px";
    loader.style.display = "flex";
    loader.style.justifyContent = "center";
    loader.style.alignItems = "center";
    loader.innerHTML = loadingIcon;

    parent.appendChild(loader);

    const style = document.createElement("style");
    style.textContent = `
    .kw_spinner {
      transform-origin: center;
      animation: kw_spinner_1 4s linear infinite;
    }
  
    .kw_spinner circle {
      stroke-linecap: round;
      animation: kw_spinner_2 4s ease-in-out infinite;
    }
  
    @keyframes kw_spinner_1 {
      100% {
        transform: rotate(720deg);
      }
    }
  
    @keyframes kw_spinner_2 {
      0% {
        stroke-dasharray: 0 150;
        stroke-dashoffset: 0;
      }
  
      50% {
        stroke-dasharray: 42 150;
        stroke-dashoffset: -16;
      }
  
      95%, 100% {
        stroke-dasharray: 42 150;
        stroke-dashoffset: -59;
      }
    }
  `;
    document.head.appendChild(style);
  }

  function endLoading() {
    loader.remove();
    frame.style.display = "block";
    loaded = true;
  }
}