import { useEffect, useState } from 'react'
import type { LpPosition } from '@features/pools'
import { formatFeeTier, displaySymbol } from '../model/meta'
import styles from './LpRemoveModal.module.css'

interface Props {
  position: LpPosition
  pending?: boolean
  onConfirm: (percent: number) => void
  onClose: () => void
}

const PERCENTS = [25, 50, 100]

export function LpRemoveModal({ position, pending, onConfirm, onClose }: Props) {
  const [percent, setPercent] = useState(100)

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', onKey)
    return () => document.removeEventListener('keydown', onKey)
  }, [onClose])

  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.token}>
          <span className={styles.tokenLabel}>Позиция</span>
          <span className={styles.tokenAmount}>
            {displaySymbol(position.symbol0)}/{displaySymbol(position.symbol1)}
          </span>
          <span className={styles.tokenMeta}>
            {formatFeeTier(position.feeTier)} · #{position.tokenId}
          </span>
        </div>

        <div className={styles.modes}>
          {PERCENTS.map((p) => (
            <button
              key={p}
              className={`${styles.mode} ${percent === p ? styles.modeActive : ''}`}
              onClick={() => setPercent(p)}
            >
              {p}%
            </button>
          ))}
        </div>

        {percent === 100 && (
          <p className={styles.note}>При выводе 100% позиция (NFT) будет сожжена.</p>
        )}

        <button className={styles.confirmBtn} onClick={() => onConfirm(percent)} disabled={pending}>
          {pending ? 'Отправка…' : 'Подтвердить вывод'}
        </button>
      </div>
    </div>
  )
}
