document.addEventListener("DOMContentLoaded", () => {
    const stripe = Stripe("pk_live_thCcMjKeVsvIonddjuI6Fljp");

    const paymentForm = document.querySelector("#Payment");
    if (!paymentForm) return;

    let elements;

    initialize();

    paymentForm.addEventListener("submit", handleSubmit);

    // Initialize Stripe Elements
    async function initialize() {
        showLoader(true);

        try {
            // Grab values dynamically from the form inputs
            const email = document.querySelector('input[name="email"]').value;
            const name = document.querySelector('input[name="name"]').value;
            const pass = document.querySelector('input[name="password"]').value;
            const price = document.querySelector('input[name="price"]').value;
            const program = document.querySelector('input[name="programid"]').value;
            const partner_name = document.querySelector('input[name="partner_name"]')?.value || "";
            const partner_email = document.querySelector('input[name="partner_email"]')?.value || "";

            const response = await fetch("/ajax.php?view=checkout&ajax=create", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ email, name, pass, price, pid: program , partner_name,partner_email})
            });

            const data = await response.json();

            if (!data.clientSecret) throw new Error("Payment initialization failed.");

            elements = stripe.elements({ clientSecret: data.clientSecret });

            const paymentElementOptions = { layout: "accordion" };
            const paymentElement = elements.create("payment", paymentElementOptions);

            const paymentContainer = document.querySelector("#payment-element");
            if (paymentContainer) paymentElement.mount("#payment-element");

        } catch (error) {
            console.error("Error initializing payment:", error);
            showMessage("Failed to load payment UI. Please try again.");
        } finally {
            showLoader(false);
        }
    }

    // Handle form submission
    async function handleSubmit(e) {
        e.preventDefault();
        setLoading(true);

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: "https://www.bulletproofhusband.com/index.php?view=checkoutdone",
            },
        });

        if (error) {
            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");
        if (!messageContainer) return;

        messageContainer.classList.remove("hidden");
        messageContainer.textContent = messageText;

        setTimeout(() => {
            messageContainer.classList.add("hidden");
            messageContainer.textContent = "";
        }, 4000);
    }

    function setLoading(isLoading) {
        const spinner = document.querySelector("#stripespinner");
        const buttonText = document.querySelector("#button-text");
        const submitButton = document.querySelector("#submit");

        if (!submitButton || !spinner || !buttonText) return;

        if (isLoading) {
            submitButton.disabled = true;
            spinner.classList.remove("stripehidden");
            buttonText.classList.add("stripehidden");
        } else {
            submitButton.disabled = false;
            spinner.classList.add("stripehidden");
            buttonText.classList.remove("stripehidden");
        }
    }
});

// PayPal handler
function setPaymentMethod(method) {
    const paymentForm = document.getElementById("Details");
    if (!paymentForm) return;

    if (method === 'paypal') {
        paymentForm.action = 'https://www.paypal.com/cgi-bin/webscr';
    }

    if (paymentForm.checkValidity()) {
        paymentForm.submit();
    } else {
        paymentForm.reportValidity();
    }
}

// Full-page loader
function showLoader(isLoading) {
    const loader = document.getElementById("full-page-loader");
    if (!loader) return;

    loader.style.display = isLoading ? "flex" : "none";
}