import { Card, Table, Tag, Typography } from 'antd'
import { KeyOutlined } from '@ant-design/icons'
import { quotaToUsd, getTokenStatusTag, formatTimestamp } from '@/utils/quota'

const { Text } = Typography

interface TokenItem {
  id: number
  name: string
  status: number
  remain_quota: number
  used_quota: number
  unlimited_quota: boolean
  created_time: number
  expired_time: number
}

interface Props {
  tokens: TokenItem[]
  loading: boolean
}

export default function TokenOverview({ tokens, loading }: Props) {
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (status: number) => {
        const tag = getTokenStatusTag(status)
        return <Tag color={tag.color}>{tag.text}</Tag>
      },
    },
    {
      title: '剩余额度',
      key: 'remain',
      width: 120,
      render: (_: any, record: TokenItem) =>
        record.unlimited_quota
          ? <Text style={{ color: '#7DB87D', fontWeight: 500 }}>无限</Text>
          : `$${quotaToUsd(record.remain_quota)}`,
    },
    {
      title: '已用额度',
      dataIndex: 'used_quota',
      key: 'used',
      width: 120,
      render: (val: number) => `$${quotaToUsd(val)}`,
    },
    {
      title: '过期时间',
      dataIndex: 'expired_time',
      key: 'expired',
      width: 120,
      render: (val: number) => val === -1 ? '永不过期' : formatTimestamp(val),
    },
  ]

  return (
    <Card title={<><KeyOutlined style={{ color: '#C8956C' }} /> 令牌概览</>} hoverable className="stat-accent">
      <Table
        dataSource={tokens}
        columns={columns}
        rowKey="id"
        loading={loading}
        pagination={false}
        size="small"
        scroll={{ y: 240 }}
      />
    </Card>
  )
}