/**
 * Maa Finance Anand - Interactive Client-side EMI Calculator & Amortization
 */
document.addEventListener('DOMContentLoaded', () => {
    const amountSlider = document.getElementById('calc-amount-slider') || document.getElementById('calc-principal');
    const rateSlider = document.getElementById('calc-rate-slider') || document.getElementById('calc-rate');
    const tenureSlider = document.getElementById('calc-tenure-slider') || document.getElementById('calc-tenure');

    const amountVal = document.getElementById('calc-amount-val') || document.getElementById('calc-principal-display');
    const rateVal = document.getElementById('calc-rate-val') || document.getElementById('calc-rate-display');
    const tenureVal = document.getElementById('calc-tenure-val') || document.getElementById('calc-tenure-display');

    const emiVal = document.getElementById('calc-emi-val') || document.getElementById('result-emi');
    const sumPrincipal = document.getElementById('calc-summary-principal') || document.getElementById('result-principal');
    const sumInterest = document.getElementById('calc-summary-interest') || document.getElementById('result-interest');
    const sumTotal = document.getElementById('calc-summary-total') || document.getElementById('result-total');
    const ratioBar = document.getElementById('calc-ratio-bar') || document.getElementById('bar-principal');
    const amortTableBody = document.getElementById('amortization-table-body');

    if (!amountSlider || !rateSlider || !tenureSlider) return;

    function formatINR(num) {
        return new Intl.NumberFormat('en-IN', {
            style: 'currency',
            currency: 'INR',
            maximumFractionDigits: 0
        }).format(num);
    }

    function compute() {
        const P = parseFloat(amountSlider.value);
        const annualRate = parseFloat(rateSlider.value);
        const years = parseFloat(tenureSlider.value);
        const r = (annualRate / 12) / 100;
        const n = years * 12;

        let emi = 0;
        let totalPay = 0;
        let totalInt = 0;

        if (r === 0) {
            emi = P / n;
            totalPay = P;
            totalInt = 0;
        } else {
            emi = (P * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
            totalPay = emi * n;
            totalInt = totalPay - P;
        }

        if (amountVal) amountVal.innerText = formatINR(P);
        if (rateVal) rateVal.innerText = annualRate.toFixed(2);
        if (tenureVal) tenureVal.innerText = years;

        if (emiVal) emiVal.innerText = formatINR(Math.round(emi));
        if (sumPrincipal) sumPrincipal.innerText = formatINR(Math.round(P));
        if (sumInterest) sumInterest.innerText = formatINR(Math.round(totalInt));
        if (sumTotal) sumTotal.innerText = formatINR(Math.round(totalPay));

        if (ratioBar && totalPay > 0) {
            const pPct = ((P / totalPay) * 100).toFixed(1);
            ratioBar.style.width = pPct + '%';
        }

        renderAmortization(P, r, n, emi);
    }

    function renderAmortization(P, r, n, emi) {
        if (!amortTableBody) return;
        let balance = P;
        let html = '';
        const totalYears = Math.ceil(n / 12);

        for (let yr = 1; yr <= totalYears; yr++) {
            let yrInterest = 0;
            let yrPrincipal = 0;
            const opening = balance;

            for (let m = 1; m <= 12; m++) {
                const month = (yr - 1) * 12 + m;
                if (month > n) break;

                const interestM = balance * r;
                const principalM = Math.min(balance, emi - interestM);

                yrInterest += interestM;
                yrPrincipal += principalM;
                balance -= principalM;
            }

            html += `
                <tr class="hover:bg-slate-50 transition">
                    <td class="p-3.5 font-bold text-slate-900">Year ${yr}</td>
                    <td class="p-3.5">${formatINR(Math.round(opening))}</td>
                    <td class="p-3.5 text-blue-600 font-semibold">${formatINR(Math.round(yrPrincipal))}</td>
                    <td class="p-3.5 text-amber-600 font-semibold">${formatINR(Math.round(yrInterest))}</td>
                    <td class="p-3.5">${formatINR(Math.round(yrPrincipal + yrInterest))}</td>
                    <td class="p-3.5 font-bold text-slate-900">${formatINR(Math.max(0, Math.round(balance)))}</td>
                </tr>
            `;
        }

        amortTableBody.innerHTML = html;
    }

    amountSlider.addEventListener('input', compute);
    rateSlider.addEventListener('input', compute);
    tenureSlider.addEventListener('input', compute);

    compute();
});