// -------------------------------
// Payment Request Setup
// -------------------------------

// Create headers for the payment request
const headers = new Headers();
const demoApiKey = "test_93dc98ae-ff87-4671-a821-cda33fdfc26e"; // Demo API key: NEVER use this client-side in production

headers.append("Content-Type", "application/json");
headers.append("Accept", "application/json");
headers.append("Authorization", `Bearer ${demoApiKey}`);

// Define the payment payload data
const paymentData = {
  pointOfSaleId: "0195a362-5bf4-7bb9-a419-2367fda11e6f",
  amount: 100, // minor amount
  currency: "DKK"
};

// Setup the fetch options
const requestOptions = {
  method: "POST",
  headers: headers,
  body: JSON.stringify(paymentData),
  redirect: "follow"
};

// -------------------------------
// Helper: Dynamically Load External Module
// -------------------------------

/**
 * Dynamically loads an external script module.
 *
 * @param {string} scriptUrl - The URL of the external module.
 * @param {Function} onLoadCallback - A callback function to run once the module loads.
 */
function loadExternalModule(scriptUrl, onLoadCallback) {
  const scriptEl = document.createElement("script");
  scriptEl.type = "module";
  scriptEl.src = scriptUrl;
  scriptEl.onload = onLoadCallback;
  document.body.appendChild(scriptEl);
  console.log("Dynamically loading external script:", scriptUrl);
}

// -------------------------------
// Payment Request & Hosted Fields Initialization
// -------------------------------

fetch("https://payments.epay.eu/public/api/v1/cit", requestOptions)
  .then((response) => response.json())
  .then((result) => {
    console.log("Payment response:", result);

    // Extract session and payment details from the response
    const sessionId = result.session.id;
    const sessionKey = result.key;
    const amount = result.session.amount;
    const currency = result.session.currency;

    // Dynamically load the external payment module using the URL from the response
    loadExternalModule(result.javascript, () => {
      // Initialize hosted fields with session data and callbacks
      epay.setSessionId(sessionId).setSessionKey(sessionKey).init();

      const button = document.getElementById("apple-pay-button");
      button.addEventListener("click", () => {
        epay.createApplePayTransaction();
      });
    });
  })
  .catch((error) => {
    console.error("Error during payment request:", error);
    displayError("Error during payment request", error);
  });