import React, { useState, useEffect, useMemo } from 'react';
import { useWallet } from '../context/WalletContext';
import { walletAPI } from '../api/wallet';
import QRCode from 'react-qr-code';

const ReceiveModal = ({ isOpen, onClose, tokenSymbol }) => {
  const { activeWallet, sessionLogin } = useWallet();
  const [address, setAddress] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const selectedToken = useMemo(() => {
    if (!activeWallet?.tokens || !tokenSymbol) return null;
    return activeWallet.tokens.find((t) => t.tokenInfo?.symbol === tokenSymbol) || null;
  }, [activeWallet, tokenSymbol]);

  // Получаем адрес кошелька для токена из activeWallet
  useEffect(() => {
    if (!isOpen || !tokenSymbol || !activeWallet) {
      return;
    }

    if (selectedToken?.address) {
      setAddress(selectedToken.address);
      setError('');
      setLoading(false);
      return;
    }

    if (!sessionLogin) {
      setError('Сессия не найдена');
      setLoading(false);
      return;
    }

    let cancelled = false;

    const fetchAddress = async () => {
      setLoading(true);
      setError('');
      setAddress('');

      try {
        const response = await walletAPI.getTokenAddress({
          sessionLogin,
          tokenSymbol,
          walletId: activeWallet?.id
        });

        if (cancelled) {
          return;
        }

        if (response.success && response.data?.address) {
          setAddress(response.data.address);
        } else {
          setError(response.error || 'Адрес не найден для этого токена');
        }
      } catch (err) {
        if (!cancelled) {
          console.error('[ReceiveModal] Failed to fetch address', err);
          setError('Не удалось получить адрес');
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };

    fetchAddress();

    return () => {
      cancelled = true;
    };
  }, [isOpen, tokenSymbol, activeWallet, sessionLogin, selectedToken]);

  const handleCopyAddress = () => {
    if (address) {
      navigator.clipboard.writeText(address).then(() => {
        alert('Адрес скопирован в буфер обмена');
      }).catch(() => {
        alert('Не удалось скопировать адрес');
      });
    }
  };

  const getNetworkWarning = (symbol) => {
    const warnings = {
      'BNB': 'Отправляйте только Binance Smart Chain (BNB) на этот адрес. Отправка любых других монет может привести к их безвозвратной потере.',
      'ETH': 'Отправляйте только Ethereum (ETH) на этот адрес. Отправка любых других монет может привести к их безвозвратной потере.',
      'TRX': 'Отправляйте только Tron (TRX) на этот адрес. Отправка любых других монет может привести к их безвозвратной потере.',
      'BTC': 'Отправляйте только Bitcoin (BTC) на этот адрес. Отправка любых других монет может привести к их безвозвратной потере.',
      'SOL': 'Отправляйте только Solana (SOL) на этот адрес. Отправка любых других монет может привести к их безвозвратной потере.',
      'TON': 'Отправляйте только Toncoin (TON) на этот адрес. Отправка любых других монет может привести к их безвозвратной потере.',
      'USDT': 'Отправляйте только USDT (TRC20) на этот адрес. Это адрес Tron. Отправка USDT других сетей (ERC20, BEP20) приведет к потере средств!',
      'XRP': 'Отправляйте только Ripple (XRP) на этот адрес. Некоторые биржи могут требовать Destination Tag - уточните перед отправкой!'
    };
    return warnings[symbol] || 'Отправляйте только соответствующие токены на этот адрес. Отправка неправильных монет может привести к их потере.';
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 mobile-safe-area">
      <div className="bg-[#1b1b1c] rounded-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-700">
          <h2 className="text-xl font-bold text-white">Получить {tokenSymbol}</h2>
          <button 
            onClick={onClose}
            className="p-2 hover:bg-gray-700 rounded-full transition-colors touch-target"
          >
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="p-4 space-y-4">
          {/* Warning */}
          <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-3">
            <div className="flex items-start space-x-2">
              <svg className="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
              </svg>
              <p className="text-sm text-yellow-300">
                {getNetworkWarning(tokenSymbol)}
              </p>
            </div>
          </div>

          {/* QR Code */}
          {loading ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-gray-400">Загрузка адреса...</div>
            </div>
          ) : error ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-red-400">{error}</div>
            </div>
          ) : address ? (
            <div className="text-center">
              <div className="inline-block p-4 bg-white rounded-lg">
                <div className="w-48 h-48 flex items-center justify-center relative">
                  <QRCode
                    value={address}
                    size={180}
                    style={{ height: "auto", maxWidth: "100%", width: "100%" }}
                    viewBox={`0 0 180 180`}
                    bgColor="#FFFFFF"
                    fgColor="#000000"
                    level="L"
                  />
                </div>
                {/* Обрезанный адрес под QR-кодом */}
                <div className="mt-3 text-center">
                  <div className="text-xs text-gray-600 font-mono">
                    {address.slice(0, 6)}...{address.slice(-4)}
                  </div>
                </div>
              </div>
            </div>
          ) : null}

          {/* Address */}
          {address && (
            <div className="space-y-3">
              <div className="bg-gray-700 rounded-lg p-3">
                <div className="flex items-center space-x-2">
                  <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                  </svg>
                  <span className="text-white font-mono text-sm break-all">{address}</span>
                </div>
              </div>
              
              <button 
                onClick={handleCopyAddress}
                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-colors touch-target"
              >
                Копировать адрес
              </button>
            </div>
          )}

          {/* Transaction Status */}
          <div className="text-center text-gray-400 text-sm">
            Транзакции не найдены
          </div>
        </div>
      </div>
    </div>
  );
};

export default ReceiveModal;
