<template>
    <view class="grip-ring-canvas">
        <!-- 环境氛围:中心放射光晕(不形成边界,真正融入) -->
        <view class="ambient-glow" />

        <!-- 捏碎特效画布 -->
        <CrushCanvas ref="crushCanvasRef" />

        <!-- 握力环容器 -->
        <view class="ring-container" :class="{ playing: isPlaying }" @click="onButtonClick">
            <!-- 外发光(只在播放时启用) -->
            <view class="ring-aura" />

            <!-- 握力环主体 -->
            <view class="grip-ring">
                <view class="ring-outer-circle" />
                <view class="ring-highlight" />
                <view class="ring-inner-circle" />
            </view>

            <!-- 中心提示 (仅未开始时显示) -->
            <view v-if="!isPlaying" class="center-hint">
                <view class="hint-icon">
                    <view class="play-triangle" />
                </view>
                <text class="hint-text">{{ hintText || '点击开始' }}</text>
            </view>

            <!-- BPM 显示 (播放时显示) -->
            <view v-else class="bpm-display">
                <text class="bpm-value">{{ bpm }}</text>
                <text class="bpm-label">BPM</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CrushCanvas from './crush-canvas.vue'

interface Props {
    bpm: number
    isPlaying: boolean
    hintText?: string
}

const props = withDefaults(defineProps<Props>(), {
    hintText: '点击开始',
})

const emit = defineEmits<{
    togglePlay: []
}>()

const crushCanvasRef = ref()

const onButtonClick = () => {
    emit('togglePlay')
}

// 暴露捏碎特效触发方法
const triggerCrushEffect = (itemType: 'egg' | 'walnut' | 'can' | 'balloon') => {
    crushCanvasRef.value?.triggerCrush(itemType)
}

defineExpose({
    triggerCrushEffect
})
</script>

<style lang="scss" scoped>
/* ============================================================
 * 画布容器 - 完全融入页面,无边界
 * ============================================================ */
.grip-ring-canvas {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #f1f5f9 100%);
}

/* 环境氛围 - 中心放射光晕 */
.ambient-glow {
    position: absolute;
    width: 1200rpx;
    height: 1200rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(204, 251, 241, 0.9) 0%,
            rgba(240, 253, 250, 0.5) 30%,
            rgba(241, 245, 249, 0.2) 55%,
            transparent 72%);
    pointer-events: none;
}

/* ============================================================
 * 握力环容器 - 主视觉
 * ============================================================ */
.ring-container {
    position: relative;
    width: 560rpx;
    height: 560rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

/* 外发光 - 只在播放时显示(节省 GPU) */
.ring-aura {
    position: absolute;
    width: 620rpx;
    height: 620rpx;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(20, 184, 166, 0.4) 0%,
        rgba(45, 212, 191, 0.15) 35%,
        rgba(20, 184, 166, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
}

.ring-container.playing .ring-aura {
    opacity: 1;
    animation: aura-breath 2s ease-in-out infinite;
}

@keyframes aura-breath {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* ============================================================
 * 握力环主体 - 大尺寸沉浸感
 * ============================================================ */
.grip-ring {
    position: relative;
    width: 460rpx;
    height: 460rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.ring-container:active .grip-ring {
    transform: scale(0.96);
}

/* 外圈 - 青绿渐变(与页面品牌色一致) */
.ring-outer-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg,
        #5eead4 0%,
        #2dd4bf 45%,
        #14b8a6 100%);
    box-shadow:
        0 20rpx 56rpx rgba(20, 184, 166, 0.35),
        0 10rpx 28rpx rgba(45, 212, 191, 0.25),
        inset 0 -18rpx 36rpx rgba(15, 118, 110, 0.3),
        inset 0 18rpx 36rpx rgba(255, 255, 255, 0.45);
}

/* 顶部高光 - 模拟材质感 */
.ring-highlight {
    position: absolute;
    width: 360rpx;
    height: 100rpx;
    top: 40rpx;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* 内圈中空 */
.ring-inner-circle {
    position: absolute;
    width: 250rpx;
    height: 250rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    box-shadow:
        inset 0 8rpx 20rpx rgba(15, 118, 110, 0.25),
        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.85);
}

/* 播放时的挤压动画(只影响 transform,GPU 加速) */
.ring-container.playing .grip-ring {
    animation: squeeze-ring 1s ease-in-out infinite;
}

@keyframes squeeze-ring {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.93);
    }
}

/* ============================================================
 * 中心提示 (未开始)
 * ============================================================ */
.center-hint {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    pointer-events: none;
    animation: hint-fade-in 0.3s ease;
}

@keyframes hint-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hint-icon {
    width: 96rpx;
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    box-shadow:
        0 12rpx 32rpx rgba(20, 184, 166, 0.28),
        inset 0 2rpx 4rpx rgba(255, 255, 255, 0.9);
    animation: hint-bounce 2s ease-in-out infinite;
    will-change: transform;
}

.play-triangle {
    width: 0;
    height: 0;
    border-left: 32rpx solid #0f766e;
    border-top: 22rpx solid transparent;
    border-bottom: 22rpx solid transparent;
    margin-left: 8rpx;
}

@keyframes hint-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

.hint-text {
    font-size: 26rpx;
    color: #0f766e;
    font-weight: 700;
    letter-spacing: 3rpx;
    text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
}

/* ============================================================
 * BPM 显示 (播放中)
 * ============================================================ */
.bpm-display {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
    pointer-events: none;
}

.bpm-value {
    font-size: 80rpx;
    color: #0f766e;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2rpx;
    text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
    font-variant-numeric: tabular-nums;
}

.bpm-label {
    font-size: 22rpx;
    color: #14b8a6;
    font-weight: 700;
    letter-spacing: 6rpx;
    margin-top: 2rpx;
}
</style>
