// This is your test publishable key. Don't hardcode this in a real app.
const stripe = Stripe('pk_test_51Hh9Y2L9s5P2Q8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4');

let elements;
let clientSecret;

initialize();

document
  .querySelector("#signup-form")
  .addEventListener("submit", handleSubmit);

// Fetches a payment intent and captures the client secret
async function initialize() {
    const urlParams = new URLSearchParams(window.location.search);
    const planId = urlParams.get('plan_id');

    const response = await fetch("/api/create_payment_intent.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ plan_id: planId }),
    });
    const data = await response.json();
    clientSecret = data.clientSecret;

    const appearance = {
        theme: 'stripe',
    };
    elements = stripe.elements({ appearance, clientSecret });

    const paymentElement = elements.create("payment");
    paymentElement.mount("#payment-element");
}

async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);

    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const address = document.getElementById('address').value;
    
    if (!name || !email || !address) {
        showMessage("Please fill out all fields.");
        setLoading(false);
        return;
    }

    const payment_intent_id = clientSecret.split('_secret')[0];

    // Update the payment intent with customer details
    await fetch("/api/update_payment_intent.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
            payment_intent_id: payment_intent_id,
            name: name,
            email: email,
            address: address
        }),
    });

    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            // Make sure to change this to your payment completion page
            return_url: window.location.origin + "/order_confirmation.php",
            receipt_email: email,
        },
    });

    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, your customer will be redirected to
    // your `return_url`. For some payment methods like iDEAL, your customer will
    // be redirected to an intermediate site first to authorize the payment, then
    // redirected to the `return_url`.
    if (error.type === "card_error" || error.type === "validation_error") {
        showMessage(error.message);
    } else {
        showMessage("An unexpected error occurred.");
    }

    setLoading(false);
}


// ------- UI helpers -------

function showMessage(messageText) {
  const messageContainer = document.querySelector("#payment-message");

  messageContainer.style.display = "block";
  messageContainer.textContent = messageText;

  setTimeout(function () {
    messageContainer.style.display = "none";
    messageContainer.textContent = "";
  }, 4000);
}

// Show a spinner on payment submission
function setLoading(isLoading) {
  if (isLoading) {
    // Disable the button and show a spinner
    document.querySelector("#submit").disabled = true;
    document.querySelector("#spinner").style.display = "inline";
    document.querySelector("#button-text").style.display = "none";
  } else {
    document.querySelector("#submit").disabled = false;
    document.querySelector("#spinner").style.display = "none";
    document.querySelector("#button-text").style.display = "inline";
  }
}