import { View, Text, Image } from '@tarojs/components'
import { InferResponseType } from 'hono'
import { orderClient } from '@/api'
import OrderButtonBar from '../OrderButtonBar'

type OrderResponse = InferResponseType<typeof orderClient.$get, 200>
type Order = OrderResponse['data'][0]

interface OrderCardProps {
  order: Order
  orderStatusMap: Record<string, { text: string; color: string; bgColor: string }>
  payStatusMap: Record<string, { text: string; color: string; bgColor: string }>
  onViewDetail: (order: Order) => void
}

export default function OrderCard({ order, orderStatusMap, payStatusMap, onViewDetail }: OrderCardProps) {
  // 使用orderGoods关联关系获取商品信息
  const orderGoods = order.orderGoods || []

  // 计算订单商品数量
  const getOrderItemCount = (order: Order) => {
    return orderGoods.reduce((sum: number, item: any) => sum + (item.num || 0), 0)
  }

  const totalQuantity = getOrderItemCount(order)

  // 安全获取支付状态信息
  const getPayStatusInfo = (payState: number) => {
    const status = payStatusMap[payState.toString()]
    return status || { text: '未知状态', color: 'text-gray-500', bgColor: 'bg-gray-100' }
  }

  // 安全获取订单状态信息
  const getOrderStatusInfo = (state: number) => {
    const status = orderStatusMap[state.toString()]
    return status || { text: '未知状态', color: 'text-gray-500', bgColor: 'bg-gray-100' }
  }

  const payStatusInfo = getPayStatusInfo(order.payState)
  const orderStatusInfo = getOrderStatusInfo(order.state)

  return (
    <View className="bg-white rounded-lg shadow-sm mb-4 overflow-hidden">
      {/* 订单头部 */}
      <View className="px-4 py-3 border-b border-gray-100 flex justify-between items-center">
        <View className="flex items-center">
          <Text className="text-sm text-gray-600">订单号: {order.orderNo}</Text>
        </View>
        <View
          className={`px-2 py-1 rounded-full text-xs font-medium ${payStatusInfo.bgColor} ${payStatusInfo.color}`}
        >
          {payStatusInfo.text}
        </View>
      </View>

      {/* 商品列表 */}
      <View className="px-4 py-3">
        {orderGoods.slice(0, 3).map((item: any, index: number) => (
          <View key={index} className="flex items-center py-2">
            <Image
              src={item.imageFile?.fullUrl || ''}
              className="w-16 h-16 rounded-lg mr-3"
              mode="aspectFill"
            />
            <View className="flex-1">
              <Text className="text-sm font-medium line-clamp-2">
                {item.goodsName}
              </Text>
              <Text className="text-sm text-gray-500 mt-1">
                ¥{item.price.toFixed(2)} × {item.num}
              </Text>
            </View>
          </View>
        ))}

        {orderGoods.length > 3 && (
          <View className="text-center mt-2">
            <Text className="text-sm text-gray-500">
              共 {totalQuantity} 件商品
            </Text>
          </View>
        )}
      </View>

      {/* 订单底部信息 */}
      <View className="px-4 py-3 border-t border-gray-100">
        <View className="flex justify-between items-center mb-3">
          <View className="flex items-center">
            <Text className="text-sm text-gray-600">实付款: </Text>
            <Text className="text-sm font-semibold text-red-500">
              ¥{order.payAmount.toFixed(2)}
            </Text>
          </View>
          <View
            className={`px-2 py-1 rounded-full text-xs font-medium ${orderStatusInfo.bgColor} ${orderStatusInfo.color}`}
          >
            {orderStatusInfo.text}
          </View>
        </View>

        {/* 操作按钮栏 */}
        <OrderButtonBar
          order={order}
          onViewDetail={onViewDetail}
        />
      </View>
    </View>
  )
}