/**
 * Injects Payment Methods module from pages/modules/payment-methods.html
 * into #payment-methods-container (style + section + script).
 */
(function () {
  var MODULE_URL = "/pages/modules/payment-methods.html";
  var MOUNT_ID = "payment-methods-container";
  var STYLE_ID = "payment-methods-module-styles";

  function injectModule(html) {
    var doc = new DOMParser().parseFromString(html, "text/html");
    var mount = document.getElementById(MOUNT_ID);
    if (!mount) return;

    var style = doc.querySelector("style");
    if (style && !document.getElementById(STYLE_ID)) {
      var styleEl = document.createElement("style");
      styleEl.id = STYLE_ID;
      styleEl.textContent = style.textContent;
      document.head.appendChild(styleEl);
    }

    var section = doc.querySelector("[data-payment-methods-module]");
    if (section) {
      mount.innerHTML = "";
      mount.appendChild(document.importNode(section, true));
    }

    var inlineScript = doc.querySelector("body script");
    if (inlineScript && inlineScript.textContent) {
      var run = new Function(inlineScript.textContent);
      run();
    }

    if (typeof window.initPaymentMethodsModule === "function") {
      mount.querySelectorAll("[data-payment-methods-module]").forEach(function (el) {
        window.initPaymentMethodsModule(el);
      });
    }
  }

  function load() {
    fetch(MODULE_URL, { credentials: "same-origin" })
      .then(function (res) {
        if (!res.ok) throw new Error("Failed to load " + MODULE_URL);
        return res.text();
      })
      .then(injectModule)
      .catch(function (err) {
        console.error("[load-payment-methods]", err);
      });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", load);
  } else {
    load();
  }
})();