import type { TrxSwapQuoteData } from '@features/wallet'
import styles from './TrxConfirmModal.module.css'

interface Props {
  quote: TrxSwapQuoteData
  fromSymbol: string
  toSymbol: string
  amountHuman: string
  insufficientBalance?: boolean
  onConfirm: () => void
  onClose: () => void
}

export function TrxConfirmModal({ quote, fromSymbol, toSymbol, amountHuman, insufficientBalance, onConfirm, onClose }: Props) {
  const { expectedOutFormatted, minOutFormatted, fees } = quote

  return (
    <div className={styles.overlay} onClick={onClose}>
      <div className={styles.card} onClick={e => e.stopPropagation()}>
        <div className={styles.header}>
          <span className={styles.title}>Подтвердить своп</span>
          <button className={styles.closeBtn} onClick={onClose}>×</button>
        </div>

        <div className={styles.flow}>
          <div className={styles.token}>
            <span className={styles.tokenLabel}>Отдаёте</span>
            <span className={styles.tokenAmount}>{amountHuman} {fromSymbol}</span>
          </div>

          <div className={styles.arrow}>↓</div>

          <div className={styles.token}>
            <span className={styles.tokenLabel}>Получаете</span>
            <span className={styles.tokenAmount}>{expectedOutFormatted} {toSymbol}</span>
            <span className={styles.minOut}>Минимум: {minOutFormatted} {toSymbol}</span>
          </div>
        </div>

        <div className={styles.details}>
          <div className={styles.row}>
            <span className={styles.rowLabel}>Комиссия сети</span>
            <span className={styles.rowValue}>
              {fees.network.amountFormatted} {fees.network.asset} (≈${fees.network.amountUsd})
            </span>
          </div>
        </div>

        {insufficientBalance && (
          <p className={styles.warning}>
            Введённое количество превышает баланс кошелька — своп будет отклонён.
          </p>
        )}

        <button className={styles.confirmBtn} onClick={onConfirm}>
          Подтвердить
        </button>
      </div>
    </div>
  )
}
