(() => {
    'use strict';

    const SELECTORS = {
        section: '[data-pricing-section]',
        card: '.yaidel-pricing-card',
        toggle: '[data-pricing-toggle]',
        toggleButton: '[data-billing]',
        price: '.yaidel-pricing-price',
        value: '.yaidel-price-value',
        period: '.yaidel-price-period',
        billing: '.yaidel-price-billing',
        currency: '.yaidel-price-currency'
    };

    const BILLING = {
        MONTHLY: 'monthly',
        ANNUAL: 'annual'
    };

    const CURRENCY = {
        USD: 'USD',
        KES: 'KES'
    };

    const CACHE_KEY = 'yaidel_pricing_currency_v3';
    const CACHE_TTL_MS = 24 * 60 * 60 * 1000;

    const formatters = {
        USD: new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 }),
        KES: new Intl.NumberFormat('en-KE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })
    };

    function init() {
        const sections = document.querySelectorAll(SELECTORS.section);
        if (!sections.length) return;

        // default for non-KE
        sections.forEach((section) => initSection(section, CURRENCY.USD));

        detectCurrencyFast().then((currency) => {
            sections.forEach((section) => {
                if (section.dataset.currency === currency) return;
                section.dataset.currency = currency;
                rerenderSection(section);
            });
        });
    }

    function initSection(section, defaultCurrency) {
        if (!section || section.dataset.pricingInitialized === 'true') return;

        section.dataset.currency = defaultCurrency;

        const cards = section.querySelectorAll(SELECTORS.card);
        if (!cards.length) return;

        cards.forEach((card) => {
            const toggle = card.querySelector(SELECTORS.toggle);
            const buttons = toggle ? toggle.querySelectorAll(SELECTORS.toggleButton) : [];
            if (!toggle || !buttons.length) return;

            buttons.forEach((button) => {
                button.addEventListener('click', () => {
                    const billing = button.dataset.billing;
                    if (billing !== BILLING.MONTHLY && billing !== BILLING.ANNUAL) return;
                    setCardBilling(card, billing);
                });
            });

            setCardBilling(card, BILLING.MONTHLY);
        });

        section.dataset.pricingInitialized = 'true';
    }

    function setCardBilling(card, billing) {
        const buttons = card.querySelectorAll(`${SELECTORS.toggle} ${SELECTORS.toggleButton}`);
        buttons.forEach((button) => {
            const active = button.dataset.billing === billing;
            button.classList.toggle('active', active);
            button.setAttribute('aria-pressed', active ? 'true' : 'false');
        });

        card.dataset.billing = billing;
        updateCardPrice(card, billing);
    }

    function rerenderSection(section) {
        const cards = section.querySelectorAll(SELECTORS.card);
        cards.forEach((card) => {
            updateCardPrice(card, card.dataset.billing || BILLING.MONTHLY);
        });
    }

    function updateCardPrice(card, billing) {
        const price = card.querySelector(SELECTORS.price);
        if (!price) return;

        const valueEl = price.querySelector(SELECTORS.value);
        const periodEl = price.querySelector(SELECTORS.period);
        const billingEl = price.querySelector(SELECTORS.billing);
        const currencyEl = price.querySelector(SELECTORS.currency);
        if (!valueEl || !periodEl || !billingEl || !currencyEl) return;

        const section = card.closest(SELECTORS.section);
        const currency = section?.dataset.currency === CURRENCY.KES ? CURRENCY.KES : CURRENCY.USD;

        const field = (name) => {
            // Prefer country-specific hardcoded values
            // e.g. data-monthly-kes, data-monthly-usd
            const specific = price.dataset[`${name}${currency}`]; // monthlyKES? no camel issue handled below
            if (specific != null) return specific;

            // explicit keys for safety
            const map = {
                monthlyUSD: price.dataset.monthlyUsd,
                monthlyKES: price.dataset.monthlyKes,
                annualMonthlyUSD: price.dataset.annualMonthlyUsd,
                annualMonthlyKES: price.dataset.annualMonthlyKes,
                annualTotalUSD: price.dataset.annualTotalUsd,
                annualTotalKES: price.dataset.annualTotalKes
            };

            if (name === 'monthly' && currency === CURRENCY.USD) return map.monthlyUSD;
            if (name === 'monthly' && currency === CURRENCY.KES) return map.monthlyKES;
            if (name === 'annualMonthly' && currency === CURRENCY.USD) return map.annualMonthlyUSD;
            if (name === 'annualMonthly' && currency === CURRENCY.KES) return map.annualMonthlyKES;
            if (name === 'annualTotal' && currency === CURRENCY.USD) return map.annualTotalUSD;
            if (name === 'annualTotal' && currency === CURRENCY.KES) return map.annualTotalKES;

            // fallback (old generic data)
            return price.dataset[name];
        };

        if (billing === BILLING.MONTHLY) {
            const monthly = toNumber(field('monthly'));
            if (monthly === null) return;

            valueEl.textContent = formatNumber(monthly, currency);
            currencyEl.textContent = currency === CURRENCY.KES ? 'KSh' : '$';
            periodEl.textContent = '/ month';
            billingEl.textContent = 'Billed monthly';
            billingEl.classList.remove('is-annual');
            return;
        }

        const annualMonthly = toNumber(field('annualMonthly'));
        const annualTotal = toNumber(field('annualTotal'));
        if (annualMonthly === null || annualTotal === null) return;

        valueEl.textContent = formatNumber(annualMonthly, currency);
        currencyEl.textContent = currency === CURRENCY.KES ? 'KSh' : '$';
        periodEl.textContent = '/ month';
        billingEl.textContent =
            currency === CURRENCY.KES
                ? `KSh ${formatNumber(annualTotal, currency)} billed annually`
                : `$${formatNumber(annualTotal, currency)} billed annually`;
        billingEl.classList.add('is-annual');
    }

    function toNumber(value) {
        if (value === undefined || value === null || value === '') return null;
        const n = Number(value);
        return Number.isFinite(n) ? n : null;
    }

    function formatNumber(value, currency) {
        return (currency === CURRENCY.KES ? formatters.KES : formatters.USD).format(value);
    }

    async function detectCurrencyFast() {
        const cached = readCurrencyCache();
        if (cached) return cached;

        try {
            const res = await fetch('https://ipapi.co/json/', { method: 'GET', cache: 'no-store' });
            if (!res.ok) {
                writeCurrencyCache(CURRENCY.USD);
                return CURRENCY.USD;
            }
            const data = await res.json();
            const code = String(data?.country_code || '').toUpperCase();
            const currency = code === 'KE' ? CURRENCY.KES : CURRENCY.USD;
            writeCurrencyCache(currency);
            return currency;
        } catch (_) {
            writeCurrencyCache(CURRENCY.USD);
            return CURRENCY.USD;
        }
    }

    function readCurrencyCache() {
        try {
            const raw = localStorage.getItem(CACHE_KEY);
            if (!raw) return null;
            const parsed = JSON.parse(raw);
            if (!parsed?.currency || !parsed?.timestamp) return null;
            if (Date.now() - parsed.timestamp > CACHE_TTL_MS) return null;
            if (parsed.currency !== CURRENCY.USD && parsed.currency !== CURRENCY.KES) return null;
            return parsed.currency;
        } catch (_) {
            return null;
        }
    }

    function writeCurrencyCache(currency) {
        try {
            localStorage.setItem(CACHE_KEY, JSON.stringify({ currency, timestamp: Date.now() }));
        } catch (_) {}
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init, { once: true });
    } else {
        init();
    }
})();