import { defineComponent, onMounted, ref, watch, PropType, onUnmounted } from 'vue'

/**
 * 渐变色停止点接口定义
 * @interface ColorStop
 * @property {number} offset - 渐变停止点位置（0-1）
 * @property {string} color - 渐变颜色值
 */
interface ColorStop {
	offset: number
	color: string
}

/**
 * 文字位置类型
 */
type TextPosition = 'front' | 'back' | 'follow'

/**
 * 自定义插槽参数接口
 */
interface SlotProps {
	percent: number
	color: string
}

/**
 * 环形进度条组件
 * 支持自定义大小、颜色、进度和渐变色
 * @component CircleProgress
 * @example
 * ```vue
 * <!-- 基础用法 -->
 * <CircleProgress :percent="75" />
 *
 * <!-- 横向进度条 -->
 * <CircleProgress type="horizontal" :percent="75" />
 *
 * <!-- 使用渐变色 -->
 * <CircleProgress
 *   :percent="75"
 *   :progress-color="[
 *     { offset: 0, color: '#ff0000' },
 *     { offset: 0.5, color: '#00ff00' },
 *     { offset: 1, color: '#0000ff' }
 *   ]"
 * />
 *
 * <!-- 自定义样式 -->
 * <CircleProgress
 *   :percent="75"
 *   :size="200"
 *   :stroke-width="10"
 *   :text-color-follow-progress="true"
 * />
 * ```
 */
export const CircleProgress = defineComponent({
	name: 'CircleProgress',
	props: {
		/**
		 * 进度条类型
		 * @default 'circle'
		 * @type {'circle' | 'horizontal'}
		 */
		type: {
			type: String as PropType<'circle' | 'horizontal'>,
			default: 'circle',
		},
		/**
		 * 进度值，范围 0-100
		 * @default 0
		 * @type {number}
		 */
		percent: {
			type: Number,
			default: 0,
			validator: (value: number) => value >= 0 && value <= 100,
		},
		/**
		 * 组件大小，单位像素
		 * @default 300
		 * @type {number}
		 */
		size: {
			type: Number,
			default: 300,
		},
		/**
		 * 进度文字大小
		 * @default 30
		 * @type {number}
		 */
		textSize: {
			type: Number,
			default: 30,
		},
		/**
		 * 进度条宽度
		 * @default 20
		 * @type {number}
		 */
		strokeWidth: {
			type: Number,
			default: 10,
		},
		/**
		 * 轨道颜色
		 * @default '#e5f1fa'
		 * @type {string}
		 */
		trackColor: {
			type: String,
			default: '#e5f1fa',
		},
		/**
		 * 进度条颜色，支持纯色或渐变色数组
		 * @default '#2ba0fb'
		 * @type {string | ColorStop[]}
		 */
		progressColor: {
			type: [String, Array] as PropType<string | ColorStop[]>,
			default: '#2ba0fb',
		},
		/**
		 * 进度文字颜色
		 * @default '#333'
		 * @type {string}
		 */
		textColor: {
			type: String,
			default: '#333',
		},
		/**
		 * 文字颜色是否跟随进度条颜色变化
		 * @default false
		 * @type {boolean}
		 */
		textColorFollowProgress: {
			type: Boolean,
			default: false,
		},
		/**
		 * 起始角度（弧度）
		 * @default -Math.PI / 2
		 * @type {number}
		 */
		startAngle: {
			type: Number,
			default: -Math.PI / 2, // 默认从12点钟方向开始
		},
		/**
		 * 是否顺时针旋转
		 * @default true
		 * @type {boolean}
		 */
		clockwise: {
			type: Boolean,
			default: true,
		},
		/**
		 * 动画过渡速度（0-1之间，值越大动画越快）
		 * @default 0.1
		 * @type {number}
		 */
		animationSpeed: {
			type: Number,
			default: 0.1,
			validator: (value: number) => value > 0 && value <= 1,
		},
		/**
		 * 组件宽度，单位像素（仅横向进度条生效）
		 * @default 300
		 * @type {number}
		 */
		width: {
			type: Number,
			default: 300,
		},
		/**
		 * 组件高度，单位像素（仅横向进度条生效）
		 * @default 20
		 * @type {number}
		 */
		height: {
			type: Number,
			default: 20,
		},
		/**
		 * 是否启用圆角
		 * @default true
		 * @type {boolean}
		 */
		rounded: {
			type: Boolean,
			default: true,
		},
		/**
		 * 进度条颜色是否跟随进度变化
		 * @default false
		 * @type {boolean}
		 */
		colorFollowProgress: {
			type: Boolean,
			default: false,
		},
		/**
		 * 横向进度条文字位置
		 * @default 'follow'
		 * @type {'front' | 'back' | 'follow'}
		 */
		textPosition: {
			type: String as PropType<TextPosition>,
			default: 'follow',
		},
		/**
		 * 自定义进度文字插槽
		 * @type {(props: SlotProps) => any}
		 */
		progressText: {
			type: Function as PropType<(props: SlotProps) => JSX.Element>,
			default: undefined,
		},
	},
	setup(props) {
		const canvasRef = ref<HTMLCanvasElement | null>(null) // 画布引用
		const currentNum = ref(0) // 当前进度
		const targetNum = ref(0) // 目标进度
		const animationFrame = ref<number | null>(null) // 动画帧

		/**
		 * 计算圆角导致的进度偏差值
		 * @returns {number} 角度偏差值（弧度）
		 * @description
		 * 1. 计算整个圆的长度，以进度线段中心作为圆的长度
		 * 2. 获取进度线段线帽的半径（线段宽度的一半）
		 * 3. 计算线帽旋转需要的角度偏差
		 * 4. 如果未启用圆角或未使用渐变色，则返回0
		 * 5. 当圆弧长度大于圆的长度时，根据进度值计算额外偏移
		 */
		const roundDeviation = (): number => {
			if (props.type === 'horizontal') return 0
			// 如果未启用圆角或未使用渐变色，返回0
			if (!props.rounded || !Array.isArray(props.progressColor) || props.percent === 100) {
				return 0
			}

			// 计算圆的半径（以进度线段中心为基准）
			const radius = (props.size - props.strokeWidth) / 2

			// 获取线帽半径（线段宽度的一半）
			const capRadius = props.strokeWidth / 2

			// 计算线帽旋转需要的角度偏差
			// 使用弧长公式：弧长 = 半径 * 角度
			// 因此：角度 = 弧长 / 半径
			// 这里使用线帽半径作为弧长，因为线帽旋转时走过的距离等于线帽半径
			const deviation = capRadius / radius

			// 计算当前圆的长度
			// const circleLength = 2 * Math.PI * radius

			// const progressLength = circleLength * (props.percent / 100) + props.strokeWidth

			// 如果当前圆弧的长度大于圆的长度，且进度小于100%，则增加偏差
			// if (progressLength > circleLength && props.percent <= 100) {
			// 	deviation = deviation + (progressLength - circleLength) / radius
			// }

			return deviation
		}

		/**
		 * 创建渐变对象
		 * @param ctx - Canvas上下文
		 * @param centerX - 圆心X坐标
		 * @param centerY - 圆心Y坐标
		 * @param colorStops - 渐变色停止点数组
		 * @returns {CanvasGradient} 锥形渐变对象
		 * @description
		 * 创建一个锥形渐变，并添加颜色停止点。
		 * 确保渐变的起点和终点颜色正确，使渐变效果更加平滑。
		 */
		const createGradient = (
			ctx: CanvasRenderingContext2D,
			centerX: number,
			centerY: number,
			colorStops: ColorStop[],
		): CanvasGradient => {
			const deviation = roundDeviation()

			console.log(deviation)
			// 创建锥形渐变，起始角度为-90度（12点钟方向），增加一个偏差值，解决进度显示不完整的问题，同时排除显卡
			const gradient = ctx.createConicGradient(props.startAngle - deviation, centerX, centerY)

			// 添加颜色停止点
			colorStops.forEach((stop) => {
				gradient.addColorStop(stop.offset, stop.color)
			})

			// 确保渐变闭合
			const firstStop = colorStops[0]
			// 获取最后一个颜色停止点
			const lastStop = colorStops[colorStops.length - 1]
			console.log(firstStop, lastStop)
			// 如果第一个颜色停止点不是0，则添加一个0偏移的颜色停止点
			if (firstStop && firstStop.offset !== 0) {
				gradient.addColorStop(0, firstStop.color)
			}
			// 如果最后一个颜色停止点不是1，则添加一个1偏移的颜色停止点
			if (lastStop && lastStop.offset !== 1) {
				gradient.addColorStop(1, lastStop.color)
			}

			return gradient
		}

		/**
		 * 获取当前进度的颜色或渐变
		 * @param ctx - Canvas上下文
		 * @param centerX - 圆心X坐标
		 * @param centerY - 圆心Y坐标
		 * @returns {string | CanvasGradient} 颜色值或渐变对象
		 * @description
		 * 根据progressColor属性的类型返回对应的颜色或渐变对象。
		 * 如果是字符串则返回纯色，如果是数组则创建渐变。
		 */
		const getProgressColor = (
			ctx: CanvasRenderingContext2D,
			centerX: number,
			centerY: number,
		): string | CanvasGradient => {
			if (!Array.isArray(props.progressColor)) {
				return props.progressColor
			}

			// 如果是横向进度条，使用线性渐变
			if (props.type === 'horizontal') {
				const gradient = ctx.createLinearGradient(0, centerY, props.width, centerY)
				props.progressColor.forEach((stop) => {
					gradient.addColorStop(stop.offset, stop.color)
				})
				return gradient
			}

			// 圆形进度条使用锥形渐变
			return createGradient(ctx, centerX, centerY, props.progressColor)
		}

		/**
		 * 获取当前进度的颜色
		 * @param progress - 当前进度值（0-100）
		 * @returns {string} 当前进度的颜色
		 */
		const getCurrentProgressColor = (progress: number): string => {
			// 如果不是渐变色数组，直接返回颜色
			if (!Array.isArray(props.progressColor)) {
				return typeof props.progressColor === 'string' ? props.progressColor : props.textColor
			}

			// 如果颜色停止点为空，返回默认颜色
			const colorStops = props.progressColor as ColorStop[]
			if (colorStops.length === 0) {
				return props.textColor
			}

			// 如果进度达到100%，返回最后一个颜色
			if (progress >= 100) {
				const lastStop = colorStops[colorStops.length - 1]
				return lastStop?.color || props.textColor
			}

			// 将进度转换为0-1之间的值
			const normalizedProgress = progress / 100

			// 找到当前进度所在的两个颜色停止点
			for (let i = 0; i < colorStops.length - 1; i++) {
				const currentStop = colorStops[i]
				const nextStop = colorStops[i + 1]

				if (
					currentStop &&
					nextStop &&
					normalizedProgress >= currentStop.offset &&
					normalizedProgress <= nextStop.offset
				) {
					// 计算两个颜色之间的插值
					const range = nextStop.offset - currentStop.offset
					const ratio = (normalizedProgress - currentStop.offset) / range
					return currentStop.color
				}
			}

			// 如果进度超出范围，返回最后一个颜色
			const lastStop = colorStops[colorStops.length - 1]
			return lastStop?.color || props.textColor
		}

		/**
		 * 格式化进度显示值
		 * @param value - 进度值
		 * @returns {string} 格式化后的进度值
		 */
		const formatProgressValue = (value: number): string => {
			// 如果进度达到100，直接返回100%
			if (value >= 100) return '100%'

			// 将进度值转换为两位小数
			// const decimalValue = Math.round(value * 100) / 100
			// 如果是整数，直接返回
			if (Number.isInteger(value)) {
				return `${value}%`
			}
			// 否则返回两位小数
			return `${value.toFixed(2)}%`
		}

		/**
		 * 获取文字位置样式
		 * @returns {object} 文字位置样式对象
		 */
		const getTextPositionStyle = (): object => {
			if (props.type !== 'horizontal') {
				return {
					left: '50%',
					top: '50%',
					transform: 'translate(-50%, -50%)',
				}
			}

			const progress = currentNum.value / 100
			const width = props.width
			const textWidth = 60 // 预估文字宽度

			// 根据文字位置类型返回对应的样式
			switch (props.textPosition) {
				// 文字在进度条前面
				case 'front':
					return {
						left: `${textWidth / 2}px`,
						top: '50%',
						transform: 'translateY(-50%)',
					}
				// 文字在进度条后面
				case 'back':
					return {
						right: `${textWidth / 2}px`,
						top: '50%',
						transform: 'translateY(-50%)',
					}
				// 文字跟随进度条
				case 'follow':
				default:
					return {
						left: `${Math.max(textWidth / 2, Math.min(width - textWidth / 2, width * progress))}px`, // 文字位置
						top: '50%',
						transform: 'translateX(-50%) translateY(-50%)',
					}
			}
		}

		/**
		 * 绘制圆弧
		 * @param ctx - Canvas上下文
		 * @param color - 填充颜色或渐变
		 * @param x - 圆心X坐标
		 * @param y - 圆心Y坐标
		 * @param radius - 半径
		 * @param start - 起始角度（弧度）
		 * @param end - 结束角度（弧度）
		 * @description
		 * 使用Canvas绘制圆弧，支持纯色和渐变填充。
		 * 使用butt线帽和miter连接样式，确保线条无圆角。
		 */
		const drawCircle = (
			ctx: CanvasRenderingContext2D,
			color: string | CanvasGradient,
			x: number,
			y: number,
			radius: number,
			start: number,
			end: number,
		) => {
			ctx.save() // 保存当前状态

			// 设置线条样式
			ctx.lineCap = props.rounded ? 'round' : 'butt' // 根据rounded属性设置线帽
			ctx.lineJoin = props.rounded ? 'round' : 'miter' // 根据rounded属性设置连接样式
			ctx.lineWidth = props.strokeWidth // 设置线宽
			ctx.strokeStyle = color // 设置线条颜色

			// 创建路径
			ctx.beginPath() // 开始绘制路径
			ctx.arc(x, y, radius, start, end, !props.clockwise) // 绘制圆弧

			// 绘制线条
			ctx.stroke() // 绘制线条
			ctx.closePath() // 关闭路径

			ctx.restore() // 恢复状态
		}

		/**
		 * 绘制横向进度条
		 * @param ctx - Canvas上下文
		 * @param color - 填充颜色或渐变
		 * @param x - 起始X坐标
		 * @param y - 起始Y坐标
		 * @param width - 宽度
		 * @param height - 高度
		 * @param progress - 进度值（0-1）
		 * @description
		 * 使用Canvas绘制横向进度条，支持纯色和渐变填充。
		 */
		const drawHorizontal = (
			ctx: CanvasRenderingContext2D,
			color: string | CanvasGradient,
			x: number,
			y: number,
			width: number,
			height: number,
			progress: number,
		) => {
			ctx.save()

			// 设置线条样式
			ctx.lineCap = props.rounded ? 'round' : 'butt'
			ctx.lineJoin = props.rounded ? 'round' : 'miter'
			ctx.lineWidth = height
			ctx.strokeStyle = color

			// 计算圆角半径
			const radius = props.rounded ? height / 2 : 0

			// 计算实际进度宽度，考虑圆角
			const actualWidth = Math.max(radius * 2, width * progress)

			// 绘制进度条
			ctx.beginPath()
			// 从圆角中心点开始绘制
			ctx.moveTo(x + radius, y + height / 2)
			// 到圆角中心点结束
			ctx.lineTo(x + actualWidth - radius, y + height / 2)
			ctx.stroke()
			ctx.closePath()

			// 只在启用圆角时绘制起点和终点圆角
			if (props.rounded) {
				// 绘制起点圆角
				ctx.beginPath()
				ctx.arc(x + radius, y + height / 2, radius, -Math.PI / 2, Math.PI / 2)
				ctx.fillStyle = color
				ctx.fill()
				ctx.closePath()

				// 只在进度大于0时绘制终点圆角
				if (progress > 0) {
					ctx.beginPath()
					ctx.arc(x + actualWidth - radius, y + height / 2, radius, Math.PI / 2, -Math.PI / 2)
					ctx.fillStyle = color
					ctx.fill()
					ctx.closePath()
				}
			}

			ctx.restore()
		}

		/**
		 * 执行动画绘制
		 * @description
		 * 使用requestAnimationFrame实现平滑的进度动画。
		 * 支持高DPI设备，确保显示清晰。
		 * 包含背景轨道、进度条和进度文字的绘制。
		 */
		const animate = () => {
			const canvas = canvasRef.value
			if (!canvas) return

			const ctx = canvas.getContext('2d')
			if (!ctx) return

			// 设置画布的实际尺寸为显示尺寸的2倍，以支持高DPI设备
			const dpr = window.devicePixelRatio || 1
			const displayWidth = props.type === 'horizontal' ? props.width : props.size
			const displayHeight = props.type === 'horizontal' ? props.height : props.size
			canvas.width = displayWidth * dpr
			canvas.height = displayHeight * dpr
			ctx.scale(dpr, dpr)

			const draw = () => {
				// 平滑过渡到目标值
				const diff = targetNum.value - currentNum.value
				if (Math.abs(diff) > 0.1) {
					currentNum.value += diff * props.animationSpeed
					animationFrame.value = requestAnimationFrame(draw)
				} else {
					currentNum.value = targetNum.value
				}

				ctx.clearRect(0, 0, displayWidth, displayHeight)

				if (props.type === 'horizontal') {
					// 绘制背景轨道
					drawHorizontal(ctx, props.trackColor, 0, 0, displayWidth, displayHeight, 1)

					// 获取当前进度的颜色或渐变
					const progressColor = getProgressColor(ctx, displayWidth / 2, displayHeight / 2)

					// 绘制进度条
					drawHorizontal(ctx, progressColor, 0, 0, displayWidth, displayHeight, currentNum.value / 100)
				} else {
					// 原有的圆形进度条绘制逻辑
					const centerX = props.size / 2
					const centerY = props.size / 2
					const radius = (props.size - props.strokeWidth) / 2

					// 绘制背景轨道
					drawCircle(ctx, props.trackColor, centerX, centerY, radius, 0, 2 * Math.PI)

					// 获取当前进度的颜色或渐变
					const progressColor = getProgressColor(ctx, centerX, centerY)

					// 绘制进度条
					const progressAngle = ((2 * currentNum.value) / 100) * Math.PI
					const adjustedStartAngle = props.startAngle
					const adjustedEndAngle = props.startAngle + progressAngle

					// 绘制进度条
					drawCircle(ctx, progressColor, centerX, centerY, radius, adjustedStartAngle, adjustedEndAngle)
				}
			}

			draw()
		}

		// 组件挂载时初始化
		onMounted(() => {
			targetNum.value = props.percent
			currentNum.value = props.percent
			animate()
		})

		// 监听进度值变化
		watch(
			() => props.percent,
			(newValue) => {
				// 限制进度值不超过100
				const limitedValue = Math.min(newValue, 100)
				// 如果已经达到100%，不再更新
				if (currentNum.value >= 100 && limitedValue >= 100) {
					return
				}
				targetNum.value = limitedValue
				// 取消之前的动画帧
				if (animationFrame.value) {
					cancelAnimationFrame(animationFrame.value)
					animationFrame.value = null
				}
				animate()
			},
		)

		// 组件卸载时清理动画帧
		onUnmounted(() => {
			if (animationFrame.value) {
				cancelAnimationFrame(animationFrame.value)
				animationFrame.value = null
			}
		})

		return () => {
			const currentColor = getCurrentProgressColor(currentNum.value)
			const textContent = props.progressText
				? props.progressText({ percent: Math.round(currentNum.value), color: currentColor })
				: formatProgressValue(currentNum.value)

			return (
				<div
					style={{
						width: props.type === 'horizontal' ? `${props.width}px` : `${props.size}px`,
						height: props.type === 'horizontal' ? `${props.height}px` : `${props.size}px`,
						position: 'relative',
					}}
				>
					<canvas
						ref={canvasRef}
						style={{
							width: props.type === 'horizontal' ? `${props.width}px` : `${props.size}px`,
							height: props.type === 'horizontal' ? `${props.height}px` : `${props.size}px`,
							display: 'block',
						}}
					/>
					<div
						style={{
							position: 'absolute',
							...getTextPositionStyle(),
							fontSize: props.type === 'horizontal' ? `${props.height * 0.8}px` : `${props.size / 7.5}px`,
							fontFamily: 'Helvetica',
							color: props.textColorFollowProgress ? currentColor : props.textColor,
						}}
					>
						{textContent}
					</div>
				</div>
			)
		}
	},
})

export default CircleProgress