import { useMemo } from 'react'
import { useTheme, type ResolvedTheme } from '@/components/ThemeProvider'

export interface ChartTheme {
  /** 坐标轴文字 / 图例文字 */
  text: string
  /** 坐标轴线条 / 边框 */
  axisLine: string
  /** 网格线 / splitLine */
  splitLine: string
  /** 十字线 / axisPointer 线 */
  crosshair: string
  /** tooltip 背景 */
  tooltipBg: string
  /** tooltip 边框 */
  tooltipBorder: string
  /** tooltip 标题文字 */
  tooltipTitle: string
  /** tooltip 正文文字 */
  tooltipText: string
  /** dataZoom 背景 */
  dataZoomBg: string
  /** dataZoom 边框 */
  dataZoomBorder: string
  /** dataZoom 选中区域 */
  dataZoomFiller: string
  /** dataZoom 手柄 */
  dataZoomHandle: string
}

const LIGHT: ChartTheme = {
  text: '#52525B',
  axisLine: '#E4E4E7',
  splitLine: '#F4F4F5',
  crosshair: 'rgba(0,0,0,0.12)',
  tooltipBg: 'rgba(255,255,255,0.96)',
  tooltipBorder: 'rgba(0,0,0,0.08)',
  tooltipTitle: '#71717A',
  tooltipText: '#18181B',
  dataZoomBg: 'rgba(0,0,0,0.04)',
  dataZoomBorder: 'rgba(0,0,0,0.08)',
  dataZoomFiller: 'rgba(59,130,246,0.18)',
  dataZoomHandle: '#A1A1AA',
}

const DARK: ChartTheme = {
  text: '#A1A1AA',
  axisLine: '#334155',
  splitLine: '#1E293B',
  crosshair: 'rgba(255,255,255,0.12)',
  tooltipBg: 'rgba(15,23,42,0.95)',
  tooltipBorder: 'rgba(148,163,184,0.2)',
  tooltipTitle: '#94A3B8',
  tooltipText: '#E2E8F0',
  dataZoomBg: 'rgba(15,23,42,0.55)',
  dataZoomBorder: 'rgba(148,163,184,0.18)',
  dataZoomFiller: 'rgba(59,130,246,0.18)',
  dataZoomHandle: '#64748B',
}

export function getChartTheme(resolved: ResolvedTheme): ChartTheme {
  return resolved === 'dark' ? DARK : LIGHT
}

export function useChartTheme(): ChartTheme {
  const { resolved } = useTheme()
  return useMemo(() => getChartTheme(resolved), [resolved])
}
