import { USDT_RATE } from '@shared/config/constants'
import logo from '@shared/assets/logo-full-white.png'
import { getCoinIcon } from '@shared/assets/coins'
import { useConversionCycle } from '../model/useConversionCycle'
import styles from './ExchangeCard.module.css'

const usdtLogo = getCoinIcon('USDT')

function BridgeArrow({ begin }: { begin?: string }) {
  return (
    <svg width={48} height={12} viewBox="0 0 48 12" fill="none" aria-hidden="true">
      <line
        x1={0} y1={6} x2={36} y2={6}
        stroke="currentColor" strokeWidth={1.5} strokeDasharray="4 3"
        className={styles.flowLine}
      />
      <path
        d="M34 2l6 4-6 4"
        stroke="currentColor" strokeWidth={1.5}
        strokeLinecap="round" strokeLinejoin="round" fill="none"
      />
      <circle r={2.5} fill="#26A17B" className={styles.bridgeDot}>
        <animateMotion dur="0.9s" begin={begin} repeatCount="indefinite" path="M0 6 H40" />
      </circle>
    </svg>
  )
}

export function ExchangeCard() {
  const { rub, usdt, active, settled } = useConversionCycle()
  // пауза TRANSFER_MS между полями — «средства идут» по мосту
  const transferring = !settled && active === null

  return (
    <div className={styles.card}>
      <div className={`${styles.statusPill} ${settled ? '' : styles.statusPillPending}`}>
        <span className={styles.statusDot} />
        {settled ? 'Операция завершена' : 'Конвертация…'}
      </div>

      <div className={styles.flowRow} data-transferring={transferring || undefined}>
        <div className={styles.curBlock}>
          <div className={`${styles.curIcon} ${styles.rub}`}>₽</div>
          <div className={styles.curAmount}>
            {rub}
            {active === 'rub' && <span className={styles.caret} />}
          </div>
          <div className={styles.curLabel}>Отправлено</div>
        </div>

        <div className={styles.bridge}>
          <div className={styles.bridgeLine}>
            <BridgeArrow />
          </div>
          <div className={styles.bridgeLabel}>
            <img src={logo} alt="ЭКСА" />
          </div>
          <div className={styles.bridgeLine}>
            <BridgeArrow begin="-0.45s" />
          </div>
        </div>

        <div className={styles.curBlock}>
          <div className={`${styles.curIcon} ${styles.usdt} ${usdtLogo ? styles.hasLogo : ''}`}>
            {usdtLogo ? <img src={usdtLogo} alt="USDT" className={styles.curIconImg} /> : '₮'}
          </div>
          <div className={styles.curAmount}>
            {usdt}
            {active === 'usdt' && <span className={styles.caret} />}
          </div>
          <div className={`${styles.curCheck} ${settled ? '' : styles.curCheckPending}`}>
            {settled && (
              <svg width={12} height={12} viewBox="0 0 12 12" fill="none" aria-hidden="true">
                <path
                  d="M2 6l3 3 5-5"
                  stroke="#26A17B" strokeWidth={1.5}
                  strokeLinecap="round" strokeLinejoin="round"
                />
              </svg>
            )}
            {settled ? 'Зачислено' : 'Ожидание…'}
          </div>
        </div>
      </div>

      <div className={styles.divider} />

      <div className={styles.details}>
        <div className={styles.detailRow}>
          <span className={styles.detailLabel}>Курс</span>
          <span className={styles.detailValue}>{USDT_RATE.toFixed(2)} ₽ / USDT</span>
        </div>
        <div className={styles.detailRow}>
          <span className={styles.detailLabel}>Комиссия</span>
          <span className={`${styles.detailValue} ${styles.green}`}>0%</span>
        </div>
      </div>
    </div>
  )
}
