<template>
  <div class="invite-page">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <van-icon size="20" name="arrow-left"></van-icon>
      </div>
      <div class="nav-title">邀请中心</div>
      <div class="nav-right"></div>
    </div>

    <!-- 顶部礼物图标 -->
    <div class="gift-section">
      <div class="gift-circle">
        <svg viewBox="0 0 1024 1024" width="80" height="80" fill="#DE3545">
          <path d="M880 305H632c6.2-11.4 11-23.6 14.2-36.4 8.6-34 1.8-70.6-19-100.8-23.4-34-62-54.2-103.2-54.2-27.6 0-54.2 9-76 25.8-21.8-16.8-48.4-25.8-76-25.8-41.2 0-79.8 20.2-103.2 54.2-20.8 30.2-27.6 66.8-19 100.8 3.2 12.8 8 25 14.2 36.4H144c-17.6 0-32 14.4-32 32v152c0 17.6 14.4 32 32 32h24.8v344c0 17.6 14.4 32 32 32h622.4c17.6 0 32-14.4 32-32V497H880c17.6 0 32-14.4 32-32V337c0-17.6-14.4-32-32-32zM524 179.6c17.6 0 33.6 11 42.4 28.4 6 12 7.2 25.6 3.4 38.6-4 13.6-13.4 25.8-26.6 34.4-12.8 8.4-26.4 13-39.6 13-3.8 0-7.6-0.4-11.2-1.2-12.4-2.6-22.8-11.6-26.4-23.8-3.4-11.6 0-25.2 7-38.4 11.4-21.4 30.2-51 51-51zM293.6 208c8.8-17.4 24.8-28.4 42.4-28.4 20.8 0 39.6 29.6 51 51 7 13.2 10.4 26.8 7 38.4-3.6 12.2-14 21.2-26.4 23.8-3.6 0.8-7.4 1.2-11.2 1.2-13.2 0-26.8-4.6-39.6-13-13.2-8.6-22.6-20.8-26.6-34.4-3.8-13-2.6-26.6 3.4-38.6z m-65.6 161h228v128h-228V369z m228 365H232.8V561h223.2v173z m267.2 0H520V561h223.2v173z m0-237H520V369h203.2v128z"/>
        </svg>
      </div>
      <h2 class="invite-title">邀请好友赚取更多福利</h2>
    </div>

    <!-- 邀请码区域 -->
    <div class="code-section">
      <div class="code-label">邀请码</div>
      <div class="code-box">
        <span class="code-text">{{ inviteCode }}</span>
        <!-- 点击复制图标 -->
        <svg @click="copyCode" class="copy-icon" viewBox="0 0 1024 1024" width="20" height="20">
          <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32z" fill="#DE3545"/>
          <path d="M704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c6 6 14.1 9.4 22.6 9.4h338.7c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM352 853.3V704h-149.3L352 853.3z m320-32V256H224v384h160c17.7 0 32 14.3 32 32v149.3h256z" fill="#DE3545"/>
        </svg>
      </div>

      <button class="share-btn" @click="handleShare">分享邀请</button>
    </div>

    <!-- 数据统计 -->
    <div class="stats-row">
      <div class="stats-item">
        <div class="stats-label">累计返佣</div>
        <div class="stats-num">158.00 USDT</div>
      </div>
      <div class="stats-item">
        <div class="stats-label">邀请人数</div>
        <div class="stats-num">1515</div>
      </div>
    </div>

    <!-- 规则说明 -->
    <div class="rules-section">
      <h3>温馨提示</h3>
      <p>成功邀请1-4名好友即可获得好友存款5%的佣金。</p>
      <p>成功邀请5-10名好友即可获得好友存款10%的佣金。</p>
      <p>成功邀请11-20名好友即可获得好友存款20%的佣金。</p>
      <p>成功邀请超过30名好友即可获得好友存款45%的佣金。</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from "vue-router";
// 引入 Vant 的 Toast
import { showToast } from 'vant';
// 如果项目中没有全局引入样式，可能需要取消下面这行的注释
// import 'vant/es/toast/style';

const router = useRouter();
const inviteCode = ref('LANDCOIN444');

// --- 核心：兼容性极强的复制功能 ---
const copyCode = async () => {
  const text = inviteCode.value;

  // 1. 优先尝试标准 API (需要 HTTPS)
  if (navigator.clipboard && navigator.clipboard.writeText) {
    try {
      await navigator.clipboard.writeText(text);
      showToast({ type: 'success', message: '复制成功' });
      return;
    } catch (err) {
      console.warn('标准API复制失败，尝试降级方案', err);
    }
  }

  // 2. 降级方案 (兼容所有浏览器/Webview)
  try {
    const input = document.createElement('input');
    input.setAttribute('readonly', 'readonly'); // 防止 iOS 拉起键盘
    input.setAttribute('value', text);
    input.style.position = 'fixed';
    input.style.left = '-9999px';
    document.body.appendChild(input);

    input.select();
    input.setSelectionRange(0, 9999); // 兼容 iOS

    if (document.execCommand('copy')) {
      showToast({ type: 'success', message: '复制成功' });
    } else {
      showToast({ type: 'fail', message: '复制失败' });
    }

    document.body.removeChild(input);
  } catch (e) {
    showToast({ type: 'fail', message: '浏览器不支持自动复制' });
  }
};

// 点击分享，跳转到新的海报页面
const handleShare = () => {
  router.push('/invite/poster');
};
</script>

<style scoped>
/* ========== 基础页面样式 ========== */
.invite-page {
  min-height: 100vh;
  background: #fff;
}
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 44px; padding: 0 16px;
}
.nav-title { font-size: 18px; font-weight: 500; }
.nav-left, .nav-right { width: 30px; display: flex; align-items: center; }

.gift-section {
  text-align: center;
  padding: 30px 0 20px;
}
.gift-circle {
  width: 120px; height: 120px;
  background: #FFF0F0; /* 浅粉色圆底 */
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
}
.invite-title {
  font-size: 18px; font-weight: 400; color: #333;
}

.code-section { padding: 0 20px; }
.code-label { font-size: 14px; font-weight: 500; color: #333; margin-bottom: 10px; }
.code-box {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px dashed #eee; /* 虚线边框 */
  padding: 12px 16px; border-radius: 8px; margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.code-text { font-size: 14px; font-weight: 500; color: #333; }
.share-btn {
  width: 100%; height: 40px;
  background: #DE3545; /* 红色按钮 */
  color: #fff; border: none; border-radius: 20px;
  font-size: 14px; font-weight: 600;
}
/* 点击反馈 */
.share-btn:active { opacity: 0.9; }
.copy-icon { cursor: pointer; }
.copy-icon:active { opacity: 0.6; }

.stats-row {
  display: flex; margin: 11px 20px;
}
.stats-item { flex: 1; text-align: center; }
.stats-label { color: #666; font-size: 12px; margin-bottom: 6px; }
.stats-num { font-size: 18px; font-weight: 600; color: #333; }

.rules-section { padding: 0 20px; color: #999; font-size: 12px; line-height: 1.8; }
.rules-section h3 { color: #333; font-size: 14px; margin-bottom: 10px; }
</style>