<view class="page">
  <!-- Top Navigation & Header -->
  <view class="header-section" style="padding-top: {{totalNavHeight}}px;">
      <!-- NavBar -->
      <view class="nav-container">
        <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
        <view class="nav-bar" style="height: {{navBarHeight}}px;">
            <view class="nav-back" bindtap="goBack">
                <app-icon name="chevron-left" size="48" color="#FFFFFF" />
            </view>
            <view class="nav-title">推广中心</view>
        </view>
      </view>

      <!-- Stats Grid -->
      <view class="stats-grid">
          <view class="stats-item">
              <text class="stats-value">{{commissionStats.shareCount}}</text>
              <text class="stats-label">分享次数</text>
          </view>
          <view class="stats-item">
              <text class="stats-value">{{commissionStats.registeredCount}}</text>
              <text class="stats-label">注册人数</text>
          </view>
          <view class="stats-item">
              <text class="stats-value">{{commissionStats.orderCount}}</text>
              <text class="stats-label">下单人数</text>
          </view>
      </view>
  </view>

  <!-- Main Content Body -->
  <view class="main-body">
      <!-- Referrals List Panel -->
      <view class="referral-panel">
          <view class="panel-header {{referrals.length > 3 ? 'clickable' : ''}}" bindtap="toggleExpand">
              <view class="header-left">
                  <view class="purple-dot"></view>
                  <text class="panel-title">推广列表</text>
                  <view wx:if="{{referrals.length > 3}}" class="toggle-triangle {{isExpanded ? 'expanded' : ''}}"></view>
              </view>
          </view>
          
          <view class="user-list">
             <!-- If empty show empty state -->
             <view wx:if="{{referrals.length === 0}}" class="empty-state">
                 <image src="/images/icon-empty.png" class="empty-icon" mode="aspectFit"></image>
                 <text class="empty-text">暂无推广用户</text>
             </view>
             
             <!-- User Item -->
             <block wx:if="{{isExpanded}}">
                 <view class="user-row" wx:for="{{referrals}}" wx:key="userId">
                     <image class="user-avatar" src="{{item.userAvatar || defaultAvatar}}" mode="aspectFill"></image>
                     <view class="user-info">
                         <view class="user-main">
                             <text class="user-name">{{item.userName}}</text>
                             <text class="user-level">{{item.level}}</text>
                         </view>
                         <view class="user-sub">加入时间: {{item.joinedAt}}</view>
                     </view>
                     <view class="user-stats">
                         <view class="stat-item">
                             <text class="stat-label">推荐</text>
                             <text class="stat-value">{{item.referralCount}}</text>
                         </view>
                         <view class="stat-item">
                             <text class="stat-label">业绩</text>
                             <text class="stat-value">¥{{item.performance}}</text>
                         </view>
                     </view>
                 </view>
             </block>
             <!-- 默认显示前3条 -->
             <block wx:else>
                 <view class="user-row" wx:for="{{referrals}}" wx:key="userId" wx:if="{{index < 3}}">
                     <image class="user-avatar" src="{{item.userAvatar || defaultAvatar}}" mode="aspectFill"></image>
                     <view class="user-info">
                         <view class="user-main">
                             <text class="user-name">{{item.userName}}</text>
                             <text class="user-level">{{item.level}}</text>
                         </view>
                         <view class="user-sub">加入时间: {{item.joinedAt}}</view>
                     </view>
                     <view class="user-stats">
                         <view class="stat-item">
                             <text class="stat-label">推荐</text>
                             <text class="stat-value">{{item.referralCount}}</text>
                         </view>
                         <view class="stat-item">
                             <text class="stat-label">业绩</text>
                             <text class="stat-value">¥{{item.performance}}</text>
                         </view>
                     </view>
                 </view>
             </block>
          </view>
      </view>

      <!-- Action Menu List -->
      <view class="menu-list">
          <view class="menu-item" bindtap="goToPoster">
              <view class="menu-left">
                  <view class="icon-circle purple">
                      <app-icon name="image" size="40" color="#B06AB3" />
                  </view>
                  <text class="menu-text">生成推广海报</text>
              </view>
              <app-icon name="chevron-right" size="32" color="#D1D5DB" />
          </view>

          <!-- 隐藏复制推广码功能 -->
          <!-- 
          <view class="menu-item" bindtap="copyReferralCode">
              <view class="menu-left">
                  <view class="icon-circle orange">
                      <app-icon name="copy" size="40" color="#F59E0B" />
                  </view>
                  <text class="menu-text">复制推广码 ({{referralCode || '...'}})</text>
              </view>
              <app-icon name="chevron-right" size="32" color="#D1D5DB" />
          </view>
          -->
          

          <button class="menu-item btn-reset" open-type="share" style="width: 100%; text-align: left; font-weight: normal; margin: 0;">
              <view class="menu-left">
                  <view class="icon-circle pink">
                      <app-icon name="share-2" size="40" color="#EC4899" />
                  </view>
                  <text class="menu-text">分享小程序</text>
              </view>
              <app-icon name="chevron-right" size="32" color="#D1D5DB" />
          </button>

          <!-- 
          <view class="menu-item">
              <view class="menu-left">
                  <view class="icon-circle orange">
                      <app-icon name="image" size="20" color="#F59E0B" />
                  </view>
                  <text class="menu-text">推广海报</text>
              </view>
              <app-icon name="chevron-right" size="16" color="#D1D5DB" />
          </view>
          -->
      </view>
  </view>
</view>
