<template>
  <view class="page-container">
    <!-- 顶部装饰背景 - 漂浮光球 -->
    <view class="bg-decoration"></view>

    <!-- 装饰球体 -->
    <view class="orb orb-1"></view>
    <view class="orb orb-2"></view>

    <view class="content-wrap">
      <!-- 品牌区域 -->
      <view class="glass-card hero-card">
        <view class="brand-section">
          <view class="logo-box">
            <image class="logo" src="/static/logo.png" mode="widthFix"></image>
          </view>
          <view class="hero-title">🎁 好友邀请</view>
          <view class="welcome-text">开启欧气之旅 ✨</view>
        </view>

        <!-- 邀请人信息 -->
        <view class="invite-info" v-if="inviteCode">
          <view class="invite-badge">
            <text class="invite-emoji">👋</text>
            <view class="invite-detail">
              <text class="invite-main">好友正在邀请你加入</text>
              <text class="invite-code">邀请码：{{ inviteCode }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 福利卡片 -->
      <view class="glass-card benefits-card">
        <view class="benefits-header">
          <text class="benefits-title">🎉 新人专属福利</text>
        </view>
        <view class="benefits-list">
          <view class="benefit-item">
            <view class="benefit-icon-wrap">
              <text class="benefit-icon">💎</text>
            </view>
            <view class="benefit-text">
              <text class="benefit-main">注册即送10积分</text>
              <text class="benefit-sub">可用于抽奖抵扣</text>
            </view>
          </view>
          <view class="benefit-item">
            <view class="benefit-icon-wrap">
              <text class="benefit-icon">🎫</text>
            </view>
            <view class="benefit-text">
              <text class="benefit-main">首单专属优惠</text>
              <text class="benefit-sub">限时折扣等你拿</text>
            </view>
          </view>
          <view class="benefit-item">
            <view class="benefit-icon-wrap">
              <text class="benefit-icon">🃏</text>
            </view>
            <view class="benefit-text">
              <text class="benefit-main">新手道具卡</text>
              <text class="benefit-sub">免费体验玩法</text>
            </view>
          </view>
        </view>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <view class="action-section">
        <button class="btn login-btn" open-type="getPhoneNumber" :disabled="loading" @getphonenumber="onGetPhoneNumber">
          <text class="btn-text">🚀 微信一键加入</text>
          <view class="btn-shine"></view>
        </button>
      </view>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN -->
      <view class="action-section">
        <button class="btn login-btn" @click="goLogin">
          <text class="btn-text">🚀 立即加入</text>
        </button>
      </view>
      <!-- #endif -->

      <!-- 协议区 -->
      <view class="agreements">
        <view class="checkbox-area" @click="toggleAgreement">
          <view class="checkbox round" :class="{ checked: agreementChecked }">
            <view class="check-mark" v-if="agreementChecked">✓</view>
          </view>
        </view>
        <view class="agreement-text">
          登录即代表同意 <text class="link" @tap="toUserAgreement">用户协议</text> & <text class="link" @tap="toPurchaseAgreement">隐私政策</text>
        </view>
      </view>

      <view v-if="error" class="error-toast">{{ error }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { wechatLogin, bindPhone, getUserStats, getPointsBalance } from '../../api/appUser'

const loading = ref(false)
const error = ref('')
const inviteCode = ref('')
const agreementChecked = ref(false)

onLoad((options) => {
  const code = options.invite_code || options.inviteCode || ''
  if (code) {
    inviteCode.value = code
    uni.setStorageSync('inviter_code', code)
  }
})

function toggleAgreement() {
  agreementChecked.value = !agreementChecked.value
}

function toUserAgreement() { uni.navigateTo({ url: '/pages/agreement/user' }) }
function toPurchaseAgreement() { uni.navigateTo({ url: '/pages/agreement/purchase' }) }

function goLogin() {
  uni.navigateTo({ url: '/pages/login/index' })
}

function onGetPhoneNumber(e) {
  if (!agreementChecked.value) {
    uni.showToast({ title: '请先阅读并同意协议', icon: 'none' })
    return
  }
  
  const phoneCode = e.detail.code
  if (!phoneCode) {
    uni.showToast({ title: '未授权手机号', icon: 'none' })
    return
  }
  
  loading.value = true
  error.value = ''
  
  uni.login({
    provider: 'weixin',
    success: async (res) => {
      try {
        const loginCode = res.code
        const inviterCode = uni.getStorageSync('inviter_code')
        const data = await wechatLogin(loginCode, inviterCode)
        const token = data && data.token
        const user_id = data && data.user_id
        const user_info = data || {}
        
        uni.setStorageSync('user_info', user_info)
        if (token) uni.setStorageSync('token', token)
        if (user_id) uni.setStorageSync('user_id', user_id)
        if (user_info.avatar) uni.setStorageSync('avatar', user_info.avatar)
        if (user_info.nickname) uni.setStorageSync('nickname', user_info.nickname)
        if (user_info.invite_code) uni.setStorageSync('invite_code', user_info.invite_code)
        const openid = data && (data.openid || data.open_id)
        if (openid) uni.setStorageSync('openid', openid)
        
        try {
          await new Promise(r => setTimeout(r, 600))
          const bindRes = await bindPhone(user_id, phoneCode, { 'X-Suppress-Auth-Modal': true })
          const phoneNumber = (bindRes && (bindRes.phone || bindRes.phone_number || bindRes.mobile)) || ''
          if (phoneNumber) uni.setStorageSync('phone_number', phoneNumber)
        } catch (bindErr) {
          console.warn('Bind phone failed', bindErr)
        }
        
        uni.setStorageSync('phone_bound', true)
        
        try {
          const stats = await getUserStats(user_id)
          uni.setStorageSync('user_stats', stats)
          const balance = await getPointsBalance(user_id)
          const b = balance && balance.balance !== undefined ? balance.balance : balance
          uni.setStorageSync('points_balance', b)
        } catch(e) {}

        uni.showToast({ title: '欢迎加入！', icon: 'success' })
        setTimeout(() => {
          uni.switchTab({ url: '/pages/index/index' })
        }, 500)
       
      } catch (err) {
        error.value = err.message || '登录失败'
      } finally {
        loading.value = false
      }
    },
    fail: () => {
      error.value = '微信登录失败'
      loading.value = false
    }
  })
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: $bg-secondary;
  position: relative;
  overflow: hidden;
}

/* 装饰光球 - 与登录页保持一致 */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80rpx);
  opacity: 0.6;
  pointer-events: none;
}
.orb-1 {
  width: 500rpx;
  height: 500rpx;
  background: radial-gradient(circle, rgba($brand-primary, 0.4), transparent 70%);
  top: -100rpx;
  left: -100rpx;
  animation: float 8s ease-in-out infinite;
}
.orb-2 {
  width: 600rpx;
  height: 600rpx;
  background: radial-gradient(circle, rgba($accent-gold, 0.3), transparent 70%);
  bottom: -150rpx;
  right: -150rpx;
  animation: float 10s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30rpx, 40rpx); }
}

.content-wrap {
  position: relative;
  z-index: 1;
  padding: 40rpx;
  padding-top: calc(env(safe-area-inset-top) + 40rpx);
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40rpx); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero Card */
.hero-card {
  padding: 60rpx 40rpx;
  margin-bottom: $spacing-lg;
}

.brand-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.logo-box {
  width: 160rpx;
  height: 160rpx;
  background: $bg-card;
  border-radius: 40rpx;
  padding: 20rpx;
  box-shadow: 0 12rpx 30rpx rgba($brand-primary, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-xl;
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12rpx 30rpx rgba($brand-primary, 0.2); }
  50% { transform: scale(1.02); box-shadow: 0 16rpx 40rpx rgba($brand-primary, 0.3); }
}

.logo { 
  width: 100%; 
  height: 100%; 
}

.hero-title {
  font-size: 44rpx;
  font-weight: 900;
  color: $text-main;
  margin-bottom: 12rpx;
  letter-spacing: 2rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
}

.welcome-text {
  font-size: 26rpx;
  color: $text-sub;
  letter-spacing: 4rpx;
  opacity: 0.8;
}

/* 邀请人信息 */
.invite-info {
  margin-top: 20rpx;
}

.invite-badge {
  display: flex;
  align-items: center;
  background: rgba($brand-primary, 0.08);
  border-radius: $radius-lg;
  padding: 20rpx 24rpx;
  border: 1rpx solid rgba($brand-primary, 0.15);
}

.invite-emoji {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.invite-detail {
  display: flex;
  flex-direction: column;
}

.invite-main {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-main;
  margin-bottom: 4rpx;
}

.invite-code {
  font-size: 24rpx;
  color: $text-sub;
}

/* Benefits Card */
.benefits-card {
  padding: 40rpx;
  margin-bottom: $spacing-lg;
}

.benefits-header {
  text-align: center;
  margin-bottom: 32rpx;
}

.benefits-title {
  font-size: 32rpx;
  font-weight: 700;
  color: $text-main;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.benefit-item {
  display: flex;
  align-items: center;
  background: $bg-card;
  border-radius: $radius-lg;
  padding: 24rpx;
  box-shadow: $shadow-sm;
  transition: transform 0.2s;
  
  &:active {
    transform: scale(0.98);
  }
}

.benefit-icon-wrap {
  width: 80rpx;
  height: 80rpx;
  background: rgba($brand-primary, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.benefit-icon {
  font-size: 40rpx;
}

.benefit-text {
  display: flex;
  flex-direction: column;
}

.benefit-main {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-main;
  margin-bottom: 6rpx;
}

.benefit-sub {
  font-size: 22rpx;
  color: $text-sub;
}

/* Action Section */
.action-section {
  margin-bottom: $spacing-lg;
}

.btn {
  height: 96rpx;
  border-radius: $radius-round;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $font-lg;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  
  &:active { transform: scale(0.96); }
}

.login-btn {
  background: $gradient-brand;
  color: $text-inverse;
  box-shadow: 0 10rpx 30rpx rgba($brand-primary, 0.3);
  border: none;
}

.btn-text {
  position: relative;
  z-index: 1;
}

.btn-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

/* Agreements */
.agreements {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20rpx;
}

.checkbox-area { 
  padding-right: 12rpx; 
}

.checkbox {
  width: 36rpx; 
  height: 36rpx;
  border: 3rpx solid $border-color;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: rgba(255,255,255,0.5);
  
  &.checked {
    background: $brand-primary;
    border-color: $brand-primary;
    box-shadow: 0 4rpx 10rpx rgba($brand-primary, 0.3);
  }
}

.check-mark { 
  color: $text-inverse; 
  font-size: $font-sm; 
  font-weight: bold; 
}

.agreement-text { 
  font-size: $font-sm; 
  color: $text-tertiary; 
  line-height: 1.5;
  text-align: left;
}

.link { 
  color: $brand-primary; 
  text-decoration: none; 
  font-weight: 600; 
  margin: 0 4rpx; 
}

.error-toast {
  position: fixed;
  top: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba($uni-color-error, 0.9);
  color: $text-inverse;
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
  z-index: 999;
  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.2);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { transform: translate(-50%, -100%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
</style>
