<template>
    <view class="sugar-tree-graphic" :class="[`lv-${clampedLevel}`, `size-${size}`, { watering: watering }]">
        <view class="stg-glow" />
        <image v-if="!treeUseFallback" class="stg-image" :src="treeImageSrc" mode="aspectFit" @error="treeUseFallback = true" />
        <text v-else class="stg-emoji">{{ treeEmoji }}</text>
        <view v-if="clampedLevel >= 4" class="stg-sparkle stg-sparkle-a" />
        <view v-if="clampedLevel >= 4" class="stg-sparkle stg-sparkle-b" />
    </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { svgToDataUrl } from '../utils/svgDataUrl.js'

// #ifdef MP-WEIXIN
const treeUseFallback = ref(true)
// #endif
// #ifndef MP-WEIXIN
const treeUseFallback = ref(false)
// #endif

const TREE_EMOJI = ['🌱', '🌿', '🌳', '🌸', '🌺']

const props = defineProps({
    level: { type: Number, default: 0 },
    size: { type: String, default: 'md' },
    watering: { type: Boolean, default: false }
})

const clampedLevel = computed(() => Math.min(4, Math.max(0, Number(props.level) || 0)))
const treeEmoji = computed(() => TREE_EMOJI[clampedLevel.value] || TREE_EMOJI[0])

/** 医疗青绿 + 柔和陶土盆，5 档成长态 */
function buildTreeSvg(level) {
    const pot = `
        <ellipse cx="24" cy="50" rx="15" ry="3" fill="#0ea5a4" opacity="0.12"/>
        <path d="M11 46h26c1.2 0 2 1 2 2.2v3.8c0 1-.8 1.8-1.8 1.8H10.8c-1 0-1.8-.8-1.8-1.8v-3.8c0-1.2.8-2.2 2-2.2z" fill="#E7E5E4"/>
        <path d="M12.5 46h23c.8 0 1.5.7 1.5 1.5v2.2c0 .6-.5 1.1-1.1 1.1H12.1c-.6 0-1.1-.5-1.1-1.1v-2.2c0-.8.7-1.5 1.5-1.5z" fill="#D6D3D1"/>
        <ellipse cx="24" cy="46.5" rx="9" ry="1.6" fill="#A8A29E" opacity="0.35"/>
    `
    const soil = `<ellipse cx="24" cy="44.5" rx="8" ry="2.2" fill="#0d9488" opacity="0.18"/>`

    if (level === 0) {
        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">
            ${pot}
            ${soil}
            <circle cx="24" cy="41.5" r="2" fill="#6ee7b7" opacity="0.55"/>
            <path d="M24 41.5v4" stroke="#14b8a6" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
        </svg>`
    }

    const trunk = `<rect x="22.2" y="30" width="3.6" height="14" rx="1.8" fill="#78716C"/>
        <rect x="22.6" y="30" width="2.8" height="14" rx="1.4" fill="#A8A29E" opacity="0.35"/>`

    const leaf = (cx, cy, r, fill, opacity = 1) =>
        `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${fill}" opacity="${opacity}"/>
         <circle cx="${cx - r * 0.25}" cy="${cy - r * 0.2}" r="${r * 0.35}" fill="#ecfdf5" opacity="0.55"/>`

    const blooms =
        level >= 4
            ? `
            ${leaf(17, 19, 3.2, '#fda4af', 0.95)}
            ${leaf(30, 17, 3, '#f9a8d4', 0.9)}
            ${leaf(24, 14, 3.4, '#fb7185', 0.95)}
            <circle cx="24" cy="14" r="1.2" fill="#fef3c7"/>
            <circle cx="17" cy="19" r="0.9" fill="#fef3c7"/>
            <circle cx="30" cy="17" r="0.8" fill="#fef3c7"/>
        `
            : ''

    let canopy = ''
    if (level === 1) {
        canopy = leaf(24, 26, 7, '#34d399') + leaf(24, 25, 4.5, '#10b981', 0.85)
    } else if (level === 2) {
        canopy =
            leaf(24, 24, 8, '#34d399') +
            leaf(17, 27, 5.5, '#6ee7b7', 0.9) +
            leaf(31, 27, 5.5, '#6ee7b7', 0.9)
    } else if (level === 3) {
        canopy =
            leaf(24, 21, 10, '#22c55e') +
            leaf(15, 25, 7, '#4ade80', 0.92) +
            leaf(33, 25, 7, '#4ade80', 0.92) +
            leaf(24, 15, 6, '#10b981', 0.88)
    } else {
        canopy =
            leaf(24, 20, 11, '#059669') +
            leaf(14, 24, 8, '#34d399', 0.95) +
            leaf(34, 24, 8, '#34d399', 0.95) +
            leaf(24, 13, 7.5, '#10b981', 0.9) +
            blooms
    }

    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 56" fill="none">
        ${pot}
        ${soil}
        ${trunk}
        ${canopy}
    </svg>`
}

const treeImageSrc = computed(() => svgToDataUrl(buildTreeSvg(clampedLevel.value)))
</script>

<style lang="scss" scoped>
.sugar-tree-graphic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.size-sm {
    width: 64rpx;
    height: 72rpx;
}
.size-md {
    width: 80rpx;
    height: 88rpx;
}
.size-lg {
    width: 96rpx;
    height: 108rpx;
}

.stg-glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 164, 0.22) 0%, transparent 68%);
    pointer-events: none;
}
.lv-0 .stg-glow {
    background: radial-gradient(circle, rgba(148, 163, 184, 0.2) 0%, transparent 70%);
}
.lv-4 .stg-glow {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, rgba(14, 165, 164, 0.12) 55%, transparent 72%);
}

.stg-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}
.sugar-tree-graphic.watering .stg-image,
.sugar-tree-graphic.watering .stg-emoji {
    animation: stg-water-bounce 0.65s ease;
}
.stg-emoji {
    position: relative;
    z-index: 1;
    line-height: 1;
    font-size: 72rpx;
}
.size-sm .stg-emoji {
    font-size: 48rpx;
}
.size-md .stg-emoji {
    font-size: 60rpx;
}
.size-lg .stg-emoji {
    font-size: 72rpx;
}
@keyframes stg-water-bounce {
    0%,
    100% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.08) translateY(-4rpx);
    }
    60% {
        transform: scale(0.96) translateY(2rpx);
    }
}

/* 开花态微光点缀 */
.stg-sparkle {
    position: absolute;
    z-index: 2;
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background: #fde68a;
    box-shadow: 0 0 6rpx rgba(253, 224, 71, 0.8);
    pointer-events: none;
}
.stg-sparkle-a {
    top: 6%;
    right: 18%;
}
.stg-sparkle-b {
    top: 14%;
    left: 12%;
    width: 6rpx;
    height: 6rpx;
    opacity: 0.85;
}
</style>
