document.addEventListener('DOMContentLoaded', async () => {
    await cargarHistorial();
});

async function cargarHistorial() {
    const loading = document.getElementById('ui-loading');
    const empty   = document.getElementById('ui-empty');
    const lista   = document.getElementById('ui-lista');

    try {
        const r = await fetch('api/movimientos.php?view=historial');
        const data = await r.json();

        loading.classList.add('hidden');

        if (!data.movimientos || data.movimientos.length === 0) {
            empty.classList.remove('hidden');
            return;
        }

        lista.classList.remove('hidden');
        lista.innerHTML = '';

        // Agrupar por mes
        const grupos = {};
        data.movimientos.forEach(mov => {
            const key = mov.fecha.substring(0, 7); // "2024-03"
            if (!grupos[key]) grupos[key] = [];
            grupos[key].push(mov);
        });

        Object.entries(grupos).forEach(([mes, movs]) => {
            const [anio, nroMes] = mes.split('-');
            const nombreMes = new Date(anio, nroMes - 1).toLocaleString('es-AR', { month: 'long', year: 'numeric' });

            lista.innerHTML += `
            <p class="text-xs uppercase tracking-widest font-bold text-on-surface-variant px-1 pt-5 pb-2">
                ${nombreMes}
            </p>
            <div class="bg-surface-container-lowest rounded-[1.5rem] overflow-hidden divide-y divide-surface-container-low">
                ${movs.map(mov => renderMovimiento(mov)).join('')}
            </div>`;
        });

        // Asignar eventos de delete después de renderizar
        lista.querySelectorAll('[data-delete-id]').forEach(btn => {
            btn.addEventListener('click', () => eliminar(btn.dataset.deleteId, btn.dataset.deleteTxt));
        });

    } catch (e) {
        loading.classList.add('hidden');
        rmModal.alert('No se pudo cargar el historial.', 'Error');
    }
}

function renderMovimiento(mov) {
    const isGasto  = mov.tipo === 'gasto';
    const signo    = isGasto ? '-' : '+';
    const colorAmt = isGasto ? 'text-[#ba1a1a]' : 'text-[#005050]';
    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-4 py-3">
        <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}$${parseFloat(mov.monto).toFixed(2)}</p>
        <button data-delete-id="${mov.id}" data-delete-txt="${titulo}"
            class="ml-1 p-2 rounded-xl text-outline hover:text-[#ba1a1a] hover:bg-[#ffdad6] transition-colors flex-shrink-0 active:scale-90">
            <span class="material-symbols-outlined text-[18px]">delete</span>
        </button>
    </div>`;
}

async function eliminar(id, titulo) {
    const ok = await rmModal.confirm(`¿Eliminar "${titulo}"?\nEsta acción no se puede deshacer.`, 'Eliminar movimiento');
    if (!ok) return;

    try {
        const r = await fetch('api/movimientos.php', {
            method: 'DELETE',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: parseInt(id) })
        });
        const data = await r.json();

        if (data.status === 'success') {
            rmModal.toast('Movimiento eliminado');
            await cargarHistorial();
        } else {
            rmModal.toast(data.message || 'Error al eliminar', 'error');
        }
    } catch (e) {
        rmModal.toast('Error de conexión', 'error');
    }
}