<template>
  <!-- 邀请注册送会员弹窗 -->
  <Teleport to="body">
    <div v-if="modelValue" class="settings-invite-overlay" @click="$emit('update:modelValue', false)">
      <div class="settings-invite-dialog" @click.stop>
        <!-- 关闭按钮 -->
        <span class="settings-invite-dialog__close" @click="$emit('update:modelValue', false)">✕</span>

        <!-- 标题 -->
        <h2 class="settings-invite-dialog__title">邀请好友免费获取7天会员权益</h2>

        <!-- 邀请链接区域 -->
        <div class="settings-invite-dialog__link-box">
          <p class="settings-invite-dialog__link-text">来一起领取AI求职助手会员！{{ inviteText }}，点击链接进入活动！</p>
        </div>

        <!-- 复制链接按钮 -->
        <button class="settings-invite-dialog__copy-btn" @click="handleCopy">复制链接</button>

        <!-- 步骤说明 -->
        <p class="settings-invite-dialog__steps-tip">仅需 3 步可免费获取会员权益</p>

        <div class="settings-invite-dialog__step">
          <div class="settings-invite-dialog__step-title">第1步：分享专属邀请链接</div>
          <p class="settings-invite-dialog__step-desc">点击"复制链接"，并发送给好友</p>
        </div>
        <div class="settings-invite-dialog__step">
          <div class="settings-invite-dialog__step-title">第2步：好友完成新用户首次体验</div>
          <p class="settings-invite-dialog__step-desc">链接 24 小时内有效，好友在时效内体验AI求职助手</p>
        </div>
        <div class="settings-invite-dialog__step">
          <div class="settings-invite-dialog__step-title">第3步：分享人获得7天会员权益</div>
          <p class="settings-invite-dialog__step-desc">免费会员权益一年内有效，AI助力加速上岸</p>
        </div>

        <!-- 统计数据 -->
        <div class="settings-invite-dialog__stats">
          <div class="settings-invite-dialog__stat-item">
            <div class="settings-invite-dialog__stat-label">累计获得会员天数</div>
            <div class="settings-invite-dialog__stat-value">{{ totalDays }}天</div>
          </div>
          <div class="settings-invite-dialog__stat-item">
            <div class="settings-invite-dialog__stat-label">累计邀请好友</div>
            <div class="settings-invite-dialog__stat-value">{{ totalFriends }}位</div>
          </div>
        </div>

        <!-- 活动规则折叠 -->
        <div class="settings-invite-dialog__rules" @click="showRules = !showRules">
          <span class="settings-invite-dialog__rules-label">活动规则</span>
          <svg class="settings-invite-dialog__rules-arrow" :class="{ 'settings-invite-dialog__rules-arrow--open': showRules }" viewBox="0 0 12 12" fill="none">
            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div v-if="showRules" class="settings-invite-dialog__rules-content">
          <p>1. 每成功邀请一位新用户注册并完成首次体验，邀请人可获得 7 天免费会员权益。</p>
          <p>2. 邀请链接有效期为 24 小时，过期需重新生成。</p>
          <p>3. 累计获得的会员天数一年内有效，超过一年未使用的天数将自动失效。</p>
          <p>4. 同一被邀请人仅计算一次，重复邀请不累计奖励。</p>
          <p>5. 本活动最终解释权归平台所有。</p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

/** 组件 Props */
defineProps<{ modelValue: boolean }>()

/** 组件 Emits */
defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()

const store = useStore()

/** 活动规则展开状态 */
const showRules = ref(false)

/** 累计获得会员天数（暂用模拟数据） */
const totalDays = ref(1)

/** 累计邀请好友数（暂用模拟数据） */
const totalFriends = ref(1)

/** 用户邀请码 — 从全局 store 读取 */
const inviteCode = computed(() => store.state.userInfo?.inviteCode || '')

/** 邀请链接文案 */
const inviteText = computed(() => {
  const code = inviteCode.value
  return `https://www.offerpai.com.cn/invite_code=${code}`
})

/** 复制链接到剪贴板 */
async function handleCopy() {
  try {
    await navigator.clipboard.writeText(inviteText.value)
    ElMessage.success('链接已复制')
  } catch {
    ElMessage.error('复制失败，请手动复制')
  }
}
</script>
