import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'

/**
 * 图表背景位置调整 composable
 * @param {Object} options 配置选项
 * @param {Ref} options.wrapperRef - 图表容器的 ref
 * @param {Ref} options.backgroundRef - 背景元素的 ref
 * @param {String} options.left - 背景 left 位置，如 '25%' 或 '50%'，默认 '50%'
 * @param {String} options.top - 背景 top 位置，如 '50%'，默认 '50%'
 * @param {String} options.offsetX - X 轴偏移值，如 '-51.5%' 或 '-50%'，默认 '-50%'
 * @param {String} options.offsetY - Y 轴偏移值，如 '-39%' 或 '-50%'，默认 '-50%'
 * @param {Ref} options.watchData - 可选，监听的数据变化，数据变化时重新调整位置
 * @returns {Function} adjustBackgroundPosition - 手动调整背景位置的方法
 */
export function useChartBackground(options = {}) {
  const {
    wrapperRef,
    backgroundRef,
    left = '50%',
    top = '50%',
    offsetX = '-50%',
    offsetY = '-50%',
    watchData = null
  } = options

  let resizeObserver = null
  let intersectionObserver = null
  let retryTimers = []

  const clearRetryTimers = () => {
    if (!retryTimers.length) return
    retryTimers.forEach((t) => clearTimeout(t))
    retryTimers = []
  }

  // 调整背景位置
  const adjustBackgroundPosition = () => {
    nextTick(() => {
      if (!wrapperRef?.value || !backgroundRef?.value) {
        return
      }

      // 初始化阶段经常出现：容器尚未可见/尺寸为 0（非全屏、tab、动画等）
      // 这种情况下先不对齐，等 ResizeObserver / IntersectionObserver 再触发
      const rect = wrapperRef.value.getBoundingClientRect()
      if (!rect.width || !rect.height) return

      const background = backgroundRef.value
      
      // 使用百分比定位 + transform 微调（这是最可靠的方式）
      background.style.left = left
      background.style.top = top
      background.style.transform = `translate(${offsetX}, ${offsetY})`
    })
  }

  // 初始化阶段多次“补偿对齐”，覆盖 Echarts 首次渲染/动画造成的延迟布局
  const scheduleKickAlign = () => {
    clearRetryTimers()
    ;[0, 60, 180, 360, 800].forEach((ms) => {
      retryTimers.push(
        setTimeout(() => {
          adjustBackgroundPosition()
        }, ms)
      )
    })
  }

  // 窗口 resize 处理
  const resizeHandler = () => {
    adjustBackgroundPosition()
  }

  // 如果提供了 watchData，监听数据变化（需要在 setup 阶段创建）
  if (watchData) {
    watch(watchData, () => {
      adjustBackgroundPosition()
    }, { deep: true })
  }

  // 初始化
  const init = () => {
    // 监听窗口 resize
    window.addEventListener('resize', resizeHandler)
    
    // 使用 ResizeObserver 监听容器尺寸变化
    nextTick(() => {
      if (wrapperRef?.value && window.ResizeObserver) {
        resizeObserver = new ResizeObserver(() => {
          adjustBackgroundPosition()
        })
        resizeObserver.observe(wrapperRef.value)
      }

      // 监听“从不可见到可见”，解决初始化时未对齐但热更新又正常的问题
      if (wrapperRef?.value && window.IntersectionObserver) {
        intersectionObserver = new IntersectionObserver(
          (entries) => {
            const entry = entries?.[0]
            if (entry?.isIntersecting) {
              scheduleKickAlign()
            }
          },
          { threshold: 0.01 }
        )
        intersectionObserver.observe(wrapperRef.value)
      }

      // 初始化多次补偿对齐，确保图表渲染完成
      scheduleKickAlign()
    })
  }

  // 清理
  const cleanup = () => {
    window.removeEventListener('resize', resizeHandler)
    clearRetryTimers()
    if (resizeObserver) {
      resizeObserver.disconnect()
      resizeObserver = null
    }
    if (intersectionObserver) {
      intersectionObserver.disconnect()
      intersectionObserver = null
    }
  }

  return {
    adjustBackgroundPosition,
    init,
    cleanup
  }
}