<view class="page">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left"></view>
    <text class="unified-header-title">我的</text>
    <view class="unified-header-right"></view>
  </view>

  <!-- Header Profile Section -->
  <view class="profile-outer">
    <view class="profile-card">
      <view class="avatar-wrap" bindtap="goEdit">
        <image class="avatar" src="{{me.avatar || defaultAvatar}}" mode="aspectFill" binderror="onAvatarError" />
      </view>
      <view class="profile-info">
        <view class="name-row">
          <text class="nickname">{{me.nickname}}</text>
          <view class="vip-badge {{vip.levelClass}}" bindtap="showBenefits" wx:if="{{vip.levelText}}">
            <app-icon name="crown" size="24" color="#FFFFFF" />
            <text class="vip-text">{{vip.levelText}}</text>
            <app-icon name="chevron-right" size="20" color="#FFFFFF" />
          </view>
        </view>
        <view class="id-row" wx:if="{{isLoggedIn}}">
          <app-icon name="phone" size="28" color="#9CA3AF" />
          <text class="user-id">{{me.phone}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- My Wallet Section (Wrapper Card) -->
  <view class="section-wrapper">
    <view class="white-card">
      <view class="card-title-row">
         <text class="main-title">我的钱包</text>
      </view>

      <view class="wallet-stack">
        <!-- VIP Card -->
        <view class="inner-card vip-card" bindtap="goRecharge">
           <view class="vip-content">
             <view class="vip-header-row">
                <text class="vip-label">我的会员</text>
             </view>
             <text class="vip-main-text">心伴会员</text>
           </view>
           <button class="btn-reset vip-action-btn">立即充值</button>
           <!-- Decorative Circle -->
           <view class="deco-circle"></view>
        </view>

        <!-- Earnings Card -->
        <view class="inner-card earnings-card">
           <view class="earnings-header-row">
              <text class="earnings-title">我的收益</text>
              <view class="commission-btn" bindtap="goCommission">
                 <text>佣金明细</text>
                 <app-icon name="chevron-right" size="24" color="#B06AB3" />
              </view>
           </view>
           
           <view class="earnings-body-row">
              <view class="earnings-info">
                 <text class="earnings-label">可提现 (元)</text>
                 <text class="earnings-amount">{{balances.commission}}</text>
              </view>
              <button class="btn-reset withdraw-btn" bindtap="goWithdraw">立即提现</button>
           </view>
        </view>
      </view>
    </view>
  </view>

  <!-- Customer Management Section (Wrapper Card) -->
  <view class="section-wrapper" wx:if="{{isLoggedIn && isDistributor}}">
    <view class="white-card">
       <view class="card-title-row border-bottom">
         <text class="main-title">客户管理</text>
       </view>
       
       <view class="stats-grid">
          <!-- My Team Card (Left) -->
          <view class="stat-card team-card" bindtap="goTeam">
             <view class="card-top">
                <view class="icon-wrap-sm">
                   <image src="/images/icon-users.png" class="card-icon-img" mode="aspectFit" />
                </view>
                <text class="card-name">我的团队</text>
             </view>
             <view class="card-bottom">
                <text class="card-num">{{counts.team}}</text>
                <text class="card-unit">人</text>
             </view>
          </view>

          <!-- Performance Data Card (Right) -->
          <view class="stat-card performance-card" bindtap="goPerformance">
             <view class="card-top">
                <view class="icon-wrap-sm">
                   <image src="/images/icon-trending-up.png" class="card-icon-img" mode="aspectFit" />
                </view>
                <text class="card-name">业绩数据</text>
             </view>
             <view class="card-bottom">
                <text class="card-num">¥{{counts.performance || '0.00'}}</text>
             </view>
          </view>
       </view>
    </view>
  </view>

  <!-- Menu List -->
  <view class="section-wrapper">
    <view class="white-card menu-card">
      <view class="menu-item" bindtap="goPromote">
        <view class="menu-left">
          <app-icon name="users" size="44" color="#9CA3AF" />
          <text class="menu-text">推广中心</text>
        </view>
        <app-icon name="chevron-right" size="36" color="#E5E7EB" />
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="goOrders">
        <view class="menu-left">
          <app-icon name="shopping-bag" size="44" color="#9CA3AF" />
          <text class="menu-text">我的订单</text>
        </view>
        <app-icon name="chevron-right" size="36" color="#E5E7EB" />
      </view>

      <view class="menu-divider"></view>

      <!-- Modified: Rename to My Activities -->
      <view class="menu-item" bindtap="goMyActivities">
        <view class="menu-left">
          <app-icon name="clipboard" size="44" color="#9CA3AF" />
          <text class="menu-text">我的活动</text>
        </view>
        <app-icon name="chevron-right" size="36" color="#E5E7EB" />
      </view>

      <view class="menu-divider"></view>

      <!-- Keep as is or separate if needed -->
      <view class="menu-item" bindtap="goCooperation">
        <view class="menu-left">
          <app-icon name="briefcase" size="44" color="#9CA3AF" />
          <text class="menu-text">合作入驻</text>
        </view>
        <app-icon name="chevron-right" size="36" color="#E5E7EB" />
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="goSupport">
        <view class="menu-left">
          <app-icon name="headphones" size="44" color="#9CA3AF" />
          <text class="menu-text">在线客服</text>
        </view>
        <app-icon name="chevron-right" size="36" color="#E5E7EB" />
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="goEdit">
        <view class="menu-left">
          <app-icon name="settings" size="44" color="#9CA3AF" />
          <text class="menu-text">个人资料</text>
        </view>
        <app-icon name="chevron-right" size="36" color="#E5E7EB" />
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="goGiftShop">
        <view class="menu-left">
          <app-icon name="package" size="44" color="#9CA3AF" />
          <text class="menu-text">礼品商城</text>
        </view>
        <view class="menu-right">
          <view class="tag-pink">去兑换</view>
          <app-icon name="chevron-right" size="36" color="#E5E7EB" />
        </view>
      </view>

      <view class="menu-divider"></view>

      <view class="menu-item" bindtap="handleLogout" wx:if="{{isLoggedIn}}">
        <view class="menu-left">
          <app-icon name="logout" size="44" color="#9CA3AF" />
          <text class="menu-text">退出登录</text>
        </view>
        <app-icon name="chevron-right" size="36" color="#E5E7EB" />
      </view>
    </view>
  </view>
  
  <!-- Custom TabBar -->
  <view class="custom-tabbar">
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/index/index" wx:if="{{auditStatus === 0}}">
      <image src="/images/tab-listen.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">陪伴</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/entertainment/entertainment">
      <image src="/images/tab-companion.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">文娱</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/service/service">
      <image src="/images/tab-service.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">服务</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/chat/chat">
      <view class="message-icon-wrapper">
        <image src="/images/tab-message.png" class="tabbar-icon" mode="aspectFit"></image>
        <view class="message-badge" wx:if="{{totalUnread > 0}}">
          <text wx:if="{{totalUnread < 100}}">{{totalUnread}}</text>
          <text wx:else>99+</text>
        </view>
      </view>
      <text class="tabbar-text">消息</text>
    </view>
    <view class="tabbar-item active">
      <image src="/images/tab-profile-active.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text active">我的</text>
    </view>
  </view>

  <!-- Spacer for TabBar -->
  <view class="safe-bottom-spacer"></view>

  <!-- GF100 领取弹窗 -->
  <view class="gf100-mask" wx:if="{{showGf100Popup}}" catchtouchmove="preventTouchMove">
    <view class="gf100-content">
      <image class="gf100-image" src="{{gf100ImageUrl}}" mode="widthFix" bindtap="onClaimGf100"></image>
      <view class="gf100-close" bindtap="closeGf100Popup">
        <text class="close-icon">×</text>
      </view>
    </view>
  </view>

  <!-- ==================== 我的活动弹窗 ==================== -->
  <view class="modal-mask" wx:if="{{showPromoterModal}}" bindtap="closePromoterModal" catchtouchmove="preventTouchMove">
    <view class="promoter-modal" catchtap="preventBubble">
       <view class="modal-close-btn" bindtap="closePromoterModal">
         <app-icon name="x" size="40" color="#9CA3AF" />
       </view>

       <view class="modal-header">
         <view class="modal-icon-bg">
           <app-icon name="clipboard" size="48" color="#B06AB3" />
         </view>
         <text class="modal-title">我的活动</text>
         <text class="modal-subtitle">查看并管理您的报名记录</text>
       </view>

       <view class="benefits-list">
         <view class="benefit-item">
           <view class="benefit-num">1</view>
           <view class="benefit-info">
             <text class="benefit-title">高额佣金回报</text>
             <text class="benefit-desc">每笔订单最高享 70% 分成</text>
           </view>
         </view>
         
         <view class="benefit-item">
           <view class="benefit-num">2</view>
           <view class="benefit-info">
             <text class="benefit-title">专属身份标识</text>
             <text class="benefit-desc">获得“推广合伙人”专属徽章</text>
           </view>
         </view>
         
         <view class="benefit-item">
           <view class="benefit-num">3</view>
           <view class="benefit-info">
             <text class="benefit-title">极速提现权益</text>
             <text class="benefit-desc">佣金T+1日结算，快速到账</text>
           </view>
         </view>
       </view>

       <button class="btn-reset apply-btn" bindtap="onApplyPromoter">
         <text class="apply-text">查看我的活动</text>
         <text class="apply-subtext">(点击查看)</text>
       </button>
    </view>
  </view>

  <!-- ==================== 申请成功/扫码弹窗 ==================== -->
  <view class="modal-mask" wx:if="{{showPromoterSuccess}}" bindtap="closePromoterSuccess" catchtouchmove="preventTouchMove">
    <view class="promoter-modal success-modal" catchtap="preventBubble">
       <view class="modal-header">
         <view class="modal-icon-bg">
           <app-icon name="clipboard" size="48" color="#B06AB3" />
         </view>
         <text class="modal-title">我的活动列表</text>
         <text class="modal-subtitle">正在加载您的活动信息...</text>
       </view>

       <view class="qr-container">
         <view class="qr-placeholder">
           <!-- Simulated QR Pattern -->
           <view class="qr-grid">
              <view class="qr-dot" wx:for="{{64}}" wx:key="index" style="background: {{index % 3 === 0 || index % 5 === 0 ? '#000' : 'transparent'}}"></view>
           </view>
           <view class="qr-logo">
             <app-icon name="heart-filled" size="40" color="#B06AB3" />
           </view>
         </view>
       </view>

       <view class="success-desc">
         <text>您的活动申请正在处理中</text>
         <text>如有疑问请联系客服查询</text>
       </view>

       <button class="btn-reset close-btn" bindtap="closePromoterSuccess">
         关闭
       </button>
    </view>
  </view>

</view>
