import type { EChartsOption } from 'echarts';

/**
 * ECharts color utilities don't parse `oklch(...)` (used by the design tokens).
 * On hover/emphasis they lift/mix the color → invalid → white/transparent segment.
 * Canvas `fillStyle` normalizes modern CSS colors to `#rrggbb` / `rgba(...)`.
 */
const cssColorToEcharts = (color: string): string => {
    if (!color || typeof document === 'undefined') return color;
    if (/^#([0-9a-f]{3,8})$/i.test(color) || /^rgba?\(/i.test(color)) return color;

    try {
        const ctx = document.createElement('canvas').getContext('2d');
        if (!ctx) return color;
        ctx.fillStyle = '#000';
        ctx.fillStyle = color;
        return typeof ctx.fillStyle === 'string' ? ctx.fillStyle : color;
    } catch {
        return color;
    }
};

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

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],
});
