import { LegendOption, TooltipOption } from 'echarts/types/dist/shared'

export const DESIGN_WIDTH = 1920
export const DESIGN_HEIGHT = 1080

export interface SummaryCardConfig<CardKey> {
  key: CardKey
  title: string
  icon: string
  accent: string
  glow: string
}

export interface CardStateItem {
  value: number
  loading: boolean
}

export interface ChartItem {
  name: string
  value: number
}

export type SeriesItem = {
  name: string
  data: number[]
}

export type ChartData = {
  xAxis: string[]
  series: SeriesItem[]
}

// export const FONT_FAMILY = 'YouSheBiaoTiHei, sans-serif'
export const FONT_FAMILY = undefined
export const CHART_RENDERER = 'svg'
export const ANIMATION = {
  animationDuration: 500,
  animationEasing: 'cubicOut' as const
}

export const THEME = {
  text: {
    primary: '#24364f',
    regular: '#000',
    strong: '#1f5bb8',
    black: '#3c3c3c'
  },
  tooltip: {
    cssText: `
      background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(235,243,255,0.96) 100%);
      border: 1px solid rgba(255,255,255,0.95);
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(31, 91, 184, 0.16);
      overflow: hidden;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    `
  },
  grid: {
    left: 16,
    right: 16,
    top: 16,
    bottom: 16,
    containLabel: true
  },
  split: 'rgba(31, 91, 184, 0.08)',
  color: {
    blue: {
      line: '#1f5bb8',
      light: '#8ec5ff',
      mid: '#5e9cff',
      strong: '#2d7cf8',
      glow: 'rgba(45, 124, 248, 0.34)',
      bg: 'rgba(31, 91, 184, 0.08)',
      shadow: 'rgba(31, 91, 184, 0.16)'
    },
    orange: {
      line: '#f08c2e',
      light: '#ffd8a8',
      mid: '#ffb454',
      strong: '#ff8b3d',
      glow: 'rgba(255, 139, 61, 0.34)',
      bg: 'rgba(240, 140, 46, 0.08)',
      shadow: 'rgba(240, 140, 46, 0.18)'
    },
    green: {
      line: '#2e9a5b',
      light: '#a8e0c8',
      mid: '#82c793',
      strong: '#2fb990',
      glow: 'rgba(46, 154, 91, 0.34)',
      bg: 'rgba(34, 197, 94, 0.08)',
      shadow: 'rgba(34, 197, 94, 0.18)'
    },
    red: {
      line: '#ff4d4f',
      light: '#fdd5d5',
      mid: '#ff9999',
      strong: '#ff6666',
      glow: 'rgba(255, 77, 79, 0.34)',
      bg: 'rgba(255, 77, 79, 0.08)',
      shadow: 'rgba(255, 77, 79, 0.18)'
    }
  }
}

export function createTooltip(extra: Partial<TooltipOption> = {}): any {
  return {
    textStyle: {
      color: THEME.text.black,
      fontSize: 14,
      fontFamily: FONT_FAMILY
    },
    extraCssText: THEME.tooltip.cssText,
    ...extra
  }
}

export function createLegend(extra: Partial<LegendOption> = {}, data: string[] = []): any {
  return {
    data,
    textStyle: {
      color: THEME.text.regular,
      fontSize: 13,
      fontFamily: FONT_FAMILY
    },
    ...extra
  }
}

export function formatDateLabel(value: string) {
  if (!value) return value
  const parts = value.split('-')
  if (parts.length === 3) {
    return `${parts[1]}-${parts[2]}`
  }
  return value
}

export function formatSeriesName(name: string) {
  return name.split('~~en**')[0] || name
}

export function formatMonthLabel(value: string) {
  if (!value) return value
  const [year, month] = value.split('-')
  if (!year || !month) return value
  return `${year.slice(-2)}年${month}月`
}

export function formatGasAxisValue(value: number) {
  if (value >= 100000000) {
    return `${(value / 100000000).toFixed(1)}亿`
  }
  if (value >= 10000) {
    return `${(value / 10000).toFixed(0)}万`
  }
  return `${value}`
}

export function formatGasLabelValue(value: number) {
  if (!value) return ''
  if (value >= 100000000) {
    return `${(value / 100000000).toFixed(2)}亿`
  }
  if (value >= 10000) {
    return `${(value / 10000).toFixed(1)}万`
  }
  return `${value}`
}