<view class="badge-wall-page">
    
    <!-- Dimension Tabs -->
    <view class="tabs-container">
        <scroll-view class="dimension-tabs" scroll-x enable-flex show-scrollbar="{{false}}">
            <block wx:for="{{dimensions}}" wx:key="dimension">
                <view class="tab-item {{activeTab === index ? 'active' : ''}}" 
                      bindtap="switchTab" data-index="{{index}}">
                    <text class="tab-label">{{item.label}}</text>
                    <view class="tab-indicator" wx:if="{{activeTab === index}}"></view>
                </view>
            </block>
        </scroll-view>
    </view>

    <!-- Content Area -->
    <scroll-view scroll-y class="wall-scroll" enable-back-to-top show-scrollbar="{{false}}">
        <view class="wall-container" wx:if="{{dimensions[activeTab]}}">
            
            <block wx:for="{{dimensions[activeTab].groups}}" wx:key="groupId" wx:for-item="group">
                <view class="achievement-track-card">
                    <view class="track-header">
                        <view class="track-title-row">
                            <t-icon name="caret-right-small" size="40rpx" color="#558B2F" />
                            <text class="track-title">{{group.groupLabel}}</text>
                        </view>
                        <text class="track-sub">完成 {{0}}/3</text> <!-- Placeholder count -->
                    </view>

                    <view class="track-body">
                        <!-- Background Line -->
                        <view class="track-line-bg"></view>
                        
                        <view class="track-badges-row">
                            <block wx:for="{{group.badges}}" wx:key="id" wx:for-item="badge">
                                <view class="track-node {{achievedMap[badge.id] ? 'unlocked' : 'locked'}}"
                                      bindtap="onBadgeTap" data-badge="{{badge}}">
                                    
                                    <view class="node-icon-wrapper">
                                        <image src="{{badge.icon.url}}" mode="aspectFit" class="node-img" />
                                        <view class="lock-mask" wx:if="{{!achievedMap[badge.id]}}">
                                            <t-icon name="lock-on" size="36rpx" color="rgba(255,255,255,0.8)" />
                                        </view>
                                    </view>
                                    
                                    <view class="node-info">
                                        <text class="node-tier-tag {{badge.tier===1?'bronze':(badge.tier===2?'silver':'gold')}}">{{badge.tier === 1 ? '铜' : (badge.tier === 2 ? '银' : '金')}}</text>
                                    </view>
                                </view>
                            </block>
                        </view>
                    </view>
                </view>
            </block>

            <view style="height: 60rpx;"></view>
        </view>
    </scroll-view>

    <!-- Detailed Popup -->
    <view class="badge-detail-mask {{showDetail ? 'show' : ''}}" bindtap="closeDetail">
        <view class="badge-detail-card" catchtap="noop">
            <view class="detail-close" bindtap="closeDetail">
                <t-icon name="close" size="40rpx" color="#999" />
            </view>
            
            <block wx:if="{{selectedBadge}}">
                <view class="detail-icon-box {{achievedMap[selectedBadge.id] ? 'achieved' : 'locked'}} tier-{{selectedBadge.tier}}">
                    <image src="{{selectedBadge.icon.url}}" mode="aspectFit" class="detail-img" />
                </view>
                
                <text class="detail-name">{{selectedBadge.name}}</text>
                
                <view class="detail-status-tag {{achievedMap[selectedBadge.id] ? 'success' : 'pending'}}">
                    {{achievedMap[selectedBadge.id] ? '已获得' : '未解锁'}}
                </view>

                <view class="detail-desc-box">
                    <text class="detail-desc">{{selectedBadge.description}}</text>
                </view>

                <view class="detail-reward-box">
                    <text class="reward-label">奖励</text>
                    <view class="reward-val">
                        <text>☀️</text>
                        <text>+{{selectedBadge.rewardSunlight}} 阳光值</text>
                    </view>
                </view>

                <view class="detail-condition">
                    <text>解锁条件：{{selectedBadge.threshold}} {{selectedBadge.targetAction === 'ACT_ALIVE_DAYS' ? '天存活' : (selectedBadge.targetAction === 'ACT_WATER' ? '次浇水' : (selectedBadge.targetAction === 'ACT_FERTILIZE' ? '次施肥' : (selectedBadge.targetAction === 'ACT_PRUNE' ? '次修剪' : (selectedBadge.targetAction === 'ACT_REPOT' ? '次换盆' : (selectedBadge.targetAction === 'ACT_PHOTO' ? '张照片' : (selectedBadge.targetAction === 'ACT_NIGHT_CARE' ? '次深夜养护' : '次操作'))))))}}</text>
                </view>
            </block>
        </view>
    </view>
</view>
