<script setup>
definePage({
  type: 'home',
  layout: 'HomeLayout',
  style: {
    navigationBarTitleText: '首页',
    navigationStyle: 'custom',
  },
})

import { storeToRefs } from 'pinia'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { useAgentStore } from '@/stores/agentStore'
import { useUserStore } from '@/stores/userStore'
import { getShareAppMessageOptions, getShareTimelineOptions } from '@/composables/useWechatShare'

const agentStore = useAgentStore()
const userStore = useUserStore()
const { isAgent } = storeToRefs(agentStore)
const { isLoggedIn, mobile } = storeToRefs(userStore)

function toInvitation() {
  if (!isAgent.value) {
    if (!isLoggedIn.value) {
      uni.showToast({ title: '正在登录中，请稍候', icon: 'none' })
      return
    } else {
      uni.showToast({ title: '请先注册成为代理', icon: 'none' })
      uni.navigateTo({ url: `/pages/register/index?mobile=${encodeURIComponent(mobile.value)}` })
    }
    return
  }
  uni.navigateTo({ url: '/pages/invitation/index' })
}

// 直推报告：进入推广报告页 pages/promote/report
function toDirectReport() {
  if (!isAgent.value) {
    if (!isLoggedIn.value) {
      uni.showToast({ title: '正在登录中，请稍候', icon: 'none' })
      return
    } else {
      uni.showToast({ title: '请先注册成为代理', icon: 'none' })
      uni.navigateTo({ url: `/pages/register/index?mobile=${encodeURIComponent(mobile.value)}` })
    }
    return
  }
  uni.navigateTo({ url: '/pages/promote/report' })
}

function toPromote() {
  if (!isAgent.value) {
    if (!isLoggedIn.value) {
      uni.showToast({ title: '正在登录中，请稍候', icon: 'none' })
      return
    } else {
      uni.showToast({ title: '请先注册成为代理', icon: 'none' })
      uni.navigateTo({ url: `/pages/register/index?mobile=${encodeURIComponent(mobile.value)}` })
    }
    return
  }
  uni.switchTab({ url: '/pages/promote/index' })
}

// 微信分享：分享给好友
onShareAppMessage(() => {
  return getShareAppMessageOptions({ path: 'pages/index' })
})

// 微信分享：分享到朋友圈（基础库 2.11.3+）
onShareTimeline(() => {
  return getShareTimelineOptions({ query: 'from=timeline' })
})
</script>

<template>
  <view class="box-border min-h-screen from-blue-100 to-white bg-gradient-to-b">
    <!-- 头图保留 -->
    <view class="relative">
      <image class="h-full w-full block" mode="widthFix" src="/static/index/banner.png" />
    </view>
    <!-- 卡片一行一个，文字在左、图标在右 -->
    <view class="p-4 flex flex-col gap-4">
      <view
        class="flex flex-row items-center rounded-xl shadow-lg bg-white py-5 px-4 w-full"
        @click="toDirectReport"
      >
        <view class="flex-1 min-w-0 mr-4">
          <view class="flex items-center gap-2 flex-wrap">
            <text class="text-gray-800 font-bold text-lg">直推报告</text>
            <text class="text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">推广收益</text>
          </view>
          <view class="text-sm text-gray-500 mt-2 leading-relaxed">查看推广数据、转化率与收益明细，一键生成推广链接</view>
          <view class="inline-block mt-3 px-4 py-2 rounded-lg bg-primary/10 text-primary border border-primary/30 text-xs font-medium shadow-sm active:opacity-90">推广报告 →</view>
        </view>
        <view class="flex items-center flex-shrink-0">
          <image class="w-16 h-16" src="/static/promote/tgbg.png" mode="aspectFit" />
          <text class="text-gray-300 text-xl ml-1">›</text>
        </view>
      </view>
      <view
        class="flex flex-row items-center rounded-xl shadow-lg bg-white py-5 px-4 w-full"
        @click="toInvitation"
      >
        <view class="flex-1 min-w-0 mr-4">
          <view class="flex items-center gap-2 flex-wrap">
            <text class="text-gray-800 font-bold text-lg">邀请下级代理</text>
            <text class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">邀请码·团队</text>
          </view>
          <view class="text-sm text-gray-500 mt-2 leading-relaxed">获取专属邀请码与邀请链接，管理下级团队，邀请即享奖励</view>
          <view class="inline-block mt-3 px-4 py-2 rounded-lg bg-primary/10 text-primary border border-primary/30 text-xs font-medium shadow-sm active:opacity-90">邀请下级 →</view>
        </view>
        <view class="flex items-center flex-shrink-0">
          <image class="w-16 h-16" src="/static/promote/yqxj.png" mode="aspectFit" />
          <text class="text-gray-300 text-xl ml-1">›</text>
        </view>
      </view>
    </view>
  </view>
</template>
