<script setup>
definePage({
  layout: 'PageLayout',
  style: {
    navigationBarTitleText: '邀请下级代理',
    navigationStyle: 'default',
  },
})

import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useAgentStore } from '@/stores/agentStore'
import { getInviteLink } from '@/api/agent'
import InvitePoster from '@/components/InvitePoster.vue'

const inviteLink = ref('')
const agentStore = useAgentStore()
const { agentCode } = storeToRefs(agentStore)

function copyInviteCode() {
  if (!agentCode.value) {
    uni.showToast({ title: '未获取到邀请码', icon: 'none' })
    return
  }
  uni.setClipboardData({
    data: String(agentCode.value),
    success: () => uni.showToast({ title: '邀请码已复制', icon: 'success' }),
    fail: () => uni.showToast({ title: '复制失败', icon: 'none' }),
  })
}

function copyInviteLink() {
  if (!inviteLink.value) {
    uni.showToast({ title: '暂无邀请链接', icon: 'none' })
    return
  }
  uni.setClipboardData({
    data: inviteLink.value,
    success: () => uni.showToast({ title: '邀请链接已复制', icon: 'success' }),
    fail: () => uni.showToast({ title: '复制失败', icon: 'none' }),
  })
}

onMounted(async () => {
  const token = typeof uni !== 'undefined' && uni.getStorageSync ? uni.getStorageSync('token') : ''
  if (token && !agentStore.isLoaded) {
    await agentStore.fetchAgentStatus()
  }
  if (!agentStore.isAgent || !agentCode.value) {
    uni.showToast({ title: '请注册成为代理后再邀请', icon: 'none' })
    return
  }

  // H5 注册页路径：短链重定向后打开 H5 网站注册页
  const targetPath = `/register?invite_code=${encodeURIComponent(agentCode.value)}`
  const { data, error } = await getInviteLink({
    invite_code: agentCode.value,
    target_path: targetPath,
  })
  if (data.value && !error.value && data.value.code === 200) {
    inviteLink.value = data.value.data?.invite_link || ''
  } else {
    uni.showToast({ title: data.value?.msg || '获取邀请链接失败', icon: 'none' })
  }
})
</script>

<template>
  <view class="p-4">
    <view class="mb-4 flex items-center justify-between">
      <view>
        <view class="text-sm text-gray-500">我的邀请码</view>
        <view class="text-2xl font-bold text-primary mt-1">{{ agentCode || '—' }}</view>
      </view>
      <wd-button type="primary" size="small" @click="copyInviteCode">复制邀请码</wd-button>
    </view>
    <view class="p-3">
      <view v-if="inviteLink" class="rounded-xl bg-white shadow p-4">
        <view class="text-sm text-gray-500 mb-2">邀请链接</view>
        <view class="rounded-lg bg-gray-100 p-3 mb-3 break-all text-sm text-blue-600">{{ inviteLink }}</view>
        <wd-button type="primary" block @click="copyInviteLink">复制链接</wd-button>
      </view>
      <view v-else class="rounded-xl bg-gray-100 p-4 text-center text-gray-500 text-sm">
        加载邀请链接中…
      </view>
    </view>

    <!-- 邀请海报（背景图 + 二维码，与 webview 邀请模式一致） -->
    <view v-if="inviteLink" class="mt-4">
      <view class="mb-2">
        <view class="text-base font-semibold text-gray-800">邀请海报</view>
        <view class="text-xs text-gray-500 mt-1">邀请码：{{ agentCode }}</view>
      </view>
      <InvitePoster :invite-link="inviteLink" />
      <wd-button type="primary" block class="mt-3" @click="copyInviteLink">复制邀请链接</wd-button>
    </view>
  </view>
</template>
