// /home/Autopartes/pos/static/js/accounting.js
// Accounting module: chart of accounts, journal entries, financial reports

const Accounting = (() => {
    const API = '/pos/api/accounting';
    let accounts = [];     // cached for dropdowns
    let entryLineCtr = 0;  // counter for entry line IDs

    function token() {
        return localStorage.getItem('pos_token') || '';
    }

    function headers() {
        return { 'Authorization': `Bearer ${token()}`, 'Content-Type': 'application/json' };
    }

    async function api(path, opts = {}) {
        const res = await fetch(`${API}${path}`, { headers: headers(), ...opts });
        if (!res.ok) {
            const err = await res.json().catch(() => ({ error: res.statusText }));
            throw new Error(err.error || 'Request failed');
        }
        return res.json();
    }

    function fmt(n) {
        return parseFloat(n || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    // ─── Tabs ──────────────────────────────────────

    function initTabs() {
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
                tab.classList.add('active');
                document.getElementById(`tab-${tab.dataset.tab}`).classList.add('active');

                // Load data on tab switch
                const t = tab.dataset.tab;
                if (t === 'accounts') loadAccounts();
                if (t === 'entries') loadEntries();
                if (t === 'trial-balance') loadTrialBalance();
                if (t === 'income-statement') loadIncomeStatement();
                if (t === 'balance-sheet') loadBalanceSheet();
                if (t === 'aging') loadAging();
                if (t === 'periods') loadPeriods();
            });
        });
    }

    // ─── Chart of Accounts ─────────────────────────

    async function loadAccounts() {
        try {
            const res = await api('/accounts');
            accounts = res.data || [];
            renderAccountsTree();
        } catch (e) {
            document.getElementById('accounts-tree').innerHTML =
                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
        }
    }

    function renderAccountsTree() {
        const container = document.getElementById('accounts-tree');
        if (!accounts.length) { container.innerHTML = '<p>No hay cuentas.</p>'; return; }

        // Build tree structure
        const byParent = {};
        accounts.forEach(a => {
            const pid = a.parent_id || 'root';
            if (!byParent[pid]) byParent[pid] = [];
            byParent[pid].push(a);
        });

        function buildUl(parentId) {
            const children = byParent[parentId] || [];
            if (!children.length) return '';
            let html = '<ul class="tree">';
            for (const acct of children) {
                const hasChildren = byParent[acct.id] && byParent[acct.id].length > 0;
                const balClass = acct.balance < 0 ? 'negative' : '';
                html += '<li>';
                if (hasChildren) {
                    html += `<span class="tree-toggle open" onclick="this.classList.toggle('open');this.nextElementSibling.style.display=this.classList.contains('open')?'block':'none'">`;
                } else {
                    html += '<span style="display:inline-block;width:1rem;">';
                }
                html += `<span class="tree-code">${acct.code}</span> ${acct.name}`;
                html += `<span class="tree-balance ${balClass}">$${fmt(acct.balance)}</span>`;
                html += '</span>';
                if (hasChildren) {
                    html += `<div>${buildUl(acct.id)}</div>`;
                }
                html += '</li>';
            }
            html += '</ul>';
            return html;
        }

        container.innerHTML = buildUl('root');
    }

    function showNewAccountModal() {
        const sel = document.getElementById('na-parent');
        sel.innerHTML = '<option value="">-- Sin padre --</option>';
        accounts.forEach(a => {
            sel.innerHTML += `<option value="${a.id}">${a.code} - ${a.name}</option>`;
        });
        document.getElementById('na-code').value = '';
        document.getElementById('na-name').value = '';
        document.getElementById('new-account-modal').classList.add('active');
    }

    async function createAccount() {
        try {
            const parentId = document.getElementById('na-parent').value;
            await api('/accounts', {
                method: 'POST',
                body: JSON.stringify({
                    code: document.getElementById('na-code').value,
                    name: document.getElementById('na-name').value,
                    parent_id: parentId ? parseInt(parentId) : null,
                    type: document.getElementById('na-type').value,
                }),
            });
            closeModal('new-account-modal');
            loadAccounts();
        } catch (e) {
            alert('Error: ' + e.message);
        }
    }

    // ─── Journal Entries ───────────────────────────

    async function loadEntries() {
        try {
            const from = document.getElementById('entries-from').value;
            const to = document.getElementById('entries-to').value;
            const type = document.getElementById('entries-type').value;
            let qs = '?per_page=50';
            if (from) qs += `&date_from=${from}`;
            if (to) qs += `&date_to=${to}`;
            if (type) qs += `&type=${type}`;

            const res = await api(`/entries${qs}`);
            renderEntries(res.data || []);
        } catch (e) {
            document.getElementById('entries-list').innerHTML =
                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
        }
    }

    function renderEntries(entries) {
        const container = document.getElementById('entries-list');
        if (!entries.length) { container.innerHTML = '<p>No hay polizas en este periodo.</p>'; return; }

        let html = `<table class="report-table">
            <thead><tr>
                <th>#</th><th>Fecha</th><th>Tipo</th><th>Descripcion</th>
                <th>Referencia</th><th class="amount">Monto</th><th>Auto</th>
            </tr></thead><tbody>`;

        for (const e of entries) {
            html += `<tr style="cursor:pointer;" onclick="Accounting.showEntryDetail(${e.id})">
                <td>${e.entry_number}</td>
                <td>${e.date || ''}</td>
                <td>${e.type || ''}</td>
                <td>${e.description || ''}</td>
                <td>${e.reference_type ? `${e.reference_type} #${e.reference_id}` : ''}</td>
                <td class="amount">$${fmt(e.total_amount)}</td>
                <td>${e.is_auto ? 'Si' : 'No'}</td>
            </tr>`;
        }
        html += '</tbody></table>';
        container.innerHTML = html;
    }

    async function showEntryDetail(entryId) {
        try {
            const entry = await api(`/entries/${entryId}`);
            let html = `<h3>Poliza #${entry.entry_number}</h3>
                <div class="entry-header">
                    <span><strong>Fecha:</strong> ${entry.date}</span>
                    <span><strong>Tipo:</strong> ${entry.type}</span>
                    <span><strong>Estado:</strong> ${entry.status}</span>
                </div>
                <p>${entry.description || ''}</p>
                <table class="report-table">
                    <thead><tr>
                        <th>Cuenta</th><th>Nombre</th><th class="amount">Cargo</th>
                        <th class="amount">Abono</th><th>Nota</th>
                    </tr></thead><tbody>`;

            for (const l of entry.lines) {
                html += `<tr>
                    <td class="tree-code">${l.account_code}</td>
                    <td>${l.account_name}</td>
                    <td class="amount">${l.debit ? '$' + fmt(l.debit) : ''}</td>
                    <td class="amount">${l.credit ? '$' + fmt(l.credit) : ''}</td>
                    <td>${l.description || ''}</td>
                </tr>`;
            }

            html += `<tr class="total-row">
                <td colspan="2">Totales</td>
                <td class="amount">$${fmt(entry.total_debit)}</td>
                <td class="amount">$${fmt(entry.total_credit)}</td>
                <td></td>
            </tr></tbody></table>`;

            document.getElementById('entry-detail-content').innerHTML = html;
            document.getElementById('entry-detail-modal').classList.add('active');
        } catch (e) {
            alert('Error: ' + e.message);
        }
    }

    // ─── Manual Entry ──────────────────────────────

    function showNewEntryModal() {
        document.getElementById('ne-date').value = new Date().toISOString().slice(0, 10);
        document.getElementById('ne-description').value = '';
        document.getElementById('ne-lines').innerHTML = '';
        document.getElementById('ne-balance').innerHTML = '';
        entryLineCtr = 0;
        addEntryLine();
        addEntryLine();
        document.getElementById('new-entry-modal').classList.add('active');
    }

    function addEntryLine() {
        const id = entryLineCtr++;
        const tbody = document.getElementById('ne-lines');
        const tr = document.createElement('tr');
        tr.id = `ne-line-${id}`;

        let acctOptions = '<option value="">Seleccionar</option>';
        accounts.forEach(a => {
            if (a.parent_id) { // Only leaf accounts
                acctOptions += `<option value="${a.id}">${a.code} - ${a.name}</option>`;
            }
        });

        tr.innerHTML = `
            <td><select onchange="Accounting.updateEntryBalance()">${acctOptions}</select></td>
            <td><input type="number" step="0.01" min="0" value="0" onchange="Accounting.updateEntryBalance()"></td>
            <td><input type="number" step="0.01" min="0" value="0" onchange="Accounting.updateEntryBalance()"></td>
            <td><button onclick="this.closest('tr').remove();Accounting.updateEntryBalance();"
                 style="border:none;background:none;color:var(--danger);cursor:pointer;font-size:1.1rem;">x</button></td>`;
        tbody.appendChild(tr);
    }

    function updateEntryBalance() {
        const rows = document.querySelectorAll('#ne-lines tr');
        let totalDebit = 0, totalCredit = 0;
        rows.forEach(row => {
            const inputs = row.querySelectorAll('input[type="number"]');
            totalDebit += parseFloat(inputs[0].value) || 0;
            totalCredit += parseFloat(inputs[1].value) || 0;
        });
        const diff = Math.round((totalDebit - totalCredit) * 100) / 100;
        const el = document.getElementById('ne-balance');
        if (diff === 0) {
            el.innerHTML = `<span style="color:var(--success);">Cuadrada: Cargos $${fmt(totalDebit)} = Abonos $${fmt(totalCredit)}</span>`;
        } else {
            el.innerHTML = `<span style="color:var(--danger);">Descuadre: $${fmt(Math.abs(diff))} (Cargos $${fmt(totalDebit)} / Abonos $${fmt(totalCredit)})</span>`;
        }
    }

    async function createEntry() {
        try {
            const rows = document.querySelectorAll('#ne-lines tr');
            const lines = [];
            rows.forEach(row => {
                const sel = row.querySelector('select');
                const inputs = row.querySelectorAll('input[type="number"]');
                const acctId = parseInt(sel.value);
                const debit = parseFloat(inputs[0].value) || 0;
                const credit = parseFloat(inputs[1].value) || 0;
                if (acctId && (debit > 0 || credit > 0)) {
                    lines.push({ account_id: acctId, debit, credit, description: '' });
                }
            });

            if (lines.length < 2) { alert('Se requieren al menos 2 lineas.'); return; }

            await api('/entries', {
                method: 'POST',
                body: JSON.stringify({
                    date: document.getElementById('ne-date').value,
                    description: document.getElementById('ne-description').value,
                    lines,
                }),
            });
            closeModal('new-entry-modal');
            loadEntries();
        } catch (e) {
            alert('Error: ' + e.message);
        }
    }

    // ─── Trial Balance ─────────────────────────────

    async function loadTrialBalance() {
        try {
            const year = document.getElementById('tb-year').value;
            const month = document.getElementById('tb-month').value;
            const res = await api(`/trial-balance?year=${year}&month=${month}`);
            renderTrialBalance(res);
        } catch (e) {
            document.getElementById('trial-balance-content').innerHTML =
                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
        }
    }

    function renderTrialBalance(data) {
        const rows = data.data || [];
        let html = `<table class="report-table">
            <thead><tr>
                <th>Codigo</th><th>Cuenta</th>
                <th class="amount">Saldo Inicial</th><th class="amount">Cargos</th>
                <th class="amount">Abonos</th><th class="amount">Saldo Final</th>
            </tr></thead><tbody>`;

        let totals = { si: 0, c: 0, a: 0, sf: 0 };
        for (const r of rows) {
            totals.si += r.saldo_inicial;
            totals.c += r.cargos;
            totals.a += r.abonos;
            totals.sf += r.saldo_final;
            html += `<tr>
                <td class="tree-code">${r.code}</td><td>${r.name}</td>
                <td class="amount">$${fmt(r.saldo_inicial)}</td>
                <td class="amount">$${fmt(r.cargos)}</td>
                <td class="amount">$${fmt(r.abonos)}</td>
                <td class="amount">$${fmt(r.saldo_final)}</td>
            </tr>`;
        }

        html += `<tr class="total-row">
            <td colspan="2">Totales</td>
            <td class="amount">$${fmt(totals.si)}</td>
            <td class="amount">$${fmt(totals.c)}</td>
            <td class="amount">$${fmt(totals.a)}</td>
            <td class="amount">$${fmt(totals.sf)}</td>
        </tr></tbody></table>`;

        document.getElementById('trial-balance-content').innerHTML = html;
    }

    // ─── Income Statement ──────────────────────────

    async function loadIncomeStatement() {
        try {
            const year = document.getElementById('is-year').value;
            const month = document.getElementById('is-month').value;
            const res = await api(`/income-statement?year=${year}&month=${month}`);
            renderIncomeStatement(res);
        } catch (e) {
            document.getElementById('income-statement-content').innerHTML =
                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
        }
    }

    function renderIncomeStatement(data) {
        let html = '<table class="report-table"><tbody>';

        // Ingresos
        html += '<tr class="subtotal-row"><td colspan="2"><strong>INGRESOS</strong></td></tr>';
        for (const item of data.ingresos.items) {
            html += `<tr><td style="padding-left:2rem;">${item.code} - ${item.name}</td><td class="amount">$${fmt(item.amount)}</td></tr>`;
        }
        html += `<tr class="subtotal-row"><td>Total Ingresos</td><td class="amount">$${fmt(data.ingresos.total)}</td></tr>`;

        // Costos
        html += '<tr class="subtotal-row"><td colspan="2"><strong>COSTOS</strong></td></tr>';
        for (const item of data.costos.items) {
            html += `<tr><td style="padding-left:2rem;">${item.code} - ${item.name}</td><td class="amount">$${fmt(item.amount)}</td></tr>`;
        }
        html += `<tr class="subtotal-row"><td>Total Costos</td><td class="amount">$${fmt(data.costos.total)}</td></tr>`;

        // Utilidad bruta
        html += `<tr class="total-row"><td><strong>UTILIDAD BRUTA</strong></td><td class="amount"><strong>$${fmt(data.utilidad_bruta)}</strong></td></tr>`;

        // Gastos
        html += '<tr class="subtotal-row"><td colspan="2"><strong>GASTOS</strong></td></tr>';
        for (const item of data.gastos.items) {
            html += `<tr><td style="padding-left:2rem;">${item.code} - ${item.name}</td><td class="amount">$${fmt(item.amount)}</td></tr>`;
        }
        html += `<tr class="subtotal-row"><td>Total Gastos</td><td class="amount">$${fmt(data.gastos.total)}</td></tr>`;

        // Utilidad neta
        const netColor = data.utilidad_neta >= 0 ? 'var(--success)' : 'var(--danger)';
        html += `<tr class="total-row"><td><strong>UTILIDAD NETA</strong></td>
            <td class="amount" style="color:${netColor};"><strong>$${fmt(data.utilidad_neta)}</strong></td></tr>`;

        html += '</tbody></table>';
        document.getElementById('income-statement-content').innerHTML = html;
    }

    // ─── Balance Sheet ─────────────────────────────

    async function loadBalanceSheet() {
        try {
            const asOf = document.getElementById('bs-date').value;
            const res = await api(`/balance-sheet?date=${asOf}`);
            renderBalanceSheet(res);
        } catch (e) {
            document.getElementById('balance-sheet-content').innerHTML =
                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
        }
    }

    function renderBalanceSheet(data) {
        const balancedBadge = data.balanced
            ? '<span class="badge badge-open">Cuadrado</span>'
            : '<span class="badge badge-closed">Descuadrado</span>';

        let html = `<p>Al ${data.as_of} ${balancedBadge}</p>
            <table class="report-table"><tbody>`;

        // Activo
        html += '<tr class="subtotal-row"><td colspan="2"><strong>ACTIVO</strong></td></tr>';
        for (const item of data.activo.items) {
            html += `<tr><td style="padding-left:2rem;">${item.code} - ${item.name}</td><td class="amount">$${fmt(item.balance)}</td></tr>`;
        }
        html += `<tr class="total-row"><td>Total Activo</td><td class="amount">$${fmt(data.activo.total)}</td></tr>`;

        // Pasivo
        html += '<tr class="subtotal-row"><td colspan="2"><strong>PASIVO</strong></td></tr>';
        for (const item of data.pasivo.items) {
            html += `<tr><td style="padding-left:2rem;">${item.code} - ${item.name}</td><td class="amount">$${fmt(item.balance)}</td></tr>`;
        }
        html += `<tr class="total-row"><td>Total Pasivo</td><td class="amount">$${fmt(data.pasivo.total)}</td></tr>`;

        // Capital
        html += '<tr class="subtotal-row"><td colspan="2"><strong>CAPITAL</strong></td></tr>';
        for (const item of data.capital.items) {
            html += `<tr><td style="padding-left:2rem;">${item.code} - ${item.name}</td><td class="amount">$${fmt(item.balance)}</td></tr>`;
        }
        html += `<tr class="total-row"><td>Total Capital</td><td class="amount">$${fmt(data.capital.total)}</td></tr>`;

        html += `<tr class="total-row"><td><strong>Pasivo + Capital</strong></td>
            <td class="amount"><strong>$${fmt(data.pasivo.total + data.capital.total)}</strong></td></tr>`;

        html += '</tbody></table>';
        document.getElementById('balance-sheet-content').innerHTML = html;
    }

    // ─── Aging ─────────────────────────────────────

    async function loadAging() {
        try {
            const res = await api('/aging');
            renderAging(res);
        } catch (e) {
            document.getElementById('aging-content').innerHTML =
                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
        }
    }

    function renderAging(data) {
        const rows = data.data || [];
        let html = `<table class="report-table">
            <thead><tr>
                <th>Cliente</th><th class="amount">Corriente</th>
                <th class="amount">1-30d</th><th class="amount">31-60d</th>
                <th class="amount">61-90d</th><th class="amount">90+d</th>
                <th class="amount">Total</th>
            </tr></thead><tbody>`;

        for (const r of rows) {
            html += `<tr>
                <td>${r.name}</td>
                <td class="amount">$${fmt(r.corriente)}</td>
                <td class="amount">$${fmt(r.d1_30)}</td>
                <td class="amount">$${fmt(r.d31_60)}</td>
                <td class="amount">$${fmt(r.d61_90)}</td>
                <td class="amount">$${fmt(r.d90_plus)}</td>
                <td class="amount"><strong>$${fmt(r.total)}</strong></td>
            </tr>`;
        }

        const t = data.totals || {};
        html += `<tr class="total-row">
            <td>Totales</td>
            <td class="amount">$${fmt(t.corriente)}</td>
            <td class="amount">$${fmt(t.d1_30)}</td>
            <td class="amount">$${fmt(t.d31_60)}</td>
            <td class="amount">$${fmt(t.d61_90)}</td>
            <td class="amount">$${fmt(t.d90_plus)}</td>
            <td class="amount"><strong>$${fmt(t.total)}</strong></td>
        </tr></tbody></table>`;

        document.getElementById('aging-content').innerHTML = html;
    }

    // ─── Periods ───────────────────────────────────

    async function loadPeriods() {
        try {
            const res = await api('/periods');
            renderPeriods(res.data || []);
        } catch (e) {
            document.getElementById('periods-list').innerHTML =
                `<p style="color:var(--danger);">Error: ${e.message}</p>`;
        }
    }

    function renderPeriods(periods) {
        const months = ['', 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
                        'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
        let html = `<table class="report-table">
            <thead><tr><th>Periodo</th><th>Estado</th><th>Cerrado por</th><th>Fecha cierre</th></tr></thead><tbody>`;

        for (const p of periods) {
            const badge = p.status === 'closed'
                ? '<span class="badge badge-closed">Cerrado</span>'
                : '<span class="badge badge-open">Abierto</span>';
            html += `<tr>
                <td>${months[p.month]} ${p.year}</td>
                <td>${badge}</td>
                <td>${p.closed_by_name || '-'}</td>
                <td>${p.closed_at ? new Date(p.closed_at).toLocaleDateString('es-MX') : '-'}</td>
            </tr>`;
        }
        html += '</tbody></table>';
        document.getElementById('periods-list').innerHTML = html;
    }

    async function closePeriod() {
        const year = parseInt(document.getElementById('cp-year').value);
        const month = parseInt(document.getElementById('cp-month').value);
        if (!confirm(`Cerrar periodo ${month}/${year}? Esta accion no se puede revertir.`)) return;

        try {
            await api('/periods/close', {
                method: 'POST',
                body: JSON.stringify({ year, month }),
            });
            loadPeriods();
            alert('Periodo cerrado exitosamente.');
        } catch (e) {
            alert('Error: ' + e.message);
        }
    }

    // ─── Modal helpers ─────────────────────────────

    function closeModal(id) {
        document.getElementById(id).classList.remove('active');
    }

    // ─── Init ──────────────────────────────────────

    function init() {
        initTabs();

        // Set default period values
        const now = new Date();
        ['tb-year', 'is-year', 'cp-year'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.value = now.getFullYear();
        });
        ['tb-month', 'is-month', 'cp-month'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.value = now.getMonth() + 1;
        });
        const bsDate = document.getElementById('bs-date');
        if (bsDate) bsDate.value = now.toISOString().slice(0, 10);

        // Set default entry date filters
        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);
        document.getElementById('entries-from').value = firstDay;
        document.getElementById('entries-to').value = now.toISOString().slice(0, 10);

        loadAccounts();
    }

    document.addEventListener('DOMContentLoaded', init);

    // Public API
    return {
        loadAccounts, loadEntries, loadTrialBalance, loadIncomeStatement,
        loadBalanceSheet, loadAging, loadPeriods, closePeriod,
        showNewAccountModal, createAccount,
        showNewEntryModal, addEntryLine, updateEntryBalance, createEntry,
        showEntryDetail, closeModal,
    };
})();