import { Image, Descriptions, Tag, Table, theme } from 'antd';
import type { Order } from '../data';
import { ORDER_STATUS_CONFIG, PAYMENT_METHOD_CONFIG } from '../constants';
import { useIntl } from '@umijs/max';

interface OrderDetailProps {
  visible: boolean;
  order: Order | null;
  onClose: () => void;
}

const OrderDetail: React.FC<OrderDetailProps> = ({ visible, order, onClose }) => {
  const intl = useIntl();
  const { token } = theme.useToken();

  if (!visible || !order) return null;

  return (
    <div style={{ padding: token.paddingMD }}>
      <Descriptions
        title={intl.formatMessage({ id: 'order.detail.basicInfo', defaultMessage: '基本信息' })}
        bordered
        column={2}
        style={{ marginBottom: token.marginLG }}
      >
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.orderNo', defaultMessage: '订单编号' })}>
          {order.orderNo}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.status', defaultMessage: '订单状态' })}>
          <Tag color={ORDER_STATUS_CONFIG[order.status].color}>
            {ORDER_STATUS_CONFIG[order.status].label}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.customerName', defaultMessage: '客户姓名' })}>
          {order.customerName}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.customerPhone', defaultMessage: '联系电话' })}>
          {order.customerPhone}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.customerEmail', defaultMessage: '邮箱' })}>
          {order.customerEmail || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.paymentMethod', defaultMessage: '支付方式' })}>
          <Tag color={PAYMENT_METHOD_CONFIG[order.paymentMethod].color}>
            {PAYMENT_METHOD_CONFIG[order.paymentMethod].label}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.totalAmount', defaultMessage: '订单金额' })}>
          <span style={{ color: token.colorError, fontWeight: 'bold', fontSize: 16 }}>
            ¥{order.totalAmount.toLocaleString()}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.paymentTime', defaultMessage: '支付时间' })}>
          {order.paymentTime || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.shippingAddress', defaultMessage: '收货地址' })} span={2}>
          {order.shippingAddress || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.remark', defaultMessage: '备注' })} span={2}>
          {order.remark || '-'}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title={intl.formatMessage({ id: 'order.detail.logisticsInfo', defaultMessage: '物流信息' })}
        bordered
        column={2}
        style={{ marginBottom: token.marginLG }}
      >
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.shippingCompany', defaultMessage: '物流公司' })}>
          {order.shippingCompany || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.shippingNo', defaultMessage: '物流单号' })}>
          {order.shippingNo || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.shippedAt', defaultMessage: '发货时间' })}>
          {order.shippedAt || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.completedAt', defaultMessage: '完成时间' })}>
          {order.completedAt || '-'}
        </Descriptions.Item>
      </Descriptions>

      {order.status === 'cancelled' && (
        <Descriptions
          title={intl.formatMessage({ id: 'order.detail.cancelInfo', defaultMessage: '取消信息' })}
          bordered
          column={1}
          style={{ marginBottom: token.marginLG }}
        >
          <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.cancelReason', defaultMessage: '取消原因' })}>
            {order.cancelReason}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'order.detail.cancelledAt', defaultMessage: '取消时间' })}>
            {order.cancelledAt}
          </Descriptions.Item>
        </Descriptions>
      )}

      <Descriptions title={intl.formatMessage({ id: 'order.detail.productList', defaultMessage: '商品清单' })} bordered column={1}>
        <Descriptions.Item>
          <Table
            dataSource={order.items}
            rowKey="id"
            pagination={false}
            size="small"
            columns={[
              {
                title: intl.formatMessage({ id: 'order.detail.productImage', defaultMessage: '商品图片' }),
                dataIndex: 'productImage',
                render: (url) => <Image src={url} width={60} height={60} style={{ borderRadius: 4, objectFit: 'cover' }} />,
              },
              {
                title: intl.formatMessage({ id: 'order.detail.productName', defaultMessage: '商品名称' }),
                dataIndex: 'productName',
              },
              {
                title: intl.formatMessage({ id: 'order.detail.price', defaultMessage: '单价' }),
                dataIndex: 'price',
                render: (val) => `¥${val.toLocaleString()}`,
              },
              {
                title: intl.formatMessage({ id: 'order.detail.quantity', defaultMessage: '数量' }),
                dataIndex: 'quantity',
              },
              {
                title: intl.formatMessage({ id: 'order.detail.subtotal', defaultMessage: '小计' }),
                dataIndex: 'subtotal',
                render: (val) => (
                  <span style={{ color: token.colorError, fontWeight: 'bold' }}>
                    ¥{val.toLocaleString()}
                  </span>
                ),
              },
            ]}
          />
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
};

export default OrderDetail;
