import { useOrganizationWallets } from '@features/admin'
import styles from './OrganizationWallets.module.css'

interface Props {
  orgId: string
}

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 OrganizationWallets({ orgId }: Props) {
  const { data: wallets, isLoading, isError } = useOrganizationWallets(orgId)

  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>Кошельки</h2>

      {isLoading && <div className={styles.state}>Загрузка...</div>}
      {isError && <div className={styles.state}>Не удалось загрузить кошельки</div>}

      {wallets && wallets.length === 0 && (
        <div className={styles.state}>Кошельки ещё не созданы</div>
      )}

      {wallets && wallets.length > 0 && (
        <table className={styles.table}>
          <thead>
            <tr>
              <th>Сеть</th>
              <th>Адрес</th>
              <th>Derivation path</th>
              <th>Создано</th>
            </tr>
          </thead>
          <tbody>
            {wallets.map((wallet) => (
              <tr key={wallet.id}>
                <td>{wallet.chain}</td>
                <td className={styles.mono}>{wallet.address}</td>
                <td className={styles.mono}>{wallet.derivation_path}</td>
                <td>{formatDate(wallet.created_at)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </section>
  )
}