// Variables globales para almacenar los datos OMS y del historial
var globalOmsData = {};
var globalHistorial = [];
var globalCharts = {}; // Para guardar las instancias de los gráficos

// Función principal para inicializar gráficos
// suffix: Sufijo opcional para IDs (ej: 'Plan' para atencion.php)
function initGraficos(idpersona, sexo, suffix = '') {
    console.log("initGraficos llamado con:", idpersona, sexo, suffix);

    if (typeof Chart === 'undefined') {
        alert("ERROR CRÍTICO: La librería Chart.js no se ha cargado. Revise su conexión a Internet o el archivo footer.php");
        return;
    }

    if (!idpersona || !sexo) {
        console.warn("Faltan datos para gráficos (idpersona o sexo)");
        return;
    }

    // Guardar sufijo globalmente si es necesario, o manejarlo por instancia
    // Por simplicidad, asumiremos que se usa un set de gráficos a la vez por vista

    // Cargar datos OMS y del Paciente
    // Cargar datos OMS y del Paciente
    // NOTA: Se envian los parametros por 'data' para que lleguen a $_POST, 
    // pero mantenemos 'op' en URL si el router lo maneja por GET.
    $.when(
        $.ajax({
            url: "../ajax/crecimiento.php?op=listar_oms",
            type: "POST",
            data: { tipo: "oms_pde", sexo: sexo }
        }),
        $.ajax({
            url: "../ajax/crecimiento.php?op=listar_oms",
            type: "POST",
            data: { tipo: "oms_tde", sexo: sexo }
        }),
        $.ajax({
            url: "../ajax/crecimiento.php?op=listar_oms",
            type: "POST",
            data: { tipo: "oms_imc", sexo: sexo }
        }),
        $.ajax({
            url: "../ajax/crecimiento.php?op=listar_oms",
            type: "POST",
            data: { tipo: "oms_pce", sexo: sexo }
        }),
        $.ajax({
            url: "../ajax/crecimiento.php?op=listar_historial",
            type: "POST",
            data: { idpersona: idpersona }
        })
    ).done(function (r1, r2, r3, r4, r5) {
        // Guardar datos en variables globales
        globalOmsData.pde = JSON.parse(r1[0]); // Peso
        globalOmsData.tde = JSON.parse(r2[0]); // Talla
        globalOmsData.imc = JSON.parse(r3[0]); // IMC
        globalOmsData.pce = JSON.parse(r4[0]); // Perimetro Cefalico

        globalHistorial = JSON.parse(r5[0]);

        console.log("Datos cargados. Historial:", globalHistorial);

        // Renderizar gráficos iniciales (sin puntos manuales extra)
        refreshCharts(suffix);

    }).fail(function (err) {
        console.error("Error cargando datos para gráficos:", err);
    });
}

// Función para actualizar gráficos con datos actuales (en tiempo real)
// currentValues: { edad_meses: X, peso: Y, talla: Z, imc: A, perimetro_cefalico: B }
// currentIdAtencion: ID de la atención actual para evitar duplicar puntos (uno de BD y uno manual)
function updateCharts(currentValues, currentIdAtencion = null, suffix = '') {
    refreshCharts(suffix, currentValues, currentIdAtencion);
}

function refreshCharts(suffix, manualPoint = null, currentIdAtencion = null) {
    if (!globalOmsData.pde) return; // No hay datos cargados aún

    renderChart('chartPesoEdad' + suffix, 'Peso', 'kg', globalOmsData.pde, globalHistorial, 'peso', manualPoint, currentIdAtencion);
    renderChart('chartTallaEdad' + suffix, 'Talla', 'cm', globalOmsData.tde, globalHistorial, 'talla', manualPoint, currentIdAtencion);
    renderChart('chartImcEdad' + suffix, 'IMC', '', globalOmsData.imc, globalHistorial, 'imc', manualPoint, currentIdAtencion);
    renderChart('chartPceEdad' + suffix, 'Perímetro Cefálico', 'cm', globalOmsData.pce, globalHistorial, 'perimetro_cefalico', manualPoint, currentIdAtencion);

    console.log("Gráficos refrescados. Datos manuales:", manualPoint);
}

function renderChart(canvasId, label, unit, omsData, patientData, dataKey, manualPoint, currentIdAtencion) {
    var ctx = document.getElementById(canvasId);
    if (!ctx) {
        // console.warn("Canvas no encontrado: " + canvasId);
        return;
    }

    // Preparar datasets OMS (SD3, SD2, SD0, etc.) como objetos {x, y}
    // Verificamos si la propiedad es 'mes' o 'meses' (compatibilidad)
    var keyMes = (omsData.length > 0 && typeof omsData[0].mes !== 'undefined') ? 'mes' : 'meses';

    // Función helper para parsear float de forma segura
    var pF = function (v) { var n = parseFloat(v); return isNaN(n) ? null : n; };
    var pI = function (v) { var n = parseInt(v); return isNaN(n) ? 0 : n; };

    var sd3 = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd3) }; });
    var sd2 = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd2) }; });
    var sd0 = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd0) }; }); // Media
    var sd2n = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd2neg) }; });
    var sd3n = omsData.map(function (e) { return { x: pI(e[keyMes]), y: pF(e.sd3neg) }; });

    // Preparar dataset Paciente (Historial)
    var patientPoints = patientData.map(function (e) {
        var val = parseFloat(e[dataKey]);
        if (!val || val <= 0) return null;
        return { x: parseFloat(e.edad_meses), y: val, fecha: e.fecha, idatencion: e.idatencion };
    }).filter(function (e) { return e !== null; });

    // Agregar punto manual (actual) si existe y es válido
    if (manualPoint && manualPoint[dataKey] && manualPoint.edad_meses >= 0) {
        // Si hay punto manual y tenemos el ID de atención actual, 
        // eliminamos el punto de la BD que corresponda a esta misma atención para no tener duplicados
        if (currentIdAtencion) {
            patientPoints = patientPoints.filter(function (p) {
                return p.idatencion != currentIdAtencion;
            });
        }

        // Convertir a número por seguridad
        var yVal = parseFloat(manualPoint[dataKey]);
        if (yVal > 0) {
            patientPoints.push({
                x: parseFloat(manualPoint.edad_meses),
                y: yVal,
                fecha: 'Actual' // Etiqueta para el punto actual
            });
        }
    }

    // Ordenar puntos del paciente por edad (X) para que la linea (si se mostrara) fuera correcta
    patientPoints.sort(function (a, b) { return a.x - b.x; });

    // Destruir gráfico previo si existe para este canvas
    var globalKey = 'my' + canvasId.charAt(0).toUpperCase() + canvasId.slice(1);
    if (window[globalKey]) {
        window[globalKey].destroy();
    }

    var config = {
        type: 'line',
        data: {
            // labels: labels, // Ya no usamos labels array porque estamos pasando x,y explícitos
            datasets: [
                { label: '+3 SD', data: sd3, borderColor: 'red', borderWidth: 1, fill: false, pointRadius: 0 },
                { label: '+2 SD', data: sd2, borderColor: 'orange', borderWidth: 1, fill: false, pointRadius: 0 },
                { label: 'Media', data: sd0, borderColor: 'green', borderWidth: 2, fill: false, pointRadius: 0 },
                { label: '-2 SD', data: sd2n, borderColor: 'orange', borderWidth: 1, fill: false, pointRadius: 0 },
                { label: '-3 SD', data: sd3n, borderColor: 'red', borderWidth: 1, fill: false, pointRadius: 0 },
                {
                    label: 'Paciente',
                    data: patientPoints,
                    borderColor: 'blue',
                    backgroundColor: 'blue',
                    pointBackgroundColor: 'blue',
                    pointBorderColor: 'blue',
                    pointRadius: 6,
                    pointHoverRadius: 8,
                    fill: false,
                    showLine: false // Solo puntos
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: {
                duration: 0
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    scaleLabel: { display: true, labelString: 'Edad (Meses)' },
                    ticks: { max: 60, stepSize: 6 }
                }],
                yAxes: [{
                    scaleLabel: { display: true, labelString: label + (unit ? ' (' + unit + ')' : '') }
                }]
            },
            tooltips: {
                mode: 'nearest',
                intersect: false,
                callbacks: {
                    title: function (tooltipItems, data) {
                        return 'Edad: ' + parseFloat(tooltipItems[0].xLabel).toFixed(2) + ' meses';
                    },
                    label: function (tooltipItem, data) {
                        var label = data.datasets[tooltipItem.datasetIndex].label || '';
                        if (label) {
                            label += ': ';
                        }
                        label += Math.round(tooltipItem.yLabel * 100) / 100;
                        return label;
                    }
                }
            }
        }
    };

    window[globalKey] = new Chart(ctx, config);
}
