"use client";

import { useEffect, useRef } from "react";
import * as echarts from "echarts";

export interface XY {
  date: string;
  value: number;
}

export function LineChart({
  title,
  data,
  color = "#38bdf8",
}: {
  title: string;
  data: XY[];
  color?: string;
}) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current || data.length === 0) return;
    const chart = echarts.init(ref.current);
    chart.setOption({
      title: { text: title, textStyle: { color: "#e2e8f0", fontSize: 13 } },
      tooltip: { trigger: "axis" },
      grid: { left: 60, right: 20, top: 40, bottom: 30 },
      xAxis: {
        type: "category",
        data: data.map((p) => p.date),
        axisLabel: { color: "#94a3b8", fontSize: 10 },
      },
      yAxis: {
        type: "value",
        scale: true,
        axisLabel: { color: "#94a3b8" },
        splitLine: { lineStyle: { color: "#334155" } },
      },
      series: [
        {
          type: "line",
          showSymbol: false,
          data: data.map((p) => p.value),
          lineStyle: { color, width: 1.6 },
          itemStyle: { color },
        },
      ],
    });
    const onResize = () => chart.resize();
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
      chart.dispose();
    };
  }, [data, color, title]);

  if (data.length === 0) return <div className="muted">暂无数据</div>;
  return <div ref={ref} style={{ height: 360, width: "100%" }} />;
}