/**
 * State of Google Ads Report - JavaScript
 * Uses only WordPress-bundled libraries (jQuery)
 */
jQuery(document).ready(function($) {
    // Get data from hidden div
    const chartData = $('#chart-data');
    const accountSizesData = JSON.parse(chartData.attr('data-account-sizes'));
    const cpcDistributionData = JSON.parse(chartData.attr('data-cpc-distribution'));
    const ctrDistributionData = JSON.parse(chartData.attr('data-ctr-distribution'));
    const trendsData = JSON.parse(chartData.attr('data-trends'));
    const roasData = JSON.parse(chartData.attr('data-roas'));
    
    // Colors
    const colors = {
        blue: '#00b0f0',
        green: '#8cc63f',
        orange: '#f0ad4e',
        lightBlue: '#7ad7f9',
        lightGreen: '#b8dc85',
        gray: '#5a5a5a',
        lightGray: '#dddddd'
    };
    
    // Initialize all charts
    initAccountSizeChart();
    initDistributionChart('cpc-distribution');
    initTrendChart('cpc');
    initRoasChart();
    
    // Add tooltip container to body
    $('body').append('<div class="chart-tooltip"><div class="chart-tooltip-title"></div><div class="chart-tooltip-value"></div></div>');
    const tooltip = $('.chart-tooltip');
    
    /**
     * Initialize Account Size Performance Chart
     */
    function initAccountSizeChart() {
        const container = $('#account-size-chart');
        const width = container.width();
        const height = container.height();
        const segments = accountSizesData.segments;
        const metric = 'cpc'; // Default metric
        
        // Create canvas if it doesn't exist
        if (container.find('canvas').length === 0) {
            container.html('<canvas width="' + width + '" height="' + height + '"></canvas>');
        }
        
        const canvas = container.find('canvas')[0];
        const ctx = canvas.getContext('2d');
        
        // Draw the chart
        drawBarChart(ctx, segments, accountSizesData[metric], metric);
        
        // Add event listeners to toggle buttons
        $('.metric-toggle[data-metric]').on('click', function() {
            $('.metric-toggle[data-metric]').removeClass('active');
            $(this).addClass('active');
            
            const newMetric = $(this).data('metric');
            drawBarChart(ctx, segments, accountSizesData[newMetric], newMetric);
        });
    }
    
    /**
     * Initialize Distribution Chart
     */
    function initDistributionChart(chartType) {
        const container = $('#distribution-chart');
        const width = container.width();
        const height = container.height();
        
        // Data for current chart type
        let data;
        if (chartType === 'cpc-distribution') {
            data = cpcDistributionData;
        } else {
            data = ctrDistributionData;
        }
        
        // Create canvas if it doesn't exist
        if (container.find('canvas').length === 0) {
            container.html('<canvas width="' + width + '" height="' + height + '"></canvas>');
        }
        
        const canvas = container.find('canvas')[0];
        const ctx = canvas.getContext('2d');
        
        // Draw the chart
        drawPieChart(ctx, data.ranges, data.values);
        
        // Add event listeners to toggle buttons
        $('.metric-toggle[data-chart]').on('click', function() {
            $('.metric-toggle[data-chart]').removeClass('active');
            $(this).addClass('active');
            
            const newChartType = $(this).data('chart');
            initDistributionChart(newChartType);
        });
    }
    
    /**
     * Initialize Trend Chart
     */
    function initTrendChart(trendType) {
        const container = $('#trend-chart');
        const width = container.width();
        const height = container.height();
        const months = trendsData.months;
        
        // Create canvas if it doesn't exist
        if (container.find('canvas').length === 0) {
            container.html('<canvas width="' + width + '" height="' + height + '"></canvas>');
        }
        
        const canvas = container.find('canvas')[0];
        const ctx = canvas.getContext('2d');
        
        // Draw the chart
        drawLineChart(ctx, months, trendsData[trendType].current, trendsData[trendType].previous, trendType);
        
        // Add event listeners to toggle buttons
        $('.metric-toggle[data-trend]').on('click', function() {
            $('.metric-toggle[data-trend]').removeClass('active');
            $(this).addClass('active');
            
            const newTrendType = $(this).data('trend');
            drawLineChart(ctx, months, trendsData[newTrendType].current, trendsData[newTrendType].previous, newTrendType);
        });
    }
    
    /**
     * Initialize ROAS Chart
     */
    function initRoasChart() {
        const container = $('#roas-chart');
        const width = container.width();
        const height = container.height();
        
        // Create canvas if it doesn't exist
        if (container.find('canvas').length === 0) {
            container.html('<canvas width="' + width + '" height="' + height + '"></canvas>');
        }
        
        const canvas = container.find('canvas')[0];
        const ctx = canvas.getContext('2d');
        
        // Draw the chart
        drawBarChart(ctx, roasData.segments, roasData.values, 'roas');
        
        // Add winner badge to highest ROAS
        const maxRoas = Math.max(...roasData.values);
        const maxIndex = roasData.values.indexOf(maxRoas);
        if (maxIndex !== -1) {
            // Add winner badge
            container.append('<div class="winner-badge">Winner</div>');
        }
    }
    
    /**
     * Draw Bar Chart
     */
    function drawBarChart(ctx, labels, values, metric) {
        const width = ctx.canvas.width;
        const height = ctx.canvas.height;
        const barColors = [colors.blue, colors.green, colors.orange];
        const maxValue = Math.max(...values) * 1.2; // Add 20% padding
        const barWidth = width / (labels.length * 2);
        const spacing = barWidth / 2;
        
        // Clear canvas
        ctx.clearRect(0, 0, width, height);
        
        // Draw y-axis
        ctx.beginPath();
        ctx.moveTo(50, 30);
        ctx.lineTo(50, height - 50);
        ctx.lineTo(width - 30, height - 50);
        ctx.strokeStyle = colors.gray;
        ctx.stroke();
        
        // Draw y-axis labels
        ctx.font = '12px Arial';
        ctx.fillStyle = colors.gray;
        ctx.textAlign = 'right';
        
        const ySteps = 5;
        for (let i = 0; i <= ySteps; i++) {
            const yPos = height - 50 - ((height - 80) / ySteps * i);
            const value = (maxValue / ySteps * i).toFixed(1);
            ctx.fillText(value, 45, yPos + 5);
            
            // Draw grid line
            ctx.beginPath();
            ctx.moveTo(50, yPos);
            ctx.lineTo(width - 30, yPos);
            ctx.strokeStyle = colors.