<template>
  <view class="page-invite">
    <!-- 顶部装饰背景 -->
    <view class="hero-bg">
      <view class="hero-circle hero-circle-1"></view>
      <view class="hero-circle hero-circle-2"></view>
      <view class="hero-circle hero-circle-3"></view>
    </view>

    <!-- 顶部标题区 -->
    <view class="header-section">
      <view class="header-icon">
        <u-icon name="gift-fill" :size="32" color="#FF6B35" />
      </view>
      <text class="header-title">邀请好友，共享收益</text>
      <text class="header-subtitle">好友下单，双方获利，躺赚现金奖励</text>
    </view>

    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="balance-header">
        <view class="balance-icon-wrapper">
          <u-icon name="rmb-circle-fill" :size="24" color="#FF6B35" />
        </view>
        <text class="balance-title">我的收益</text>
      </view>

      <view class="balance-main">
        <view class="balance-amount-section">
          <text class="balance-label">可提现余额（元）</text>
          <view class="balance-value-row">
            <text class="balance-symbol">¥</text>
            <text class="balance-value">{{ wallet.availableBalance || '0.00' }}</text>
          </view>
          <view v-if="!canWithdraw" class="balance-tip">
            <u-icon name="info-circle" :size="12" color="#FF8C00" />
            <text class="tip-text">满10元可提现</text>
          </view>
        </view>

        <view class="balance-actions">
          <view
            class="action-btn action-btn-primary"
            :class="{ disabled: !canWithdraw }"
            @tap="goWithdraw"
          >
            <text class="action-btn-text">立即提现</text>
          </view>
          <view class="action-btn action-btn-secondary" @tap="goWithdrawals">
            <text class="action-btn-text">提现记录</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据统计卡片 -->
    <view class="stats-card">
      <view class="stats-header">
        <u-icon name="list" :size="20" color="#FF6B35" />
        <text class="stats-title">邀请数据</text>
      </view>

      <view class="stats-grid">
        <view class="stat-item">
          <view class="stat-icon-wrapper stat-icon-blue">
            <u-icon name="account-fill" :size="20" color="#4A90E2" />
          </view>
          <text class="stat-value">{{ stats.totalInvites || 0 }}</text>
          <text class="stat-label">邀请人数</text>
        </view>

        <view class="stat-item">
          <view class="stat-icon-wrapper stat-icon-green">
            <u-icon name="shopping-cart-fill" :size="20" color="#52C41A" />
          </view>
          <text class="stat-value">{{ stats.totalOrders || 0 }}</text>
          <text class="stat-label">成功下单</text>
        </view>

        <view class="stat-item">
          <view class="stat-icon-wrapper stat-icon-orange">
            <u-icon name="rmb-circle-fill" :size="20" color="#FF8C00" />
          </view>
          <text class="stat-value">¥{{ stats.totalCashback || '0.00' }}</text>
          <text class="stat-label">累计收益</text>
        </view>
      </view>
    </view>

    <!-- 邀请操作区 -->
    <view class="invite-actions">
      <view class="action-card action-card-primary" @tap="handleShare">
        <view class="action-card-icon">
          <u-icon name="share-fill" :size="28" color="#ffffff" />
        </view>
        <view class="action-card-content">
          <text class="action-card-title">分享给好友</text>
          <text class="action-card-desc">微信、朋友圈快速分享</text>
        </view>
        <u-icon name="arrow-right" :size="18" color="rgba(255,255,255,0.8)" />
      </view>

      <view class="action-card action-card-secondary" @tap="goPoster">
        <view class="action-card-icon">
          <u-icon name="photo-fill" :size="28" color="#FF6B35" />
        </view>
        <view class="action-card-content">
          <text class="action-card-title">生成邀请海报</text>
          <text class="action-card-desc">保存图片，随时分享</text>
        </view>
        <u-icon name="arrow-right" :size="18" color="#999" />
      </view>
    </view>

    <!-- 活动规则 -->
    <view class="rules-card">
      <view class="rules-header">
        <u-icon name="file-text-fill" :size="20" color="#FF6B35" />
        <text class="rules-title">活动规则</text>
      </view>

      <view class="rules-content">
        <view class="rule-item">
          <view class="rule-number">1</view>
          <view class="rule-content">
            <text class="rule-title-text">首单高返</text>
            <text class="rule-desc">好友首次下单，您可获得订单金额 <text class="highlight">5%</text> 返现</text>
          </view>
        </view>

        <view class="rule-item">
          <view class="rule-number">2</view>
          <view class="rule-content">
            <text class="rule-title-text">持续收益</text>
            <text class="rule-desc">好友再次下单，您仍可获得 <text class="highlight">0.5%</text> 返现奖励</text>
          </view>
        </view>

        <view class="rule-item">
          <view class="rule-number">3</view>
          <view class="rule-content">
            <text class="rule-title-text">返现限额</text>
            <text class="rule-desc">单笔返现最低 <text class="highlight">0.01元</text>，最高 <text class="highlight">50元</text></text>
          </view>
        </view>

        <view class="rule-item">
          <view class="rule-number">4</view>
          <view class="rule-content">
            <text class="rule-title-text">提现门槛</text>
            <text class="rule-desc">余额满 <text class="highlight">10元</text> 即可提现，实时到账</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部记录入口 -->
    <view class="bottom-records">
      <view class="record-link" @tap="goRecords">
        <u-icon name="account" :size="16" color="#666" />
        <text class="record-text">邀请记录</text>
        <u-icon name="arrow-right" :size="14" color="#999" />
      </view>

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

      <view class="record-link" @tap="goCashbacks">
        <u-icon name="rmb-circle" :size="16" color="#666" />
        <text class="record-text">返现记录</text>
        <u-icon name="arrow-right" :size="14" color="#999" />
      </view>
    </view>

    <!-- 底部安全提示 -->
    <view class="bottom-tip">
      <u-icon name="checkmark-circle-fill" :size="14" color="#52C41A" />
      <text class="tip-text">平台担保，收益安全可靠</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getInviteStats } from '@/api/user/invite';
import { walletApi } from '@/api/user/wallet';
import { useUserStore } from '@/store/user';

const stats = ref<any>({
  totalInvites: 0,
  totalOrders: 0,
  totalCashback: 0,
});

const wallet = ref<any>({
  availableBalance: 0,
});

const userStore = useUserStore();

const canWithdraw = computed(() => {
  return Number(wallet.value.availableBalance) >= 10;
});

onMounted(() => {
  fetchStats();
  fetchWallet();
});

async function fetchStats() {
  try {
    const res = await getInviteStats();
    stats.value = res.data || {};
  } catch (e) {
    console.error('获取邀请数据失败:', e);
  }
}

async function fetchWallet() {
  try {
    const res = await walletApi.getWallet();
    wallet.value = res.data || {};
  } catch (e) {
    console.error('获取钱包信息失败:', e);
  }
}

function handleShare() {
  uni.showToast({ title: '请点击右上角分享', icon: 'none' });
}

function goWithdraw() {
  if (!canWithdraw.value) {
    uni.showToast({ title: '余额不足10元，暂不可提现', icon: 'none' });
    return;
  }
  uni.navigateTo({ url: '/pages/wallet/withdraw' });
}

function goWithdrawals() {
  uni.navigateTo({ url: '/pages/wallet/withdrawals' });
}

function goRecords() {
  uni.navigateTo({ url: '/pages/invite/records' });
}

function goCashbacks() {
  uni.navigateTo({ url: '/pages/invite/cashbacks' });
}

function goPoster() {
  uni.navigateTo({ url: '/pages/invite/poster' });
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.page-invite {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF5F0 0%, #F5F7FA 100%);
  padding-bottom: 40rpx;
  position: relative;
  overflow: hidden;
}

/* ========== 顶部装饰背景 ========== */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  overflow: hidden;
  z-index: 0;
}

.hero-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.hero-circle-1 {
  width: 300rpx;
  height: 300rpx;
  background: #FF6B35;
  top: -100rpx;
  right: -50rpx;
}

.hero-circle-2 {
  width: 200rpx;
  height: 200rpx;
  background: #FF8C5A;
  top: 100rpx;
  left: -80rpx;
}

.hero-circle-3 {
  width: 150rpx;
  height: 150rpx;
  background: #FFB800;
  top: 250rpx;
  right: 100rpx;
}

/* ========== 顶部标题区 ========== */
.header-section {
  position: relative;
  z-index: 1;
  padding: 60rpx 32rpx 40rpx;
  text-align: center;
}

.header-icon {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DD 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.2);
}

.header-title {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 12rpx;
  letter-spacing: 1rpx;
}

.header-subtitle {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* ========== 余额卡片 ========== */
.balance-card {
  position: relative;
  z-index: 1;
  margin: 0 24rpx 24rpx;
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.25);
  overflow: hidden;
}

.balance-card::before {
  content: '';
  position: absolute;
  top: -50rpx;
  right: -50rpx;
  width: 200rpx;
  height: 200rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.balance-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
}

.balance-icon-wrapper {
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-title {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.balance-main {
  position: relative;
  z-index: 1;
}

.balance-amount-section {
  margin-bottom: 32rpx;
}

.balance-label {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12rpx;
}

.balance-value-row {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
  margin-bottom: 12rpx;
}

.balance-symbol {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 600;
}

.balance-value {
  font-size: 64rpx;
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2rpx;
}

.balance-tip {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  background: rgba(255, 140, 0, 0.2);
  border-radius: 20rpx;
  width: fit-content;
}

.tip-text {
  font-size: 22rpx;
  color: #FFF5E6;
}

.balance-actions {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.96);
  }
}

.action-btn-primary {
  background: #ffffff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

  &.disabled {
    background: rgba(255, 255, 255, 0.3);
    opacity: 0.6;
  }

  .action-btn-text {
    color: #FF6B35;
    font-weight: 600;
  }
}

.action-btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  border: 2rpx solid rgba(255, 255, 255, 0.3);

  .action-btn-text {
    color: #ffffff;
    font-weight: 500;
  }
}

.action-btn-text {
  font-size: 28rpx;
}

/* ========== 数据统计卡片 ========== */
.stats-card {
  position: relative;
  z-index: 1;
  margin: 0 24rpx 24rpx;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.stats-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 28rpx;
}

.stats-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
}

.stats-grid {
  display: flex;
  gap: 24rpx;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 16rpx;
  background: #F8F9FA;
  border-radius: 16rpx;
  transition: all 0.3s ease;

  &:active {
    background: #F0F2F5;
    transform: scale(0.96);
  }
}

.stat-icon-wrapper {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.stat-icon-blue {
  background: rgba(74, 144, 226, 0.1);
}

.stat-icon-green {
  background: rgba(82, 196, 26, 0.1);
}

.stat-icon-orange {
  background: rgba(255, 140, 0, 0.1);
}

.stat-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8rpx;
  line-height: 1;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* ========== 邀请操作区 ========== */
.invite-actions {
  position: relative;
  z-index: 1;
  margin: 0 24rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.action-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 28rpx 24rpx;
  border-radius: 20rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.action-card-primary {
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
}

.action-card-secondary {
  background: #ffffff;
  border: 2rpx solid #FFE8DD;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.action-card-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-card-primary .action-card-icon {
  background: rgba(255, 255, 255, 0.2);
}

.action-card-secondary .action-card-icon {
  background: #FFF5F0;
}

.action-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.action-card-title {
  font-size: 30rpx;
  font-weight: 600;
  line-height: 1.3;
}

.action-card-primary .action-card-title {
  color: #ffffff;
}

.action-card-secondary .action-card-title {
  color: #1A1A1A;
}

.action-card-desc {
  font-size: 24rpx;
  line-height: 1.4;
}

.action-card-primary .action-card-desc {
  color: rgba(255, 255, 255, 0.8);
}

.action-card-secondary .action-card-desc {
  color: #999;
}

/* ========== 活动规则 ========== */
.rules-card {
  position: relative;
  z-index: 1;
  margin: 0 24rpx 24rpx;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.rules-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 28rpx;
}

.rules-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
}

.rules-content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.rule-item {
  display: flex;
  gap: 20rpx;
  align-items: flex-start;
}

.rule-number {
  width: 44rpx;
  height: 44rpx;
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #ffffff;
  font-weight: 700;
  flex-shrink: 0;
}

.rule-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  padding-top: 4rpx;
}

.rule-title-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.3;
}

.rule-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.highlight {
  color: #FF6B35;
  font-weight: 600;
}

/* ========== 底部记录入口 ========== */
.bottom-records {
  position: relative;
  z-index: 1;
  margin: 0 24rpx 24rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.record-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx;
  transition: all 0.3s ease;

  &:active {
    opacity: 0.6;
  }
}

.record-text {
  font-size: 26rpx;
  color: #666;
}

.record-divider {
  width: 2rpx;
  height: 32rpx;
  background: #E5E5E5;
}

/* ========== 底部安全提示 ========== */
.bottom-tip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 24rpx;
}

.bottom-tip .tip-text {
  font-size: 24rpx;
  color: #999;
}
</style>
