// 用枚舉告訴代碼：「現(xiàn)在該哪一步了？」
enum class AnimationState {
    IDLE,          // 靜止?fàn)顟B(tài)
    CIRCLE_GROW,   // 背景圓圈擴(kuò)散
    THUMB_JUMP,    // 點(diǎn)贊圖標(biāo)彈跳
    DOT_EXPLOSION, // 小圓點(diǎn)爆發(fā)
    FINISH         // 動(dòng)畫(huà)結(jié)束
}

@Composable
fun LikeButton(isLiked: Boolean) {
    // ?? 核心狀態(tài)控制
    var isLiked by remember { mutableStateOf(false) }
    var currentState by remember { mutableStateOf(AnimationState.IDLE) }

    // ?? 單位轉(zhuǎn)換（解決DP/PX混亂問(wèn)題！）
    val density = LocalDensity.current
    val maxCircleSize = 48.dp
    val maxCirclePx = with(density) { maxCircleSize.toPx() }

    // ?? 動(dòng)畫(huà)過(guò)渡控制
    val transition = updateTransition(currentState, label = "LikeTransition")

    // ? 定義動(dòng)畫(huà)數(shù)值
    // 背景圓圈半徑
    val circleRadius by transition.animateFloat(
        transitionSpec = {
            when {
                AnimationState.IDLE isTransitioningTo AnimationState.CIRCLE_GROW ->
                    tween(300, easing = FastOutSlowInEasing)

                else -> snap()
            }
        }, label = "circleRadius"
    ) { state ->
        when (state) {
            AnimationState.CIRCLE_GROW -> maxCirclePx
            else -> 0f
        }
    }

    // ?? 大拇指圖標(biāo)動(dòng)畫(huà)（彈跳效果）
    val thumbScale by transition.animateFloat(
        transitionSpec = {
            keyframes {
                durationMillis = 600
                0f at 0 with LinearEasing
                1.2f at 150
                1f at 300
            }
        }, label = "thumbScale"
    ) { state ->
        when (state) {
            AnimationState.THUMB_JUMP -> 1f
            AnimationState.FINISH -> 1f
            AnimationState.IDLE -> 1f// 確保初始狀態(tài)也顯示
            else -> 0f
        }
    }

    // ?? 爆炸小圓點(diǎn)
    val dotsProgress by transition.animateFloat(
        transitionSpec = { tween(500) },
        label = "dotsProgress"
    ) { state ->
        when (state) {
            AnimationState.DOT_EXPLOSION -> 1f
            else -> 0f
        }
    }

    // ?? 點(diǎn)擊觸發(fā)動(dòng)畫(huà)
    LaunchedEffect(isLiked) {
        if (isLiked) {
            currentState = AnimationState.CIRCLE_GROW
            delay(300)
            currentState = AnimationState.THUMB_JUMP
            delay(300)
            currentState = AnimationState.DOT_EXPLOSION
            delay(800)
            currentState = AnimationState.FINISH
        } else {
            currentState = AnimationState.IDLE
        }
    }
    
    // 繪制界面（下一步講）
}

// ?? 繪制界面
Box(
    modifier = Modifier
        .size(72.dp)
        .clickable { isLiked = !isLiked },
    contentAlignment = Alignment.Center
) {
    // 背景擴(kuò)散圓圈
    if (currentState != AnimationState.IDLE) {
        Canvas(modifier = Modifier.fillMaxSize()) {
            drawCircle(
                color = Color.Red.copy(alpha = 0.2f),
                radius = circleRadius,
                style = Stroke(width = 2.dp.toPx())
            )
        }
    }

    // 大拇指圖標(biāo)（帶彈跳）
    Icon(
        imageVector = Icons.Default.ThumbUp,
        contentDescription = "Like",
        modifier = Modifier
            .size(32.dp)
            .graphicsLayer {
                scaleX = thumbScale
                scaleY = thumbScale
            },
        tint = if (isLiked) Color.Red else Color.Gray
    )

    // 爆炸小圓點(diǎn)
    if (dotsProgress > 0) {
        val angles = listOf(0f, 45f, 90f, 135f, 180f, 225f, 270f, 315f)
        val radius = with(LocalDensity.current) { 48.dp.toPx() } * dotsProgress
        val dotRadius = with(LocalDensity.current) { 4.dp.toPx() }

        Canvas(modifier = Modifier.fillMaxSize()) {
            val center = Offset(size.width / 2, size.height / 2)

            angles.forEach { angle ->
                val radians = Math.toRadians(angle.toDouble())
                val x = center.x + radius * cos(radians).toFloat()
                val y = center.y + radius * sin(radians).toFloat()
                    
                drawCircle(
                    color = Color(0xFFFF6B6B).copy(alpha = 1 - dotsProgress),
                    radius = dotRadius,
                    center = Offset(x, y)
                )
            }
        }
    }
}