// ============ CONFIGURACIÓN ============
const NOMBRE_HOJA = "libroDiario";

// ============ CARGAR DATOS AL ABRIR LA PÁGINA ============
document.addEventListener("DOMContentLoaded", () => {
    cargarMovimientos();
});

// ============ LEER DATOS ============
async function cargarMovimientos() {
    const tbody = document.getElementById("tablaMovimientos");

    try {
        const respuesta = await fetch(`/leer?hoja=${NOMBRE_HOJA}`);
        const data = await respuesta.json();

        if (data.error) {
            tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error: ${data.error}</td></tr>`;
            return;
        }

        mostrarMovimientos(data.datos);

    } catch (error) {
        tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error al cargar datos</td></tr>`;
        console.error("Error:", error);
    }
}

// ============ MOSTRAR EN LA TABLA ============
function mostrarMovimientos(movimientos) {
    const tbody = document.getElementById("tablaMovimientos");

    if (movimientos.length === 0) {
        tbody.innerHTML = `<tr><td colspan="5" class="sin-datos">No hay registros</td></tr>`;
        return;
    }

    tbody.innerHTML = "";

    movimientos.forEach(mov => {
        const fila = document.createElement("tr");
        const esFlor = mov.Tipo === "Personal Flor";

        fila.innerHTML = `
            <td>${formatearFecha(mov.Fecha)}</td>
            <td><span class="${esFlor ? 'badge-ingreso' : 'badge-salida'}">${esFlor ? '🌸' : '📦'} ${mov.Tipo}</span></td>
            <td>${mov["Descripción"]}</td>
            <td class="monto-salida">$${formatearMonto(mov.Monto)}</td>
        `;
        // Menú de opciones (⋮) con modales
        const celdaOpciones = document.createElement("td");
        celdaOpciones.appendChild(crearMenuOpciones(mov));
        fila.appendChild(celdaOpciones);

        tbody.appendChild(fila);
    });
}

// ============ GUARDAR NUEVO MOVIMIENTO ============
document.getElementById("formMovimiento").addEventListener("submit", async (e) => {
    e.preventDefault();

    const btnGuardar = e.target.querySelector("button");
    btnGuardar.disabled = true;
    btnGuardar.textContent = "⏳ Guardando...";

    const datos = {
        hoja: NOMBRE_HOJA,
        datos: {
            "Fecha": document.getElementById("fecha").value,
            "Tipo": document.getElementById("tipo").value,
            "Descripción": document.getElementById("descripcion").value,
            "Monto": document.getElementById("monto").value
        }
    };

    try {
        const respuesta = await fetch("/guardar", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(datos)
        });

        const resultado = await respuesta.json();

        if (resultado.error) {
            alert("Error: " + resultado.error);
        }

        // Limpiar formulario y recargar tabla
        document.getElementById("formMovimiento").reset();
        cargarMovimientos();

    } catch (error) {
        console.error("Error al guardar:", error);
        alert("Error al guardar el registro");
    }

    btnGuardar.disabled = false;
    btnGuardar.textContent = "💾 Guardar";
});

// ============ FUNCIONES AUXILIARES ============
function formatearFecha(fecha) {
    if (!fecha) return "";
    const f = new Date(fecha);
    return f.toLocaleDateString("es-CO", { day: "2-digit", month: "2-digit", year: "numeric" });
}

function formatearMonto(monto) {
    const num = parseFloat(monto) || 0;
    return num.toLocaleString("es-CO", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
}