import { echarts } from '@/plugins/echarts'
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/store/modules/setting'
import { getCssVar } from '@/utils/ui'
const useChartOps = () => ({
  /** */
  chartHeight: '16rem',
  /** 字体大小 */
  fontSize: 13,
  /** 字体颜色 */
  fontColor: '#999',
  /** 主题颜色 */
  themeColor: getCssVar('--el-color-primary-light-1'),
  /** 颜色组 */
  colors: [
    getCssVar('--el-color-primary-light-1'),
    '#4ABEFF',
    '#EDF2FF',
    '#14DEBA',
    '#FFAF20',
    '#FA8A6C',
    '#FFAF20'
  ]
})
const RESIZE_DELAYS = [50, 100, 200, 350]
const MENU_RESIZE_DELAYS = [50, 100, 200]
const RESIZE_DEBOUNCE_DELAY = 100
function useChart(options = {}) {
  const { initOptions, initDelay = 0, threshold = 0.1, autoTheme = true } = options
  const settingStore = useSettingStore()
  const { isDark, menuOpen, menuType } = storeToRefs(settingStore)
  const chartRef = ref()
  let chart = null
  let intersectionObserver = null
  let pendingOptions = null
  let resizeTimeoutId = null
  let resizeFrameId = null
  let isDestroyed = false
  let emptyStateDiv = null
  const clearTimers = () => {
    if (resizeTimeoutId) {
      clearTimeout(resizeTimeoutId)
      resizeTimeoutId = null
    }
    if (resizeFrameId) {
      cancelAnimationFrame(resizeFrameId)
      resizeFrameId = null
    }
  }
  const requestAnimationResize = () => {
    if (resizeFrameId) {
      cancelAnimationFrame(resizeFrameId)
    }
    resizeFrameId = requestAnimationFrame(() => {
      handleResize()
      resizeFrameId = null
    })
  }
  const debouncedResize = () => {
    if (resizeTimeoutId) {
      clearTimeout(resizeTimeoutId)
    }
    resizeTimeoutId = window.setTimeout(() => {
      requestAnimationResize()
      resizeTimeoutId = null
    }, RESIZE_DEBOUNCE_DELAY)
  }
  const multiDelayResize = (delays) => {
    nextTick(requestAnimationResize)
    delays.forEach((delay) => {
      setTimeout(requestAnimationResize, delay)
    })
  }
  let menuOpenStopHandle = null
  let menuTypeStopHandle = null
  const setupMenuWatchers = () => {
    menuOpenStopHandle = watch(menuOpen, () => multiDelayResize(RESIZE_DELAYS))
    menuTypeStopHandle = watch(menuType, () => {
      nextTick(requestAnimationResize)
      setTimeout(() => multiDelayResize(MENU_RESIZE_DELAYS), 0)
    })
  }
  const cleanupMenuWatchers = () => {
    menuOpenStopHandle?.()
    menuTypeStopHandle?.()
    menuOpenStopHandle = null
    menuTypeStopHandle = null
  }
  let themeStopHandle = null
  const setupThemeWatcher = () => {
    if (autoTheme) {
      themeStopHandle = watch(isDark, () => {
        emptyStateManager.updateStyle()
        if (chart && !isDestroyed) {
          requestAnimationFrame(() => {
            if (chart && !isDestroyed) {
              const currentOptions = chart.getOption()
              if (currentOptions) {
                updateChart(currentOptions)
              }
            }
          })
        }
      })
    }
  }
  const cleanupThemeWatcher = () => {
    themeStopHandle?.()
    themeStopHandle = null
  }
  const createLineStyle = (color, width = 1, type) => ({
    color,
    width,
    ...(type && { type })
  })
  const styleCache = {
    axisLine: null,
    splitLine: null,
    axisLabel: null,
    lastDarkValue: isDark.value
  }
  const clearStyleCache = () => {
    styleCache.axisLine = null
    styleCache.splitLine = null
    styleCache.axisLabel = null
    styleCache.lastDarkValue = isDark.value
  }
  const getAxisLineStyle = (show = true) => {
    if (styleCache.lastDarkValue !== isDark.value) {
      clearStyleCache()
    }
    if (!styleCache.axisLine) {
      styleCache.axisLine = {
        show,
        lineStyle: createLineStyle(isDark.value ? '#444' : '#EDEDED')
      }
    }
    return styleCache.axisLine
  }
  const getSplitLineStyle = (show = true) => {
    if (styleCache.lastDarkValue !== isDark.value) {
      clearStyleCache()
    }
    if (!styleCache.splitLine) {
      styleCache.splitLine = {
        show,
        lineStyle: createLineStyle(isDark.value ? '#444' : '#EDEDED', 1, 'dashed')
      }
    }
    return styleCache.splitLine
  }
  const getAxisLabelStyle = (show = true) => {
    if (styleCache.lastDarkValue !== isDark.value) {
      clearStyleCache()
    }
    if (!styleCache.axisLabel) {
      const { fontColor, fontSize } = useChartOps()
      styleCache.axisLabel = {
        show,
        color: fontColor,
        fontSize
      }
    }
    return styleCache.axisLabel
  }
  const getAxisTickStyle = () => ({
    show: false
  })
  const getAnimationConfig = (animationDelay = 50, animationDuration = 1500) => ({
    animationDelay: (idx) => idx * animationDelay + 200,
    animationDuration: (idx) => animationDuration - idx * 50,
    animationEasing: 'quarticOut'
  })
  const getTooltipStyle = (trigger = 'axis', customOptions = {}) => ({
    trigger,
    backgroundColor: isDark.value ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
    borderColor: isDark.value ? '#333' : '#ddd',
    borderWidth: 1,
    textStyle: {
      color: isDark.value ? '#fff' : '#333'
    },
    ...customOptions
  })
  const getLegendStyle = (position = 'bottom', customOptions = {}) => {
    const baseConfig = {
      textStyle: {
        color: isDark.value ? '#fff' : '#333'
      },
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 20,
      ...customOptions
    }
    switch (position) {
      case 'bottom':
        return {
          ...baseConfig,
          bottom: 0,
          left: 'center',
          orient: 'horizontal',
          icon: 'roundRect'
        }
      case 'top':
        return {
          ...baseConfig,
          top: 0,
          left: 'center',
          orient: 'horizontal',
          icon: 'roundRect'
        }
      case 'left':
        return {
          ...baseConfig,
          left: 0,
          top: 'center',
          orient: 'vertical',
          icon: 'roundRect'
        }
      case 'right':
        return {
          ...baseConfig,
          right: 0,
          top: 'center',
          orient: 'vertical',
          icon: 'roundRect'
        }
      default:
        return baseConfig
    }
  }
  const getGridWithLegend = (showLegend, legendPosition = 'bottom', baseGrid = {}) => {
    const defaultGrid = {
      top: 15,
      right: 15,
      bottom: 8,
      left: 0,
      containLabel: true,
      ...baseGrid
    }
    if (!showLegend) {
      return defaultGrid
    }
    switch (legendPosition) {
      case 'bottom':
        return {
          ...defaultGrid,
          bottom: 40
        }
      case 'top':
        return {
          ...defaultGrid,
          top: 40
        }
      case 'left':
        return {
          ...defaultGrid,
          left: 120
        }
      case 'right':
        return {
          ...defaultGrid,
          right: 120
        }
      default:
        return defaultGrid
    }
  }
  const createIntersectionObserver = () => {
    if (intersectionObserver || !chartRef.value) return
    intersectionObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && pendingOptions && !isDestroyed) {
            requestAnimationFrame(() => {
              if (!isDestroyed && pendingOptions) {
                try {
                  if (!chart) {
                    chart = echarts.init(entry.target)
                  }
                  const event = new CustomEvent('chartVisible', {
                    detail: { options: pendingOptions }
                  })
                  entry.target.dispatchEvent(event)
                  pendingOptions = null
                  cleanupIntersectionObserver()
                } catch (error) {
                  console.error('图表初始化失败:', error)
                }
              }
            })
          }
        })
      },
      { threshold }
    )
    intersectionObserver.observe(chartRef.value)
  }
  const cleanupIntersectionObserver = () => {
    if (intersectionObserver) {
      intersectionObserver.disconnect()
      intersectionObserver = null
    }
  }
  const isContainerVisible = (element) => {
    const rect = element.getBoundingClientRect()
    return rect.width > 0 && rect.height > 0 && rect.top < window.innerHeight && rect.bottom > 0
  }
  const performChartInit = (options2) => {
    if (!chart && chartRef.value && !isDestroyed) {
      chart = echarts.init(chartRef.value)
      setupMenuWatchers()
      setupThemeWatcher()
    }
    if (chart && !isDestroyed) {
      chart.setOption(options2)
      pendingOptions = null
    }
  }
  const emptyStateManager = {
    create: () => {
      if (!chartRef.value || emptyStateDiv) return
      emptyStateDiv = document.createElement('div')
      emptyStateDiv.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: ${isDark.value ? '#555555' : '#B3B2B2'};
        background: transparent;
        z-index: 10;
      `
      emptyStateDiv.innerHTML = `<span>暂无数据</span>`
      if (
        chartRef.value.style.position !== 'relative' &&
        chartRef.value.style.position !== 'absolute'
      ) {
        chartRef.value.style.position = 'relative'
      }
      chartRef.value.appendChild(emptyStateDiv)
    },
    remove: () => {
      if (emptyStateDiv && chartRef.value) {
        chartRef.value.removeChild(emptyStateDiv)
        emptyStateDiv = null
      }
    },
    updateStyle: () => {
      if (emptyStateDiv) {
        emptyStateDiv.style.color = isDark.value ? '#666' : '#999'
      }
    }
  }
  const initChart = (options2 = {}, isEmpty = false) => {
    if (!chartRef.value || isDestroyed) return
    const mergedOptions = { ...initOptions, ...options2 }
    try {
      if (isEmpty) {
        if (chart) {
          chart.clear()
        }
        emptyStateManager.create()
        return
      } else {
        emptyStateManager.remove()
      }
      if (isContainerVisible(chartRef.value)) {
        if (initDelay > 0) {
          setTimeout(() => performChartInit(mergedOptions), initDelay)
        } else {
          performChartInit(mergedOptions)
        }
      } else {
        pendingOptions = mergedOptions
        createIntersectionObserver()
      }
    } catch (error) {
      console.error('图表初始化失败:', error)
    }
  }
  const updateChart = (options2) => {
    if (isDestroyed) return
    try {
      if (!chart) {
        initChart(options2)
        return
      }
      chart.setOption(options2)
    } catch (error) {
      console.error('图表更新失败:', error)
    }
  }
  const handleResize = () => {
    if (chart && !isDestroyed) {
      try {
        chart.resize()
      } catch (error) {
        console.error('图表resize失败:', error)
      }
    }
  }
  const destroyChart = () => {
    isDestroyed = true
    if (chart) {
      try {
        chart.dispose()
      } catch (error) {
        console.error('图表销毁失败:', error)
      } finally {
        chart = null
      }
    }
    cleanupMenuWatchers()
    cleanupThemeWatcher()
    emptyStateManager.remove()
    cleanupIntersectionObserver()
    clearTimers()
    clearStyleCache()
    pendingOptions = null
  }
  const getChartInstance = () => chart
  const isChartInitialized = () => chart !== null
  onMounted(() => {
    window.addEventListener('resize', debouncedResize)
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', debouncedResize)
  })
  onUnmounted(() => {
    destroyChart()
  })
  return {
    isDark,
    chartRef,
    initChart,
    updateChart,
    handleResize,
    destroyChart,
    getChartInstance,
    isChartInitialized,
    emptyStateManager,
    getAxisLineStyle,
    getSplitLineStyle,
    getAxisLabelStyle,
    getAxisTickStyle,
    getAnimationConfig,
    getTooltipStyle,
    getLegendStyle,
    useChartOps,
    getGridWithLegend
  }
}
function useChartComponent(options) {
  const {
    props,
    generateOptions,
    checkEmpty,
    watchSources = [],
    onVisible,
    chartOptions = {}
  } = options
  const chart = useChart(chartOptions)
  const { chartRef, initChart, isDark, emptyStateManager } = chart
  const isEmpty = computed(() => {
    if (props.isEmpty) return true
    if (checkEmpty) return checkEmpty()
    return false
  })
  const updateChart = () => {
    nextTick(() => {
      if (isEmpty.value) {
        if (chart.getChartInstance()) {
          chart.getChartInstance()?.clear()
        }
        emptyStateManager.create()
      } else {
        emptyStateManager.remove()
        initChart(generateOptions())
      }
    })
  }
  const handleChartVisible = () => {
    if (onVisible) {
      onVisible()
    } else {
      updateChart()
    }
  }
  const stopHandles = []
  const setupWatchers = () => {
    if (watchSources.length > 0) {
      const stopHandle = watch(watchSources, updateChart, { deep: true })
      stopHandles.push(stopHandle)
    }
    const themeStopHandle = watch(isDark, () => {
      emptyStateManager.updateStyle()
      updateChart()
    })
    stopHandles.push(themeStopHandle)
  }
  const cleanupWatchers = () => {
    stopHandles.forEach((stop) => stop())
    stopHandles.length = 0
  }
  const setupLifecycle = () => {
    onMounted(() => {
      updateChart()
      if (chartRef.value) {
        chartRef.value.addEventListener('chartVisible', handleChartVisible)
      }
    })
    onBeforeUnmount(() => {
      if (chartRef.value) {
        chartRef.value.removeEventListener('chartVisible', handleChartVisible)
      }
      cleanupWatchers()
      emptyStateManager.remove()
    })
  }
  setupWatchers()
  setupLifecycle()
  return {
    ...chart,
    isEmpty,
    updateChart,
    handleChartVisible
  }
}
export { useChart, useChartComponent, useChartOps }