
let chart1;
let chart2;

//let url = window.location.href;
async function fetchLogs() {
    let url = localStorage.getItem("nameEjercicios");
    console.info(url)
    ///////////////////
    let nomPdf = "";
    let userProf = "";
    let nom1 = []
    nom1 = url.split(",");
    let nom2 = [];
    nom2 = nom1[0].split("?");
    let nom3 = [];
    nom3 = nom2[1].split("#"); //imagenes.split("?");
    let formattedStartDate = null;
    console.info(nomPdf);
    console.log(nom3);
    console.log(nom3.length);
    if (nom3.length > 1) {
        userProf = nom3[0];
        nomPdf = nom3[1];
        let dateTmp = [];
        dateTmp = nomPdf.split("_");
        let numLength = dateTmp.length;
        //let startDateStr = dateTmp[numLength - 2]
        //console.info(startDateStr)
        // Convertir la fecha inicial del formato 20241018_140131 a DD/MM/YYYY
        //const year = startDateStr.substring(0, 4);
        //const month = startDateStr.substring(4, 6);
        //const day = startDateStr.substring(6, 8);
        //formattedStartDate = `${day}/${month}/${year}`;
        console.info(nomPdf)
        console.info(userProf)
    }
    else {
        nomPdf = nom2[1];
        userProf = "";
        //const today = new Date();
        //formattedStartDate = `${today.getDate().toString().padStart(2, '0')}/${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getFullYear()}`;
        //console.info(userProf)
        //console.info(nomPdf)
    }
    ///////////////////

    // Obtener la fecha actual y formatearla a DD/MM/YYYY
    const today = new Date();
    const formattedEndDate = `${today.getDate().toString().padStart(2, '0')}/${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getFullYear()}`;

    if (navigator.onLine) {
        console.log("Tienes conexión a Internet.");
        try {
            const response = await fetch(servidorURL + `/php/logs/php_read_logs_pdf_ejercicio.php?nomPdf=${encodeURIComponent(nomPdf)}&startDate=${encodeURIComponent(formattedStartDate)}&endDate=${encodeURIComponent(formattedEndDate)}&v=${new Date().getTime()}`);

            if (!response.ok) {
                throw new Error('Error fetching logs.');
            }
            const logs = await response.json();
            console.info(logs);

            let mesAnual = "";
            // Agrupar los datos por fecha
            const dateData = logs.reduce((acc, item) => {
                // Dividir la fecha y la hora
                const [datePart, timePart] = item.timestamp.split(', ');
                // Reorganizar la fecha al formato YYYY-MM-DD
                const [day, month, year] = datePart.split('/');
                const formattedDate = `${year}-${month}-${day}`;
                const dia = `${day}/${month}`;
                mesAnual = `${year}`;
                const fecha = dia; //formattedDate; //item.timestamp; // Asumiendo que el campo de la fecha es 'fecha'
                if (!acc[fecha]) {
                    acc[fecha] = { totalTime: 0 };
                }
                acc[fecha].totalTime += parseInt(item.diferenciaMinutos, 10); // Sumar el tiempo base
                return acc;
            }, {});

            // Preparar los datos para el gráfico
            const dateLabels = Object.keys(dateData); // Fechas
            const dateTimes = Object.values(dateData).map(item => item.totalTime); // Tiempo total de cada fecha

            // Crear el gráfico
            const ctx = document.getElementById('exerciseTimeChart').getContext('2d');
            if (chart1) {
                chart1.destroy(); // Si existe, lo destruimos
            }
            chart1 = new Chart(ctx, {
                type: 'line', // Tipo de gráfico
                data: {
                    labels: dateLabels,
                    datasets: [{
                        label: 'Minutos', //Por día del ' + formattedStartDate + ' al ' + formattedEndDate,
                        data: dateTimes,
                        backgroundColor: 'rgba(153, 102, 255, 0.5)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    //responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Tiempo total (minutos)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: ''

                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        title: {
                            display: true,
                            text: 'Tiempo total de realización de ejercicios por dia'

                        }
                    }
                }
            });

            const dateDataEva = logs.reduce((acc, item) => {
                const [datePart, timePart] = item.timestamp.split(', ');
                const [day, month, year] = datePart.split('/');
                const formattedDate = `${day}/${month}`; //`${year}-${month}-${day}`;
                const dia = `${day}/${month}`;
                mesAnual = `${year}`;
                const fecha = dia; //formattedDate; //item.timestamp; // Asumiendo que el campo de la fecha es 'fecha'

                if (!acc[formattedDate]) {
                    acc[formattedDate] = { totalTime: 0, count: 0 };
                }

                let eva = item.eva;
                if (eva >= 0) {
                    acc[formattedDate].totalTime += parseInt(eva, 10);
                    acc[formattedDate].count += 1;
                }

                return acc;
            }, {});

            // Calcular el promedio de EVA por día
            const averagesByDate = Object.entries(dateDataEva).map(([fecha, data]) => {
                const averageEva = data.count > 0 ? data.totalTime / data.count : 0;
                return { fecha, averageEva };
            });

            // Extraer las fechas y los promedios de EVA en arrays separados
            const dates = averagesByDate.map(item => item.fecha);
            const evaAverages = averagesByDate.map(item => item.averageEva);
            // Llamar a la función para crear el gráfico con los datos calculados
            createChart(dates, evaAverages, mesAnual, formattedStartDate, formattedEndDate);
            //await displayLogs(logs);
        } catch (error) {
            console.error('Error:', error);
        }
    } else {
        console.log("No tienes conexión a Internet.");
    }
}

// Función para crear el gráfico con Chart.js
function createChart(dates, evaData, mesAnual, formattedStartDate, formattedEndDate) {
    const ctx = document.getElementById('evaTimeChart').getContext('2d');
    if (chart2) {
        chart2.destroy(); // Si existe, lo destruimos
    }
    chart2 = new Chart(ctx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: 'Dolor(0-10)', // del ' + formattedStartDate + ' al ' + formattedEndDate,
                data: evaData,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                fill: true,
                tension: 0.1
            }]
        },
        options: {
            responsive: false,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: 'Evolución de la Escala del Dolor (EVA)'
                }
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: ''
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'EVA'
                    },
                    min: 0,
                    max: 10
                }
            }
        }
    });
}