document.addEventListener('DOMContentLoaded', async () => {
    try {
        const response = await apiFetch('api/movimientos.php');
        if (!response) return;
        const data = await response.json();
        if (data.status !== 'success') return;

        // Balance
        const balance = data.balance ?? 0;
        document.getElementById('ui-balance').textContent = formatMoney(balance);
        document.getElementById('ui-balance-resumen').textContent =
            balance >= 0 ? 'Saldo disponible' : 'Saldo negativo';

        // Movimientos recientes
        const container = document.getElementById('ui-movimientos');
        if (!data.movimientos.length) {
            container.innerHTML = `
            <div class="flex flex-col items-center py-10 gap-2 text-on-surface-variant">
              <span class="material-symbols-outlined text-4xl opacity-30">receipt_long</span>
              <p class="text-sm">Sin movimientos aún</p>
            </div>`;
        } else {
            container.innerHTML = data.movimientos.map(mov => {
                const isGasto  = mov.tipo === 'gasto';
                const colorAmt = isGasto ? 'text-[#ba1a1a]' : 'text-[#005050]';
                const signo    = isGasto ? '-' : '+';
                const icono    = mov.categoria_icono || 'payments';
                const titulo   = mov.notas?.trim() ? mov.notas : (mov.categoria_nombre || '—');
                const fecha    = new Date(mov.fecha + 'T12:00:00')
                    .toLocaleDateString('es-AR', { day:'2-digit', month:'short' });
                return `
                <div class="flex items-center gap-4 px-5 py-4">
                  <div class="w-11 h-11 rounded-xl bg-surface-container-high flex items-center justify-center flex-shrink-0">
                    <span class="material-symbols-outlined text-primary text-[20px]">${icono}</span>
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="font-semibold text-on-surface text-sm truncate">${titulo}</p>
                    <p class="text-xs text-on-surface-variant">${fecha} · ${mov.categoria_nombre || '—'}</p>
                  </div>
                  <p class="font-bold ${colorAmt} text-sm flex-shrink-0">${signo}${formatMoney(mov.monto)}</p>
                </div>`;
            }).join('');
        }

        // Donut
        if (data.grafico?.length) {
            const total = data.grafico.reduce((s, c) => s + parseFloat(c.total), 0);
            let svgCircles = '', legend = '', offset = 0;
            data.grafico.forEach(cat => {
                const pct = (parseFloat(cat.total) / total) * 100;
                svgCircles += `<circle cx="18" cy="18" fill="none" r="16"
                  stroke="${cat.color_hex}" stroke-dasharray="${pct} ${100 - pct}"
                  stroke-dashoffset="${-offset}" stroke-linecap="round" stroke-width="4"/>`;
                legend += `
                <div class="flex items-center justify-between py-2 px-3 bg-surface-container-lowest rounded-xl">
                  <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:${cat.color_hex}"></div>
                    <span class="text-sm font-semibold truncate">${cat.nombre}</span>
                  </div>
                  <span class="text-xs text-on-surface-variant font-medium ml-2">${pct.toFixed(1)}%</span>
                </div>`;
                offset += pct;
            });
            document.getElementById('ui-donut-chart').innerHTML = `
              <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">${svgCircles}</svg>
              <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-xl font-bold">${formatMoney(total)}</span>
                <span class="text-[9px] uppercase tracking-widest text-on-surface-variant font-bold">Gastos</span>
              </div>`;
            document.getElementById('ui-donut-legend').innerHTML = `<div class="space-y-1.5">${legend}</div>`;
        } else {
            document.getElementById('ui-donut-chart').innerHTML = `
              <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
                <circle cx="18" cy="18" fill="none" r="16" stroke="#e1e3e2" stroke-dasharray="100,0" stroke-width="4"/>
              </svg>
              <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-xs text-on-surface-variant text-center px-4">Sin gastos</span>
              </div>`;
            document.getElementById('ui-donut-legend').innerHTML = '';
        }
    } catch (e) {
        console.error('Dashboard error:', e);
    }
});

function formatMoney(n) {
    return '$' + parseFloat(n).toLocaleString('es-AR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}