import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'
import {Button, Cell, Space, Empty, ConfigProvider, Card} from '@nutui/nutui-react-taro'
import {View} from '@tarojs/components'
import {pageUserPointsLog, getUserPointsStats} from "@/api/user/points";
import {UserPointsLog as UserPointsLogType, UserPointsStats} from "@/api/user/points/model";

const UserPoints = () => {
  const [list, setList] = useState<UserPointsLogType[]>([])
  const [loading, setLoading] = useState(false)
  const [stats, setStats] = useState<UserPointsStats>({})

  const reload = () => {
    setLoading(true)
    const userId = Taro.getStorageSync('UserId')

    console.log('Loading points log for userId:', userId)

    if (!userId) {
      console.warn('No userId found in storage')
      Taro.showToast({
        title: '请先登录',
        icon: 'error'
      });
      setLoading(false)
      return
    }

    pageUserPointsLog({
      userId: parseInt(userId),
      page: 1,
      limit: 20
    })
      .then((res: any) => {
        console.log('Points log response:', res)
        setList(res?.list || [])
      })
      .catch((error: any) => {
        console.error('Points log error:', error)
        Taro.showToast({
          title: error?.message || '获取失败',
          icon: 'error'
        });
      })
      .finally(() => {
        setLoading(false)
      })
  }

  const loadPointsStats = () => {
    const userId = Taro.getStorageSync('UserId')
    if (!userId) return

    getUserPointsStats(parseInt(userId))
      .then((res: any) => {
        setStats(res)
      })
      .catch((error: any) => {
        console.error('Points stats error:', error)
      })
  }

  useEffect(() => {
    reload()
    loadPointsStats()
  }, []);

  const getPointsTypeText = (type?: number) => {
    switch (type) {
      case 1: return '获得积分'
      case 2: return '消费积分'
      case 3: return '积分过期'
      case 4: return '管理员调整'
      default: return '积分变动'
    }
  }

  const getPointsTypeColor = (type?: number) => {
    switch (type) {
      case 1: return 'text-green-500'
      case 2: return 'text-red-500'
      case 3: return 'text-gray-500'
      case 4: return 'text-blue-500'
      default: return 'text-gray-500'
    }
  }

  if (loading) {
    return (
      <ConfigProvider>
        <div className={'h-full flex flex-col justify-center items-center'} style={{
          height: 'calc(100vh - 300px)',
        }}>
          <div>加载中...</div>
        </div>
      </ConfigProvider>
    )
  }

  return (
    <ConfigProvider>
      <View className="bg-gray-50 min-h-screen">
        {/* 积分统计卡片 */}
        <View className="p-4">
          <Card className="points-stats-card">
            <View className="text-center py-4">
              <View className="text-3xl font-bold text-orange-500 mb-2">
                {stats.currentPoints || 0}
              </View>
              <View className="text-sm text-gray-500 mb-4">当前积分</View>

              <View className="flex justify-around text-center">
                <View>
                  <View className="text-lg font-medium text-gray-800">
                    {stats.totalEarned || 0}
                  </View>
                  <View className="text-xs text-gray-500">累计获得</View>
                </View>
                <View>
                  <View className="text-lg font-medium text-gray-800">
                    {stats.totalUsed || 0}
                  </View>
                  <View className="text-xs text-gray-500">累计消费</View>
                </View>
                <View>
                  <View className="text-lg font-medium text-gray-800">
                    {stats.expiringSoon || 0}
                  </View>
                  <View className="text-xs text-gray-500">即将过期</View>
                </View>
              </View>
            </View>
          </Card>
        </View>

        {/* 积分记录 */}
        <View className="px-4">
          <View className="text-base font-medium text-gray-800 mb-3">积分明细</View>

          {list.length === 0 ? (
            <div className={'h-full flex flex-col justify-center items-center'} style={{
              height: 'calc(100vh - 400px)',
            }}>
              <Empty
                style={{
                  backgroundColor: 'transparent'
                }}
                description="您还没有积分记录"
              />
              <Space>
                <Button onClick={() => reload()}>刷新</Button>
              </Space>
            </div>
          ) : (
            list.map((item, index) => (
              <Cell.Group key={index} className="mb-3">
                <Cell className="flex flex-col gap-2 p-4">
                  <View className="flex justify-between items-start">
                    <View className="flex-1">
                      <View className="font-medium text-base text-gray-800 mb-1">
                        {getPointsTypeText(item.type)}
                      </View>
                      <View className="text-sm text-gray-500">
                        {item.reason || '无备注'}
                      </View>
                    </View>
                    <View className={`text-lg font-bold ${getPointsTypeColor(item.type)}`}>
                      {item.type === 1 ? '+' : item.type === 2 ? '-' : ''}
                      {item.points || 0}
                    </View>
                  </View>

                  <View className="flex justify-between items-center text-xs text-gray-400 mt-2">
                    <View>
                      {item.createTime ? new Date(item.createTime).toLocaleString() : ''}
                    </View>
                    {item.orderId && (
                      <View>
                        订单: {item.orderId}
                      </View>
                    )}
                  </View>

                  {item.comments && (
                    <View className="text-xs text-gray-500 mt-1 p-2 bg-gray-50 rounded">
                      备注: {item.comments}
                    </View>
                  )}
                </Cell>
              </Cell.Group>
            ))
          )}
        </View>
      </View>
    </ConfigProvider>
  );
};

export default UserPoints;