/**
 * 图表服务工具
 * 封装ECharts图表的初始化和配置功能
 * 优化版本：支持按需加载、懒加载和性能优化
 */

// 导入ECharts核心模块
import * as echarts from 'echarts/core';

// 按需导入图表组件
import {
  LineChart,
  BarChart,
  PieChart
} from 'echarts/charts';

// 按需导入组件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  ToolboxComponent
} from 'echarts/components';

// 导入Canvas渲染器（性能更好）
import { CanvasRenderer } from 'echarts/renderers';

// 图表实例缓存
const chartInstanceCache = new Map();

// 数据缓存
const dataCache = new Map();

// 注册必要的组件
echarts.use([
  LineChart,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  ToolboxComponent,
  CanvasRenderer
]);

// 性能优化配置
const PERFORMANCE_CONFIG = {
  // 启用硬件加速
  devicePixelRatio: window.devicePixelRatio || 1,
  // 渲染器配置
  renderer: 'canvas',
  // 动画配置
  animation: {
    duration: 300,
    easing: 'cubicOut'
  },
  // 大数据优化
  largeThreshold: 2000,
  progressive: 400,
  progressiveThreshold: 3000
};

/**
 * 创建图表实例（优化版本）
 * @param {HTMLElement} container - 图表容器元素
 * @param {Object} options - 图表配置选项
 * @param {string} cacheKey - 缓存键（可选）
 * @returns {echarts.ECharts} 图表实例
 */
export function createChart(container, options = {}, cacheKey = null) {
  if (!container) {
    console.error('图表容器不存在');
    return null;
  }
  
  // 检查缓存
  if (cacheKey && chartInstanceCache.has(cacheKey)) {
    const cachedChart = chartInstanceCache.get(cacheKey);
    if (cachedChart && !cachedChart.isDisposed()) {
      // 更新配置
      cachedChart.setOption(options, true);
      return cachedChart;
    } else {
      // 清理无效缓存
      chartInstanceCache.delete(cacheKey);
    }
  }
  
  // 合并性能优化配置
  const initOptions = {
    devicePixelRatio: PERFORMANCE_CONFIG.devicePixelRatio,
    renderer: PERFORMANCE_CONFIG.renderer,
    width: 'auto',
    height: 'auto'
  };
  
  // 创建图表实例
  const chart = echarts.init(container, null, initOptions);
  
  // 应用性能优化配置到选项
  const optimizedOptions = {
    ...options,
    animation: {
      ...PERFORMANCE_CONFIG.animation,
      ...options.animation
    },
    // 大数据优化
    progressive: PERFORMANCE_CONFIG.progressive,
    progressiveThreshold: PERFORMANCE_CONFIG.progressiveThreshold
  };
  
  // 设置图表选项
  if (optimizedOptions) {
    chart.setOption(optimizedOptions, true);
  }
  
  // 缓存图表实例
  if (cacheKey) {
    chartInstanceCache.set(cacheKey, chart);
  }
  
  return chart;
}

/**
 * 创建趋势图表
 * @param {HTMLElement} container - 图表容器元素
 * @param {Array} data - 图表数据
 * @param {Object} options - 额外配置选项
 * @returns {echarts.ECharts} 图表实例
 */
export function createTrendChart(container, data, options = {}) {
  const { xAxis = [], series = [] } = data;
  
  const defaultOptions = {
    title: {
      text: options.title || '趋势图表',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: series.map(item => item.name),
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: series.map(item => ({
      name: item.name,
      type: item.type || 'line',
      data: item.data,
      smooth: true,
      itemStyle: item.itemStyle,
      lineStyle: item.lineStyle,
      areaStyle: item.areaStyle
    }))
  };
  
  // 合并选项
  const chartOptions = {
    ...defaultOptions,
    ...options,
    title: { ...defaultOptions.title, ...options.title },
    tooltip: { ...defaultOptions.tooltip, ...options.tooltip },
    legend: { ...defaultOptions.legend, ...options.legend },
    grid: { ...defaultOptions.grid, ...options.grid }
  };
  
  return createChart(container, chartOptions);
}

/**
 * 创建饼图
 * @param {HTMLElement} container - 图表容器元素
 * @param {Array} data - 图表数据
 * @param {Object} options - 额外配置选项
 * @returns {echarts.ECharts} 图表实例
 */
export function createPieChart(container, data, options = {}) {
  const defaultOptions = {
    title: {
      text: options.title || '饼图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      bottom: 0
    },
    series: [
      {
        name: options.seriesName || '数据',
        type: 'pie',
        radius: options.radius || ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  };
  
  // 合并选项
  const chartOptions = {
    ...defaultOptions,
    ...options,
    title: { ...defaultOptions.title, ...options.title },
    tooltip: { ...defaultOptions.tooltip, ...options.tooltip },
    legend: { ...defaultOptions.legend, ...options.legend }
  };
  
  return createChart(container, chartOptions);
}

/**
 * 创建柱状图
 * @param {HTMLElement} container - 图表容器元素
 * @param {Object} data - 图表数据
 * @param {Object} options - 额外配置选项
 * @returns {echarts.ECharts} 图表实例
 */
export function createBarChart(container, data, options = {}) {
  const { xAxis = [], series = [] } = data;
  
  const defaultOptions = {
    title: {
      text: options.title || '柱状图',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: series.map(item => item.name),
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: series.map(item => ({
      name: item.name,
      type: 'bar',
      data: item.data,
      itemStyle: item.itemStyle
    }))
  };
  
  // 合并选项
  const chartOptions = {
    ...defaultOptions,
    ...options,
    title: { ...defaultOptions.title, ...options.title },
    tooltip: { ...defaultOptions.tooltip, ...options.tooltip },
    legend: { ...defaultOptions.legend, ...options.legend },
    grid: { ...defaultOptions.grid, ...options.grid }
  };
  
  return createChart(container, chartOptions);
}



/**
 * 处理窗口大小变化，调整图表大小
 * @param {echarts.ECharts} chart - 图表实例
 */
export function handleResize(chart) {
  if (chart) {
    chart.resize();
  }
}

/**
 * 销毁图表实例
 * @param {echarts.ECharts} chart - 图表实例
 * @param {string} cacheKey - 缓存键（可选）
 */
export function disposeChart(chart, cacheKey = null) {
  if (chart) {
    chart.dispose();
    
    // 清理缓存
    if (cacheKey) {
      chartInstanceCache.delete(cacheKey);
      dataCache.delete(cacheKey);
    }
  }
}

/**
 * 数据缓存管理
 */
export const DataCache = {
  /**
   * 设置缓存数据
   * @param {string} key - 缓存键
   * @param {any} data - 数据
   * @param {number} ttl - 过期时间（毫秒），默认5分钟
   */
  set(key, data, ttl = 5 * 60 * 1000) {
    const expireTime = Date.now() + ttl;
    dataCache.set(key, { data, expireTime });
  },
  
  /**
   * 获取缓存数据
   * @param {string} key - 缓存键
   * @returns {any|null} 缓存的数据或null
   */
  get(key) {
    const cached = dataCache.get(key);
    if (!cached) return null;
    
    // 检查是否过期
    if (Date.now() > cached.expireTime) {
      dataCache.delete(key);
      return null;
    }
    
    return cached.data;
  },
  
  /**
   * 删除缓存数据
   * @param {string} key - 缓存键
   */
  delete(key) {
    dataCache.delete(key);
  },
  
  /**
   * 清空所有缓存
   */
  clear() {
    dataCache.clear();
  },
  
  /**
   * 检查缓存是否存在且未过期
   * @param {string} key - 缓存键
   * @returns {boolean}
   */
  has(key) {
    return this.get(key) !== null;
  }
};

/**
 * 懒加载图表组件
 * @param {HTMLElement} container - 图表容器
 * @param {Function} dataLoader - 数据加载函数
 * @param {Object} options - 图表配置
 * @param {string} cacheKey - 缓存键
 * @returns {Promise<echarts.ECharts>}
 */
export async function createLazyChart(container, dataLoader, options = {}, cacheKey = null) {
  // 检查数据缓存
  let data = cacheKey ? DataCache.get(cacheKey) : null;
  
  if (!data) {
    // 显示加载状态
    const loadingChart = createChart(container, {
      title: {
        text: '加载中...',
        left: 'center',
        top: 'center',
        textStyle: {
          fontSize: 14,
          color: '#999'
        }
      }
    });
    
    try {
      // 异步加载数据
      data = await dataLoader();
      
      // 缓存数据
      if (cacheKey) {
        DataCache.set(cacheKey, data);
      }
      
      // 销毁加载图表
      loadingChart.dispose();
    } catch (error) {
      console.error('图表数据加载失败:', error);
      
      // 显示错误状态
      loadingChart.setOption({
        title: {
          text: '加载失败',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 14,
            color: '#ff4d4f'
          }
        }
      });
      
      return loadingChart;
    }
  }
  
  // 创建实际图表
  const chartOptions = {
    ...options,
    ...data
  };
  
  return createChart(container, chartOptions, cacheKey);
}

/**
 * 清理所有缓存
 */
export function clearAllCache() {
  // 销毁所有缓存的图表实例
  chartInstanceCache.forEach(chart => {
    if (chart && !chart.isDisposed()) {
      chart.dispose();
    }
  });
  
  // 清空缓存
  chartInstanceCache.clear();
  dataCache.clear();
}

/**
 * 获取缓存统计信息
 */
export function getCacheStats() {
  return {
    chartInstances: chartInstanceCache.size,
    dataCache: dataCache.size,
    memoryUsage: {
      charts: chartInstanceCache.size * 0.1, // 估算MB
      data: dataCache.size * 0.05 // 估算MB
    }
  };
}