const stripe = Stripe('pk_test_51Hh9Y2L9s5P2Q8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4sYgY8Z4');

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

// Initially, disable the submit button until the form is filled
document.querySelector("#submit").disabled = true;

// Create and mount the Payment Element
const elements = stripe.elements();
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");

// Re-enable the submit button when the Payment Element is ready
paymentElement.on('ready', () => {
    document.querySelector("#submit").disabled = false;
});


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;
    const planId = form.dataset.planId;

    if (!name || !email || !address || !planId) {
        showMessage("Please fill out all fields.");
        setLoading(false);
        return;
    }

    // Create customer, order, and payment intent on the server.
    const response = await fetch("/api/process_signup.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            plan_id: planId,
            name: name,
            email: email,
            address: address
        }),
    });

    const { clientSecret, error } = await response.json();

    if (error) {
        showMessage(error);
        setLoading(false);
        return;
    }

    // Confirm the payment with the client secret.
    const { error: stripeError } = await stripe.confirmPayment({
        elements,
        clientSecret,
        confirmParams: {
            return_url: window.location.origin + "/order_confirmation.php",
            receipt_email: email,
        },
    });

    if (stripeError) {
        showMessage(stripeError.message);
    }

    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 = "";
  }, 5000);
}

function setLoading(isLoading) {
  if (isLoading) {
    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";
  }
}