import { ModalForm } from '@ant-design/pro-components';
import { Button, Descriptions, Tag, Typography } from 'antd';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
dayjs.extend(timezone);
const TransactionDetail = ({ snapshot }: { snapshot: API.TransactionSnapshot }) => {
  // 定义标签映射
  const labelMap: Record<string, string> = {
    book_time: '開始時間',
    end_time: '結束時間',
    car: '車輛ID',
    connector: '充電樁ID',
    is_ic_call: 'IC卡支付',
    promotion_code: '優惠券',
    stationID: '站點ID',
    total_fee: '費用',
    total_power: '充電量',
    type: '類型',
    user: '用戶ID',
    with_coupon: '使用優惠券',
  };

  // 值格式化函数
  const formatValue = (key: string, value: any) => {
    switch (key) {
      case 'book_time':
      case 'end_time':
        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');

      case 'total_fee':
        // 确保 value 是数字
        // eslint-disable-next-line no-case-declarations
        const fee = typeof value === 'string' ? parseFloat(value) : Number(value);
        return isNaN(fee) ? (
          <span className="text-red-500 font-medium">HK${fee.toFixed(2)}</span>
        ) : (
          <span className="text-red-500 font-medium">HK${fee.toFixed(2)}</span>
        );
      case 'total_power':
        return `${value}kWh`;

      case 'type':
        return value === 'walking' ? 'Walk In' : value;

      case 'is_ic_call':
      case 'with_coupon':
        return <Tag color={value ? 'green' : 'default'}>{value ? '是' : '否'}</Tag>;

      case 'promotion_code':
        if (!Array.isArray(value) || value.length === 0) {
          return '無';
        }
        return (
          <div className="flex flex-col gap-1">
            {value.map((code: string) => (
              <Tag key={code}>
                <Typography.Text copyable>{code}</Typography.Text>
              </Tag>
            ))}
          </div>
        );

      case 'car':
      case 'user':
      case 'stationID':
      case 'connector':
        return <Typography.Text copyable>{value}</Typography.Text>;

      default:
        return String(value);
    }
  };

  // 生成描述列表项
  const items = Object.entries(snapshot).map(([key, value]) => (
    <Descriptions.Item
      key={key}
      label={labelMap[key] || key}
      span={key === 'promotion_code' ? 3 : 1}
    >
      {formatValue(key, value)}
    </Descriptions.Item>
  ));

  return (
    <ModalForm
      title="交易詳情"
      trigger={<Button type="link">詳情</Button>}
      submitter={false}
      modalProps={{
        centered: true,
        width: 800,
        destroyOnClose: true,
      }}
    >
      <Descriptions bordered column={3} size="small" labelStyle={{ width: '120px' }}>
        {items}
      </Descriptions>
    </ModalForm>
  );
};

export default TransactionDetail;
