/**
 * ECharts 'kcg-dark' 테마 등록
 * 프로젝트 다크 UI에 맞춘 차트 기본 스타일
 */
import * as echarts from 'echarts/core';
import { chartSeriesColors } from '@lib/theme';
import { resolvedColors } from '@lib/theme/tokens';

const kcgDark: object = {
  color: [...chartSeriesColors],
  backgroundColor: 'transparent',
  textStyle: { color: resolvedColors.mutedForeground },
  title: { textStyle: { color: resolvedColors.foreground }, subtextStyle: { color: resolvedColors.mutedForeground } },
  categoryAxis: {
    axisLine: { lineStyle: { color: resolvedColors.secondary } },
    axisTick: { lineStyle: { color: resolvedColors.secondary } },
    axisLabel: { color: '#64748b', fontSize: 9 },
    splitLine: { lineStyle: { color: resolvedColors.secondary, type: 'dashed' } },
  },
  valueAxis: {
    axisLine: { lineStyle: { color: resolvedColors.secondary } },
    axisTick: { lineStyle: { color: resolvedColors.secondary } },
    axisLabel: { color: '#64748b', fontSize: 9 },
    splitLine: { lineStyle: { color: resolvedColors.secondary, type: 'dashed' } },
  },
  tooltip: {
    backgroundColor: '#0d1117',
    borderColor: resolvedColors.secondary,
    borderWidth: 1,
    textStyle: { color: resolvedColors.foreground, fontSize: 11 },
    extraCssText: 'border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);',
  },
  legend: { textStyle: { color: resolvedColors.mutedForeground, fontSize: 10 } },
};

echarts.registerTheme('kcg-dark', kcgDark);

export const THEME_NAME = 'kcg-dark';
