/* ==================================================
   Nuclear Fancy Pants Edition™ — NUCLEAR+++
   File: /assets/public/js/pricing.js
   Description: Billing toggle, price switching, and API key modal for plans page
   Last Edited: 2026-04-29
   ================================================== */

(function () {
    'use strict';

    var toggleBtns = document.querySelectorAll('.amai-billing-toggle__btn');
    var planCards  = document.querySelectorAll('.amai-plan[data-plan-slug]');
    var billing    = 'yearly';

    function updatePrices() {
        planCards.forEach(function (card) {
            var priceEl  = card.querySelector('.amai-plan__price');
            var periodEl = card.querySelector('.amai-plan__period');
            if (!priceEl || !periodEl) { return; }

            var yearPrice = priceEl.dataset.priceYear;
            var moPrice   = priceEl.dataset.priceMo;
            var savings   = periodEl.dataset.savings;

            // Skip free card
            if (yearPrice === '0' && moPrice === '0') { return; }
            if (!yearPrice || !moPrice) { return; }

            if (billing === 'monthly') {
                priceEl.innerHTML = '$' + moPrice + '<span class="amai-plan__price-period">/mo</span>';
                periodEl.textContent = '';
            } else {
                priceEl.innerHTML = '$' + yearPrice + '<span class="amai-plan__price-period">/yr</span>';
                periodEl.textContent = savings ? '2 months free - save $' + savings + '/yr' : '';
            }

            // Update CTA href to reflect current billing period
            var ctaLink = card.querySelector('.amai-plan__cta a[data-plan-slug]');
            if (ctaLink) {
                var slug = ctaLink.dataset.planSlug;
                ctaLink.href = '/get-started?plan=' + slug + '&billing=' + billing;
            }
        });
    }

    toggleBtns.forEach(function (btn) {
        btn.addEventListener('click', function () {
            billing = btn.dataset.billing;
            toggleBtns.forEach(function (b) { b.classList.remove('is-active'); });
            btn.classList.add('is-active');
            updatePrices();
        });
    });

    // API key modal
    var modalHtml = '<div class="amai-apikey-modal-backdrop" id="amai-apikey-modal">'
        + '<div class="amai-apikey-modal">'
        + '<button class="amai-apikey-modal__close" id="amai-apikey-close" aria-label="Close">&times;</button>'
        + '<div class="amai-apikey-modal__eyebrow">Free plan</div>'
        + '<div class="amai-apikey-modal__title">What is an API key?</div>'
        + '<div class="amai-apikey-modal__body">An API key is a password that connects AutoMarketer AI to an AI provider. You sign up directly with the provider, copy your key, and paste it into the plugin. You pay the provider directly for usage - typically just a few cents per week for a small business.</div>'
        + '<div class="amai-apikey-modal__providers">'
        + '<div class="amai-apikey-modal__provider"><span class="amai-apikey-modal__provider-dot"></span>Anthropic (Claude) - <a href="https://anthropic.com/api" target="_blank" rel="noopener">anthropic.com/api</a></div>'
        + '<div class="amai-apikey-modal__provider"><span class="amai-apikey-modal__provider-dot"></span>OpenAI (GPT-4) - <a href="https://platform.openai.com" target="_blank" rel="noopener">platform.openai.com</a></div>'
        + '<div class="amai-apikey-modal__provider"><span class="amai-apikey-modal__provider-dot"></span>Google (Gemini) - <a href="https://aistudio.google.com" target="_blank" rel="noopener">aistudio.google.com</a></div>'
        + '<div class="amai-apikey-modal__provider"><span class="amai-apikey-modal__provider-dot"></span>xAI (Grok) - <a href="https://console.x.ai" target="_blank" rel="noopener">console.x.ai</a></div>'
        + '</div>'
        + '<div class="amai-apikey-modal__note">AutoMarketer AI never marks up API costs. What the provider charges is what you pay.</div>'
        + '</div>'
        + '</div>';
    document.body.insertAdjacentHTML('beforeend', modalHtml);

    var apiModal    = document.getElementById('amai-apikey-modal');
    var apiClose    = document.getElementById('amai-apikey-close');
    var apiTriggers = document.querySelectorAll('.amai-apikey-trigger');

    function openApiModal() { apiModal.classList.add('is-open'); }
    function closeApiModal() { apiModal.classList.remove('is-open'); }

    apiTriggers.forEach(function (t) { t.addEventListener('click', openApiModal); });
    apiClose.addEventListener('click', closeApiModal);
    apiModal.addEventListener('click', function (e) {
        if (e.target === apiModal) { closeApiModal(); }
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') { closeApiModal(); }
    });

}());