import React, { useCallback, useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { Avatar, Button, ConfigProvider, Grid, Empty } from '@nutui/nutui-react-taro'
import { User, Location, Order, Refresh } from '@nutui/icons-react-taro'
import { useThemeStyles } from '@/hooks/useTheme'
import { useUser } from '@/hooks/useUser'
import { listShopOrder } from '@/api/shop/shopOrder'
import type { ShopOrder } from '@/api/shop/shopOrder/model'

const RiderIndex: React.FC = () => {
  const themeStyles = useThemeStyles()
  const { isLoggedIn, loading: userLoading, getAvatarUrl, getDisplayName } = useUser()

  const [stats, setStats] = useState({ pending: 0, delivering: 0, completed: 0, today: 0 })
  const [loading, setLoading] = useState(false)

  const loadStats = useCallback(async () => {
    const userId = Taro.getStorageSync('UserId')
    if (!userId) return

    setLoading(true)
    try {
      // 查询待配送和配送中的订单
      const [pendingRes, deliveringRes, completedRes] = await Promise.allSettled([
        listShopOrder({ riderId: Number(userId), orderStatus: 30, page: 1, limit: 1 }),
        listShopOrder({ riderId: Number(userId), orderStatus: 40, page: 1, limit: 1 }),
        listShopOrder({ riderId: Number(userId), orderStatus: 50, page: 1, limit: 1 }),
      ])

      const pending = pendingRes.status === 'fulfilled' ? (pendingRes.value?.count || 0) : 0
      const delivering = deliveringRes.status === 'fulfilled' ? (deliveringRes.value?.count || 0) : 0
      const completed = completedRes.status === 'fulfilled' ? (completedRes.value?.count || 0) : 0

      setStats({ pending, delivering, completed, today: pending + delivering })
    } catch (e) {
      console.error('加载骑手统计失败', e)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    if (isLoggedIn) {
      loadStats()
    }
  }, [isLoggedIn, loadStats])

  const navigateToPage = (url: string) => {
    if (!isLoggedIn) {
      Taro.showToast({ title: '请先登录', icon: 'none', duration: 1500 })
      return
    }
    Taro.navigateTo({ url })
  }

  if (!isLoggedIn && !userLoading) {
    return (
      <View className="bg-gray-100 min-h-screen p-4">
        <View className="bg-white rounded-xl p-4">
          <Text className="text-gray-700">请先登录后再进入骑手中心</Text>
          <View className="mt-3">
            <Button type="primary" onClick={() => Taro.navigateTo({ url: '/passport/login' })}>
              去登录
            </Button>
          </View>
        </View>
      </View>
    )
  }

  const statCards = [
    { label: '待取货', value: stats.pending, color: 'bg-orange-50', textColor: 'text-orange-600' },
    { label: '配送中', value: stats.delivering, color: 'bg-blue-50', textColor: 'text-blue-600' },
    { label: '已完成', value: stats.completed, color: 'bg-green-50', textColor: 'text-green-600' },
    { label: '今日任务', value: stats.today, color: 'bg-purple-50', textColor: 'text-purple-600' },
  ]

  return (
    <View className="bg-gray-100 min-h-screen">
      {/* 头部信息 */}
      <View className="px-4 py-6 relative overflow-hidden" style={themeStyles.primaryBackground}>
        <View
          className="absolute w-32 h-32 rounded-full"
          style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)', top: '-16px', right: '-16px' }}
        ></View>
        <View
          className="absolute w-24 h-24 rounded-full"
          style={{ backgroundColor: 'rgba(255, 255, 255, 0.08)', bottom: '-12px', left: '-12px' }}
        ></View>

        <View className="flex items-center justify-between relative z-10">
          <View className="flex items-center">
            <Avatar
              size="50"
              src={getAvatarUrl()}
              icon={<User />}
              className="mr-4"
              style={{ border: '2px solid rgba(255, 255, 255, 0.3)' }}
            />
            <View>
              <View className="text-white text-lg font-bold mb-1">{getDisplayName()}</View>
              <View className="text-sm" style={{ color: 'rgba(255, 255, 255, 0.8)' }}>
                骑手中心
              </View>
            </View>
          </View>
          <Button
            size="small"
            style={{
              background: 'rgba(255, 255, 255, 0.18)',
              color: '#fff',
              border: '1px solid rgba(255, 255, 255, 0.25)'
            }}
            loading={loading}
            onClick={loadStats}
          >
            <Refresh size="14" />
          </Button>
        </View>
      </View>

      {/* 数据统计卡片 */}
      <View className="mx-4 -mt-6 rounded-xl bg-white p-4 relative z-10">
        <View className="font-semibold text-gray-400 text-sm mb-3">今日概览</View>
        <View className="grid grid-cols-4 gap-2">
          {statCards.map((card) => (
            <View key={card.label} className={`${card.color} rounded-lg p-3 text-center`}>
              <View className={`text-2xl font-bold ${card.textColor}`}>{card.value}</View>
              <View className="text-xs text-gray-500 mt-1">{card.label}</View>
            </View>
          ))}
        </View>
      </View>

      {/* 快捷功能入口 */}
      <View className="bg-white mx-4 mt-4 rounded-xl p-4">
        <View className="font-semibold mb-4 text-gray-800">快捷功能</View>
        <ConfigProvider>
          <Grid
            columns={3}
            style={{
              '--nutui-grid-border-color': 'transparent',
              '--nutui-grid-item-border-width': '0px',
              border: 'none'
            } as React.CSSProperties}
          >
            <Grid.Item text="待取货" onClick={() => navigateToPage('/rider/orders/index')}>
              <View className="text-center">
                <View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Order color="#f97316" size="20" />
                </View>
                {stats.pending > 0 && (
                  <View className="absolute top-0 right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {stats.pending > 9 ? '9+' : stats.pending}
                  </View>
                )}
              </View>
            </Grid.Item>

            <Grid.Item text="配送中" onClick={() => navigateToPage('/rider/orders/index')}>
              <View className="text-center">
                <View className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Location color="#3b82f6" size="20" />
                </View>
                {stats.delivering > 0 && (
                  <View className="absolute top-0 right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {stats.delivering > 9 ? '9+' : stats.delivering}
                  </View>
                )}
              </View>
            </Grid.Item>

            <Grid.Item text="全部订单" onClick={() => navigateToPage('/rider/orders/index')}>
              <View className="text-center">
                <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Order color="#6b7280" size="20" />
                </View>
              </View>
            </Grid.Item>
          </Grid>
        </ConfigProvider>
      </View>

      {/* 提示信息 */}
      {stats.today === 0 && !loading && (
        <View className="mx-4 mt-4">
          <Empty description="暂无配送任务" imageSize={60} />
        </View>
      )}

      <View className="h-20"></View>
    </View>
  )
}

export default RiderIndex
