document.addEventListener('DOMContentLoaded', async () => {
    try {
        const response = await apiFetch('api/movimientos.php');
        const data = await response.json();
        
        if (data.status === 'success') {
            // Update balance
            document.getElementById('ui-balance').textContent = `$${data.balance.toFixed(2)}`;
            
            // Render movements
            const uiMovimientos = document.getElementById('ui-movimientos');
            uiMovimientos.innerHTML = '';
            
            data.movimientos.forEach(mov => {
                const isExpense = mov.tipo === 'gasto';
                const sign = isExpense ? '-' : '+';
                const amountColor = isExpense ? 'text-error' : 'text-primary-container';
                
                uiMovimientos.innerHTML += `
                <div class="flex items-center justify-between mt-6">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center">
                            <span class="material-symbols-outlined text-primary">${mov.categoria_icono || 'payments'}</span>
                        </div>
                        <div>
                            <p class="font-bold text-on-surface">${mov.notas || mov.categoria_nombre}</p>
                            <p class="text-xs text-on-surface-variant">${mov.fecha}</p>
                        </div>
                    </div>
                    <p class="font-bold ${amountColor}">${sign}$${parseFloat(mov.monto).toFixed(2)}</p>
                </div>
                `;
            });

            // Dynamize Donut Chart
            if (data.grafico && data.grafico.length > 0) {
                const totalGastos = data.grafico.reduce((sum, item) => sum + parseFloat(item.total), 0);
                
                let svgHtml = `<svg class="w-full h-full transform -rotate-90" viewbox="0 0 36 36">`;
                let legendHtml = '';
                let currentOffset = 0;

                data.grafico.forEach(cat => {
                    const pct = (parseFloat(cat.total) / totalGastos) * 100;
                    
                    // Add SVG segment
                    svgHtml += `<circle cx="18" cy="18" fill="none" r="16" stroke="${cat.color_hex}" stroke-dasharray="${pct}, 100" stroke-dashoffset="-${currentOffset}" stroke-linecap="round" stroke-width="4"></circle>`;
                    
                    // Add Legend entry
                    legendHtml += `
                    <div class="flex items-center justify-between p-3 bg-surface-container-lowest rounded-xl">
                        <div class="flex items-center gap-3">
                            <div class="w-3 h-3 rounded-full" style="background-color: ${cat.color_hex}"></div>
                            <span class="text-sm font-semibold">${cat.nombre}</span>
                        </div>
                        <span class="text-sm text-on-surface-variant">${pct.toFixed(1)}%</span>
                    </div>
                    `;

                    currentOffset += pct;
                });
                
                svgHtml += `</svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                    <span class="text-2xl font-bold">$${totalGastos.toFixed(0)}</span>
                    <span class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">Gastos</span>
                </div>`;

                document.getElementById('ui-donut-chart').innerHTML = svgHtml;
                document.getElementById('ui-donut-legend').innerHTML = legendHtml;
            } else {
                document.getElementById('ui-donut-chart').innerHTML = `<div class="flex h-full items-center justify-center text-sm text-on-surface-variant">Sin gastos registrados</div>`;
                document.getElementById('ui-donut-legend').innerHTML = '';
            }

        }
    } catch (e) {
        console.error('Error cargando el dashboard:', e);
    }
});