import ReactECharts from 'echarts-for-react'

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

export function InvestmentTrendChart({
  history,
  color = '#3B82F6',
  className = '',
}: InvestmentTrendChartProps) {
  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 option = {
    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, width: 2 },
        itemStyle: { color },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
              { offset: 1, color: 'rgba(59, 130, 246, 0)' },
            ],
          },
        },
      },
    ],
  }

  return (
    <div className={`flex h-full w-full flex-col ${className}`}>
      <div className="mb-0.5 px-1 text-[9px] text-military-text-secondary">
        华尔街财团投入
      </div>
      <ReactECharts
        option={option}
        style={{ height: 'calc(100% - 14px)', width: '100%' }}
        opts={{ renderer: 'svg' }}
      />
    </div>
  )
}
