import type { EChartsOption, LineSeriesOption } from 'echarts'

/** Design system §6.16 chart palette */
export const CHART_COLORS = {
  primary: '#0f7a62',
  secondary: '#71717a',
  series: ['#0f7a62', '#71717a', '#4da08c', '#76b8a8', '#a0d0c4'] as const,
  axis: '#71717a',
  splitLine: '#e4e4e7',
}

export const CHART_GRID = { left: 40, right: 16, top: 16, bottom: 28 }

export function axisStyle() {
  return {
    axisLabel: { color: CHART_COLORS.axis, fontSize: 12 },
    axisLine: { lineStyle: { color: CHART_COLORS.splitLine } },
  }
}

export function lineSeries(
  name: string,
  data: number[],
  colorIndex = 0,
): LineSeriesOption {
  return {
    name,
    type: 'line',
    smooth: true,
    data,
    color: CHART_COLORS.series[colorIndex] ?? CHART_COLORS.primary,
    lineStyle: { width: 2 },
    showSymbol: false,
  }
}

export function buildTrendChartOption(params: {
  labels: string[]
  series: Array<{ name: string; data: number[]; colorIndex?: number }>
}): EChartsOption {
  return {
    color: [...CHART_COLORS.series],
    grid: CHART_GRID,
    tooltip: { trigger: 'axis' },
    legend: {
      bottom: 0,
      textStyle: { fontSize: 12, color: CHART_COLORS.axis },
    },
    xAxis: {
      type: 'category',
      data: params.labels,
      boundaryGap: false,
      ...axisStyle(),
    },
    yAxis: {
      type: 'value',
      ...axisStyle(),
      splitLine: { lineStyle: { color: CHART_COLORS.splitLine } },
    },
    series: params.series.map((s, i) =>
      lineSeries(s.name, s.data, s.colorIndex ?? i),
    ),
  }
}
