const monthlyTabButton = document.getElementById("monthly-tab");
const yearlyTabButton = document.getElementById("yearly-tab");
const lyricsColumn = document.querySelector(".col-lg-4:nth-child(1) .card-price");
const musicColumn = document.querySelector(".col-lg-4:nth-child(2) .card-price");
const proColumn = document.querySelector(".col-lg-4:nth-child(3) .card-price");

let lyricsPrice = 7.99;
let musicPrice = 11.99;
let proPrice = 14.99;
let lyricsPriceYearly = 6.49;
let musicPriceYearly = 9.99;
let proPriceYearly = 12.49;

const lyricsSubscribeButton = document.getElementById('lyrics-subscribe');
const musicSubscribeButton = document.getElementById('music-subscribe');
const proSubscribeButton = document.getElementById('pro-subscribe');
const promoCodeSubscribe = document.getElementById('apply-promo');

var promoCode = document.getElementById('couponId');

// ********************************************************************

lyricsColumn.innerHTML = `$${lyricsPrice}<span class="period purple">/month</span>`;
musicColumn.innerHTML = `$${musicPrice}<span class="period purple">/month</span>`;
proColumn.innerHTML = `$${proPrice}<span class="period purple">/month</span>`;

lyricsSubscribeButton.addEventListener('click', function() {
    const billingCycle = getBillingCycle();

    if (promoCode) {
        window.location.href = `/create-checkout-session?cycle=${billingCycle}&plan=lyrics&promo=${promoCode.value}`;
    } else {
        window.location.href = `/create-checkout-session?cycle=${billingCycle}&plan=lyrics`;
    }
});

if (musicSubscribeButton) {
    musicSubscribeButton.addEventListener('click', function() {
        const billingCycle = getBillingCycle();

        if (promoCode) {
            window.location.href = `/create-checkout-session?cycle=${billingCycle}&plan=music&promo=${promoCode.value}`;
        } else {
            window.location.href = `/create-checkout-session?cycle=${billingCycle}&plan=music`;
        }
    });
}

if (proSubscribeButton) {
    proSubscribeButton.addEventListener('click', function() {
        const billingCycle = getBillingCycle();

        if (promoCode) {
            window.location.href = `/create-checkout-session?cycle=${billingCycle}&plan=pro&promo=${promoCode.value}`;
        } else {
            window.location.href = `/create-checkout-session?cycle=${billingCycle}&plan=pro`;
        }
    });
}


document.addEventListener('DOMContentLoaded', async () => {
    let searchParams = new URLSearchParams(window.location.search);
    if (searchParams.has('session_id')) {
        const session_id = searchParams.get('session_id');
        document.getElementById('session-id').setAttribute('value', session_id);
    }
});

monthlyTabButton.addEventListener("click", showMonthly);
yearlyTabButton.addEventListener("click", showYearly);

if (promoCodeSubscribe) {
    promoCodeSubscribe.addEventListener('click', async function () {
        var promoVerificationMsg = document.getElementById('promo-code-verification');

        if (promoCode) {
            try {
                const response = await fetch('/subscription_promo_code', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({promoCode: promoCode.value})
                });

                const data = await response.json();

                if (data.promoValid) {
                    promoVerificationMsg.innerText = 'Promo code applied successfully.';
                    promoVerificationMsg.style.color = 'green';
                    promoVerificationMsg.classList.remove('d-none');
                    promoVerificationMsg.classList.add('d-flex');

                    document.getElementById('couponId').value = data.couponId;
                } else {
                    promoVerificationMsg.innerText = 'Invalid promo code.';
                    promoVerificationMsg.style.color = 'red';
                    promoVerificationMsg.classList.remove('d-none');
                    promoVerificationMsg.classList.add('d-flex');

                }
            } catch (error) {
                console.error('Error:', error);
            }
        }

    });
}



// ********************************************************************

function showYearly() {
    lyricsColumn.innerHTML = `$${lyricsPriceYearly}<span class="period purple">/month</span>`;
    musicColumn.innerHTML = `$${musicPriceYearly}<span class="period purple">/month</span>`;
    proColumn.innerHTML = `$${proPriceYearly}<span class="period purple">/month</span>`;
    yearlyTabButton.classList.add("active");
    monthlyTabButton.classList.remove("active");
}

function showMonthly() {
    lyricsColumn.innerHTML = `$${lyricsPrice}<span class="period purple">/month</span>`;
    musicColumn.innerHTML = `$${musicPrice}<span class="period purple">/month</span>`;
    proColumn.innerHTML = `$${proPrice}<span class="period purple">/month</span>`;
    // proBadge.innerHTML = "BEST DEAL";
    monthlyTabButton.classList.add("active");
    yearlyTabButton.classList.remove("active");
}


function getBillingCycle() {
    if (yearlyTabButton.classList.contains('active')) {
        return 'yearly';
    } else {
        return 'monthly';
    }
}