import { Spinner } from '@shared/ui'
import { truncateDecimals } from '@shared/lib/utils/truncateDecimals'
import type { LpPosition } from '@features/pools'
import { formatFeeTier, displaySymbol } from '../model/meta'
import styles from './LpPositionsPanel.module.css'

interface Props {
  positions: LpPosition[]
  onRemove: (tokenId: string) => void
  removePending: boolean
  isLoading?: boolean
  error?: string | null
}

export function LpPositionsPanel({ positions, onRemove, removePending, isLoading, error }: Props) {
  const empty = positions.length === 0

  return (
    <div className={styles.panel}>
      <div className={styles.inner}>
        <div className={styles.head}>
          <span className={styles.title}>Мои позиции</span>
          <div className={styles.total}>
            {positions.length} <span className={styles.totalUnit}>NFT</span>
          </div>
        </div>

        <div className={styles.body}>
          {isLoading && <Spinner label="Загрузка позиций" />}

          {!isLoading && error && <div className={styles.message}>{error}</div>}

          {!isLoading && !error && empty && (
            <div className={styles.emptyState}>
              <p className={styles.emptyTitle}>Активных позиций пока нет</p>
              <p className={styles.emptyText}>На данный момент у Вас нет позиций в пулах ликвидности.</p>
            </div>
          )}

          {!isLoading && !error && !empty && (
            <div className={styles.list}>
              {positions.map((p) => (
                <div key={p.tokenId} className={styles.pos}>
                  <div className={styles.posTop}>
                    <span className={styles.coin}>
                      {displaySymbol(p.symbol0)}/{displaySymbol(p.symbol1)}
                      <span className={styles.fee}>{formatFeeTier(p.feeTier)}</span>
                    </span>
                    <span className={`${styles.badge} ${p.inRange ? styles.badgeActive : styles.badgeWarn}`}>
                      {p.inRange ? 'В диапазоне' : 'Вне диапазона'}
                    </span>
                  </div>

                  <div className={styles.rows}>
                    <div className={styles.row}>
                      <span className={styles.label}>Диапазон цен</span>
                      <span className={styles.value}>
                        {p.priceLower} – {p.priceUpper}
                      </span>
                    </div>
                    <div className={styles.row}>
                      <span className={styles.label}>{displaySymbol(p.symbol0)}</span>
                      <span className={styles.value}>{truncateDecimals(p.currentAmount0Human, 8)}</span>
                    </div>
                    <div className={styles.row}>
                      <span className={styles.label}>{displaySymbol(p.symbol1)}</span>
                      <span className={styles.value}>{truncateDecimals(p.currentAmount1Human, 8)}</span>
                    </div>
                    <div className={styles.row}>
                      <span className={styles.label}>Комиссии к выводу</span>
                      <span className={`${styles.value} ${styles.success}`}>
                        {truncateDecimals(p.feesOwed0Human, 8)} {displaySymbol(p.symbol0)} · {truncateDecimals(p.feesOwed1Human, 8)} {displaySymbol(p.symbol1)}
                      </span>
                    </div>
                  </div>

                  <button
                    className={styles.btn}
                    onClick={() => onRemove(p.tokenId)}
                    disabled={removePending}
                  >
                    Вывести
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
