import React, { useEffect, useState } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useUser } from '@/hooks/useUser'
import { pageShopPointsProduct } from '@/api/shop/shopPointsProduct'
import type { ShopPointsProduct } from '@/api/shop/shopPointsProduct/model'
import { getUserPointsInfo, type UserPointsInfo } from '@/api/system/user/points'
import EmptyState from '@/components/common/EmptyState'

const PointsPage: React.FC = () => {
  const { user } = useUser()
  const [pointsInfo, setPointsInfo] = useState<UserPointsInfo>({ points: 0, totalEarned: 0, totalUsed: 0, expiringSoon: 0 })
  const [hotProducts, setHotProducts] = useState<ShopPointsProduct[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 获取当前用户真实积分
    getUserPointsInfo()
      .then(data => setPointsInfo(data))
      .catch(err => console.error('获取积分信息失败:', err))

    pageShopPointsProduct({ page: 1, limit: 4, isHot: 1, status: 1 })
      .then(res => setHotProducts(res?.list || []))
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  return (
    <ScrollView scrollY className='min-h-screen bg-gray-50'>
      {/* 积分卡片 */}
      <View className='mx-3 mt-3 p-4 rounded-xl' style={{ background: 'linear-gradient(135deg, #0e932e, #16a34a)' }}>
        <Text className='text-white text-sm opacity-80 block mb-1'>当前积分</Text>
        <Text className='text-white text-3xl font-bold block'>{pointsInfo.points}</Text>
        <View className='flex gap-3 mt-4'>
          <View
            className='flex-1 py-2 rounded-full text-center'
            style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}
            onClick={() => Taro.navigateTo({ url: '/pages/points/signin' })}
          >
            <Text className='text-white text-sm'>每日签到</Text>
          </View>
          <View
            className='flex-1 py-2 rounded-full text-center'
            style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}
            onClick={() => Taro.navigateTo({ url: '/pages/user/points-record' })}
          >
            <Text className='text-white text-sm'>积分明细</Text>
          </View>
        </View>
      </View>

      {/* 热门兑换 */}
      <View className='mx-3 mt-4'>
        <View className='flex justify-between items-center mb-3'>
          <Text className='text-base font-medium text-gray-800'>热门兑换</Text>
          <Text
            className='text-xs text-gray-400'
            onClick={() => Taro.navigateTo({ url: '/pages/points/product-list/index' })}
          >{`查看更多 >`}</Text>
        </View>

        {!loading && hotProducts.length === 0 ? (
          <EmptyState text='暂无热门商品' />
        ) : (
          <View className='grid grid-cols-2 gap-2'>
            {loading
              ? [1, 2, 3, 4].map(i => (
                  <View key={i} className='bg-white rounded-lg overflow-hidden'>
                    <View className='w-full aspect-square bg-gray-100' />
                    <View className='p-2'>
                      <View className='h-4 bg-gray-100 rounded mb-2' />
                      <View className='h-3 bg-gray-100 rounded w-16' />
                    </View>
                  </View>
                ))
              : hotProducts.map(item => (
                  <View
                    key={item.id}
                    className='bg-white rounded-lg overflow-hidden'
                    onClick={() => Taro.navigateTo({ url: `/pages/points/product-detail?id=${item.id}` })}
                  >
                    <View className='w-full aspect-square bg-orange-50 flex items-center justify-center overflow-hidden'>
                      {item.productImage ? (
                        <Image src={item.productImage} className='w-full h-full' mode='aspectFill' />
                      ) : (
                        <Text className='text-xs text-gray-300'>暂无图片</Text>
                      )}
                    </View>
                    <View className='p-2'>
                      <Text className='text-sm text-gray-700 truncate block'>{item.productName}</Text>
                      <View className='flex items-center gap-1 mt-1'>
                        <Text className='text-sm font-bold text-orange-500'>{item.pointsPrice || 0}积分</Text>
                        {Number(item.moneyPrice) > 0 && (
                          <Text className='text-xs text-gray-400'>+¥{item.moneyPrice}</Text>
                        )}
                      </View>
                    </View>
                  </View>
                ))}
          </View>
        )}
      </View>

      {/* 积分订单入口 */}
      <View
        className='mx-3 mt-4 mb-4 bg-white rounded-lg p-4 flex justify-between items-center'
        onClick={() => Taro.navigateTo({ url: '/pages/order-list' })}
      >
        <Text className='text-sm text-gray-700'>积分订单</Text>
        <Text className='text-gray-400 text-sm'>{'>'}</Text>
      </View>
    </ScrollView>
  )
}

export default PointsPage