import { View, Text, Button, Image } from '@tarojs/components'
import { useLoad, useRouter, navigateTo } from '@tarojs/taro'
import { useState, useEffect } from 'react'

export default function PaySuccessPage() {
  const router = useRouter()
  const {
    totalPrice = '0',
    passengerCount = '0',
    orderId = '',
    orderType = 'bus'
  } = router.params

  const [assigningDriver, setAssigningDriver] = useState(false)
  const [driverAssigned, setDriverAssigned] = useState(false)
  const [driverInfo, setDriverInfo] = useState<any>(null)

  useLoad(() => {
    // 支付成功后自动分配司机
    if (orderId) {
      assignDriver()
    }
  })

  // 分配司机
  const assignDriver = async () => {
    if (!orderId) {
      console.warn('订单ID为空，跳过司机分配')
      return
    }

    setAssigningDriver(true)

    try {
      // TODO: 待司机分配API开发完成后替换为真实API调用
      // const result = await api.drivers.assignToOrder(orderId, orderType)
      // setDriverInfo(result.data)

      // 模拟司机分配过程
      setTimeout(() => {
        const mockDriverInfo = {
          driverName: '李师傅',
          rating: 4.9,
          carNumber: '京A12345',
          carModel: '奔驰V级商务车',
          estimatedArrival: {
            display: '约15分钟'
          }
        }

        setAssigningDriver(false)
        setDriverAssigned(true)
        setDriverInfo(mockDriverInfo)
      }, 2000)

    } catch (error) {
      setAssigningDriver(false)
      console.error('司机分配失败:', error)
    }
  }

  // 查看订单
  const handleViewOrder = () => {
    navigateTo({
      url: '/pages/orders/orders'
    })
  }

  // 返回首页
  const handleBackToHome = () => {
    navigateTo({
      url: '/pages/home/index'
    })
  }

  return (
    <View className="min-h-screen bg-gradient-to-b from-blue-500 to-blue-600 p-8 text-center">
      {/* 成功图标 */}
      <Image
        src="/static/success.png"
        className="w-30 h-30 mb-8 mx-auto"
        mode="aspectFit"
      />
      <Text className="text-white text-4xl font-bold mb-12">支付成功！</Text>

      {/* 支付信息 */}
      <View className="bg-white/95 rounded-card p-8 mb-8 backdrop-blur-sm">
        <View className="flex justify-between items-center mb-4">
          <Text className="text-sm text-gray-600">支付金额</Text>
          <Text className="text-base font-bold text-gray-900">¥{totalPrice}</Text>
        </View>
        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-600">购票数量</Text>
          <Text className="text-base font-bold text-gray-900">{passengerCount}张</Text>
        </View>
      </View>

      {/* 积分奖励 */}
      <View className="bg-white/95 rounded-card p-8 mb-12 backdrop-blur-sm">
        <Text className="text-base font-bold text-gray-900 mb-6">本次获得奖励</Text>
        <View className="flex justify-center gap-12 mb-6">
          <View className="flex flex-col items-center">
            <Text className="text-4xl mb-3">💰</Text>
            <Text className="text-3xl font-bold text-blue-600 mb-2">+{Math.floor(parseFloat(totalPrice))}</Text>
            <Text className="text-xs text-gray-600">积分</Text>
          </View>
          <View className="flex flex-col items-center">
            <Text className="text-4xl mb-3">💎</Text>
            <Text className="text-3xl font-bold text-blue-600 mb-2">+{Math.floor(parseFloat(totalPrice))}</Text>
            <Text className="text-xs text-gray-600">会员值</Text>
          </View>
        </View>
        <Text className="text-xs text-gray-500 leading-5">
          消费1元得1积分+1会员值，积分可兑换优惠券
        </Text>
      </View>

      {/* 司机分配状态 */}
      <View className="mx-8 mb-12">
        {assigningDriver && (
          <View className="bg-white/95 rounded-card p-12 text-center backdrop-blur-sm border border-white/40 shadow-lg">
            <Text className="text-8xl mb-6 animate-bounce">🚗</Text>
            <Text className="text-base font-semibold text-gray-900 mb-3">正在为您分配司机...</Text>
            <Text className="text-xs text-gray-600">预计需要1-2分钟</Text>
          </View>
        )}

        {driverAssigned && driverInfo && (
          <View className="bg-white/95 rounded-card p-8 backdrop-blur-sm border border-white/40 shadow-lg animate-slideInUp">
            <View className="flex items-center justify-center mb-6">
              <Text className="text-base mr-3">✅</Text>
              <Text className="text-base font-semibold text-success">司机分配成功</Text>
            </View>
            <View className="bg-blue-50 rounded-medium p-6 border border-blue-100">
              <View className="flex items-center justify-between mb-5 pb-4 border-b border-blue-100">
                <Text className="text-lg font-semibold text-gray-900">{driverInfo.driverName}</Text>
                <Text className="text-sm text-warning">⭐ {driverInfo.rating}</Text>
              </View>
              <View className="mt-4">
                <View className="flex items-center mb-3">
                  <Text className="text-sm text-gray-600 w-28 flex-shrink-0">车牌号：</Text>
                  <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.carNumber}</Text>
                </View>
                <View className="flex items-center mb-3">
                  <Text className="text-sm text-gray-600 w-28 flex-shrink-0">车型：</Text>
                  <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.carModel}</Text>
                </View>
                <View className="flex items-center">
                  <Text className="text-sm text-gray-600 w-28 flex-shrink-0">预计到达：</Text>
                  <Text className="text-sm text-gray-900 font-medium flex-1">{driverInfo.estimatedArrival.display}</Text>
                </View>
              </View>
            </View>
          </View>
        )}
      </View>

      {/* 操作按钮 */}
      <View className="flex gap-6">
        <Button
          className="flex-1 bg-white/90 text-blue-600 border-2 border-blue-600 rounded-button py-6 text-base font-bold backdrop-blur-sm"
          onClick={handleBackToHome}
        >
          返回首页
        </Button>
        <Button
          className="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-button py-6 text-base font-bold shadow-lg"
          onClick={handleViewOrder}
        >
          查看订单
        </Button>
      </View>
    </View>
  )
}