import { ProColumns } from '@ant-design/pro-components';
import { Tag } from 'antd';
import dayjs from 'dayjs';

export const TopUpTransactionColumns = ({
  mainTableReload,
}: {
  mainTableReload: () => void;
}): ProColumns<API.TopUpTransaction>[] => [
  {
    title: '訂單編號',
    dataIndex: 'out_trade_no',
    width: 200,
    ellipsis: true,
    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: 'amount',
    width: 120,
    render: (amount) => `HKD$${amount}`,
    sorter: (a, b) => a.amount - b.amount,
  },

  {
    title: '支付狀態',
    dataIndex: ['snapshot', 'status'],
    width: 100,
    render: (status) => {
      const statusMap: Record<string, { text: string; color: string }> = {
        '1': { text: '支付成功', color: 'success' },
        '0': { text: '支付失敗', color: 'error' },
      };
      const { text, color } = statusMap[status as any] || { text: '未知', color: 'default' };
      return <Tag color={color}>{text}</Tag>;
    },
  },
  {
    title: '支付時間',
    dataIndex: ['snapshot', 'paydtm'],
    width: 160,
    render: (time) => (time ? dayjs(time as string).format('YYYY-MM-DD HH:mm:ss') : '-'),
  },
  {
    title: '錢包餘額',
    dataIndex: ['user', 'wallet'],
    width: 120,
    render: (wallet) => `HKD$${(wallet as number)?.toFixed(2)}`,
  },
  {
    title: '交易流水號',
    dataIndex: ['snapshot', 'syssn'],
    width: 200,
    ellipsis: true,
    copyable: true,
  },
  {
    title: '支付卡號',
    dataIndex: ['snapshot', 'outcardnm'],
    width: 150,
    ellipsis: true,
  },
  {
    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'),
  },
];
