import {Avatar, Tag, Space, Button} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components'
import {getUserInfo, getWxOpenId} from '@/api/layout';
import Taro from '@tarojs/taro';
import {useEffect, useState, forwardRef, useImperativeHandle} from "react";
import {User} from "@/api/system/user/model";
import navTo from "@/utils/common";
import {TenantId} from "@/config/app";
import {useUser} from "@/hooks/useUser";
import {useUserData} from "@/hooks/useUserData";
import {checkAndHandleInviteRelation, getStoredInviteParams, hasPendingInvite} from "@/utils/invite";
import UnifiedQRButton from "@/components/UnifiedQRButton";
import {useThemeStyles} from "@/hooks/useTheme";
import {getRootDomain} from "@/utils/domain";
import { getMyGltUserTicketTotal } from '@/api/glt/gltUserTicket'
import { saveStorageByLoginUser } from '@/utils/server'
import { getUserLevelName, getUserLevelConfig } from '@/utils/userLevel'

const UserCard = forwardRef<any, any>((_, ref) => {
  const {data, refresh} = useUserData()
  const {loadUserFromStorage} = useUser();
  const [IsLogin, setIsLogin] = useState<boolean>(false)
  const [userInfo, setUserInfo] = useState<User>()
  const [ticketTotal, setTicketTotal] = useState<number>(0)

  const themeStyles = useThemeStyles();
  const canShowScanButton = (() => {
    const v: any = (userInfo as any)?.isAdmin
    return v === true || v === 1 || v === '1'
  })()

  const getDisplayName = () => {
    if (!userInfo) return IsLogin ? '用户' : '点击登录'
    return userInfo.nickname || (userInfo as any).realName || (userInfo as any).username || (IsLogin ? '用户' : '点击登录')
  }

  // 角色名称：优先使用 dealerLevel 显示四种分级，否则取用户 roles 数组的第一个角色名称
  const getRoleName = () => {
    const dealerLevel = (userInfo as any)?.dealerLevel
    if (dealerLevel !== undefined && dealerLevel !== null) {
      return getUserLevelName(dealerLevel)
    }
    return userInfo?.roles?.[0]?.roleName || userInfo?.roleName || '注册用户'
  }

  // 获取用户等级配置（用于自定义样式）
  const getRoleLevelConfig = () => {
    const dealerLevel = (userInfo as any)?.dealerLevel
    if (dealerLevel !== undefined && dealerLevel !== null) {
      return getUserLevelConfig(dealerLevel)
    }
    return null
  }

  const roleLevelConfig = getRoleLevelConfig()

  // 下拉刷新
  const reloadStats = async (showToast = false) => {
    await refresh()
    reloadTicketTotal()
    if (showToast) {
      Taro.showToast({
        title: '刷新成功',
        icon: 'success'
      })
    }
  }

  const syncUserToStorage = (u: User) => {
    // Keep storage up-to-date for other places that read user info synchronously.
    Taro.setStorageSync('User', u)
    if (u?.userId) Taro.setStorageSync('UserId', u.userId)
    if (u?.nickname) Taro.setStorageSync('WxNickName', u.nickname)
  }

  const reloadUserInfo = async () => {
    try {
      const u = await getUserInfo()
      if (u) {
        setUserInfo(u)
        setIsLogin(true)
        syncUserToStorage(u)
        // Refresh this hook instance's state from storage (defensive).
        await loadUserFromStorage()

        // 获取openId（不阻塞 UI 刷新）
        if (!u.openid) {
          Taro.login({
            success: (res) => {
              getWxOpenId({code: res.code}).catch(() => {})
            }
          })
        }
      }
    } catch (e) {
      // Not logged in / token expired: keep UI in "not login" state.
      // Other error handling is done in request interceptor / callers.
    }
  }

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    handleRefresh: async () => {
      await reloadUserInfo()
      await reloadStats(true)
    },
    reloadStats,
    reloadUserInfo
  }))

  useEffect(() => {
    // 独立于用户信息授权：只要有登录 token，就可以拉取水票总数
    reloadTicketTotal()

    // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
    Taro.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户已经授权过，可以直接获取用户信息
          console.log('用户已经授权过，可以直接获取用户信息')
          reload();
        } else {
          // 用户未授权，需要弹出授权窗口
          console.log('用户未授权，需要弹出授权窗口')
          showAuthModal();
        }
      }
    });
  }, []);

  const reloadTicketTotal = () => {
    const token = Taro.getStorageSync('access_token')
    const userIdRaw = Taro.getStorageSync('UserId')
    const userId = Number(userIdRaw)
    const hasUserId = Number.isFinite(userId) && userId > 0
    if (!token && !hasUserId) {
      setTicketTotal(0)
      return
    }
    getMyGltUserTicketTotal(hasUserId ? userId : undefined)
      .then((total) => setTicketTotal(typeof total === 'number' ? total : 0))
      .catch((err) => {
        console.error('个人中心水票总数加载失败:', err)
        setTicketTotal(0)
      })
  }

  const reload = () => {
    Taro.getUserInfo({
      success: (res) => {
        const avatar = res.userInfo.avatarUrl;
        setUserInfo({
          avatar,
          nickname: res.userInfo.nickName,
          sexName: res.userInfo.gender == 1 ? '男' : '女'
        })
        reloadUserInfo()
          .then(() => {
            // 登录态已就绪后刷新卡片统计（余额/积分/券/水票）
            refresh().then()
            reloadTicketTotal()
          })
          .catch(() => {
            console.log('未登录')
          })
      }
    });
  };

  const showAuthModal = () => {
    Taro.showModal({
      title: '授权提示',
      content: '需要获取您的用户信息',
      confirmText: '去授权',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 用户点击确认，打开授权设置页面
          openSetting();
        }
      }
    });
  };

  const openSetting = () => {
    // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
    Taro.openSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户授权成功，可以获取用户信息
          reload();
        } else {
          // 用户拒绝授权，提示授权失败
          Taro.showToast({
            title: '授权失败',
            icon: 'none'
          });
        }
      }
    });
  };

  /* 获取用户手机号 */
  const handleGetPhoneNumber = ({detail}: { detail: { code?: string, encryptedData?: string, iv?: string } }) => {
    const {code, encryptedData, iv} = detail

    // 判断用户是否已登录
    if(IsLogin){
      return navTo(`/user/profile/profile`)
    }

    // 获取存储的邀请参数
    const inviteParams = getStoredInviteParams()
    const refereeId = inviteParams?.inviter ? parseInt(inviteParams.inviter) : 0

    Taro.login({
      success: function () {
        if (code) {
          Taro.request({
            url: 'https://glt-server.websoft.top/api/wx-login/loginByMpWxPhone',
            method: 'POST',
            data: {
              code,
              encryptedData,
              iv,
              notVerifyPhone: true,
              refereeId: refereeId, // 使用解析出的推荐人ID
              sceneType: 'save_referee',
              tenantId: TenantId
            },
            header: {
              'content-type': 'application/json',
              TenantId
            },
            success: function (res) {
              if (res.data.code == 1) {
                Taro.showToast({
                  title: res.data.message,
                  icon: 'error',
                  duration: 2000
                })
                return false;
              }
              // 登录成功
              saveStorageByLoginUser(res.data.data.access_token, res.data.data.user)
              setUserInfo(res.data.data.user)
              setIsLogin(true)
              // 登录态已就绪后刷新卡片统计（余额/积分/券/水票）
              refresh().then()
              reloadTicketTotal()

              // 登录成功后（可能是新注册用户），检查是否存在待处理的邀请关系并尝试绑定
              if (hasPendingInvite()) {
                checkAndHandleInviteRelation().catch((e) => {
                  console.error('个人中心登录后处理邀请关系失败:', e)
                })
              }
            }
          })
        } else {
          console.log('登录失败！')
        }
      }
    })
  }

  return (
    <View className={'pt-14'}>
        {/* 使用相对定位容器，让个人资料图片可以绝对定位在右上角 */}
        <View className="relative z-20">
          <View
            className={'user-card w-full flex flex-col justify-around rounded-xl'}
          >
            <View className={'user-card-header flex w-full justify-between items-center pt-4'}>
              <View className={'flex items-center mx-4'}>
                {IsLogin && (
                  <View style={{color: '#ffffff', height: 'auto'}} onClick={() => navTo(`/user/profile/profile`)}>
                    <View className={'flex items-center gap-2'}>
                      <Avatar
                        size={'large'}
                        src={userInfo?.avatar || ''}
                      />
                      <View className={'flex flex-col'}>
                        <Text style={{color: '#ffffff'}}>{getDisplayName() || '点击登录'}</Text>
                        {getRootDomain() && (
                          <View>
                            {roleLevelConfig ? (
                              <Tag
                                type={roleLevelConfig.tagType as any}
                                style={{
                                  backgroundColor: roleLevelConfig.bgColor,
                                  color: roleLevelConfig.textColor,
                                  borderColor: roleLevelConfig.borderColor,
                                }}
                              >
                                {getRoleName()}
                              </Tag>
                            ) : (
                              <Tag type="success">{getRoleName()}</Tag>
                            )}
                          </View>
                        )}
                      </View>
                    </View>
                  </View>
                )}
                {!IsLogin && (
                  <Button style={{color: '#ffffff', height: 'auto'}} open-type="getPhoneNumber"
                          onGetPhoneNumber={handleGetPhoneNumber}>
                    <View className={'flex items-center gap-2'}>
                      <Avatar
                        size={'large'}
                        src={userInfo?.avatar || ''}
                      />
                      <View className={'flex flex-col'}>
                        <Text style={{color: '#ffffff'}}>{getDisplayName() || '点击登录'}</Text>
                      </View>
                    </View>
                  </Button>
                )}
              </View>
              {/*统一扫码入口 - 仅管理员可见*/}
              {canShowScanButton && (
                <Space style={{
                  marginTop: '30px',
                  marginRight: '10px'
                }}>
                  <UnifiedQRButton
                    text="扫一扫"
                    size="small"
                    onSuccess={(result) => {
                      console.log('统一扫码成功:', result);
                      // 根据扫码类型给出不同的提示
                      if (result.type === 'verification') {
                        const businessType = result?.data?.businessType;
                        if (businessType === 'gift' && result?.data?.gift) {
                          const gift = result.data.gift;
                          Taro.showModal({
                            title: '核销成功',
                            content: `已成功核销：${gift.goodsName || gift.name || '礼品'}，面值￥${gift.faceValue}`
                          });
                          return;
                        }
                        if (businessType === 'ticket' && result?.data?.ticket) {
                          const ticket = result.data.ticket;
                          const qty = result.data.qty || 1;
                          Taro.showModal({
                            title: '核销成功',
                            content: `已成功核销：${ticket.templateName || '水票'}，本次使用${qty}次，剩余可用${ticket.availableQty ?? 0}次`
                          });
                          return;
                        }
                        Taro.showModal({
                          title: '核销成功',
                          content: '已成功核销'
                        });
                      }
                    }}
                    onError={(error) => {
                      console.error('统一扫码失败:', error);
                    }}
                  />
                </Space>
              )}
            </View>
            <View className={'py-2'}>
              <View className={'flex justify-around mt-1'}>
                <View className={'item flex justify-center flex-col items-center'}
                      onClick={() => navTo('/user/ticket/index', true)}>
                  <Text className={'text-xs text-gray-200'} style={themeStyles.textColor}>水票</Text>
                  <Text className={'text-xl text-white'} style={themeStyles.textColor}>{ticketTotal}</Text>
                </View>
                <View className={'item flex justify-center flex-col items-center'}
                      onClick={() => navTo('/user/coupon/index', true)}>
                  <Text className={'text-xs text-gray-200'} style={themeStyles.textColor}>优惠券</Text>
                  <Text className={'text-xl text-white'} style={themeStyles.textColor}>{data?.coupons || 0}</Text>
                </View>
                <View className={'item flex justify-center flex-col items-center'}
                      onClick={() => navTo('/user/wallet/wallet', true)}>
                  <Text className={'text-xs text-gray-200'} style={themeStyles.textColor}>余额</Text>
                  <Text className={'text-xl text-white'} style={themeStyles.textColor}>{data?.balance || '0.00'}</Text>
                </View>
                <View className={'item flex justify-center flex-col items-center'}>
                  <Text className={'text-xs text-gray-200'} style={themeStyles.textColor}>积分</Text>
                  <Text className={'text-xl text-white'} style={themeStyles.textColor}>{data?.points || 0}</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
    </View>
  )
})

export default UserCard;
