import React, { useState, useEffect } from 'react'
import { View, Text, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useUser } from '@/hooks/useUser'
import { addShopDealerApply, listShopDealerApply } from '@/api/shop/shopDealerApply'
import type { ShopDealerApply } from '@/api/shop/shopDealerApply/model'

definePageConfig({
  navigationBarTitleText: '升级VIP会员',
})

const VipUpgradePage: React.FC = () => {
  const { user, isLoggedIn } = useUser()
  const [realName, setRealName] = useState('')
  const [address, setAddress] = useState('')
  const [loading, setLoading] = useState(false)
  const [existingApply, setExistingApply] = useState<ShopDealerApply | null>(null)

  useEffect(() => {
    if (!isLoggedIn) {
      Taro.navigateTo({ url: '/passport/login' })
      return
    }
    if (user) {
      // 门店名称和地址统一从 shop-dealer-apply 表读取
      listShopDealerApply({ userId: (user as any)?.userId || (user as any)?.id })
        .then(data => {
          if (!data || data.length === 0) return
          // 取最新一条申请记录（按 applyId 倒序）
          const latest = [...data].sort((a, b) => (b.applyId || 0) - (a.applyId || 0))[0]
          if (latest) {
            setExistingApply(latest)
            setRealName(latest.realName || '')
            setAddress(latest.address || '')
          }
        })
        .catch(() => {})
    }
  }, [user, isLoggedIn])

  const handleSave = async () => {
    if (!realName.trim()) {
      Taro.showToast({ title: '请输入门店名称', icon: 'none' })
      return
    }
    if (!address.trim()) {
      Taro.showToast({ title: '请输入门店地址', icon: 'none' })
      return
    }
    setLoading(true)
    try {
      await addShopDealerApply({
        userId: (user as any)?.userId || (user as any)?.id,
        realName: realName.trim(),
        address: address.trim(),
        applyType: 10,   // 需后台审核
        applyStatus: 10, // 待审核
      } as ShopDealerApply)
      Taro.showToast({ title: '提交成功，等待审核', icon: 'none' })
      setTimeout(() => {
        Taro.navigateBack()
      }, 1500)
    } catch (error) {
      console.error('提交失败:', error)
      Taro.showToast({ title: '提交失败，请重试', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  // 待审核(10) 和 已通过(20) 时只读展示；已驳回(30) 允许编辑后重新提交
  const isReadonly = existingApply?.applyStatus === 10 || existingApply?.applyStatus === 20

  if (!isLoggedIn) return null

  return (
    <View className='min-h-screen bg-gray-50'>
      {/* 顶部渐变背景 */}
      <View className='pt-8 pb-12 px-5 rounded-b-3xl relative overflow-hidden'
        style={{ background: 'linear-gradient(135deg, #15803d 0%, #22c55e 60%, #4ade80 100%)' }}
      >
        <View className='absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10' style={{ background: 'radial-gradient(circle, #ffffff, transparent)' }} />
        <View className='absolute -bottom-6 -left-6 w-24 h-24 rounded-full opacity-15' style={{ background: 'radial-gradient(circle, #ffffff, transparent)' }} />
        <View className='relative z-10 flex flex-col items-center'>
          <View className='w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-3'>
            <Text className='text-3xl'>👑</Text>
          </View>
          <Text className='text-white text-xl font-bold'>升级VIP会员</Text>
          <Text className='text-white text-opacity-80 text-sm mt-1'>
            {existingApply?.applyStatus === 20 ? '恭喜您已是VIP会员' : '填写门店信息，申请VIP会员资格'}
          </Text>
        </View>
      </View>

      {/* 状态提示 */}
      {existingApply && (
        <View className='mx-3 -mt-6 bg-white rounded-xl p-4 shadow-sm relative z-20 mb-3'>
          <View className='flex items-start gap-3'>
            <View className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
              existingApply.applyStatus === 10 ? 'bg-amber-100' : 'bg-green-100'
            }`}>
              <Text className='text-sm'>{existingApply.applyStatus === 10 ? '⏳' : '✅'}</Text>
            </View>
            <View className='flex-1'>
              <Text className='text-gray-800 text-sm font-medium block'>
                {existingApply.applyStatus === 10 ? '审核中' : '审核通过'}
              </Text>
              <Text className='text-gray-500 text-xs mt-1 block leading-relaxed'>
                {existingApply.applyStatus === 10
                  ? '您的VIP申请正在审核中，请耐心等待。审核结果将通过消息通知您。'
                  : '恭喜！您的VIP会员申请已审核通过，现在可以享受全部VIP专属权益。'}
              </Text>
            </View>
          </View>
        </View>
      )}

      {/* 说明卡片 */}
      {!existingApply && (
      <View className='mx-3 -mt-6 bg-white rounded-xl p-4 shadow-sm relative z-20'>
        <View className='flex items-start gap-3'>
          <View className='w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0'>
            <Text className='text-sm'>💡</Text>
          </View>
          <View className='flex-1'>
            <Text className='text-gray-800 text-sm font-medium block'>温馨提示</Text>
            <Text className='text-gray-500 text-xs mt-1 block leading-relaxed'>
              请填写您的门店信息，提交后管理员将进行审核。审核通过后即可享受VIP会员专属权益，包括更高佣金、专属折扣等特权。
            </Text>
          </View>
        </View>
      </View>
      )}

      {/* 表单 */}
      <View className={`${existingApply ? 'mt-3' : ''} mx-3 mt-3 bg-white rounded-xl overflow-hidden`}>
        {/* 门店名称 */}
        <View className='px-4 py-4 border-b border-gray-50'>
          <Text className='text-sm text-gray-700 font-medium block mb-2'>门店名称 <Text className='text-red-500'>*</Text></Text>
          <Input
            className='w-full text-sm text-gray-800 bg-gray-50 rounded-lg px-3 py-3'
            placeholder='请输入您的门店名称'
          value={realName}
          onInput={(e: any) => setRealName(e.detail.value)}
            maxlength={50}
            disabled={isReadonly}
          />
        </View>

        {/* 门店地址 */}
        <View className='px-4 py-4'>
          <Text className='text-sm text-gray-700 font-medium block mb-2'>门店地址 <Text className='text-red-500'>*</Text></Text>
          <Input
            className='w-full text-sm text-gray-800 bg-gray-50 rounded-lg px-3 py-3'
            placeholder='请输入您的门店详细地址'
            value={address}
            onInput={(e: any) => setAddress(e.detail.value)}
            maxlength={100}
            disabled={isReadonly}
          />
        </View>
      </View>

      {/* VIP权益预览 */}
      <View className='mx-3 mt-4'>
        <Text className='text-base font-medium text-gray-800 mb-3 block'>VIP会员专属权益</Text>
        <View className='grid grid-cols-2 gap-3'>
          {[
            { icon: '💎', title: '更高佣金', desc: '享受高额团队佣金' },
            { icon: '🎁', title: '专属折扣', desc: '购物享VIP专属价' },
            { icon: '⚡', title: '优先发货', desc: '订单优先处理配送' },
            { icon: '🎧', title: '专属客服', desc: '一对一VIP服务' },
          ].map(item => (
            <View key={item.title} className='bg-white rounded-xl p-4 flex items-center gap-3'>
              <View className='w-10 h-10 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0'>
                <Text className='text-lg'>{item.icon}</Text>
              </View>
              <View className='flex-1 min-w-0'>
                <Text className='text-gray-800 text-sm font-medium block'>{item.title}</Text>
                <Text className='text-gray-400 text-xs mt-0.5 block truncate'>{item.desc}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>

      {/* 提交按钮 */}
      {!existingApply && (
      <View className='mx-3 mt-6 mb-4'>
        <View
          className='w-full py-4 rounded-xl flex items-center justify-center active:opacity-90'
          style={{ background: loading ? '#a3e635' : 'linear-gradient(135deg, #16a34a, #22c55e)' }}
          onClick={loading ? undefined : handleSave}
        >
          <Text className='text-white text-base font-semibold'>
            {loading ? '提交中...' : '提交申请'}
          </Text>
        </View>
        <Text className='text-gray-400 text-xs mt-2 text-center block'>
          提交后管理员将在1-3个工作日内审核
        </Text>
      </View>
      )}
    </View>
  )
}

export default VipUpgradePage