document.addEventListener('DOMContentLoaded', function () {
    const calcContainer = document.getElementById('dynamic-calc');
    const staticCalc = document.getElementById('static-calc');

    if (calcContainer) {
        calcContainer.style.display = 'block';
        if (staticCalc) staticCalc.style.display = 'none';

        const input = document.getElementById('calc-input');
        const result = document.getElementById('calc-result');
        const history = document.getElementById('calc-history');
        const buttons = document.querySelectorAll('.calc-buttons button');

        let currentInput = '';
        let historyLog = [];

        const updateUI = () => {
            input.value = currentInput;
            history.innerHTML = historyLog.map(entry => `<div>${entry}</div>`).join('');
        };

        buttons.forEach(button => {
            button.addEventListener('click', () => {
                const val = button.getAttribute('data-value');

                if (val === 'C') {
                    currentInput = '';
                } else if (val === '=') {
                    try {
                        const res = eval(currentInput);
                        historyLog.push(`${currentInput} = ${res}`);
                        if (historyLog.length > 30) historyLog.shift(); // Remove oldest
                        currentInput = res.toString();
                    } catch (e) {
                        currentInput = 'Error';
                    }
                } else {
                    currentInput += val;
                }

                updateUI();
            });
        });

        updateUI();
    }
});