import logo from '@shared/assets/logo-full-white.png'
import { getCoinIcon } from '@shared/assets/coins'
import { useConversionCycle } from '../model/useConversionCycle'
import { useTilt } from '../model/useTilt'
import styles from './ConversionFlow.module.css'

const PATH = 'M60 68 C100 160, 250 140, 210 230 C170 310, 300 320, 350 360'

const btcLogo = getCoinIcon('BTC')
const ethLogo = getCoinIcon('ETH')
const usdtLogo = getCoinIcon('USDT')

export function ConversionFlow() {
  const { rub, usdt, active, settled } = useConversionCycle()
  const tiltRef = useTilt<HTMLDivElement>()

  return (
    <div className={styles.flow} ref={tiltRef}>
      <div className={`${styles.ghost} ${styles.ghostBtc}`}>
        {btcLogo
          ? <img src={btcLogo} alt="BTC" className={styles.ghostImg} />
          : <span style={{ fontSize: 20, color: '#F7931A' }}>₿</span>}
      </div>
      <div className={`${styles.ghost} ${styles.ghostEth}`}>
        {ethLogo
          ? <img src={ethLogo} alt="ETH" className={styles.ghostImg} />
          : <span style={{ fontSize: 20, color: '#627EEA' }}>Ξ</span>}
      </div>

      <div className={`${styles.card} ${styles.cardRub}`}>
        <div className={`${styles.logoCircle} ${styles.logoRub}`}>₽</div>
        <div className={`${styles.badge} ${styles.badgeRub}`}>
          {rub}
          {active === 'rub' && <span className={styles.caret} />}
        </div>
      </div>

      <div className={`${styles.card} ${styles.cardEksa}`}>
        <img src={logo} alt="ЭКСА" className={styles.eksaLogo} />
      </div>

      <div className={`${styles.card} ${styles.cardUsdt}`}>
        <div className={`${styles.logoCircle} ${styles.logoUsdt} ${usdtLogo ? styles.logoHasImg : ''}`}>
          {usdtLogo ? <img src={usdtLogo} alt="USDT" className={styles.logoImg} /> : '₮'}
        </div>
        <div className={`${styles.badge} ${styles.badgeUsdt}`}>
          {usdt}
          {active === 'usdt' && <span className={styles.caret} />}
        </div>
        <div className={`${styles.status} ${settled ? '' : styles.statusPending}`}>
          <span className={styles.statusDot} />
          {settled ? '✓ Зачислено' : 'Конвертация…'}
        </div>
      </div>

      <svg
        className={styles.path}
        viewBox="0 0 420 460"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        <defs>
          <linearGradient id="pathGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="rgba(255,255,255,0.4)" />
            <stop offset="100%" stopColor="#26A17B" />
          </linearGradient>
        </defs>
        <path
          className={styles.dashLine}
          d={PATH}
          stroke="url(#pathGrad)"
          strokeWidth={2}
          strokeDasharray="8 6"
          fill="none"
        />
        <path
          d={PATH}
          stroke="url(#pathGrad)"
          strokeWidth={8}
          strokeDasharray="8 6"
          opacity={0.08}
          fill="none"
        />
        <g className={styles.traveler}>
          <circle r={8} fill="#26A17B" opacity={0.25}>
            <animateMotion dur="5s" repeatCount="indefinite" path={PATH} />
          </circle>
          <circle r={3.5} fill="#26A17B">
            <animateMotion dur="5s" repeatCount="indefinite" path={PATH} />
          </circle>
          <circle r={2} fill="#fff" opacity={0.7}>
            <animateMotion dur="5s" begin="-2.5s" repeatCount="indefinite" path={PATH} />
          </circle>
        </g>
        <circle className={styles.spark} cx={80} cy={110} r={3} fill="#fff" opacity={0.5} />
        <circle className={styles.spark} cx={140} cy={160} r={2.5} fill="#fff" opacity={0.4} />
        <circle className={styles.spark} cx={220} cy={200} r={3} fill="#fff" opacity={0.3} />
        <circle className={styles.spark} cx={200} cy={270} r={2.5} fill="#26A17B" opacity={0.35} />
        <circle className={styles.spark} cx={260} cy={310} r={3} fill="#26A17B" opacity={0.25} />
        <circle className={styles.spark} cx={320} cy={345} r={2} fill="#26A17B" opacity={0.2} />
      </svg>
    </div>
  )
}
