import { ProColumns } from '@ant-design/pro-components';
import { Tag } from 'antd';
import dayjs from 'dayjs';
enum GoodsName {
  WALK_IN = 'Walk In',
  BOOK = 'Book a connector',
  WITHDRAWAL = 'withdrawal',
  PENALTY = 'Penalty',
  MANUAL_REFUND = 'manual_refund',
}
// 用于显示的中文映射
const goodsNameMap: Record<string, string> = {
  [GoodsName.WALK_IN]: '即時充電',
  [GoodsName.BOOK]: '即時充電',
  [GoodsName.WITHDRAWAL]: '自动退款',
  [GoodsName.PENALTY]: '缴付罰款',
  [GoodsName.MANUAL_REFUND]: '手動退款',
};

export const WalletTransactionColumns = ({
  mainTableReload,
}: {
  mainTableReload: () => void;
}): ProColumns<WalletTransaction>[] => [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
    ellipsis: {
      showTitle: true,
    },
    onCell: () => ({
      style: {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        maxWidth: 100,
      },
    }),
    copyable: true,
  },
  {
    title: '訂單編號',
    dataIndex: ['reservation', 'format_order_id'],
    width: 120,
    ellipsis: {
      showTitle: true,
    },
    onCell: () => ({
      style: {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        maxWidth: 100,
      },
    }),
    copyable: true,
  },
  {
    title: '用戶信息',
    dataIndex: ['user', 'nickname'],
    width: 150,
    render: (_, record) => (
      <div>
        <div>{record.user?.nickname || '-'}</div>
        <div>{record.user?.phone || '-'}</div>
        <div>{record.user?.email || '-'}</div>
      </div>
    ),
  },
  {
    title: '交易類型',
    dataIndex: 'goods_name',
    width: 120,
    render: (goodsName) => goodsNameMap[goodsName as GoodsName] || goodsName,
    filters: [
      { text: '即時充電', value: GoodsName.WALK_IN || GoodsName.BOOK },
      { text: '自動退款', value: GoodsName.WITHDRAWAL },
      { text: '繳付罰款', value: GoodsName.PENALTY },
      { text: '手動退款', value: GoodsName.MANUAL_REFUND },
    ],
    onFilter: (value, record) => record.goods_name === value,
  },
  {
    title: '金額',
    dataIndex: 'amount',
    width: 90,
    render: (amount) => `HKD$${amount}`,
    sorter: (a, b) => a.amount - b.amount,
  },
  {
    title: '交易狀態',
    dataIndex: 'status_fk',
    width: 90,
    render: (status) => {
      const statusMap: Record<number, { text: string; color: string }> = {
        1: { text: '成功', color: 'success' },
        0: { text: '失敗', color: 'error' },
      };
      const { text, color } = statusMap[status as number] || { text: '未知', color: 'default' };
      return <Tag color={color}>{text}</Tag>;
    },
  },
  {
    title: '錢包餘額',
    dataIndex: ['user', 'wallet'],
    width: 90,
    render: (wallet) => `HKD$${(wallet as number)?.toFixed(2)}`,
  },
  {
    title: '充電時間',
    dataIndex: ['reservation', 'actual_start_time'],
    width: 220,
    render: (_, record) => (
      <div>
        <div>
          開始：
          {record.reservation?.actual_start_time
            ? dayjs(record.reservation.actual_start_time).format('YYYY-MM-DD HH:mm:ss')
            : '-'}
        </div>
        <div>
          結束：
          {record.reservation?.actual_end_time
            ? dayjs(record.reservation.actual_end_time).format('YYYY-MM-DD HH:mm:ss')
            : '-'}
        </div>
      </div>
    ),
  },
  {
    title: '充電量',
    dataIndex: ['reservation', 'actual_total_power'],
    width: 120,
    render: (power) => (power ? `${power}kWh` : '-'),
  },
  {
    title: '創建時間',
    dataIndex: 'createdAt',
    width: 160,
    sorter: (a, b) => dayjs(a.createdAt).valueOf() - dayjs(b.createdAt).valueOf(),
    render: (time) => dayjs(time as string).format('YYYY-MM-DD HH:mm:ss'),
  },
  {
    title: '更新時間',
    dataIndex: 'updatedAt',
    width: 160,
    sorter: (a, b) => dayjs(a.updatedAt).valueOf() - dayjs(b.updatedAt).valueOf(),
    render: (time) => dayjs(time as string).format('YYYY-MM-DD HH:mm:ss'),
  },
];
