@php
    $idPrefix = $idPrefix ?? 'dashv2';
@endphp

<script>
(function() {
    const idPrefix = @json($idPrefix);
    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;
    }

    const activeClasses = ['bg-brand-blue', 'text-white', 'shadow-[0_3px_10px_rgba(36,86,230,.3)]'];
    const inactiveClasses = ['text-muted'];

    function setToggle(isMonthly) {
        if (isMonthly) {
            monthlyPricing.classList.remove('hidden');
            yearlyPricing.classList.add('hidden');
            monthlyToggle.classList.add(...activeClasses);
            monthlyToggle.classList.remove(...inactiveClasses);
            yearlyToggle.classList.remove(...activeClasses);
            yearlyToggle.classList.add(...inactiveClasses);
        } else {
            yearlyPricing.classList.remove('hidden');
            monthlyPricing.classList.add('hidden');
            yearlyToggle.classList.add(...activeClasses);
            yearlyToggle.classList.remove(...inactiveClasses);
            monthlyToggle.classList.remove(...activeClasses);
            monthlyToggle.classList.add(...inactiveClasses);
        }
    }

    monthlyToggle.addEventListener('click', function() { setToggle(true); });
    yearlyToggle.addEventListener('click', function() { setToggle(false); });
    setToggle(true);

    const pricingData = @json(pricing()->allForFrontend());
    const inviteReplyMonthlyUrl = @json(\App\Services\SubscriptionPlanService::getCalendarAuthInviteReplyTrialPaymentUrl());
    const inviteReplyTenPlusMonthlyUrl = @json(\App\Services\SubscriptionPlanService::getInviteReplyTenPlusMonthlyPaymentUrl());
    const inviteReplyTenPlusYearlyUrl = @json(\App\Services\SubscriptionPlanService::getInviteReplyTenPlusYearlyPaymentUrl());

    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, options = {}) {
        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;

        const tenPlusValue = options.tenPlusValue || null;
        const tenPlusUrl = options.tenPlusUrl || null;
        const singleQtyUrl = options.singleQtyUrl || null;

        if (btn) {
            const baseSubscribeUrl = pricingData[planKey]?.[period]?.subscribe_url;
            function setHref(qty) {
                if (tenPlusValue && tenPlusUrl && qty === tenPlusValue) {
                    btn.href = tenPlusUrl;
                    return;
                }
                if (singleQtyUrl && qty === '1') {
                    btn.href = singleQtyUrl;
                    return;
                }
                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) {
            function updateSaving(qty) {
                if (tenPlusValue && qty === tenPlusValue) {
                    setSaving(document.getElementById(savingElId), '');
                    return;
                }
                updateQuantityPlan(planKey, period, qty, savingElId, suffix);
            }
            updateSaving(select.value || '1');
            select.addEventListener('change', function() {
                updateSaving(this.value);
            });
        }
    }

    wireQuantitySelect('quantitySelectPro', 'proBtn', 'Reply', 'monthly', 'reply-saving-monthly', '/mo');
    wireQuantitySelect('quantitySelectInvite', 'inviteReplyBtn', 'InviteReply', 'monthly', 'invite-saving-monthly', '/mo', {
        singleQtyUrl: inviteReplyMonthlyUrl,
        tenPlusValue: '10+',
        tenPlusUrl: inviteReplyTenPlusMonthlyUrl,
    });
    wireQuantitySelect('quantitySelectProYearly', 'proBtnYearly', 'Reply', 'yearly', 'reply-saving-yearly', '/yr');
    wireQuantitySelect('quantitySelectInviteYearly', 'inviteReplyBtnYearly', 'InviteReply', 'yearly', 'invite-saving-yearly', '/yr', {
        tenPlusValue: '10+',
        tenPlusUrl: inviteReplyTenPlusYearlyUrl,
    });
})();
</script>