<!-- referral.wxml - 邀请页 -->
<view class="container">
  <!-- 邀请统计 -->
  <view class="card stats-card">
    <view class="text-center">
      <view class="text-hint">累计邀请</view>
      <view class="stats-number">{{downlines.total || 0}}</view>
      <view class="text-hint">位车主</view>
    </view>
    <view class="flex-between mt-32">
      <view class="text-center flex-1">
        <view class="text-primary text-bold" style="font-size: 40rpx;">{{estimatedEarning}}</view>
        <view class="text-hint" style="font-size: 24rpx;">预估佣金积点</view>
      </view>
      <view class="text-center flex-1">
        <view class="text-success text-bold" style="font-size: 40rpx;">{{referralEarning}}</view>
        <view class="text-hint" style="font-size: 24rpx;">邀请奖励积点</view>
      </view>
    </view>
  </view>

  <!-- 分享海报 -->
  <view class="card poster-section">
    <view class="section-title">📱 分享海报</view>
    <view class="poster-preview" bindtap="savePosterToAlbum">
      <!-- Canvas 用于合成保存，不用于预览 -->
      <canvas
        canvas-id="posterCanvas"
        class="poster-canvas"
        style="width: 600px; height: 960px;"
      ></canvas>

      <!-- 海报预览：直接显示服务器原图 + 邀请码覆盖 -->
      <view class="poster-frame" wx:if="{{posterImageUrl}}">
        <image
          class="poster-bg"
          src="{{posterImageUrl}}"
          mode="aspectFit"
        ></image>
        <!-- 邀请码叠加层 -->
        <view
          class="poster-code-overlay"
          style="{{posterCodeStyle}}"
        >
          {{userInfo.referralCode || userInfo.licensePlate}}
        </view>
        <view class="poster-save-hint">点击保存到相册</view>
      </view>

      <!-- 无海报时占位 -->
      <view class="poster-placeholder" wx:if="{{!posterConfig || !posterConfig.url}}">
        <view class="empty-icon">🖼️</view>
        <view class="text-hint mt-16">管理员暂未上传海报</view>
      </view>
    </view>
    <button
      class="btn btn-primary btn-block mt-32"
      open-type="share"
      bindtap="handleShare"
    >
      分享给好友
    </button>
  </view>

  <!-- 下家列表 -->
  <view class="card">
    <view class="flex-between mb-24">
      <view class="section-title">👥 我的下家</view>
      <view class="text-primary" style="font-size: 26rpx;">
        共 {{downlines.total || 0}} 人
      </view>
    </view>

    <view wx:if="{{downlines.list && downlines.list.length > 0}}">
      <view
        class="downline-item"
        wx:for="{{downlines.list}}"
        wx:key="id"
      >
        <image
          class="downline-avatar"
          src="{{item.avatar_url || '/images/default-avatar.png'}}"
          mode="aspectFill"
        />
        <view class="flex-1 ml-16">
          <view class="text-bold">{{item.nickname || '车主'}}</view>
          <view class="text-hint" style="font-size: 24rpx;">{{item.license_plate}}</view>
        </view>
        <view class="text-hint" style="font-size: 24rpx;">{{item.created_at}}</view>
      </view>
    </view>

    <view class="empty" wx:else>
      <view class="empty-icon">📭</view>
      <view>还没有邀请好友</view>
      <view class="text-hint mt-8">分享海报给你的车主朋友吧！</view>
    </view>
  </view>
</view>
