<view class="page-container">
  <!-- 统一导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left" bindtap="goBack">
      <app-icon name="chevron-left" size="44" color="#1F2937" />
    </view>
    <text class="unified-header-title">我的活动</text>
    <view class="unified-header-right"></view>
  </view>

  <view class="main-content">
    <!-- Tab 切换 -->
    <view class="tab-section">
      <view class="tab-list">
        <view class="tab-item {{activeTab === 'upcoming' ? 'active' : ''}}" bindtap="switchTab" data-tab="upcoming">
          <text>未开始</text>
          <view class="active-line" wx:if="{{activeTab === 'upcoming'}}"></view>
        </view>
        <view class="tab-item {{activeTab === 'ended' ? 'active' : ''}}" bindtap="switchTab" data-tab="ended">
          <text>已结束</text>
          <view class="active-line" wx:if="{{activeTab === 'ended'}}"></view>
        </view>
      </view>
    </view>

    <!-- 活动列表 -->
    <scroll-view scroll-y class="list-scroll" bindscrolltolower="onReachBottom">
      <view class="activity-list" wx:if="{{activities.length > 0}}">
        <view class="activity-card" wx:for="{{activities}}" wx:key="registration_id" bindtap="goDetail" data-id="{{item.activity_id}}">
          <view class="card-image-wrap">
            <image class="card-image" src="{{item.cover_image}}" mode="aspectFill" />
            <view class="time-status-badge {{item.time_status_class}}">{{item.time_status_text}}</view>
          </view>
          
          <view class="card-info">
            <text class="activity-title">{{item.title}}</text>
            
            <view class="meta-info">
              <view class="meta-item">
                <app-icon name="clock" size="28" color="#9CA3AF" />
                <text>{{item.date_display}}</text>
              </view>
              <view class="meta-item">
                <app-icon name="location-pin" size="28" color="#9CA3AF" />
                <text>{{item.location}}</text>
              </view>
            </view>

            <view class="card-footer">
              <view class="status-tags">
                <view class="status-tag {{item.status}}">
                  {{item.status === 'confirmed' ? '已确认' : (item.status === 'pending' ? '待确认' : '已取消')}}
                </view>
              </view>
              <text class="price-text">{{item.price_text || (item.is_free ? '免费' : '¥' + item.price)}}</text>
            </view>
          </view>
        </view>
        
        <view class="load-status">
          <text wx:if="{{loading}}">正在加载...</text>
          <text wx:elif="{{!hasMore}}">没有更多活动了</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" wx:else>
        <image src="/images/icon-empty.png" mode="aspectFit" class="empty-icon" />
        <text class="empty-text">暂无活动记录</text>
      </view>
      
      <view class="safe-bottom-spacer"></view>
    </scroll-view>
  </view>
</view>
