import type { EChartsOption } from 'echarts';

const getCssVar = (name: string): string => {
    if (typeof document === 'undefined') return '';
    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
};

export { getCssVar };

export const getVizChartColors = (): string[] => {
    return ['--chart-1', '--chart-2', '--chart-3', '--chart-4', '--chart-5'].map((v) => {
        const value = getCssVar(v);
        return value || undefined;
    }).filter(Boolean) as string[];
};

export const getVizChartBaseOption = (): EChartsOption => {
    const mutedForeground = getCssVar('--muted-foreground');
    const border = getCssVar('--border');
    const card = getCssVar('--card') || getCssVar('--popover') || getCssVar('--background');
    const muted = getCssVar('--muted-foreground');

    return {
        animationDuration: 600,
        animationEasing: 'cubicOut',
        textStyle: {
            color: mutedForeground,
            fontSize: 12,
        },
        tooltip: {
            backgroundColor: card,
            borderColor: border,
            borderWidth: 1,
            textStyle: {
                color: mutedForeground,
                fontSize: 12,
            },
            extraCssText: 'border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);',
        },
        categoryAxis: {
            axisLine: {
                lineStyle: { color: border, opacity: 0.6 },
            },
            axisTick: { show: false },
            axisLabel: {
                color: muted,
                fontSize: 11,
            },
            splitLine: { show: false },
        },
        valueAxis: {
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
                color: muted,
                fontSize: 11,
            },
            splitLine: {
                lineStyle: {
                    color: border,
                    opacity: 0.4,
                    type: 'dashed',
                },
            },
        },
    };
};

export const getVizLineAreaStyle = (color: string) => ({
    color,
    opacity: 0.15,
});

export const getVizBarItemStyle = (color: string) => ({
    color,
    borderRadius: [4, 4, 0, 0] as [number, number, number, number],
});
