/**
 * Charts Module
 * Handles the creation and rendering of data visualizations for health reports
 */

class ChartsManager {
    constructor() {
        // Store references to created charts for cleanup
        this.charts = [];
        
        // Define chart colors
        this.colors = {
            primary: '#4a6fa5',
            secondary: '#6fb98f',
            accent: '#ff7e67',
            dark: '#2c3e50',
            light: '#ecf0f1',
            sleep: {
                total: '#4a6fa5',
                deep: '#2c3e50',
                light: '#95a5a6',
                rem: '#3498db',
                awake: '#e74c3c'
            },
            stress: {
                calm: '#2ecc71',
                balanced: '#3498db',
                stressful: '#f39c12',
                veryStressful: '#e74c3c'
            }
        };
    }
    
    /**
     * Create all charts for the report
     * @param {Object} data - Processed health and workout data
     * @param {HTMLElement} container - Container element for the charts
     */
    createCharts(data, container) {
        // Clear any existing charts
        this.clearCharts();
        
        // Create chart sections
        const sleepSection = this.createChartSection('Sleep Patterns', container);
        const stressSection = this.createChartSection('Stress Levels', container);
        const workoutSection = this.createChartSection('Workout Analysis', container);
        const hrvSection = this.createChartSection('Recovery Metrics', container);
        
        // Create charts
        this.createSleepChart(data.metrics, sleepSection);
        this.createStressChart(data.metrics, stressSection);
        this.createWorkoutChart(data.workouts, workoutSection);
        this.createHRVChart(data.metrics, hrvSection);
    }
    
    /**
     * Create a section for a chart
     * @param {string} title - Section title
     * @param {HTMLElement} container - Parent container
     * @returns {HTMLElement} - The charts wrapper element
     */
    createChartSection(title, container) {
        const section = document.createElement('div');
        section.className = 'chart-section';
        
        const heading = document.createElement('h3');
        heading.textContent = title;
        section.appendChild(heading);
        
        // Create a wrapper for all charts in this section
        const chartsWrapper = document.createElement('div');
        chartsWrapper.className = 'charts-wrapper';
        section.appendChild(chartsWrapper);
        
        container.appendChild(section);
        return chartsWrapper;
    }
    
    /**
     * Create an individual chart container
     * @param {HTMLElement} wrapper - Parent wrapper element
     * @returns {HTMLElement} - The chart container element
     */
    createChartContainer(wrapper) {
        const chartContainer = document.createElement('div');
        chartContainer.className = 'chart-container';
        wrapper.appendChild(chartContainer);
        return chartContainer;
    }
    
    /**
     * Helper: Calculate linear trend (slope, intercept, trend line) for a dataset
     * @param {Array<number>} y - Array of y values (e.g., totalSleep)
     * @returns {Object} { slope, intercept, trendLine }
     */
    getLinearTrend(y) {
        const n = y.length;
        if (n < 2) return { slope: 0, intercept: y[0] || 0, trendLine: y.map(() => y[0] || 0) };
        const x = Array.from({ length: n }, (_, i) => i);
        const sumX = x.reduce((a, b) => a + b, 0);
        const sumY = y.reduce((a, b) => a + b, 0);
        const sumXY = x.reduce((acc, xi, i) => acc + xi * y[i], 0);
        const sumXX = x.reduce((acc, xi) => acc + xi * xi, 0);
        const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);
        const intercept = (sumY - slope * sumX) / n;
        const trendLine = x.map(xi => slope * xi + intercept);
        return { slope, intercept, trendLine };
    }

    /**
     * Create sleep patterns chart
     * @param {Array} metricsData - Processed metrics data
     * @param {HTMLElement} wrapper - Wrapper for the chart containers
     */
    createSleepChart(metricsData, wrapper) {
        // Filter out days without sleep data
        const sleepData = metricsData.filter(day => 
            day.metrics['Sleep Hours'] !== undefined
        );
        
        if (sleepData.length === 0) {
            this.showNoDataMessage(wrapper, 'No sleep data available');
            return;
        }
        
        // Prepare data for chart
        const dates = sleepData.map(day => day.date);
        const totalSleep = sleepData.map(day => day.metrics['Sleep Hours']);
        const deepSleep = sleepData.map(day => day.metrics['Time In Deep Sleep'] || 0);
        const lightSleep = sleepData.map(day => day.metrics['Time In Light Sleep'] || 0);
        const remSleep = sleepData.map(day => day.metrics['Time In REM Sleep'] || 0);

        // --- Trend Detection for Sleep Duration ---
        const { slope, trendLine } = this.getLinearTrend(totalSleep);
        let trendLabel = '';
        if (slope > 0.1) {
            trendLabel = 'Improving Sleep Duration';
        } else if (slope < -0.1) {
            trendLabel = 'Declining Sleep Duration';
        } else {
            trendLabel = 'Stable Sleep Duration';
        }
        
        // Create container for stacked bar chart
        const stackedContainer = this.createChartContainer(wrapper);
        const canvas = document.createElement('canvas');
        stackedContainer.appendChild(canvas);
        
        // Create chart
        const chart = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: dates,
                datasets: [
                    {
                        label: 'Deep Sleep',
                        data: deepSleep,
                        backgroundColor: this.colors.sleep.deep,
                        stack: 'sleep'
                    },
                    {
                        label: 'Light Sleep',
                        data: lightSleep,
                        backgroundColor: this.colors.sleep.light,
                        stack: 'sleep'
                    },
                    {
                        label: 'REM Sleep',
                        data: remSleep,
                        backgroundColor: this.colors.sleep.rem,
                        stack: 'sleep'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Sleep Composition by Night'
                    },
                    tooltip: {
                        mode: 'index',
                        callbacks: {
                            afterTitle: (items) => {
                                const index = items[0].dataIndex;
                                return `Total: ${totalSleep[index]} hours`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    },
                    y: {
                        stacked: true,
                        title: {
                            display: true,
                            text: 'Hours'
                        }
                    }
                }
            }
        });
        
        // Store chart reference
        this.charts.push(chart);
        
        // Create container for trend line chart
        const trendContainer = this.createChartContainer(wrapper);
        const trendCanvas = document.createElement('canvas');
        trendContainer.appendChild(trendCanvas);
        
        // --- Goal Line and Progress ---
        let goalDataset = null;
        let goalLabelDiv = null;
        if (typeof this.sleepGoal === "number" && !isNaN(this.sleepGoal) && this.sleepGoal > 0) {
            goalDataset = {
                label: `Goal (${this.sleepGoal}h)`,
                data: totalSleep.map(() => this.sleepGoal),
                borderColor: "#2ecc71",
                backgroundColor: "rgba(46, 204, 113, 0.08)",
                fill: false,
                borderDash: [2, 6],
                pointRadius: 0,
                tension: 0,
                order: 0
            };
        }

        // Compose datasets for trend chart
        const trendDatasets = [
            {
                label: 'Sleep Duration',
                data: totalSleep,
                borderColor: this.colors.sleep.total,
                backgroundColor: 'rgba(74, 111, 165, 0.1)',
                fill: true,
                tension: 0.3
            },
            {
                label: 'Trend',
                data: trendLine,
                borderColor: '#ff7e67',
                backgroundColor: 'rgba(255, 126, 103, 0.08)',
                fill: false,
                borderDash: [8, 4],
                pointRadius: 0,
                tension: 0
            }
        ];
        if (goalDataset) trendDatasets.push(goalDataset);

        const trendChart = new Chart(trendCanvas, {
            type: 'line',
            data: {
                labels: dates,
                datasets: trendDatasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Sleep Duration Trend'
                    },
                    legend: {
                        display: true
                    }
                },
                scales: {
                    y: {
                        title: {
                            display: true,
                            text: 'Hours'
                        },
                        min: Math.max(0, Math.min(...totalSleep) - 1),
                        max: Math.max(...totalSleep) + 1
                    }
                }
            }
        });

        // Add trend label below the chart
        const trendLabelDiv = document.createElement('div');
        trendLabelDiv.className = 'trend-label';
        trendLabelDiv.style.margin = '8px 0 0 0';
        trendLabelDiv.style.fontWeight = 'bold';
        trendLabelDiv.style.color = slope > 0.1 ? '#2ecc71' : (slope < -0.1 ? '#e74c3c' : '#3498db');
        trendLabelDiv.textContent = trendLabel;
        trendContainer.appendChild(trendLabelDiv);

        // Add goal progress below the trend label if goal is set
        if (goalDataset) {
            const nightsMet = totalSleep.filter(h => h >= this.sleepGoal).length;
            const percentMet = Math.round((nightsMet / totalSleep.length) * 100);
            const goalLabelDiv = document.createElement('div');
            goalLabelDiv.className = 'goal-label';
            goalLabelDiv.style.margin = '4px 0 16px 0';
            goalLabelDiv.style.fontWeight = 'bold';
            goalLabelDiv.style.color = '#2ecc71';
            goalLabelDiv.textContent = `Goal met on ${nightsMet} of ${totalSleep.length} nights (${percentMet}%)`;
            trendContainer.appendChild(goalLabelDiv);
        }
        
        // Store chart reference
        this.charts.push(trendChart);
    }
    
    /**
     * Create stress levels chart
     * @param {Array} metricsData - Processed metrics data
     * @param {HTMLElement} wrapper - Wrapper for the chart containers
     */
    createStressChart(metricsData, wrapper) {
        // Filter out days without stress data
        const stressData = metricsData.filter(day => 
            day.metrics['Stress Qualifier'] !== undefined
        );
        
        if (stressData.length === 0) {
            this.showNoDataMessage(wrapper, 'No stress data available');
            return;
        }
        
        // Prepare data for chart
        const dates = stressData.map(day => day.date);
        const stressQualifiers = stressData.map(day => day.metrics['Stress Qualifier']);
        
        // Count occurrences of each stress level
        const stressLevels = ['calm', 'balanced', 'stressful', 'very_stressful'];
        const stressCounts = {};
        
        stressLevels.forEach(level => {
            stressCounts[level] = stressQualifiers.filter(q => q === level).length;
        });
        
        // Create container for pie chart
        const pieContainer = this.createChartContainer(wrapper);
        const pieCanvas = document.createElement('canvas');
        pieContainer.appendChild(pieCanvas);
        
        // Create pie chart
        const pieChart = new Chart(pieCanvas, {
            type: 'doughnut',
            data: {
                labels: ['Calm', 'Balanced', 'Stressful', 'Very Stressful'],
                datasets: [{
                    data: [
                        stressCounts.calm || 0,
                        stressCounts.balanced || 0,
                        stressCounts.stressful || 0,
                        stressCounts.very_stressful || 0
                    ],
                    backgroundColor: [
                        this.colors.stress.calm,
                        this.colors.stress.balanced,
                        this.colors.stress.stressful,
                        this.colors.stress.veryStressful
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Stress Level Distribution'
                    },
                    legend: {
                        position: 'right'
                    }
                }
            }
        });
        
        // Store chart reference
        this.charts.push(pieChart);
        
        // Create container for timeline chart
        const timelineContainer = this.createChartContainer(wrapper);
        const timelineCanvas = document.createElement('canvas');
        timelineContainer.appendChild(timelineCanvas);
        
        // Map stress qualifiers to numeric values for the chart
        const stressValues = stressQualifiers.map(qualifier => {
            switch(qualifier) {
                case 'calm': return 1;
                case 'balanced': return 2;
                case 'stressful': return 3;
                case 'very_stressful': return 4;
                default: return 0;
            }
        });
        
        // --- Trendline and Goal for Stress Level Timeline ---
        const { slope: stressSlope, trendLine: stressTrendLine } = this.getLinearTrend(stressValues);

        // Default goal: 2 ("balanced")
        const stressGoal = 2;
        const goalDataset = {
            label: 'Goal (Balanced)',
            data: stressValues.map(() => stressGoal),
            borderColor: "#2ecc71",
            backgroundColor: "rgba(46, 204, 113, 0.08)",
            fill: false,
            borderDash: [2, 6],
            pointRadius: 0,
            tension: 0,
            order: 0
        };

        // Compose datasets for timeline chart
        const timelineDatasets = [
            {
                label: 'Stress Level',
                data: stressValues,
                borderColor: this.colors.accent,
                backgroundColor: 'rgba(255, 126, 103, 0.1)',
                fill: true,
                stepped: true
            },
            {
                label: 'Trend',
                data: stressTrendLine,
                borderColor: '#ff7e67',
                backgroundColor: 'rgba(255, 126, 103, 0.08)',
                fill: false,
                borderDash: [8, 4],
                pointRadius: 0,
                tension: 0
            },
            goalDataset
        ];

        const timelineChart = new Chart(timelineCanvas, {
            type: 'line',
            data: {
                labels: dates,
                datasets: timelineDatasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'Stress Level Timeline'
                    },
                    tooltip: {
                        callbacks: {
                            label: (context) => {
                                const value = context.raw;
                                let label = '';
                                switch(value) {
                                    case 1: label = 'Calm'; break;
                                    case 2: label = 'Balanced'; break;
                                    case 3: label = 'Stressful'; break;
                                    case 4: label = 'Very Stressful'; break;
                                    default: label = 'Unknown';
                                }
                                return label;
                            }
                        }
                    },
                    legend: {
                        display: true
                    }
                },
                scales: {
                    y: {
                        min: 0.5,
                        max: 4.5,
                        title: {
                            display: true,
                            text: 'Stress Level'
                        },
                        ticks: {
                            callback: (value) => {
                                switch(value) {
                                    case 1: return 'Calm';
                                    case 2: return 'Balanced';
                                    case 3: return 'Stressful';
                                    case 4: return 'Very Stressful';
                                    default: return '';
                                }
                            }
                        }
                    }
                }
            }
        });

        // Add trend label below the chart
        const trendLabelDiv = document.createElement('div');
        trendLabelDiv.className = 'trend-label';
        trendLabelDiv.style.margin = '8px 0 0 0';
        trendLabelDiv.style.fontWeight = 'bold';
        trendLabelDiv.style.color = stressSlope < -0.1 ? '#2ecc71' : (stressSlope > 0.1 ? '#e74c3c' : '#3498db');
        trendLabelDiv.textContent =
            stressSlope < -0.1
                ? 'Improving Stress Levels'
                : (stressSlope > 0.1 ? 'Declining Stress Levels' : 'Stable Stress Levels');
        timelineContainer.appendChild(trendLabelDiv);

        // Add goal progress below the trend label
        const daysMet = stressValues.filter(v => v <= stressGoal).length;
        const percentMet = Math.round((daysMet / stressValues.length) * 100);
        const goalLabelDiv = document.createElement('div');
        goalLabelDiv.className = 'goal-label';
        goalLabelDiv.style.margin = '4px 0 16px 0';
        goalLabelDiv.style.fontWeight = 'bold';
        goalLabelDiv.style.color = '#2ecc71';
        goalLabelDiv.textContent = `Goal met on ${daysMet} of ${stressValues.length} days (${percentMet}%)`;
        timelineContainer.appendChild(goalLabelDiv);

        // Store chart reference
        this.charts.push(timelineChart);
    }
    
    /**
     * Create workout analysis chart
     * @param {Array} workoutsData - Processed workouts data
     * @param {HTMLElement} wrapper - Wrapper for the chart containers
     */
    createWorkoutChart(workoutsData, wrapper) {
        if (workoutsData.length === 0) {
            this.showNoDataMessage(wrapper, 'No workout data available');
            return;
        }
        
        // Prepare data for chart
        const dates = workoutsData.map(workout => workout.date);
        const heartRates = workoutsData.map(workout => workout.heartRate.average);
        const durations = workoutsData.map(workout => workout.duration * 60); // Convert to minutes
        
        // Create container for bar/line chart
        const barContainer = this.createChartContainer(wrapper);
        const canvas = document.createElement('canvas');
        barContainer.appendChild(canvas);
        
        // Create chart
        const chart = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: dates,
                datasets: [
                    {
                        label: 'Duration (minutes)',
                        data: durations,
                        backgroundColor: this.colors.secondary,
                        yAxisID: 'y',
                        order: 1  // Draw bars first (underneath)
                    },
                    {
                        label: 'Avg Heart Rate (bpm)',
                        data: heartRates,
                        borderColor: this.colors.accent,
                        backgroundColor: 'transparent',  // No fill
                        borderWidth: 3,  // Thicker line
                        pointRadius: 4,  // Visible points
                        pointBackgroundColor: this.colors.accent,
                        pointBorderColor: '#fff',
                        pointHoverRadius: 6,
                        pointHoverBackgroundColor: this.colors.accent,
                        tension: 0.3,  // Slightly curved line
                        type: 'line',
                        yAxisID: 'y1',
                        order: 0  // Draw line last (on top)
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Workout Duration and Intensity'
                    },
                    tooltip: {
                        callbacks: {
                            title: (tooltipItems) => {
                                return `Date: ${tooltipItems[0].label}`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Duration (minutes)'
                        },
                        min: 0
                    },
                    y1: {
                        type: 'linear',
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Heart Rate (bpm)'
                        },
                        min: Math.max(0, Math.min(...heartRates) - 10),
                        max: Math.max(...heartRates) + 10,
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
        
        // Store chart reference
        this.charts.push(chart);
        
        // Create workout type distribution chart if we have type data
        if (workoutsData.some(workout => workout.type)) {
            // Count workout types
            const workoutTypes = {};
            workoutsData.forEach(workout => {
                const type = workout.type || 'Unknown';
                workoutTypes[type] = (workoutTypes[type] || 0) + 1;
            });
            
            // Create container for pie chart
            const pieContainer = this.createChartContainer(wrapper);
            const pieCanvas = document.createElement('canvas');
            pieContainer.appendChild(pieCanvas);
            
            // Create color array based on number of workout types
            const typeColors = Object.keys(workoutTypes).map((_, index) => {
                const hue = (index * 137) % 360; // Golden angle approximation for good distribution
                return `hsl(${hue}, 70%, 60%)`;
            });
            
            // Create pie chart
            const pieChart = new Chart(pieCanvas, {
                type: 'pie',
                data: {
                    labels: Object.keys(workoutTypes),
                    datasets: [{
                        data: Object.values(workoutTypes),
                        backgroundColor: typeColors
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Workout Type Distribution'
                        },
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
            
            // Store chart reference
            this.charts.push(pieChart);
        }
    }
    
    /**
     * Create HRV and recovery metrics chart
     * @param {Array} metricsData - Processed metrics data
     * @param {HTMLElement} wrapper - Wrapper for the chart containers
     */
    createHRVChart(metricsData, wrapper) {
        // Filter out days without HRV data
        const hrvData = metricsData.filter(day => 
            day.metrics['HRV'] !== undefined
        );
        
        if (hrvData.length === 0) {
            this.showNoDataMessage(wrapper, 'No HRV data available');
            return;
        }
        
        // Prepare data for chart
        const dates = hrvData.map(day => day.date);
        const hrvValues = hrvData.map(day => day.metrics['HRV']);
        const pulseValues = hrvData.map(day => day.metrics['Pulse']);
        
        // --- Trendline and Goal for HRV and Resting Pulse ---
        const { slope: hrvSlope, trendLine: hrvTrendLine } = this.getLinearTrend(hrvValues);
        const { slope: pulseSlope, trendLine: pulseTrendLine } = this.getLinearTrend(pulseValues);

        // Default goals
        const hrvGoal = 50;
        const pulseGoal = 60;
        const hrvGoalDataset = {
            label: 'Goal (HRV 50ms)',
            data: hrvValues.map(() => hrvGoal),
            borderColor: "#2ecc71",
            backgroundColor: "rgba(46, 204, 113, 0.08)",
            fill: false,
            borderDash: [2, 6],
            pointRadius: 0,
            tension: 0,
            yAxisID: 'y',
            order: 0
        };
        const pulseGoalDataset = {
            label: 'Goal (Pulse 60bpm)',
            data: pulseValues.map(() => pulseGoal),
            borderColor: "#3498db",
            backgroundColor: "rgba(52, 152, 219, 0.08)",
            fill: false,
            borderDash: [2, 6],
            pointRadius: 0,
            tension: 0,
            yAxisID: 'y1',
            order: 0
        };

        // Compose datasets for HRV/Pulse chart
        const hrvPulseDatasets = [
            {
                label: 'HRV',
                data: hrvValues,
                borderColor: this.colors.primary,
                backgroundColor: 'rgba(74, 111, 165, 0.1)',
                fill: true,
                yAxisID: 'y'
            },
            {
                label: 'HRV Trend',
                data: hrvTrendLine,
                borderColor: '#ff7e67',
                backgroundColor: 'rgba(255, 126, 103, 0.08)',
                fill: false,
                borderDash: [8, 4],
                pointRadius: 0,
                tension: 0,
                yAxisID: 'y'
            },
            hrvGoalDataset,
            {
                label: 'Resting Pulse',
                data: pulseValues,
                borderColor: this.colors.accent,
                backgroundColor: 'rgba(255, 126, 103, 0.1)',
                fill: true,
                yAxisID: 'y1'
            },
            {
                label: 'Pulse Trend',
                data: pulseTrendLine,
                borderColor: '#8e44ad',
                backgroundColor: 'rgba(142, 68, 173, 0.08)',
                fill: false,
                borderDash: [8, 4],
                pointRadius: 0,
                tension: 0,
                yAxisID: 'y1'
            },
            pulseGoalDataset
        ];

        // Create container for HRV/Pulse chart
        const hrvContainer = this.createChartContainer(wrapper);
        const canvas = document.createElement('canvas');
        hrvContainer.appendChild(canvas);

        // Create chart
        const chart = new Chart(canvas, {
            type: 'line',
            data: {
                labels: dates,
                datasets: hrvPulseDatasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: true,
                        text: 'HRV and Resting Pulse'
                    },
                    legend: {
                        display: true
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        position: 'left',
                        title: {
                            display: true,
                            text: 'HRV (ms)'
                        }
                    },
                    y1: {
                        type: 'linear',
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Pulse (bpm)'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });

        // Add trend and goal progress labels below the chart
        // HRV
        const hrvTrendLabelDiv = document.createElement('div');
        hrvTrendLabelDiv.className = 'trend-label';
        hrvTrendLabelDiv.style.margin = '8px 0 0 0';
        hrvTrendLabelDiv.style.fontWeight = 'bold';
        hrvTrendLabelDiv.style.color = hrvSlope > 0.1 ? '#2ecc71' : (hrvSlope < -0.1 ? '#e74c3c' : '#3498db');
        hrvTrendLabelDiv.textContent =
            hrvSlope > 0.1
                ? 'Improving HRV'
                : (hrvSlope < -0.1 ? 'Declining HRV' : 'Stable HRV');
        hrvContainer.appendChild(hrvTrendLabelDiv);

        const hrvDaysMet = hrvValues.filter(v => v >= hrvGoal).length;
        const hrvPercentMet = Math.round((hrvDaysMet / hrvValues.length) * 100);
        const hrvGoalLabelDiv = document.createElement('div');
        hrvGoalLabelDiv.className = 'goal-label';
        hrvGoalLabelDiv.style.margin = '4px 0 0 0';
        hrvGoalLabelDiv.style.fontWeight = 'bold';
        hrvGoalLabelDiv.style.color = '#2ecc71';
        hrvGoalLabelDiv.textContent = `HRV Goal met on ${hrvDaysMet} of ${hrvValues.length} days (${hrvPercentMet}%)`;
        hrvContainer.appendChild(hrvGoalLabelDiv);

        // Pulse
        const pulseTrendLabelDiv = document.createElement('div');
        pulseTrendLabelDiv.className = 'trend-label';
        pulseTrendLabelDiv.style.margin = '8px 0 0 0';
        pulseTrendLabelDiv.style.fontWeight = 'bold';
        pulseTrendLabelDiv.style.color = pulseSlope < -0.1 ? '#2ecc71' : (pulseSlope > 0.1 ? '#e74c3c' : '#3498db');
        pulseTrendLabelDiv.textContent =
            pulseSlope < -0.1
                ? 'Improving Resting Pulse'
                : (pulseSlope > 0.1 ? 'Declining Resting Pulse' : 'Stable Resting Pulse');
        hrvContainer.appendChild(pulseTrendLabelDiv);

        const pulseDaysMet = pulseValues.filter(v => v <= pulseGoal).length;
        const pulsePercentMet = Math.round((pulseDaysMet / pulseValues.length) * 100);
        const pulseGoalLabelDiv = document.createElement('div');
        pulseGoalLabelDiv.className = 'goal-label';
        pulseGoalLabelDiv.style.margin = '4px 0 16px 0';
        pulseGoalLabelDiv.style.fontWeight = 'bold';
        pulseGoalLabelDiv.style.color = '#2ecc71';
        pulseGoalLabelDiv.textContent = `Pulse Goal met on ${pulseDaysMet} of ${pulseValues.length} days (${pulsePercentMet}%)`;
        hrvContainer.appendChild(pulseGoalLabelDiv);

        // Store chart reference
        this.charts.push(chart);

        // Create body battery chart if data is available
        const bodyBatteryData = metricsData.filter(day => 
            day.metrics['Body Battery'] !== undefined
        );
        
        if (bodyBatteryData.length > 0) {
            // Parse body battery values (format: "Min : X / Max : Y / Avg : Z")
            const batteryDates = bodyBatteryData.map(day => day.date);
            const batteryValues = bodyBatteryData.map(day => {
                const batteryString = day.metrics['Body Battery'];
                const avgMatch = batteryString.match(/Avg\s*:\s*(\d+)/);
                return avgMatch ? parseInt(avgMatch[1]) : null;
            }).filter(val => val !== null);
            
            // --- Trendline and Goal for Body Battery ---
            const { slope: bbSlope, trendLine: bbTrendLine } = this.getLinearTrend(batteryValues);
            const bbGoal = 80;
            const bbGoalDataset = {
                label: 'Goal (80)',
                data: batteryValues.map(() => bbGoal),
                borderColor: "#2ecc71",
                backgroundColor: "rgba(46, 204, 113, 0.08)",
                fill: false,
                borderDash: [2, 6],
                pointRadius: 0,
                tension: 0,
                order: 0
            };

            // Compose datasets for Body Battery chart
            const bbDatasets = [
                {
                    label: 'Body Battery (Average)',
                    data: batteryValues,
                    borderColor: this.colors.secondary,
                    backgroundColor: 'rgba(111, 185, 143, 0.1)',
                    fill: true
                },
                {
                    label: 'Trend',
                    data: bbTrendLine,
                    borderColor: '#ff7e67',
                    backgroundColor: 'rgba(255, 126, 103, 0.08)',
                    fill: false,
                    borderDash: [8, 4],
                    pointRadius: 0,
                    tension: 0
                },
                bbGoalDataset
            ];

            // Create container for body battery chart
            const bbContainer = this.createChartContainer(wrapper);
            const bbCanvas = document.createElement('canvas');
            bbContainer.appendChild(bbCanvas);

            // Create chart
            const bbChart = new Chart(bbCanvas, {
                type: 'line',
                data: {
                    labels: batteryDates,
                    datasets: bbDatasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Body Battery Trend'
                        },
                        legend: {
                            display: true
                        }
                    },
                    scales: {
                        y: {
                            min: 0,
                            max: 100,
                            title: {
                                display: true,
                                text: 'Energy Level'
                            }
                        }
                    }
                }
            });

            // Add trend and goal progress labels below the chart
            const bbTrendLabelDiv = document.createElement('div');
            bbTrendLabelDiv.className = 'trend-label';
            bbTrendLabelDiv.style.margin = '8px 0 0 0';
            bbTrendLabelDiv.style.fontWeight = 'bold';
            bbTrendLabelDiv.style.color = bbSlope > 0.1 ? '#2ecc71' : (bbSlope < -0.1 ? '#e74c3c' : '#3498db');
            bbTrendLabelDiv.textContent =
                bbSlope > 0.1
                    ? 'Improving Body Battery'
                    : (bbSlope < -0.1 ? 'Declining Body Battery' : 'Stable Body Battery');
            bbContainer.appendChild(bbTrendLabelDiv);

            const bbDaysMet = batteryValues.filter(v => v >= bbGoal).length;
            const bbPercentMet = Math.round((bbDaysMet / batteryValues.length) * 100);
            const bbGoalLabelDiv = document.createElement('div');
            bbGoalLabelDiv.className = 'goal-label';
            bbGoalLabelDiv.style.margin = '4px 0 16px 0';
            bbGoalLabelDiv.style.fontWeight = 'bold';
            bbGoalLabelDiv.style.color = '#2ecc71';
            bbGoalLabelDiv.textContent = `Goal met on ${bbDaysMet} of ${batteryValues.length} days (${bbPercentMet}%)`;
            bbContainer.appendChild(bbGoalLabelDiv);

            // Store chart reference
            this.charts.push(bbChart);
        }
    }
    
    /**
     * Show a message when no data is available for a chart
     * @param {HTMLElement} container - Container element
     * @param {string} message - Message to display
     */
    showNoDataMessage(container, message) {
        const messageElement = document.createElement('div');
        messageElement.className = 'no-data-message';
        messageElement.textContent = message;
        container.appendChild(messageElement);
    }
    
    /**
     * Clear all charts
     */
    clearCharts() {
        // Destroy all chart instances
        this.charts.forEach(chart => chart.destroy());
        this.charts = [];
    }
}

// Create a global instance
const chartsManager = new ChartsManager();