@php
    $mode = $mode ?? 'dashboard';
    $idPrefix = $idPrefix ?? 'plan';
    $isMarketing = $mode === 'marketing';
@endphp

<script>
(function() {
    const idPrefix = @json($idPrefix);
    const isMarketing = @json($isMarketing);
    const p = (suffix) => idPrefix + '-' + suffix;

    const monthlyToggle = document.getElementById(p('monthlyToggle'));
    const yearlyToggle = document.getElementById(p('yearlyToggle'));
    const monthlyPricing = document.getElementById(p('monthlyPricing'));
    const yearlyPricing = document.getElementById(p('yearlyPricing'));

    if (!monthlyToggle || !yearlyToggle || !monthlyPricing || !yearlyPricing) {
        return;
    }

    monthlyToggle.addEventListener('click', function() {
        monthlyPricing.classList.remove('hidden');
        yearlyPricing.classList.add('hidden');
        monthlyToggle.classList.add('bg-blue-600', 'text-white', 'shadow-md');
        monthlyToggle.classList.remove('text-gray-600', 'dark:text-gray-400');
        yearlyToggle.classList.remove('bg-blue-600', 'text-white', 'shadow-md');
        yearlyToggle.classList.add('text-gray-600', 'dark:text-gray-400');
    });

    yearlyToggle.addEventListener('click', function() {
        yearlyPricing.classList.remove('hidden');
        monthlyPricing.classList.add('hidden');
        yearlyToggle.classList.add('bg-blue-600', 'text-white', 'shadow-md');
        yearlyToggle.classList.remove('text-gray-600', 'dark:text-gray-400');
        monthlyToggle.classList.remove('bg-blue-600', 'text-white', 'shadow-md');
        monthlyToggle.classList.add('text-gray-600', 'dark:text-gray-400');
    });

    const pricingData = @json(pricing()->allForFrontend());

    function fmt(n) {
        return Number(n).toLocaleString('en-US');
    }

    function setSaving(el, text) {
        if (!el) return;
        if (!text) {
            el.classList.add('hidden');
            el.textContent = '';
            return;
        }
        el.classList.remove('hidden');
        el.textContent = text;
    }

    function quantityTotal(planKey, period, qty) {
        const plan = pricingData[planKey];
        if (!plan || !plan[period]) return 0;
        const n = parseInt(qty || '1', 10);
        const base = plan[period].amount;
        const perExtra = plan[period].per_extra_account || 0;
        return base + (n - 1) * perExtra;
    }

    function updateQuantityPlan(planKey, period, qty, savingElId, suffix) {
        const n = parseInt(qty || '1', 10);
        const total = quantityTotal(planKey, period, n);
        const el = document.getElementById(savingElId);
        setSaving(el, n > 1 ? `${n} accounts — $${fmt(total)}${suffix} · 30% off additional branches` : '');
    }

    function wireQuantitySelect(selectSuffix, btnSuffix, planKey, period, savingSuffix, suffix) {
        const selectId = p(selectSuffix);
        const btnId = p(btnSuffix);
        const savingElId = savingSuffix ? p(savingSuffix) : '';
        const btn = document.getElementById(btnId);
        const select = document.getElementById(selectId);
        if (!select) return;

        if (!isMarketing && btn) {
            const baseSubscribeUrl = pricingData[planKey]?.[period]?.subscribe_url;
            function setHref(qty) {
                if (!baseSubscribeUrl) return;
                const url = new URL(baseSubscribeUrl, window.location.origin);
                url.searchParams.set('b', qty);
                btn.href = url.pathname + url.search;
            }
            setHref(select.value || '1');
            select.addEventListener('change', function() {
                setHref(this.value);
            });
        }

        if (savingElId) {
            updateQuantityPlan(planKey, period, select.value, savingElId, suffix);
            select.addEventListener('change', function() {
                updateQuantityPlan(planKey, period, this.value, savingElId, suffix);
            });
        }
    }

    wireQuantitySelect('quantitySelectPro', 'proBtn', 'Reply', 'monthly', 'reply-saving-monthly', '/mo');
    wireQuantitySelect('quantitySelectInvite', 'inviteReplyBtn', 'InviteReply', 'monthly', 'invite-saving-monthly', '/mo');
    wireQuantitySelect('quantitySelectProYearly', 'proBtnYearly', 'Reply', 'yearly', 'reply-saving-yearly', '/yr');
    wireQuantitySelect('quantitySelectInviteYearly', 'inviteReplyBtnYearly', 'InviteReply', 'yearly', 'invite-saving-yearly', '/yr');
    wireQuantitySelect('quantitySelectAgency', 'agencyBtn', 'AgencyReseller', 'monthly', '', '');
    wireQuantitySelect('quantitySelectAgencyYearly', 'agencyBtnYearly', 'AgencyReseller', 'yearly', '', '');
})();
</script>