import { useMyPurchaseRequests } from '@features/b2b'
import styles from './PurchaseRequestsList.module.css'

function formatAmount(value: string | null, suffix: string): string {
  if (!value) return '—'
  return `${value} ${suffix}`
}

function formatDate(value: string | null): string {
  if (!value) return '—'
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return '—'
  return d.toLocaleString('ru-RU')
}

export function PurchaseRequestsList() {
  const { data, isLoading, isError } = useMyPurchaseRequests()

  if (isLoading) return <p className={styles.status}>Загрузка...</p>
  if (isError) return <p className={styles.statusError}>Не удалось загрузить заявки. Попробуйте обновить страницу.</p>
  if (!data || data.items.length === 0) return <p className={styles.empty}>У вас пока нет заявок.</p>

  return (
    <div className={styles.tableWrap}>
      <table className={styles.table}>
        <thead>
          <tr>
            <th>USDT</th>
            <th>Сумма ₽</th>
            <th>Курс</th>
            <th>Статус</th>
            <th>Создана</th>
          </tr>
        </thead>
        <tbody>
          {data.items.map((req) => (
            <tr key={req.id}>
              <td className={styles.mono}>{formatAmount(req.usdt_amount, 'USDT')}</td>
              <td className={styles.mono}>{formatAmount(req.rub_amount, '₽')}</td>
              <td className={styles.mono}>{req.exchange_rate ?? '—'}</td>
              <td>
                <span className={styles.statusBadge}>{req.status}</span>
              </td>
              <td>{formatDate(req.created_at)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
