import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useUser } from '@/hooks/useUser'
import { useScrollHeight } from '@/hooks/useScrollHeight'
import { useRequest } from '@/hooks/useRequest'
import { getDealerSetting } from '@/api/shop/shopMemberCenter'
import MemberBadge from '@/components/business/MemberBadge'

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

interface LevelInfo {
  id: number
  levelName: string
  levelIcon: string
  upgradeCondition: string
  upgradeAmount: number
  commissionRate: number
  selfBuyRate: number
}

const MemberUpgradePage: React.FC = () => {
  const { user, isLoggedIn } = useUser()
  const scrollHeight = useScrollHeight()
  const [currentLevel, setCurrentLevel] = useState(0)

  // 获取会员等级列表
  const { data: levelList, run: runLevelList, loading } = useRequest(getDealerSetting, {
    manual: true,
  })

  useEffect(() => {
    if (!isLoggedIn) {
      Taro.navigateTo({ url: '/passport/login' })
      return
    }
    runLevelList()
  }, [isLoggedIn])

  // 处理升级
  const handleUpgrade = (level: LevelInfo) => {
    Taro.showModal({
      title: '升级确认',
      content: `确定升级为${level.levelName}吗？升级后将享受更多权益。`,
      success: (res) => {
        if (res.confirm) {
          Taro.showToast({
            title: '升级功能开发中',
            icon: 'none',
          })
        }
      },
    })
  }

  // 当前等级信息
  const currentLevelName = user?.memberLevelName || '普通会员'
  const currentLevelIndex = levelList?.findIndex(l => l.levelName === currentLevelName) || 0

  // 会员等级图标映射
  const levelIcons: Record<string, string> = {
    '普通会员': '👤',
    '白银会员': '🥈',
    '黄金会员': '🥇',
    '铂金会员': '💎',
    '钻石会员': '💠',
    '黑金会员': '🏆',
  }

  // 获取图标
  const getLevelIcon = (name: string) => levelIcons[name] || '⭐'

  if (!isLoggedIn) {
    return null
  }

  return (
    <View className='min-h-screen bg-gray-50'>
      <ScrollView scrollY style={{ height: scrollHeight }}>
        {/* 顶部背景 */}
        <View className='p-5 pb-8 rounded-b-3xl'
          style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
          <View className='flex items-center justify-center flex-col'>
            <View className='w-20 h-20 rounded-full bg-white bg-opacity-20 flex items-center justify-center mb-3'>
              <Text className='text-4xl'>{getLevelIcon(currentLevelName)}</Text>
            </View>
            <Text className='text-white text-lg font-bold'>当前等级</Text>
            <View className='mt-2'>
              <MemberBadge levelName={currentLevelName} />
            </View>
          </View>
        </View>

        {/* 升级说明 */}
        <View className='mx-3 -mt-4 bg-white rounded-xl p-4 shadow-sm'>
          <View className='flex items-start gap-3'>
            <View className='w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0'>
              <Text className='text-base'>💡</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'>
                升级会员后可享受更多权益，包括更高的佣金比例、专属折扣、优先客服等特权。详情请联系客服了解。
              </Text>
            </View>
          </View>
        </View>

        {/* 会员等级列表 */}
        <View className='mx-3 mt-3'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>选择升级方案</Text>

          {loading ? (
            <View className='flex items-center justify-center py-10'>
              <Text className='text-gray-400'>加载中...</Text>
            </View>
          ) : !levelList || levelList.length === 0 ? (
            <View className='bg-white rounded-xl p-6 text-center'>
              <Text className='text-gray-400'>暂无升级方案</Text>
              <Text className='text-gray-400 text-xs mt-2'>请联系客服了解详情</Text>
            </View>
          ) : (
            <View className='space-y-3'>
              {levelList.map((level, idx) => {
                const isCurrent = level.levelName === currentLevelName
                const isHigher = idx > currentLevelIndex
                return (
                  <View
                    key={level.id}
                    className={`bg-white rounded-xl p-4 ${isHigher ? 'border-2 border-dashed border-orange-300' : ''}`}
                  >
                    <View className='flex items-start gap-3'>
                      {/* 等级图标 */}
                      <View className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                        idx === 0 ? 'bg-gray-100' :
                        idx === 1 ? 'bg-orange-100' :
                        idx === 2 ? 'bg-yellow-100' :
                        idx === 3 ? 'bg-blue-100' :
                        idx === 4 ? 'bg-purple-100' : 'bg-pink-100'
                      }`}>
                        <Text className='text-2xl'>{getLevelIcon(level.levelName)}</Text>
                      </View>

                      {/* 等级信息 */}
                      <View className='flex-1'>
                        <View className='flex items-center gap-2'>
                          <Text className='text-gray-800 font-medium'>{level.levelName}</Text>
                          {isCurrent && (
                            <View className='px-2 py-0.5 bg-green-100 rounded-full'>
                              <Text className='text-green-600 text-xs'>当前</Text>
                            </View>
                          )}
                          {isHigher && (
                            <View className='px-2 py-0.5 bg-orange-100 rounded-full'>
                              <Text className='text-orange-600 text-xs'>可升级</Text>
                            </View>
                          )}
                        </View>

                        {/* 佣金比例 */}
                        <View className='flex gap-4 mt-2'>
                          <View>
                            <Text className='text-gray-500 text-xs'>团队佣金</Text>
                            <Text className='text-orange-500 font-bold'>{(level.commissionRate * 100).toFixed(1)}%</Text>
                          </View>
                          <View>
                            <Text className='text-gray-500 text-xs'>自购返利</Text>
                            <Text className='text-green-500 font-bold'>{(level.selfBuyRate * 100).toFixed(1)}%</Text>
                          </View>
                        </View>

                        {/* 升级条件 */}
                        {level.upgradeCondition && (
                          <Text className='text-gray-400 text-xs mt-2'>{level.upgradeCondition}</Text>
                        )}
                      </View>

                      {/* 升级按钮 */}
                      {isHigher && (
                        <View
                          className='px-4 py-2 bg-orange-500 rounded-full'
                          onClick={() => handleUpgrade(level)}
                        >
                          <Text className='text-white text-sm'>升级</Text>
                        </View>
                      )}
                    </View>
                  </View>
                )
              })}
            </View>
          )}
        </View>

        {/* 权益对比 */}
        <View className='mx-3 mt-4'>
          <Text className='text-base font-medium text-gray-800 mb-3 block'>权益对比</Text>
          <View className='bg-white rounded-xl overflow-hidden'>
            <View className='flex bg-gray-50'>
              <View className='flex-1 px-3 py-2'>
                <Text className='text-gray-500 text-xs text-center'>权益项目</Text>
              </View>
              {['普通会员', '白银会员', '黄金会员'].map(name => (
                <View key={name} className='flex-1 px-2 py-2'>
                  <Text className='text-gray-500 text-xs text-center'>{name}</Text>
                </View>
              ))}
            </View>
            {[
              { label: '购物折扣', values: ['9.5折', '9折', '8.5折'] },
              { label: '团队佣金', values: ['5%', '10%', '15%'] },
              { label: '自购返利', values: ['1%', '3%', '5%'] },
              { label: '专属客服', values: ['❌', '✔', '✔'] },
              { label: '优先发货', values: ['❌', '❌', '✔'] },
            ].map((row, idx) => (
              <View
                key={row.label}
                className={`flex ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}
              >
                <View className='flex-1 px-3 py-3'>
                  <Text className='text-gray-700 text-sm text-center'>{row.label}</Text>
                </View>
                {row.values.map((val, vIdx) => (
                  <View key={vIdx} className='flex-1 px-2 py-3'>
                    <Text className={`text-sm text-center ${
                      val === '❌' ? 'text-gray-300' :
                      val === '✔' ? 'text-green-500' : 'text-gray-700'
                    }`}>{val}</Text>
                  </View>
                ))}
              </View>
            ))}
          </View>
        </View>

        {/* 联系客服 */}
        <View className='mx-3 mt-4 mb-4'>
          <View
            className='bg-white rounded-xl p-4 flex items-center justify-between'
            onClick={() => Taro.navigateTo({ url: '/pages/user/customer-service/index' })}
          >
            <View className='flex items-center gap-3'>
              <View className='w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center'>
                <Text className='text-lg'>📞</Text>
              </View>
              <View>
                <Text className='text-gray-800 font-medium block'>如有疑问</Text>
                <Text className='text-gray-400 text-xs mt-0.5'>联系客服帮您解答</Text>
              </View>
            </View>
            <Text className='text-gray-300'>›</Text>
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default MemberUpgradePage