<template>
    <view v-if="visible" class="dev-training-entry" @click="goTraining">
        <view class="entry-icon">💪</view>
        <view class="entry-text">练一练</view>
        <view class="entry-tag">DEV</view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { isDevMode } from '@/utils/env'

const props = withDefaults(
    defineProps<{
        bottom?: number
    }>(),
    { bottom: 200 },
)

const visible = ref(isDevMode())

const goTraining = () => {
    uni.navigateTo({ url: '/pages/training/index' })
}
</script>

<style lang="scss" scoped>
.dev-training-entry {
    position: fixed;
    right: 24rpx;
    bottom: v-bind('props.bottom + "rpx"');
    z-index: 999;

    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 6rpx 20rpx rgba(34, 197, 94, 0.4);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transition: transform 0.2s;

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

    .entry-icon {
        font-size: 40rpx;
        line-height: 1;
    }

    .entry-text {
        font-size: 18rpx;
        color: #fff;
        margin-top: 4rpx;
        line-height: 1;
    }

    .entry-tag {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        background: #ef4444;
        color: #fff;
        font-size: 16rpx;
        padding: 2rpx 8rpx;
        border-radius: 8rpx;
        line-height: 1.4;
    }
}
</style>
