<template>
    <view class="metronome-page" :style="rootStyle">
        <view class="pulse-stage" @click="togglePlay">
            <view class="pulse-ring" :class="{ playing: isPlaying }" />
            <view class="pulse-ring pulse-ring-2" :class="{ playing: isPlaying }" />
            <view
                class="pulse-core"
                :class="{ playing: isPlaying, accent: isAccent }"
            >
                <text class="bpm-num">{{ bpm }}</text>
                <text class="bpm-label">速度</text>
                <view class="ctrl-icon">
                    <view v-if="isPlaying" class="icon-pause">
                        <view class="bar" />
                        <view class="bar" />
                    </view>
                    <view v-else class="icon-play" />
                </view>
            </view>
        </view>

        <!-- 脚步行走动画:跟随 BPM 同步,1 拍 1 步 -->
        <view class="walker" :class="{ playing: isPlaying }">
            <view class="foot foot-left">
                <view class="footprint">
                    <view class="heel" />
                    <view class="toe toe-1" />
                    <view class="toe toe-2" />
                    <view class="toe toe-3" />
                    <view class="toe toe-4" />
                    <view class="toe toe-5" />
                </view>
                <view class="shadow" />
            </view>
            <view class="foot foot-right">
                <view class="footprint">
                    <view class="heel" />
                    <view class="toe toe-1" />
                    <view class="toe toe-2" />
                    <view class="toe toe-3" />
                    <view class="toe toe-4" />
                    <view class="toe toe-5" />
                </view>
                <view class="shadow" />
            </view>
            <view class="ground" />
            <text class="walker-tip">{{ walkerTip }}</text>
        </view>

        <view class="bpm-control">
            <view class="step-btn big" @click="adjustBpm(-10)">
                <text class="step-num">-10</text>
            </view>
            <view class="step-btn small" @click="adjustBpm(-1)">
                <text class="step-num">-1</text>
            </view>
            <view class="step-btn small" @click="adjustBpm(1)">
                <text class="step-num">+1</text>
            </view>
            <view class="step-btn big" @click="adjustBpm(10)">
                <text class="step-num">+10</text>
            </view>
        </view>

        <view class="meter-section">
            <text class="section-label">每组拍数</text>
            <view class="meter-options">
                <view
                    v-for="m in METER_OPTIONS"
                    :key="m.value"
                    class="meter-btn"
                    :class="{ active: accentEvery === m.value }"
                    @click="onMeterChange(m.value)"
                >
                    <text class="meter-label">{{ m.label }}</text>
                </view>
            </view>
        </view>

        <view class="hint">
            <text>{{ statusHint }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, onUnmounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import { useMetronome } from '@/hooks/useMetronome'

const METER_OPTIONS = [
    { label: '2 拍', value: 2 },
    { label: '3 拍', value: 3 },
    { label: '4 拍', value: 4 },
]

const metronome = useMetronome({
    initialBpm: 80,
    accentEvery: 4,
    clickSrc: '/static/training/audio/click.mp3',
    accentSrc: '/static/training/audio/click-wood.mp3',
})
const {
    bpm,
    isPlaying,
    beatIndex,
    isAccent,
    accentEvery,
    intervalMs,
    start,
    stop,
    setBpm,
    setAccentEvery,
    preload,
} = metronome

const adjustBpm = (delta: number) => {
    setBpm(bpm.value + delta)
}

const onMeterChange = (val: number) => {
    setAccentEvery(val)
}

const togglePlay = () => {
    if (isPlaying.value) {
        stop()
        uni.setKeepScreenOn({ keepScreenOn: false })
    } else {
        start()
        uni.setKeepScreenOn({ keepScreenOn: true })
    }
}

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

const statusHint = computed(() => {
    if (isPlaying.value) {
        const cur = ((beatIndex.value - 1) % accentEvery.value) + 1
        return `第 ${cur} 拍 / 共 ${accentEvery.value} 拍`
    }
    return '轻点圆圈开始'
})

const walkerTip = computed(() => {
    if (!isPlaying.value) return '开始后跟节奏踏步'
    if (bpm.value < 70) return '慢走 · 适合热身'
    if (bpm.value < 100) return '健走 · 日常配速'
    if (bpm.value < 130) return '快走 · 心率提升'
    if (bpm.value < 170) return '慢跑 · 进入有氧'
    return '快跑 · 高强度'
})

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

onHide(() => {
    if (isPlaying.value) {
        stop()
        uni.setKeepScreenOn({ keepScreenOn: false })
    }
})

onUnmounted(() => {
    uni.setKeepScreenOn({ keepScreenOn: false })
})
</script>

<style lang="scss" scoped>
.metronome-page {
    min-height: 100vh;
    padding: 20rpx 32rpx 80rpx;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #f1f5f9;
}

/* ===== 中心可点击圆 ===== */
.pulse-stage {
    position: relative;
    width: 600rpx;
    height: 600rpx;
    margin: 40rpx 0 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &:active .pulse-core {
        transform: scale(0.97);
    }
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4rpx solid rgba(34, 197, 94, 0.18);
    pointer-events: none;

    &.playing {
        animation: ring-pulse var(--beat-duration, 750ms) ease-out infinite;
    }

    &.pulse-ring-2 {
        animation-delay: calc(var(--beat-duration, 750ms) * -0.4);
    }
}
@keyframes ring-pulse {
    0% {
        transform: scale(0.92);
        opacity: 0.9;
        border-color: rgba(34, 197, 94, 0.55);
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
        border-color: rgba(34, 197, 94, 0);
    }
}

.pulse-core {
    position: relative;
    width: 460rpx;
    height: 460rpx;
    border-radius: 50%;
    background: linear-gradient(140deg, #22c55e 0%, #15803d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 -20rpx 60rpx rgba(0, 0, 0, 0.18),
        inset 0 20rpx 60rpx rgba(255, 255, 255, 0.12),
        0 24rpx 60rpx rgba(34, 197, 94, 0.45);
    transition: transform 0.12s, background 0.15s, box-shadow 0.15s;

    &.playing {
        animation: core-beat var(--beat-duration, 750ms) ease-in-out infinite;
    }

    &.playing.accent {
        background: linear-gradient(140deg, #fbbf24 0%, #b45309 100%);
        box-shadow:
            inset 0 -20rpx 60rpx rgba(0, 0, 0, 0.18),
            inset 0 20rpx 60rpx rgba(255, 255, 255, 0.18),
            0 24rpx 60rpx rgba(245, 158, 11, 0.5);
    }

    .bpm-num {
        font-size: 200rpx;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.18);
    }

    .bpm-label {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.7);
        letter-spacing: 8rpx;
        margin-top: 8rpx;
    }

    /* ===== 中央播放/暂停 icon（CSS 几何绘制，跨机型一致） ===== */
    .ctrl-icon {
        margin-top: 36rpx;
        width: 110rpx;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-play {
        width: 0;
        height: 0;
        border-left: 70rpx solid #fff;
        border-top: 44rpx solid transparent;
        border-bottom: 44rpx solid transparent;
        margin-left: 16rpx;
        filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.2));
    }

    .icon-pause {
        display: flex;
        gap: 22rpx;
        height: 84rpx;

        .bar {
            width: 22rpx;
            height: 100%;
            background: #fff;
            border-radius: 6rpx;
            box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
        }
    }
}
@keyframes core-beat {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.045);
    }
}

/* ===== 脚步行走动画 ===== */
.walker {
    position: relative;
    width: 100%;
    height: 220rpx;
    margin-bottom: 50rpx;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

.walker .ground {
    position: absolute;
    bottom: 36rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 480rpx;
    height: 2rpx;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(34, 197, 94, 0.45) 30%,
        rgba(34, 197, 94, 0.45) 70%,
        transparent
    );
}

.walker .walker-tip {
    position: absolute;
    top: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28rpx;
    color: #cbd5e1;
    letter-spacing: 2rpx;
    padding: 6rpx 24rpx;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 24rpx;
}

.foot {
    position: absolute;
    bottom: 36rpx;
    width: 110rpx;
    height: 130rpx;

    .footprint {
        position: relative;
        width: 100%;
        height: 100%;
        transform-origin: bottom center;
    }

    /* 脚跟+脚掌:一颗椭圆形 */
    .heel {
        position: absolute;
        bottom: 4rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 78rpx;
        height: 90rpx;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
    }

    /* 5 个脚趾(右脚视角:从左到右大→小) */
    .toe {
        position: absolute;
        background: #16a34a;
        border-radius: 50%;
    }
    .toe-1 {
        width: 22rpx;
        height: 24rpx;
        bottom: 96rpx;
        left: 18rpx;
    }
    .toe-2 {
        width: 18rpx;
        height: 20rpx;
        bottom: 102rpx;
        left: 40rpx;
    }
    .toe-3 {
        width: 16rpx;
        height: 18rpx;
        bottom: 100rpx;
        left: 58rpx;
    }
    .toe-4 {
        width: 14rpx;
        height: 16rpx;
        bottom: 94rpx;
        left: 72rpx;
    }
    .toe-5 {
        width: 12rpx;
        height: 14rpx;
        bottom: 86rpx;
        left: 84rpx;
    }

    .shadow {
        position: absolute;
        bottom: -8rpx;
        left: 50%;
        transform: translateX(-50%) scaleX(1);
        width: 90rpx;
        height: 12rpx;
        background: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.4),
            transparent 70%
        );
        border-radius: 50%;
    }
}

/* 左脚:置左,内层 footprint 镜像翻转(大脚趾朝外侧) */
.foot-left {
    left: calc(50% - 130rpx);
}
.foot-left .footprint {
    transform: scaleX(-1);
}

/* 右脚:置右 */
.foot-right {
    left: calc(50% + 20rpx);
}

/* 跟节拍同步:1 拍 1 步,左右各占半周期(0.5 偏移) */
.walker.playing {
    .foot-left .footprint {
        animation: foot-step-left var(--step-duration, 750ms) ease-in-out infinite;
    }
    .foot-right .footprint {
        animation: foot-step-right var(--step-duration, 750ms) ease-in-out infinite;
        animation-delay: calc(var(--step-duration, 750ms) * -0.5);
    }
    .foot-left .shadow {
        animation: shadow-pulse var(--step-duration, 750ms) ease-in-out infinite;
    }
    .foot-right .shadow {
        animation: shadow-pulse var(--step-duration, 750ms) ease-in-out infinite;
        animation-delay: calc(var(--step-duration, 750ms) * -0.5);
    }
}

@keyframes foot-step-right {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-44rpx) rotate(8deg);
    }
    50% {
        transform: translateY(-2rpx) rotate(0deg);
    }
    75% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 左脚保留 scaleX(-1) 镜像 */
@keyframes foot-step-left {
    0%,
    100% {
        transform: scaleX(-1) translateY(0) rotate(0deg);
    }
    25% {
        transform: scaleX(-1) translateY(-44rpx) rotate(8deg);
    }
    50% {
        transform: scaleX(-1) translateY(-2rpx) rotate(0deg);
    }
    75% {
        transform: scaleX(-1) translateY(0) rotate(0deg);
    }
}

@keyframes shadow-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: translateX(-50%) scaleX(1);
    }
    25% {
        /* 抬脚最高时阴影最淡最小 */
        opacity: 0.15;
        transform: translateX(-50%) scaleX(0.55);
    }
    50% {
        /* 落地瞬间阴影最浓 */
        opacity: 0.7;
        transform: translateX(-50%) scaleX(1.1);
    }
}

/* ===== BPM 步进按钮 ===== */
.bpm-control {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20rpx;
    margin-bottom: 60rpx;
}

.step-btn {
    flex: 1;
    height: 120rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 0.08);
    border: 2rpx solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;

    &:active {
        background: rgba(34, 197, 94, 0.25);
        border-color: #22c55e;
    }

    .step-num {
        font-size: 44rpx;
        color: #f1f5f9;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    &.big .step-num {
        font-size: 48rpx;
    }
}

/* ===== 拍号 ===== */
.meter-section {
    width: 100%;
}

.section-label {
    display: block;
    font-size: 28rpx;
    color: #94a3b8;
    margin-bottom: 20rpx;
    text-align: center;
}

.meter-options {
    display: flex;
    gap: 20rpx;
    justify-content: center;

    .meter-btn {
        flex: 1;
        max-width: 180rpx;
        height: 100rpx;
        background: rgba(255, 255, 255, 0.06);
        border: 2rpx solid rgba(255, 255, 255, 0.1);
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .meter-label {
            font-size: 36rpx;
            color: #cbd5e1;
        }

        &.active {
            background: #22c55e;
            border-color: #22c55e;

            .meter-label {
                color: #fff;
                font-weight: 600;
            }
        }
    }
}

/* ===== 状态提示 ===== */
.hint {
    text-align: center;
    font-size: 26rpx;
    color: #64748b;
    margin-top: 32rpx;
    height: 40rpx;
}
</style>
