import { useState } from 'react'
import styles from './BalanceCard.module.css'
import topup from '@shared/assets/topup.svg'
import swap from '@shared/assets/swap.svg'
import { Link } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes'
import { usePortfolio } from '@features/wallet'
import { usePaymentQuoteByRub } from '@features/payment'
import { MIN_RUB_AMOUNT } from '@shared/config/constants'

export function BalanceCard() {
  const { data, isLoading } = usePortfolio()
  const [currency, setCurrency] = useState<'usd' | 'rub'>('usd')

  // Курс тянем из quote/rub только когда переключились в рубли (в режиме USD передаём 0 → хук не стреляет).
  const rateQuery = usePaymentQuoteByRub(currency === 'rub' ? MIN_RUB_AMOUNT : 0)
  const rate = Number(rateQuery.data?.usdt_exchange_rate) || 0

  const totalUsd = isLoading || !data || data.totalUsd == null ? null : data.totalUsd

  let display: string
  if (currency === 'usd') {
    display =
      totalUsd == null
        ? '$—'
        : `$${totalUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
  } else {
    display =
      totalUsd == null || rate <= 0
        ? '— ₽'
        : `${(totalUsd * rate).toLocaleString('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₽`
  }

  return (
    <div className={styles.card}>
      <div className={styles.left}>
        <div className={styles.label}>Общий баланс</div>
        <div className={styles.amountRow}>
          <div className={styles.amount}>{display}</div>
          <button
            type="button"
            className={styles.toggle}
            onClick={() => setCurrency(c => (c === 'usd' ? 'rub' : 'usd'))}
            aria-label="Переключить валюту"
          >
            {currency === 'usd' ? '₽' : '$'}
          </button>
        </div>
      </div>
      <div className={styles.actions}>
        <Link to={ROUTES.CONVERTER} className={styles.btn} type="button">
          <img src={swap} alt="swap" />
          Пополнить кошелёк
        </Link>
        <Link to={ROUTES.SWAP} className={styles.btn} type="button">
          <img src={topup} alt="topup" />
          Своп / Бридж
        </Link>
      </div>
    </div>
  )
}
