import { useEffect, useRef, useState } from 'react'
import { getCoinIcon } from '@shared/assets/coins'
import { NETWORKS } from '../model/networks'
import styles from './NetworksTable.module.css'

/** Иконка сети: настоящий логотип монеты из центральной точки, иначе — глиф-фолбэк. */
function NetworkIcon({ ticker, cls, glyph }: { ticker: string; cls: string; glyph: string }) {
  const logo = getCoinIcon(ticker)
  return (
    <div className={`${styles.icon} ${styles[`icon_${cls}`]} ${logo ? styles.iconHasLogo : ''}`}>
      {logo ? <img src={logo} alt={ticker} className={styles.iconImg} /> : glyph}
    </div>
  )
}

export function NetworksTable() {
  const sectionRef = useRef<HTMLElement>(null)
  const [animated, setAnimated] = useState(false)

  useEffect(() => {
    const el = sectionRef.current
    if (!el) return

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) {
          setAnimated(true)
          observer.disconnect()
        }
      },
      { threshold: 0.3 },
    )

    observer.observe(el)
    return () => observer.disconnect()
  }, [])

  return (
    <section ref={sectionRef} className={styles.section}>
      <div className={styles.wrap}>
        <h2 className={styles.title}>Поддерживаемые сети</h2>
        <div className={styles.tableWrap}>
          <table className={styles.table}>
            <thead>
              <tr>
                <th>Сеть</th>
                <th>Скорость</th>
                <th>Комиссия</th>
                <th>Подтверждение</th>
              </tr>
            </thead>
            <tbody>
              {NETWORKS.map((n) => (
                <tr key={n.ticker}>
                  <td>
                    <div className={styles.name}>
                      <NetworkIcon ticker={n.ticker} cls={n.cls} glyph={n.icon} />
                      <span className={styles.label}>{n.name}</span>
                      <span className={styles.ticker}>{n.ticker}</span>
                    </div>
                  </td>
                  <td>
                    <div className={styles.speedBar}>
                      <div
                        className={styles.speedFill}
                        style={{ width: animated ? `${n.speed}%` : '0%', background: n.color }}
                      />
                    </div>
                  </td>
                  <td>
                    <span className={styles.fee}>{n.fee}</span>
                  </td>
                  <td>
                    <span className={styles.confirm}>{n.confirm}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className={styles.cards} data-inview={animated || undefined}>
          {NETWORKS.map((n, i) => (
            <div
              key={n.ticker}
              className={styles.card}
              style={{ transitionDelay: `${i * 80}ms` }}
            >
              <div className={styles.cardHead}>
                <NetworkIcon ticker={n.ticker} cls={n.cls} glyph={n.icon} />
                <span className={styles.label}>{n.name}</span>
                <span className={styles.ticker}>{n.ticker}</span>
              </div>

              <div className={styles.cardRow}>
                <span className={styles.cardKey}>Скорость</span>
                <div className={styles.speedBar}>
                  <div
                    className={styles.speedFill}
                    style={{ width: animated ? `${n.speed}%` : '0%', background: n.color }}
                  />
                </div>
              </div>

              <div className={styles.cardRow}>
                <span className={styles.cardKey}>Комиссия</span>
                <span className={styles.fee}>{n.fee}</span>
              </div>

              <div className={styles.cardRow}>
                <span className={styles.cardKey}>Подтверждение</span>
                <span className={styles.confirm}>{n.confirm}</span>
              </div>
            </div>
          ))}
        </div>

        <div className={styles.footnote}>
          * Комиссии и время подтверждения указаны приблизительно и зависят от загруженности сети
        </div>
      </div>
    </section>
  )
}
