import React, { useRef, useEffect } from 'react';

interface SmoothLineChartProps {
  data: number[];
}

const SmoothLineChart: React.FC<SmoothLineChartProps> = ({ data }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const drawChart = () => {
    const canvas = canvasRef.current;
    const container = containerRef.current;

    if (!canvas || !container) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 动态调整 canvas 尺寸
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;

    const chartWidth = canvas.width;
    const chartHeight = canvas.height;
    const maxDataValue = Math.max(...data);

    const xSpacing = chartWidth / (data.length - 1);
    const yScale = chartHeight / maxDataValue;

    const controlPoint = (
      current: { x: number; y: number; },
      previous: { x: number; y: number; } | null,
      next: { x: number; y: number; } | null,
      reverse: boolean
    ) => {
      const smoothing = 0.2;
      const p = previous || current;
      const n = next || current;
      const o = {
        length: Math.hypot(n.x - p.x, n.y - p.y),
        angle: Math.atan2(n.y - p.y, n.x - p.x)
      };
      const angle = reverse ? o.angle + Math.PI : o.angle;
      const length = o.length * smoothing;
      return {
        x: current.x + Math.cos(angle) * length,
        y: current.y + Math.sin(angle) * length
      };
    };

    const points = data.map((value, index) => ({
      x: index * xSpacing,
      y: chartHeight - value * yScale,
    }));

    const createPath = (points: { x: number; y: number; }[], ctx: CanvasRenderingContext2D) => {
      if (points.length === 0) return;
      ctx.moveTo(points[0].x, points[0].y);
      for (let i = 0; i < points.length - 1; i++) {
        const cp1 = controlPoint(points[i], points[i - 1] || null, points[i + 1] || null, false);
        const cp2 = controlPoint(points[i + 1], points[i], points[i + 2] || null, true);
        ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, points[i + 1].x, points[i + 1].y);
      }
    };

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.strokeStyle = '#80C0FF';
    ctx.lineWidth = 1.5;

    createPath(points, ctx);
    ctx.stroke();

    // 渲染填充区域
    ctx.lineTo(chartWidth, chartHeight);
    ctx.lineTo(0, chartHeight);
    ctx.closePath();
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, 'rgba(102,179,255,0.2)');
    gradient.addColorStop(1, 'rgba(102,179,255,0)');
    ctx.fillStyle = gradient;
    ctx.fill();
  };

  useEffect(() => {
    drawChart();
    window.addEventListener('resize', drawChart);
    return () => {
      window.removeEventListener('resize', drawChart);
    };
  }, [data]);

  return (
    <div ref={containerRef} style={{ width: '100%', height: '100%', position: 'relative' }}>
      <canvas ref={canvasRef} style={{ display: 'block', width: '100%', height: '100%' }} />
    </div>
  );
};

export default SmoothLineChart;
