<template>
    <view class="page" :style="rootStyle">
        <!-- ===== 握力环画布区域 ===== -->
        <view class="stage-canvas-wrapper">
            <GripRingCanvas
                ref="gripCanvasRef"
                :bpm="currentBpm"
                :is-playing="isPlaying"
                @toggle-play="onTogglePlay"
            />
        </view>

        <!-- ===== 实时统计 ===== -->
        <view v-if="isPlaying || totalReps > 0" class="stats-bar">
            <view class="stat-item-inline">
                <text class="stat-label-inline">次数</text>
                <text class="stat-value-inline">{{ totalReps }}</text>
            </view>
            <view class="stat-item-inline">
                <text class="stat-label-inline">时长</text>
                <text class="stat-value-inline">{{ formatTime(elapsedSeconds) }}</text>
            </view>
            <view class="stat-item-inline">
                <text class="stat-label-inline">消耗糖分</text>
                <text class="stat-value-inline">{{ totalSugar.toFixed(1) }}g</text>
            </view>
        </view>

        <!-- ===== 三档位推荐 ===== -->
        <view class="presets">
            <view
                v-for="p in GRIP_PRESETS"
                :key="p.id"
                class="preset"
                :class="{ active: currentPreset === p.id, disabled: isPlaying }"
                @click="onPresetTap(p.id)"
            >
                <text class="preset-name">{{ p.label }}</text>
                <text class="preset-bpm">{{ p.bpm }} BPM</text>
                <text class="preset-desc">{{ p.desc }}</text>
            </view>
        </view>

        <!-- ===== 奖励弹窗 ===== -->
        <view v-if="showRewardPopup" class="reward-popup-mask" @click="closeRewardPopup">
            <view class="reward-popup" @click.stop>
                <text class="reward-emoji">{{ currentReward.emoji }}</text>
                <text class="reward-title">{{ currentReward.title }}</text>
                <text class="reward-desc">{{ currentReward.desc }}</text>
                <text class="reward-count">已完成 {{ totalReps }} 次</text>
                <view class="reward-btn" @click="closeRewardPopup">继续加油</view>
            </view>
        </view>

        <!-- ===== 训练完成卡片 ===== -->
        <view v-if="showSummary" class="completion-card">
            <text class="completion-title">训练完成 🎉</text>

            <view class="completion-content">
                <view class="stats-grid">
                    <view class="stat-item">
                        <text class="stat-label">总次数</text>
                        <text class="stat-value">{{ totalReps }}</text>
                    </view>
                    <view class="stat-item">
                        <text class="stat-label">总时长</text>
                        <text class="stat-value">{{ formatTime(elapsedSeconds) }}</text>
                    </view>
                    <view class="stat-item">
                        <text class="stat-label">消耗糖分</text>
                        <text class="stat-value">{{ totalSugar.toFixed(1) }}g</text>
                    </view>
                </view>

                <view class="sugar-card">
                    <text class="sugar-label">相当于消耗了</text>
                    <text class="sugar-comparison">{{ sugarComparison }}</text>
                </view>
            </view>

            <view class="action-row">
                <button class="btn-primary" @click="onRestart">再来一次</button>
            </view>
        </view>

        <!-- ===== 动作要领 ===== -->
        <view class="tips-card">
            <text class="tips-title">动作要领</text>
            <text class="tips-item">• 完全握紧停顿 1 秒</text>
            <text class="tips-item">• 完全张开放松</text>
            <text class="tips-item">• 左右手交替训练</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import { useMetronome } from '../hooks/useMetronome'
import GripRingCanvas from './components/grip-ring-canvas.vue'

type PresetId = 'light' | 'medium' | 'heavy'
interface GripPreset {
    id: PresetId
    bpm: number
    label: string
    desc: string
}

const GRIP_PRESETS: readonly GripPreset[] = [
    { id: 'light', bpm: 60, label: '轻度', desc: '热身 · 恢复' },
    { id: 'medium', bpm: 80, label: '中度', desc: '日常 · 锻炼' },
    { id: 'heavy', bpm: 100, label: '重度', desc: '强化 · 挑战' },
]

// 奖励配置 - 按难度递增
interface RewardConfig {
    emoji: string
    title: string
    desc: string
    itemType: 'egg' | 'walnut' | 'can' | 'balloon'
    sound: string
    minReps: number // 最小触发次数
    maxReps: number // 最大触发次数
}

const REWARDS: RewardConfig[] = [
    {
        emoji: '🥚',
        title: '捏碎鸡蛋',
        desc: '握力不错！',
        itemType: 'egg',
        sound: '', // 音效文件暂未上传
        minReps: 8,
        maxReps: 12
    },
    {
        emoji: '🥜',
        title: '捏碎核桃',
        desc: '力量惊人！',
        itemType: 'walnut',
        sound: '', // 音效文件暂未上传
        minReps: 15,
        maxReps: 20
    },
    {
        emoji: '🥫',
        title: '捏扁易拉罐',
        desc: '太强了！',
        itemType: 'can',
        sound: '', // 音效文件暂未上传
        minReps: 25,
        maxReps: 30
    },
    {
        emoji: '🎈',
        title: '捏爆气球',
        desc: '完美！',
        itemType: 'balloon',
        sound: '', // 音效文件暂未上传
        minReps: 40,
        maxReps: 50
    },
]

// 食物糖分对照表 (每100g含糖量)
const FOOD_SUGAR_TABLE = [
    { name: '苹果', sugar: 10.3, unit: '个', weight: 200 }, // 1个苹果约200g
    { name: '香蕉', sugar: 12.2, unit: '根', weight: 120 }, // 1根香蕉约120g
    { name: '米饭', sugar: 25.9, unit: '碗', weight: 150 }, // 1碗米饭约150g
    { name: '巧克力', sugar: 51.5, unit: '块', weight: 50 }, // 1块巧克力约50g
    { name: '可乐', sugar: 10.6, unit: '罐', weight: 330 }, // 1罐可乐330ml
]

const currentPreset = ref<PresetId>('medium')
const gripCanvasRef = ref<any>(null)
const showRewardPopup = ref(false)
const showSummary = ref(false)
const currentReward = ref<RewardConfig>(REWARDS[0])
const crushAudioCtx = ref<UniApp.InnerAudioContext | null>(null)

// 训练统计
const totalReps = ref(0) // 总次数
const elapsedSeconds = ref(0) // 总时长(秒)
const totalSugar = ref(0) // 总消耗糖分(克)
const beatCount = ref(0) // 节拍计数
const rewardIndex = ref(0) // 当前奖励索引
const nextRewardAt = ref(0) // 下次奖励触发次数
const startTime = ref(0)
const timerInterval = ref<number | null>(null)

// 获取当前档位配置
const preset = computed(() => GRIP_PRESETS.find(p => p.id === currentPreset.value) || GRIP_PRESETS[1])
const currentBpm = computed(() => preset.value.bpm)

const metronome = useMetronome({
    initialBpm: currentBpm.value,
    accentEvery: 2,
    onBeat: onBeat,
})
const { isPlaying } = metronome

const intervalMs = computed(() => 60000 / currentBpm.value)

const rootStyle = computed(() => ({
    '--beat-duration': `${intervalMs.value}ms`,
}))

// 糖分对比
const sugarComparison = computed(() => {
    if (totalSugar.value === 0) return ''

    for (const food of FOOD_SUGAR_TABLE) {
        const foodSugar = (food.sugar * food.weight) / 100
        const count = totalSugar.value / foodSugar
        if (count >= 0.3 && count <= 10) {
            return `${count.toFixed(1)} ${food.unit}${food.name}的糖分`
        }
    }

    return `${totalSugar.value.toFixed(1)}g 糖分`
})

// 节拍回调
function onBeat() {
    beatCount.value++

    // 每2拍算1次
    if (beatCount.value % 2 === 0) {
        totalReps.value++

        // 检查是否触发奖励(递进式)
        if (totalReps.value >= nextRewardAt.value && rewardIndex.value < REWARDS.length) {
            triggerReward()
        }
    }
}

// 计算消耗糖分
// 握力环训练 MET ≈ 3.5, 消耗卡路里 = MET × 体重(kg) × 时长(小时)
// 1g 糖分 ≈ 4 kcal, 所以 糖分(g) = 卡路里 / 4
function calculateSugar(seconds: number): number {
    const hours = seconds / 3600
    const weight = 60 // 默认体重60kg
    const met = 3.5
    const calories = met * weight * hours
    return calories / 4 // 转换为糖分(克)
}

// 格式化时间
function formatTime(seconds: number): string {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 触发奖励
function triggerReward() {
    // 获取当前等级的奖励
    const reward = REWARDS[rewardIndex.value]
    currentReward.value = reward

    // 触发粒子特效
    gripCanvasRef.value?.triggerCrushEffect(reward.itemType)

    // 播放碎裂音效
    playCrushSound(reward.sound)

    // 显示奖励弹窗
    showRewardPopup.value = true

    // 递进到下一个奖励等级
    rewardIndex.value++

    // 计算下次奖励触发次数(如果还有下一级)
    if (rewardIndex.value < REWARDS.length) {
        const nextReward = REWARDS[rewardIndex.value]
        const range = nextReward.maxReps - nextReward.minReps
        nextRewardAt.value = totalReps.value + nextReward.minReps + Math.floor(Math.random() * (range + 1))
    }
}

function closeRewardPopup() {
    showRewardPopup.value = false
}

function playCrushSound(sound: string) {
    // 如果没有音效URL,跳过播放
    if (!sound) return

    if (crushAudioCtx.value) {
        try {
            crushAudioCtx.value.destroy()
        } catch (_) {}
    }

    crushAudioCtx.value = uni.createInnerAudioContext()
    crushAudioCtx.value.src = sound
    crushAudioCtx.value.obeyMuteSwitch = false
    crushAudioCtx.value.volume = 0.6

    try {
        crushAudioCtx.value.play()
    } catch (_) {}
}

// 档位切换
function onPresetTap(id: PresetId) {
    if (isPlaying.value) return
    currentPreset.value = id
    metronome.setBpm(preset.value.bpm)
}

// 播放/暂停切换
function onTogglePlay() {
    if (isPlaying.value) {
        // 暂停 - 显示总结
        metronome.stop()
        stopTimer()
        uni.setKeepScreenOn({ keepScreenOn: false })
        showSummary.value = true
    } else {
        // 开始/继续
        if (showSummary.value) {
            // 从总结页继续 - 不重置数据
            showSummary.value = false
        } else if (totalReps.value === 0) {
            // 首次开始 - 重置数据
            resetStats()
        }

        metronome.start()
        startTimer()
        uni.setKeepScreenOn({ keepScreenOn: true })
    }
}

// 重新开始
function onRestart() {
    showSummary.value = false
    resetStats()
    metronome.start()
    startTimer()
    uni.setKeepScreenOn({ keepScreenOn: true })
}

// 重置统计
function resetStats() {
    totalReps.value = 0
    elapsedSeconds.value = 0
    totalSugar.value = 0
    beatCount.value = 0
    rewardIndex.value = 0
    startTime.value = Date.now()

    // 设置第一个奖励的触发次数
    const firstReward = REWARDS[0]
    const range = firstReward.maxReps - firstReward.minReps
    nextRewardAt.value = firstReward.minReps + Math.floor(Math.random() * (range + 1))
}

// 启动计时器
function startTimer() {
    if (timerInterval.value) return

    startTime.value = Date.now() - elapsedSeconds.value * 1000

    timerInterval.value = setInterval(() => {
        elapsedSeconds.value = Math.floor((Date.now() - startTime.value) / 1000)
        totalSugar.value = calculateSugar(elapsedSeconds.value)
    }, 1000) as unknown as number
}

// 停止计时器
function stopTimer() {
    if (timerInterval.value) {
        clearInterval(timerInterval.value)
        timerInterval.value = null
    }
}

onShow(() => {
    metronome.preload()
})

onHide(() => {
    if (isPlaying.value) {
        metronome.stop()
        stopTimer()
        uni.setKeepScreenOn({ keepScreenOn: false })
    }
    if (crushAudioCtx.value) {
        try {
            crushAudioCtx.value.destroy()
        } catch (_) {}
    }
})
</script>

<style lang="scss" scoped>
/* ============================================================
 * 设计 token
 * ============================================================ */
$bg-color: #f8fafc;
$card-bg: #ffffff;
$card-border: rgba(15, 23, 42, 0.06);
$text-1: #0f172a;
$text-2: #475569;
$text-3: #94a3b8;
$brand: #22c55e;
$brand-soft: #d1fae5;
$brand-deep: #047857;
$radius-card: 24rpx;
$shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);

/* ============================================================
 * 页面容器
 * ============================================================ */
.page {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 30rpx 28rpx 50rpx;
    background: $bg-color;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
    color: $text-1;
}

/* ============================================================
 * 画布区域
 * ============================================================ */
.stage-canvas-wrapper {
    width: 100vw;
    margin-left: -28rpx;
    margin-right: -28rpx;
    flex-shrink: 0;
    height: 600rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24rpx;
    position: relative;
}

/* ============================================================
 * 进度显示
 * ============================================================ */
.progress-bar {
    width: 100%;
    background: $card-bg;
    border-radius: $radius-card;
    padding: 20rpx 24rpx;
    box-shadow: $shadow-sm;
    margin-bottom: 20rpx;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-label {
    font-size: 26rpx;
    color: $text-2;
    font-weight: 600;
}

.progress-count {
    font-size: 32rpx;
    color: $brand-deep;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 实时统计栏
 * ============================================================ */
.stats-bar {
    width: 100%;
    background: $card-bg;
    border-radius: $radius-card;
    padding: 20rpx 24rpx;
    box-shadow: $shadow-sm;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 16rpx;
}

.stat-item-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rpx;
}

.stat-label-inline {
    font-size: 22rpx;
    color: $text-3;
    font-weight: 500;
}

.stat-value-inline {
    font-size: 28rpx;
    color: $brand-deep;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 三档位推荐
 * ============================================================ */
.presets {
    width: 100%;
    display: flex;
    gap: 14rpx;
}

.preset {
    flex: 1;
    background: $card-bg;
    border: 2rpx solid $card-border;
    border-radius: $radius-card;
    padding: 26rpx 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    box-shadow: $shadow-sm;
    transition: all 0.18s;

    .preset-name {
        font-size: 28rpx;
        font-weight: 700;
        color: $text-1;
        letter-spacing: 2rpx;
    }
    .preset-bpm {
        font-size: 22rpx;
        color: $text-2;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    .preset-desc {
        font-size: 18rpx;
        color: $text-3;
        letter-spacing: 1rpx;
        margin-top: 2rpx;
    }

    &:active {
        transform: scale(0.97);
    }

    &.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    &.active {
        background: $brand-soft;
        border-color: $brand;
        box-shadow:
            0 8rpx 20rpx rgba(16, 185, 129, 0.18),
            inset 0 0 0 2rpx rgba(16, 185, 129, 0.4);

        .preset-name {
            color: $brand-deep;
        }
        .preset-bpm {
            color: $brand-deep;
        }
        .preset-desc {
            color: $brand;
        }
    }
}

/* ============================================================
 * 奖励弹窗
 * ============================================================ */
.reward-popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in 0.2s ease;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.reward-popup {
    width: 560rpx;
    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
    border-radius: 32rpx;
    padding: 48rpx 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
    animation: popup-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popup-bounce {
    0% {
        transform: scale(0.8) translateY(40rpx);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.reward-emoji {
    font-size: 120rpx;
    line-height: 1;
    animation: emoji-pop 0.6s ease;
}

@keyframes emoji-pop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.reward-title {
    font-size: 36rpx;
    font-weight: 700;
    color: $brand-deep;
    letter-spacing: 2rpx;
}

.reward-desc {
    font-size: 28rpx;
    color: $text-2;
    margin-bottom: 8rpx;
}

.reward-count {
    font-size: 24rpx;
    color: $text-3;
    margin-bottom: 12rpx;
}

.reward-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: $brand;
    color: #fff;
    border-radius: 999rpx;
    font-size: 30rpx;
    font-weight: 600;
    box-shadow: 0 8rpx 20rpx rgba(34, 197, 94, 0.3);
    transition: all 0.2s;

    &:active {
        transform: scale(0.97);
        box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.2);
    }
}

/* ============================================================
 * 训练完成卡片
 * ============================================================ */
.completion-card {
    width: 100%;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    border-radius: $radius-card;
    padding: 32rpx 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    align-items: center;
    box-shadow: $shadow-sm;
}

.completion-title {
    font-size: 30rpx;
    color: $text-1;
    font-weight: 700;
}

.completion-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.stats-grid {
    display: flex;
    gap: 16rpx;
    width: 100%;
}

.stat-item {
    flex: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    padding: 20rpx 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
}

.stat-label {
    font-size: 24rpx;
    color: #64748b;
}

.stat-value {
    font-size: 32rpx;
    font-weight: 700;
    color: $text-1;
}

.sugar-card {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 16rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    width: 100%;
}

.sugar-label {
    font-size: 24rpx;
    color: #065f46;
    font-weight: 500;
}

.sugar-comparison {
    font-size: 28rpx;
    color: #047857;
    font-weight: 700;
    text-align: center;
}

.action-row {
    display: flex;
    gap: 16rpx;
    justify-content: center;
    width: 100%;
}

.btn-primary {
    background: $brand;
    color: #fff;
    border-radius: 999rpx;
    font-size: 30rpx;
    height: 88rpx;
    line-height: 88rpx;
    border: none;
    padding: 0 48rpx;
}

/* ============================================================
 * 动作要领
 * ============================================================ */
.tips-card {
    width: 100%;
    background: $card-bg;
    border-radius: $radius-card;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    box-shadow: $shadow-sm;

    .tips-title {
        font-size: 28rpx;
        font-weight: 600;
        color: $text-1;
        margin-bottom: 8rpx;
    }
    .tips-item {
        font-size: 26rpx;
        color: $text-2;
        line-height: 1.6;
    }
}
</style>
