import ReactECharts from 'echarts-for-react'

interface RetaliationGaugeProps {
  value: number
  history: { time: string; value: number }[]
  className?: string
}

/**
 * 仪表盘与折线图均不注入中文，避免 Canvas/SVG 字体乱码。
 * 中文标签使用 HTML 层叠渲染，确保正确显示。
 */
export function RetaliationGauge({ value, history, className = '' }: RetaliationGaugeProps) {
  const times = history.map((h) => {
    const d = new Date(h.time)
    return `${d.getMonth() + 1}/${d.getDate()} ${String(d.getHours()).padStart(2, '0')}`
  })
  const values = history.map((h) => h.value)

  const gaugeOption = {
    backgroundColor: 'transparent',
    tooltip: { show: false },
    series: [
      {
        type: 'gauge',
        center: ['50%', '50%'],
        radius: '80%',
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.3, 'rgba(75, 85, 99, 0.5)'],
              [0.6, 'rgba(239, 68, 68, 0.5)'],
              [1, '#EF4444'],
            ],
          },
        },
        pointer: {
          itemStyle: { color: '#EF4444' },
          width: 3,
          length: '65%',
        },
        axisTick: { show: true, length: 4, lineStyle: { color: 'rgba(75, 85, 99, 0.6)' } },
        splitLine: { show: false },
        axisLabel: { show: false },
        title: { show: false },
        detail: {
          show: true,
          valueAnimation: true,
          offsetCenter: [0, '25%'],
          fontSize: 16,
          fontWeight: 'bold',
          color: '#EF4444',
          formatter: (val: number) => Number(val).toFixed(2),
        },
        data: [{ value }],
      },
    ],
  }

  const lineOption = {
    backgroundColor: 'transparent',
    grid: { left: 24, right: 8, top: 4, bottom: 16 },
    tooltip: { trigger: 'axis', confine: true },
    xAxis: {
      type: 'category',
      data: times,
      axisLine: { lineStyle: { color: 'rgba(75, 85, 99, 0.6)' } },
      axisLabel: { show: false },
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      splitNumber: 2,
      splitLine: { lineStyle: { color: 'rgba(75, 85, 99, 0.3)' } },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
    },
    series: [
      {
        type: 'line',
        data: values,
        smooth: true,
        symbol: 'circle',
        symbolSize: 4,
        lineStyle: { color: '#EF4444', width: 2 },
        itemStyle: { color: '#EF4444' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(239, 68, 68, 0.3)' },
              { offset: 1, color: 'rgba(239, 68, 68, 0)' },
            ],
          },
        },
      },
    ],
  }

  return (
    <div className={`flex h-full w-full flex-col ${className}`}>
      <div className="relative h-[55%] min-h-0 shrink-0">
        <ReactECharts
          option={gaugeOption}
          style={{ height: '100%', width: '100%' }}
          opts={{ renderer: 'svg' }}
        />
        <div className="absolute bottom-0 left-0 right-0 text-center text-[10px] text-military-text-secondary">
          反击情绪
        </div>
      </div>
      <div className="h-[45%] min-h-0 shrink-0">
        <div className="mb-0.5 px-1 text-[9px] text-military-text-secondary">
          历史趋势
        </div>
        <ReactECharts
          option={lineOption}
          style={{ height: 'calc(100% - 14px)', width: '100%' }}
          opts={{ renderer: 'svg' }}
        />
      </div>
    </div>
  )
}
