'use client';

import { BarChart, LineChart } from 'echarts/charts';
import { DataZoomComponent, GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, TooltipComponent } from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import type { ComposeOption } from 'echarts/core';
import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';
import type { DataZoomComponentOption, GridComponentOption, LegendComponentOption, MarkAreaComponentOption, MarkLineComponentOption, TooltipComponentOption } from 'echarts/components';

echarts.use([LineChart, BarChart, GridComponent, TooltipComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, DataZoomComponent, CanvasRenderer]);

export type EChartsOption = ComposeOption<LineSeriesOption | BarSeriesOption | GridComponentOption | TooltipComponentOption | LegendComponentOption | MarkAreaComponentOption | MarkLineComponentOption | DataZoomComponentOption>;

export default echarts;

/** Shared dark theme fragments (hairlines, mono numerals). */
export const AXIS_STYLE = {
  axisLine: { lineStyle: { color: '#1B2430' } },
  axisTick: { show: false },
  axisLabel: { color: '#8B98A5', fontFamily: 'var(--font-geist-mono), ui-monospace, monospace', fontSize: 10.5 },
  splitLine: { lineStyle: { color: '#151C25' } },
};
export const TOOLTIP_STYLE = {
  backgroundColor: '#0C1117',
  borderColor: '#1B2430',
  borderWidth: 1,
  padding: [6, 10],
  textStyle: { color: '#E6EDF3', fontSize: 11.5, fontFamily: 'var(--font-geist-mono), ui-monospace, monospace' },
  extraCssText: 'border-radius:4px;box-shadow:none;',
};
export const LEVEL_BANDS: [number, number, string][] = [
  [0, 10, '#4CC9F0'],
  [10, 25, '#7FB77E'],
  [25, 40, '#E9C46A'],
  [40, 55, '#F4A261'],
  [55, 70, '#E76F51'],
  [70, 85, '#D62828'],
  [85, 100, '#F72585'],
];
export const levelMarkArea = (alpha = 0.05): NonNullable<LineSeriesOption['markArea']> => ({
  silent: true,
  data: LEVEL_BANDS.map(([lo, hi, c]) => [{ yAxis: lo, itemStyle: { color: c + Math.round(alpha * 255).toString(16).padStart(2, '0') } }, { yAxis: hi }] as [{ yAxis: number; itemStyle: { color: string } }, { yAxis: number }]),
});
export type { LineSeriesOption, BarSeriesOption };