// src/components/ChatBot/EChartsRenderer.js
// ECharts 图表渲染组件

import React, { useEffect, useRef } from 'react';
import { Box, useColorModeValue } from '@chakra-ui/react';
import * as echarts from 'echarts';

/**
 * ECharts 图表渲染组件
 * @param {Object} option - ECharts 配置对象
 * @param {number} height - 图表高度（默认 400px）
 */
export const EChartsRenderer = ({ option, height = 400 }) => {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);
  const bgColor = useColorModeValue('white', 'gray.800');

  useEffect(() => {
    if (!chartRef.current || !option) return;

    // 初始化图表
    if (!chartInstance.current) {
      chartInstance.current = echarts.init(chartRef.current);
    }

    // 设置默认主题配置
    const defaultOption = {
      backgroundColor: 'transparent',
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      ...option,
    };

    // 设置图表配置
    chartInstance.current.setOption(defaultOption, true);

    // 响应式调整大小
    const handleResize = () => {
      chartInstance.current?.resize();
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      // chartInstance.current?.dispose(); // 不要销毁，避免重新渲染时闪烁
    };
  }, [option]);

  // 组件卸载时销毁图表
  useEffect(() => {
    return () => {
      chartInstance.current?.dispose();
      chartInstance.current = null;
    };
  }, []);

  return (
    <Box
      ref={chartRef}
      width="100%"
      height={`${height}px`}
      bg={bgColor}
      borderRadius="md"
      boxShadow="sm"
    />
  );
};