import React from "react";
import {Image, Space, Tag, Button} from '@nutui/nutui-react-taro'
import {Truck, User, Shield, Location} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {HjmCar} from "@/api/hjm/hjmCar/model";

interface BestSellersProps {
  data: HjmCar[]
  onRefresh?: () => void
}

/**
 * 车辆列表组件
 */
const BestSellers: React.FC<BestSellersProps> = ({data, onRefresh}) => {

  // 获取保险状态显示
  const getInsuranceStatusDisplay = (status?: number) => {
    switch (status) {
      case 0:
        return {text: '未投保', color: '#ff4d4f', bgColor: '#fff2f0'}
      case 1:
        return {text: '已投保', color: '#52c41a', bgColor: '#f6ffed'}
      case 2:
        return {text: '即将到期', color: '#faad14', bgColor: '#fffbe6'}
      default:
        return {text: '未知', color: '#8c8c8c', bgColor: '#f5f5f5'}
    }
  }

  // 跳转到车辆详情
  const navigateToDetail = (item: HjmCar) => {
    Taro.navigateTo({
      url: `/hjm/query?id=${item.id}`
    })
  }

  // 快速报险
  const quickInsurance = (item: HjmCar, event: any) => {
    event.stopPropagation()
    Taro.navigateTo({
      url: `/hjm/bx/bx-add?carId=${item.id}&carCode=${item.code}`
    })
  }

  if (!data || data.length === 0) {
    return null
  }

  return (
    <div style={{padding: '0 16px', marginBottom: '16px'}}>
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '12px'
      }}>
        {data.map((item, index) => {
          const insuranceStatus = getInsuranceStatusDisplay(item.insuranceStatus)

          return (
            <div
              key={index}
              style={{
                backgroundColor: '#fff',
                borderRadius: '12px',
                padding: '16px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                border: '1px solid #f0f0f0'
              }}
              onClick={() => navigateToDetail(item)}
            >
              <div style={{display: 'flex', gap: '12px'}}>
                {/* 车辆图片 */}
                <div style={{flexShrink: 0}}>
                  <Image
                    src={item.image || 'https://via.placeholder.com/80x80?text=车辆'}
                    mode="aspectFill"
                    radius="8px"
                    width="80"
                    height="80"
                    style={{
                      border: '1px solid #f0f0f0'
                    }}
                  />
                </div>

                {/* 车辆信息 */}
                <div style={{flex: 1, minWidth: 0}}>
                  <Space direction="vertical" size={8}>
                    {/* 车辆编号 */}
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '8px'
                    }}>
                      <Truck size={16} color="#1890ff"/>
                      <span style={{
                        fontSize: '16px',
                        fontWeight: 'bold',
                        color: '#262626'
                      }}>
                        {item.code || '未知编号'}
                      </span>
                    </div>

                    {/* 快递公司 */}
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '8px'
                    }}>
                      <Location size={14} color="#8c8c8c"/>
                      <span style={{fontSize: '13px', color: '#8c8c8c'}}>
                        快递公司：
                      </span>
                      <span style={{fontSize: '13px', color: '#595959'}}>
                        {item.parentOrganization || '未知'}
                      </span>
                    </div>

                    {/* 保险状态 */}
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '8px'
                    }}>
                      <Shield size={14} color="#8c8c8c"/>
                      <span style={{fontSize: '13px', color: '#8c8c8c'}}>
                        保险状态：
                      </span>
                      <Tag
                        color={insuranceStatus.color}
                        style={{
                          backgroundColor: insuranceStatus.bgColor,
                          border: `1px solid ${insuranceStatus.color}`,
                          fontSize: '12px'
                        }}
                      >
                        {insuranceStatus.text}
                      </Tag>
                    </div>

                    {/* 操作员 */}
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '8px'
                    }}>
                      <User size={14} color="#8c8c8c"/>
                      <span style={{fontSize: '13px', color: '#8c8c8c'}}>
                        操作员：
                      </span>
                      <span style={{fontSize: '13px', color: '#595959'}}>
                        {item.driver || '未绑定'}
                      </span>
                    </div>
                  </Space>
                </div>
              </div>

              {/* 操作按钮 */}
              <div style={{
                marginTop: '12px',
                paddingTop: '12px',
                borderTop: '1px solid #f0f0f0',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}>
                <Button
                  type="primary"
                  size="small"
                  onClick={(e) => quickInsurance(item, e)}
                  style={{
                    borderRadius: '16px',
                    fontSize: '12px'
                  }}
                >
                  一键报险
                </Button>

                <Button
                  type="default"
                  size="small"
                  onClick={() => navigateToDetail(item)}
                  style={{
                    borderRadius: '16px',
                    fontSize: '12px'
                  }}
                >
                  查看详情
                </Button>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default BestSellers