import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useUser } from '@/hooks/useUser'
import { useScrollHeight } from '@/hooks/useScrollHeight'

definePageConfig({
  navigationBarTitleText: '分销推广',
})

const PromotionPage: React.FC = () => {
  const { user, isLoggedIn } = useUser()
  const [inviteCode, setInviteCode] = useState('')
  const [inviteLink, setInviteLink] = useState('')
  const scrollHeight = useScrollHeight(44)


  useEffect(() => {
    if (!isLoggedIn) {
      Taro.navigateTo({ url: '/passport/login' })
      return
    }
    // 生成邀请码和链接
    const code = user?.id?.toString() || ''
    setInviteCode(code)
    setInviteLink(`https://shop-api.websoft.top/invite?ref=${code}`)
  }, [isLoggedIn, user])

  const handleCopyLink = () => {
    Taro.setClipboardData({
      data: inviteLink,
      success: () => {
        Taro.showToast({ title: '链接已复制', icon: 'success' })
      },
    })
  }

  const handleShare = () => {
    Taro.showToast({ title: '请点击右上角分享', icon: 'none' })
  }

  if (!isLoggedIn) {
    return null
  }

  return (
    <View className='min-h-screen bg-gray-50'>
      <ScrollView scrollY style={{ height: scrollHeight }}>
        {/* 推广卡片 */}
        <View className='mx-3 mt-3 p-4 rounded-xl' style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
          <Text className='text-white text-lg font-bold mb-1 block'>我的推广链接</Text>
          <Text className='text-white text-sm opacity-80 mb-3 block'>分享给好友，好友消费您可获得佣金</Text>
          <View className='bg-white rounded-lg p-3'>
            <Text className='text-xs text-gray-500 mb-1 block'>邀请码</Text>
            <Text className='text-base font-bold text-gray-800'>{inviteCode}</Text>
          </View>
        </View>

        {/* 推广链接 */}
        <View className='mx-3 mt-3 p-4 bg-white rounded-lg'>
          <Text className='text-sm font-medium text-gray-800 mb-2 block'>推广链接</Text>
          <View className='bg-gray-50 rounded-lg p-3 mb-3'>
            <Text className='text-xs text-gray-600 break-all'>{inviteLink}</Text>
          </View>
          <View className='grid grid-cols-2 gap-2'>
            <Button
              className='rounded-full'
              style={{ backgroundColor: '#0e932e' }}
              onClick={handleCopyLink}
            >
              复制链接
            </Button>
            <Button
              className='rounded-full'
              style={{ backgroundColor: '#1989fa' }}
              onClick={handleShare}
            >
              分享好友
            </Button>
          </View>
        </View>

        {/* 推广说明 */}
        <View className='mx-3 mt-3 p-4 bg-white rounded-lg'>
          <Text className='text-sm font-medium text-gray-800 mb-3 block'>推广规则</Text>
          <View className='flex items-start gap-2 mb-2'>
            <Text className='text-green-500 mt-0'>1.</Text>
            <Text className='text-sm text-gray-600 flex-1'>分享您的专属链接或邀请码给好友</Text>
          </View>
          <View className='flex items-start gap-2 mb-2'>
            <Text className='text-green-500 mt-0'>2.</Text>
            <Text className='text-sm text-gray-600 flex-1'>好友通过您的链接注册并成为会员</Text>
          </View>
          <View className='flex items-start gap-2 mb-2'>
            <Text className='text-green-500 mt-0'>3.</Text>
            <Text className='text-sm text-gray-600 flex-1'>好友在平台消费，您可获得相应佣金分成</Text>
          </View>
          <View className='flex items-start gap-2'>
            <Text className='text-green-500 mt-0'>4.</Text>
            <Text className='text-sm text-gray-600 flex-1'>佣金需在好友订单完成后再申请提现</Text>
          </View>
        </View>

        <View className='h-6' />
      </ScrollView>
    </View>
  )
}

export default PromotionPage