document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.getElementById('salesList');
    const addBtn = document.getElementById('addClientBtn');
    const resetBtn = document.getElementById('resetBtn');
    const template = document.getElementById('rowTemplate');
    const previousClientsInput = document.getElementById('previous_clients');

    let rowCounter = 0;

    // Load state from local storage on startup
    if (!loadState()) {
        // If no state found, add one empty row
        addClientRow();
    }

    addBtn.addEventListener('click', () => {
        addClientRow();
        saveState();
    });

    // Add reset functionality
    if (resetBtn) {
        resetBtn.addEventListener('click', () => {
            if (confirm('Voulez-vous vraiment toud effacer ?')) {
                localStorage.removeItem('commission_app_state');
                location.reload();
            }
        });
    }

    previousClientsInput.addEventListener('input', () => {
        calculateAll();
        saveState();
    });

    function addClientRow(data = null) {
        rowCounter++;
        const clone = template.content.cloneNode(true);
        const tr = clone.querySelector('tr');

        tr.dataset.id = rowCounter;
        tr.querySelector('.client-id').textContent = rowCounter;

        const usersInput = tr.querySelector('.users-input');
        const durationInput = tr.querySelector('.duration-input');

        // Populate if loading from save
        if (data) {
            usersInput.value = data.users;
            durationInput.value = data.duration;
        }

        // Add event listeners to save on any change
        [usersInput, durationInput].forEach(input => {
            input.addEventListener('input', () => { calculateAll(); saveState(); });
            input.addEventListener('change', () => { calculateAll(); saveState(); });
        });

        // Delete button
        tr.querySelector('.delete-btn').addEventListener('click', () => {
            tr.remove();
            updateRowNumbers();
            calculateAll();
            saveState();
        });

        tableBody.appendChild(tr);
        if (!data) calculateAll(); // Trigger calc if new row
    }

    function updateRowNumbers() {
        const rows = tableBody.querySelectorAll('tr');
        rows.forEach((row, index) => {
            row.querySelector('.client-id').textContent = index + 1;
        });
    }

    async function calculateAll() {
        const rows = tableBody.querySelectorAll('tr');
        const salesData = [];

        rows.forEach(row => {
            salesData.push({
                id: row.dataset.id,
                users: row.querySelector('.users-input').value,
                duration: row.querySelector('.duration-input').value
            });
        });

        const payload = {
            previous_clients: previousClientsInput.value,
            sales: salesData
        };

        try {
            // Changed endpoint from '/calculate' to 'calculate.php' for PHP version
            const response = await fetch('calculate.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            if (response.ok) {
                const result = await response.json();
                updateDisplay(result);
            }
        } catch (e) {
            console.error(e);
        }
    }

    function updateDisplay(data) {
        // Update Globals
        const rankContainer = document.getElementById('rank_badge_container');
        const rankIcon = document.getElementById('rank_icon');
        const rankLabel = document.getElementById('rank_label');

        if (data.rank_info) {
            rankContainer.className = `badge-lg ${data.rank_info.class}`;
            rankIcon.className = `fas ${data.rank_info.icon}`;
            rankLabel.textContent = data.rank_info.label;
        }

        document.getElementById('global_commission').textContent = formatCurrency(data.total_commission);

        // Update Rows
        data.results.forEach(res => {
            const row = tableBody.querySelector(`tr[data-id="${res.id}"]`);
            if (row) {
                row.querySelector('.ca-cell').textContent = formatCurrency(res.final_ca);
                row.querySelector('.comm-cell').innerHTML = `${formatCurrency(res.commission)} <span style="font-size:0.7em; opacity:0.7">(${res.commission_percent}%)</span>`;
            }
        });
    }

    function saveState() {
        const rows = tableBody.querySelectorAll('tr');
        const salesData = [];
        rows.forEach(row => {
            salesData.push({
                users: row.querySelector('.users-input').value,
                duration: row.querySelector('.duration-input').value
            });
        });

        const state = {
            previous_clients: previousClientsInput.value,
            sales: salesData
        };
        localStorage.setItem('commission_app_state', JSON.stringify(state));
    }

    function loadState() {
        const saved = localStorage.getItem('commission_app_state');
        if (saved) {
            try {
                const state = JSON.parse(saved);
                previousClientsInput.value = state.previous_clients || 0;

                if (state.sales && state.sales.length > 0) {
                    state.sales.forEach(sale => addClientRow(sale));
                    calculateAll();
                    return true;
                }
            } catch (e) {
                console.error("Load failed", e);
            }
        }
        return false;
    }

    function formatCurrency(val) {
        return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(val);
    }
});