// ==========================  Chart Js Start ==============

// render bar chart
function renderBarChart({
    elementId,
    data,
    colors,
    xAxisData,
    isTime = false
}) {
    const chartElement = document.getElementById(elementId);
    const chartInstance = echarts.init(chartElement, null, {
        renderer: 'svg',
        useDirtyRect: false
    });

    const option = {
        grid: {
            left: 70,
            right: 20,
            top: 40,
            bottom: 40
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#C5C5D3'
                }
            },
            axisLabel: {
                fontSize: 12,
                fontWeight: 400,
                color: '#606576',
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',

            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#C5C5D3',
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
            label: {
                show: true,
                position: 'top',
                fontSize: 12,
                fontWeight: 400,
                color: '#606576',
                formatter: function (params) {
                    if(isTime){
                        return formatTimeFromSeconds(params.value);
                    }else{
                        return params.value;
                    }
                }
            },
            data: data,
            type: 'bar',
            itemStyle: {
                color: function (params) {
                    return (colors && colors[params.dataIndex]) || colors[0];
                },
            },
            barWidth: '40%'
        }, ]
    };

    chartInstance.setOption(option);
    window.addEventListener('resize', () => chartInstance.resize());
}

// render pie chart
function renderPieChart({
    elementId,
    data
}) {
    const chartElement = document.getElementById(elementId);
    const chartInstance = echarts.init(chartElement, null, {
        renderer: 'svg',
        useDirtyRect: false
    });

    const option = {
        grid: {
            left: '5%',
            right: '2%',
            top: '10%',
            bottom: '15%'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: '10%',
            top: '10%',
            textStyle: {
                color: '#606576',
            },
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            icon: 'circle',
        },

        series: [{
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                    }
                },
                label: {
                    show: true,
                    position: 'outside',
                    fontSize: 12,
                    fontWeight: 400,
                    color: '#1D1E25',
                    formatter: '{b}',
                },
                data: data
            },
            {
                type: 'pie',
                radius: '50%',
                label: {
                    show: true,
                    position: 'inside',
                    fontSize: 10,
                    color: '#fff',
                    formatter: '{d}%',
                },
                labelLine: {
                    show: false
                },
                emphasis: {
                    disabled: true
                },
                data: data
            }
        ]
    };

    chartInstance.setOption(option);
    window.addEventListener('resize', () => chartInstance.resize());
}

// render pie circle border chart
function renderPieCircleBorderChart({
    elementId,
    data
}) {
    const chartElement = document.getElementById(elementId);
    const chartInstance = echarts.init(chartElement, null, {
        renderer: 'svg',
        useDirtyRect: false
    });

    const totalCount = data.reduce((sum, item) => sum + item.value, 0);

    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            left: 'center',
            bottom: '5%',
            textStyle: {
                color: '#606576',
            },
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 12,
        },
        series: [{
            name: 'Tickets',
            type: 'pie',
            radius: ['32%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 0,
                borderWidth: 0,
            },
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            data: data
        }],
        graphic: [{
                type: 'text',
                left: 'center',
                top: '46%',
                style: {
                    text: totalCount.toString(),
                    fontSize: 20,
                    fontWeight: 400,
                    fill: '#606576'
                }
            },
            {
                type: 'text',
                left: 'center',
                top: '54%',
                style: {
                    text: 'Tickets',
                    fontSize: 12,
                    fill: '#606576'
                }
            }
        ]
    };

    chartInstance.setOption(option);
    window.addEventListener('resize', () => chartInstance.resize());
}

// render multi bar chart 
function renderMultiBarChart({
    elementId,
    data,
    colors,
    xAxisData
}) {
    const chartElement = document.getElementById(elementId);
    const chartInstance = echarts.init(chartElement, null, {
        renderer: 'svg',
        useDirtyRect: false
    });

    const series = data.map((seriesItem, index) => ({
        name: seriesItem.name,
        type: 'bar',
        data: seriesItem.values,
        barWidth: '15%',

        itemStyle: {
            color: colors[index]
        },
        emphasis: {
            focus: 'series'
        }
    }));

    const option = {
        grid: {
            left: 40,
            right: 20,
            top: 40,
            bottom: 40
        },
        label: {
            show: true,
            position: 'top',
            fontSize: 10,
            fontWeight: 400,
            color: '#1D1E25',
            formatter: function (params) {
                return params.value;
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: data.map(item => item.name)
        },

        xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            data: xAxisData,

            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#C5C5D3'
                }
            },
            axisLabel: {
                fontSize: 12,
                fontWeight: 400,
                color: '#606576',
            },
        }],
        yAxis: [{

            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#C5C5D3',
                }
            },
            axisTick: {
                show: false
            }
        }],
        series: series
    };

    chartInstance.setOption(option);
}

// dot line chart
function renderDotLineChart({
    elementId,
    data,
    colors,
    xAxisData,
    isTime = true
}) {
    const chartElement = document.getElementById(elementId);
    const chartInstance = echarts.init(chartElement, null, {
        renderer: 'svg',
        useDirtyRect: false
    });

    const option = {
        grid: {
            left: 80,
            right: 20,
            top: 40,
            bottom: 40
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            },
            textStyle: {
                color: '#1D1E25',
                fontSize: 12,
                fontWeight: 400,
            },
            formatter: function (params) {
                if(isTime){
                    return params[0].name + '<br/>' + formatTimeFromSeconds(params[0].value , true);
                }else{
                    return params[0].name + '<br/>' + params[0].value;
                }
            }
        },
        legend: {
            show: false
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLine: {
                lineStyle: {
                    color: '#C5C5D3',
                    type: 'dashed'
                }
            },
            axisLabel: {
                color: '#606576',
                fontSize: 12,
                fontWeight: 400,
                formatter: function (params) {
                    return params;
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#C5C5D3',
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#C5C5D3',
                    type: 'dashed'
                }
            },
            axisLabel: {
                color: '#606576',
            }
        },
        series: [{
                name: 'Line',
                type: 'line',
                data: data,
                smooth: true,
                symbol: 'circle',
                symbolSize: 10,
                showSymbol: true,
                lineStyle: {
                    color: colors[0] || '#14c8d4',
                    width: 2
                },
                itemStyle: {
                    color: colors[0] || '#14c8d4',
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    show: true,
                    position: 'outside',
                    fontSize: 10,
                    fontWeight: 400,
                    color: '#1D1E25',
                    formatter: function (params) {
                        return isTime ? formatTimeFromSeconds(params.value) : params.value;
                    }
                },
            }

        ]
    };

    chartInstance.setOption(option);
}

function formatTimeFromSeconds(seconds, includeSeconds = false) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = Math.round(seconds % 60);

    const parts = [];
    if (hours > 0) parts.push(`${hours}h`);
    if (minutes > 0) parts.push(`${minutes}min`);
    if (includeSeconds && secs > 0) parts.push(`${secs}s`);
    if (parts.length === 0) parts.push('0min');

    return parts.join(' ');
}

// ========================== Chart Js End ==============