up.macro(
  "[up-loading], [up-loading-remove]",
  function (element) {
    try {
      const targetSelector = element.getAttribute("up-loading-target") || null;
      const delay = parseInt(
        element.getAttribute("up-loading-delay") || "0",
        10
      );
      const removeMode = element.hasAttribute("up-loading-remove");
      const className = element.getAttribute("up-loading-class");
      const attrName = element.getAttribute("up-loading-attr");

      let timeoutId = null;
      let isActive = false;

      // Store original display style
      const originalDisplay = window.getComputedStyle(element).display;

      // Initially hide loading elements (show for remove elements)
      if (!removeMode && !className && !attrName) {
        element.style.display = "none";
      }

      const showLoading = function () {
        if (isActive) {
          return;
        }

        const delayMs = delay;

        const activate = function () {
          isActive = true;

          if (className) {
            element.classList.add(className);
          } else if (attrName) {
            element.setAttribute(attrName, "true");
          } else {
            const newDisplay = removeMode
              ? "none"
              : originalDisplay === "none"
              ? "block"
              : originalDisplay;
            element.style.display = newDisplay;
          }
        };

        if (delayMs > 0) {
          timeoutId = setTimeout(activate, delayMs);
        } else {
          activate();
        }
      };

      const hideLoading = function () {
        if (timeoutId) {
          clearTimeout(timeoutId);
          timeoutId = null;
        }

        if (!isActive) {
          return;
        }

        isActive = false;

        if (className) {
          element.classList.remove(className);
        } else if (attrName) {
          element.removeAttribute(attrName);
        } else {
          const newDisplay = removeMode
            ? originalDisplay === "none"
              ? "block"
              : originalDisplay
            : "none";
          element.style.display = newDisplay;
        }
      };

      // Event handler that checks targeting
      const handleRequest = function (event) {
        try {
          if (!targetSelector) {
            showLoading();
            return;
          }

          const origin = event.origin;
          if (
            origin &&
            origin.matches &&
            origin.matches(targetSelector)
          ) {
            showLoading();
          }
        } catch (e) {
          console.error("💥 Error in up-loading request handler:", e);
        }
      };

      const handleRequestEnd = function (event) {
        try {
          if (!targetSelector) {
            hideLoading();
            return;
          }

          const origin = event.origin;
          if (
            origin &&
            origin.matches &&
            origin.matches(targetSelector)
          ) {
            hideLoading();
          }
        } catch (e) {
          console.error("💥 Error in up-loading request end handler:", e);
        }
      };

      // Listen to Unpoly's loading events
      up.on(document, "up:request:load", handleRequest);
      up.on(document, "up:request:loaded", handleRequestEnd);
      up.on(document, "up:request:aborted", handleRequestEnd);
      up.on(document, "up:form:submit", handleRequest);

      // Return cleanup function
      return function () {
        try {
          up.off(document, "up:request:load", handleRequest);
          up.off(document, "up:request:loaded", handleRequestEnd);
          up.off(document, "up:request:aborted", handleRequestEnd);
          up.off(document, "up:form:submit", handleRequest);
          if (timeoutId) {
            clearTimeout(timeoutId);
          }
        } catch (e) {
          console.error("💥 Error in up-loading cleanup:", e);
        }
      };
    } catch (e) {
      console.error("💥 Error initializing up-loading macro:", e);
      return function () {};
    }
  }
);