import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import type { DailySummary } from '../api/dashboard';

interface Props {
  data: DailySummary[];
}

function fmtYi(v: number) {
  return +(v / 1e8).toFixed(0);
}

export default function DailyChart({ data }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const chartRef = useRef<echarts.ECharts | null>(null);

  useEffect(() => {
    if (!ref.current) return;

    if (!chartRef.current) {
      chartRef.current = echarts.init(ref.current);
    }
    const chart = chartRef.current;

    const dates = data.map((d) => d.date.slice(0, 10));

    chart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
      },
      legend: {
        top: 0,
        data: ['上涨数', '下跌数', '成交额(亿)', '涨停10%', '跌停10%', '涨停20%', '跌停20%', '连板家数'],
      },
      grid: [
        { left: 60, right: 70, top: 60, height: '25%' },
        { left: 60, right: 70, top: '45%', height: '49%' },
      ],
      xAxis: [
        { type: 'category', data: dates, gridIndex: 0, boundaryGap: false },
        { type: 'category', data: dates, gridIndex: 1, boundaryGap: false },
      ],
      yAxis: [
        { type: 'value', name: '股票数', gridIndex: 0 },
        { type: 'value', name: '亿', gridIndex: 0, position: 'right', splitLine: { show: false } },
        { type: 'value', name: '10%家', gridIndex: 1, position: 'left' },
        { type: 'value', name: '20%家', gridIndex: 1, position: 'right', splitLine: { show: false } },
        { type: 'value', name: '连板', gridIndex: 1, position: 'right', offset: 60, splitLine: { show: false } },
      ],
      dataZoom: [
        { type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 },
      ],
      series: [
        {
          name: '上涨数',
          type: 'line',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: data.map((d) => d.up_count),
          itemStyle: { color: '#cf1322' },
          lineStyle: { width: 2 },
          symbol: 'none',
        },
        {
          name: '下跌数',
          type: 'line',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: data.map((d) => d.down_count),
          itemStyle: { color: '#3f8600' },
          lineStyle: { width: 2 },
          symbol: 'none',
        },
        {
          name: '成交额(亿)',
          type: 'line',
          xAxisIndex: 0,
          yAxisIndex: 1,
          data: data.map((d) => fmtYi(d.total_turnover)),
          itemStyle: { color: 'rgba(114,46,209,0.6)' },
          lineStyle: { width: 2 },
          areaStyle: { color: 'rgba(114,46,209,0.15)' },
          symbol: 'none',
        },
        {
          name: '涨停10%',
          type: 'line',
          xAxisIndex: 1,
          yAxisIndex: 2,
          data: data.map((d) => d.limit_up_10),
          itemStyle: { color: '#ff4d4f' },
          lineStyle: { width: 2 },
          symbol: 'circle',
          symbolSize: 4,
        },
        {
          name: '跌停10%',
          type: 'line',
          xAxisIndex: 1,
          yAxisIndex: 2,
          data: data.map((d) => -d.limit_down_10),
          itemStyle: { color: '#52c41a' },
          lineStyle: { width: 2 },
          symbol: 'circle',
          symbolSize: 4,
        },
        {
          name: '涨停20%',
          type: 'line',
          xAxisIndex: 1,
          yAxisIndex: 3,
          data: data.map((d) => d.limit_up_20),
          itemStyle: { color: '#ff7875' },
          lineStyle: { width: 2, type: 'dashed' },
          symbol: 'circle',
          symbolSize: 5,
        },
        {
          name: '跌停20%',
          type: 'line',
          xAxisIndex: 1,
          yAxisIndex: 3,
          data: data.map((d) => -d.limit_down_20),
          itemStyle: { color: '#95de64' },
          lineStyle: { width: 2, type: 'dashed' },
          symbol: 'circle',
          symbolSize: 5,
        },
        {
          name: '连板家数',
          type: 'line',
          xAxisIndex: 1,
          yAxisIndex: 4,
          data: data.map((d) => d.consecutive_limit_count),
          itemStyle: { color: '#fa8c16' },
          lineStyle: { width: 3 },
          symbol: 'circle',
          symbolSize: 6,
        },
      ],
    }, true);

    const handleResize = () => chart.resize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [data]);

  return <div ref={ref} style={{ height: 600 }} />;
}
