import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import type { ShopOrder } from '@/api/shop/shopOrder/model'
import Price from '../Price'

interface OrderCardProps {
  order: ShopOrder
  onClick?: () => void
}

/** 综合 payStatus + deliveryStatus + orderStatus 计算列表卡片状态文案 */
const getCardStatus = (order: ShopOrder): { text: string; color: string } => {
  const { payStatus, deliveryStatus, orderStatus } = order

  if (orderStatus === 2) return { text: '已取消', color: '#999' }
  if (orderStatus === 3) return { text: '取消中', color: '#ff7d00' }
  if (orderStatus === 6) return { text: '已退款', color: '#999' }
  if (orderStatus === 4 || orderStatus === 7) return { text: '退款申请中', color: '#ee0a24' }
  if (orderStatus === 5) return { text: '退款被拒绝', color: '#ee0a24' }

  if (!payStatus) return { text: '待付款', color: '#ee0a24' }
  if (deliveryStatus === 10) return { text: '待发货', color: '#4b9cf5' }
  if (deliveryStatus === 20 || deliveryStatus === 30) return { text: '待收货', color: '#4b9cf5' }
  if (orderStatus === 1) return { text: '已完成', color: '#0e932e' }

  return { text: '已付款', color: '#0e932e' }
}

const OrderCard: React.FC<OrderCardProps> = ({ order, onClick }) => {
  const handleClick = () => {
    if (onClick) {
      onClick()
      return
    }
    Taro.navigateTo({ url: `/pages/order/detail?id=${order.orderId}` })
  }

  const { text: statusText, color: statusColor } = getCardStatus(order)

  // 获取首个商品图片作为封面，或显示默认占位
  const coverImage = order.orderGoods?.[0]?.image || ''
  const hasGoods = (order.orderGoods?.length || 0) > 0

  return (
    <View className='bg-white rounded-lg p-3 mb-3 shadow-sm' onClick={handleClick}>
      {/* 头部：订单号 + 状态 */}
      <View className='flex justify-between items-center mb-3'>
        <Text className='text-sm font-medium text-gray-800'>
          订单号: {order.orderNo}
        </Text>
        <Text className='text-sm font-medium' style={{ color: statusColor }}>
          {statusText}
        </Text>
      </View>

      {/* 商品信息区域 */}
      {hasGoods ? (
        <View className='mb-3'>
          {order.orderGoods?.map((item, idx) => (
            <View key={idx} className='flex flex-row items-start mb-2 last:mb-0'>
              {/* 商品缩略图 */}
              <View className='w-16 h-16 rounded-md bg-gray-100 flex-shrink-0 overflow-hidden'>
                {item.image ? (
                  <Image
                    className='w-full h-full'
                    src={item.image}
                    mode='aspectFill'
                  />
                ) : (
                  <View className='w-full h-full flex items-center justify-center'>
                    <Text className='text-xs text-gray-400'>暂无图片</Text>
                  </View>
                )}
              </View>

              {/* 商品信息 */}
              <View className='flex-1 ml-2 flex flex-col justify-between h-16'>
                <View>
                  <Text className='text-sm text-gray-800 font-medium line-clamp-1'>
                    {item.goodsName || '未知商品'}
                  </Text>
                  {item.spec ? (
                    <Text className='text-xs text-gray-500 mt-1'>
                      规格: {item.spec}
                    </Text>
                  ) : null}
                </View>
                <View className='flex justify-between items-center'>
                  <Price price={item.price || '0'} size='small' />
                  <Text className='text-xs text-gray-500'>
                    x{item.totalNum || 1}
                  </Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      ) : (
        /* 无商品信息时的 fallback */
        <View className='flex flex-row items-start mb-3'>
          <View className='w-16 h-16 rounded-md bg-gray-100 flex-shrink-0 flex items-center justify-center overflow-hidden'>
            {coverImage ? (
              <Image className='w-full h-full' src={coverImage} mode='aspectFill' />
            ) : (
              <Text className='text-xs text-gray-400'>暂无图片</Text>
            )}
          </View>
          <View className='flex-1 ml-2 flex flex-col justify-center h-16'>
            <Text className='text-sm text-gray-800 font-medium line-clamp-2'>
              {order.title || '订单商品'}
            </Text>
            <Text className='text-xs text-gray-500 mt-1'>
              共{order.totalNum || 0}件
            </Text>
          </View>
        </View>
      )}

      {/* 底部：日期 + 金额汇总 */}
      <View className='flex justify-between items-center pt-2 border-t border-gray-50'>
        <Text className='text-xs text-gray-500'>
          {order.createTime?.slice(0, 10)}
        </Text>
        <View className='flex items-center'>
          <Text className='text-xs text-gray-500 mr-1'>
            共{order.totalNum || order.orderGoods?.reduce((sum, g) => sum + (g.totalNum || 1), 0) || 0}件
          </Text>
          <Text className='text-xs text-gray-500 mr-1'>实付</Text>
          <Price price={order.payPrice || order.totalPrice || '0'} size='small' />
        </View>
      </View>
    </View>
  )
}

export default OrderCard