import { useEffect, useState } from 'react'
import { WithdrawNotice } from './WithdrawNotice'
import type { StakeChain, SolState } from '@features/staking'
import styles from './UnstakeModal.module.css'

interface Props {
  chain: StakeChain
  /** Тикер сети (ETH / SOL). */
  symbol: string
  /** Сумма к выводу (human). */
  amount: string
  /** Состояние SOL-позиции (для двухфазного вывода). */
  solState?: SolState
  /** Идёт ли запрос вывода. */
  pending?: boolean
  onConfirm: (mode?: 'swap' | 'queue') => void
  onClose: () => void
}

export function UnstakeModal({ chain, symbol, amount, solState, pending, onConfirm, onClose }: Props) {
  const [mode, setMode] = useState<'swap' | 'queue'>('swap')

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

  const isSolWithdraw = chain === 'SOL' && solState === 'inactive'
  const confirmLabel = pending
    ? 'Отправка…'
    : chain === 'ETH'
      ? 'Подтвердить вывод'
      : isSolWithdraw
        ? 'Вывести средства'
        : 'Запустить деактивацию'

  const showNotice = chain === 'SOL' || (chain === 'ETH' && mode === 'queue')

  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}>
            {amount} {chain === 'ETH' ? 'stETH' : symbol}
          </span>
        </div>

        {chain === 'ETH' && (
          <div className={styles.modes}>
            <button
              className={`${styles.mode} ${mode === 'swap' ? styles.modeActive : ''}`}
              onClick={() => setMode('swap')}
            >
              <span className={styles.modeTitle}>Мгновенно</span>
              <span className={styles.modeDesc}>Своп stETH → ETH через Curve</span>
            </button>
            <button
              className={`${styles.mode} ${mode === 'queue' ? styles.modeActive : ''}`}
              onClick={() => setMode('queue')}
            >
              <span className={styles.modeTitle}>Очередь</span>
              <span className={styles.modeDesc}>Заявка в Lido Withdrawal Queue</span>
            </button>
          </div>
        )}

        {chain === 'SOL' && !isSolWithdraw && (
          <p className={styles.solNote}>
            Средства разблокируются через 1–2 эпохи. После завершения вернитесь и подтвердите вывод.
          </p>
        )}

        {showNotice && <WithdrawNotice />}

        <button
          className={styles.confirmBtn}
          onClick={() => onConfirm(chain === 'ETH' ? mode : undefined)}
          disabled={pending}
        >
          {confirmLabel}
        </button>
      </div>
    </div>
  )
}
