import * as Cesium from 'cesium'
import { ref } from 'vue'
import { DISASTER_CENTER, RANGE_CIRCLE_STYLE } from '../constants'

/**
 * 范围圈管理
 *
 * 职责：
 * 1. 创建和更新范围圈实体
 * 2. 管理范围圈的样式和可见性
 * 3. 清理范围圈资源
 *
 * @returns {Object} 范围圈管理 API
 */
export function useRangeCircle() {
  // 范围圈实体引用
  const rangeCircleEntity = ref(null)

  /**
   * 创建或更新范围圈
   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
   * @param {number} radiusKm - 半径（公里）
   * @param {Object} options - 可选配置
   * @param {number} options.centerLon - 中心点经度（默认使用 DISASTER_CENTER）
   * @param {number} options.centerLat - 中心点纬度（默认使用 DISASTER_CENTER）
   * @param {Object} options.style - 样式配置（默认使用 RANGE_CIRCLE_STYLE）
   */
  const createOrUpdateRangeCircle = (
    viewer,
    radiusKm,
    options = {}
  ) => {
    if (!viewer) {
      console.warn('[useRangeCircle] viewer 为空')
      return
    }

    const {
      centerLon = DISASTER_CENTER.lon,
      centerLat = DISASTER_CENTER.lat,
      style = RANGE_CIRCLE_STYLE,
    } = options

    const radiusMeters = radiusKm * 1000

    // 如果已存在范围圈，先移除
    if (rangeCircleEntity.value) {
      viewer.entities.remove(rangeCircleEntity.value)
      rangeCircleEntity.value = null
    }

    // 创建新的范围圈
    rangeCircleEntity.value = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, 0),
      ellipse: {
        semiMinorAxis: radiusMeters,
        semiMajorAxis: radiusMeters,
        height: 0,
        material: Cesium.Color.fromCssColorString(style.fillColor).withAlpha(style.fillAlpha),
        outline: true,
        outlineColor: Cesium.Color.fromCssColorString(style.outlineColor).withAlpha(
          style.outlineAlpha
        ),
        outlineWidth: style.outlineWidth,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    })

    // 禁用范围圈的鼠标交互，让点击可以穿透到下面的标记点
    if (rangeCircleEntity.value) {
      rangeCircleEntity.value.allowPicking = false
    }

    console.log(`[useRangeCircle] 已创建/更新范围圈: ${radiusKm}km`)
  }

  /**
   * 显示范围圈
   */
  const showRangeCircle = () => {
    if (rangeCircleEntity.value) {
      rangeCircleEntity.value.show = true
    }
  }

  /**
   * 隐藏范围圈
   */
  const hideRangeCircle = () => {
    if (rangeCircleEntity.value) {
      rangeCircleEntity.value.show = false
    }
  }

  /**
   * 清除范围圈
   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
   */
  const clearRangeCircle = (viewer) => {
    if (rangeCircleEntity.value && viewer) {
      viewer.entities.remove(rangeCircleEntity.value)
      rangeCircleEntity.value = null
      console.log('[useRangeCircle] 范围圈已清除')
    }
  }

  return {
    rangeCircleEntity,
    createOrUpdateRangeCircle,
    showRangeCircle,
    hideRangeCircle,
    clearRangeCircle,
  }
}
