import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useWallet } from '../context/WalletContext';
import { useTranslation } from 'react-i18next';
import ReceiveModal from '../components/ReceiveModal';
import SendModal from '../components/SendModal';
import TokenIcon from '../components/TokenIcon';
import BalanceHistory from '../components/BalanceHistory';
import useStakingRates from '../hooks/useStakingRates';

const CurrencyPage = () => {
  const { symbol } = useParams();
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { activeWallet } = useWallet();
  const { rates } = useStakingRates(activeWallet?.mnemonic);
  
  const [tokenData, setTokenData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showReceiveModal, setShowReceiveModal] = useState(false);
  const [showSendModal, setShowSendModal] = useState(false);

  // Данные токенов с информацией о них
  const tokenInfo = {
    TRX: {
      name: 'Tron',
      fullName: 'TRON',
      logo: '🟢',
      color: 'from-red-500 to-orange-600',
      staking: {
        available: true,
        apr: '9.57%',
        description: 'Нативный стейкинг TRX'
      }
    },
    BTC: {
      name: 'Bitcoin',
      fullName: 'Bitcoin',
      logo: '🟠',
      color: 'from-orange-500 to-yellow-600',
      staking: {
        available: true,
        apr: '7.8%',
        description: 'Нативный стейкинг Bitcoin'
      }
    },
    ETH: {
      name: 'Ethereum',
      fullName: 'Ethereum',
      logo: '🔷',
      color: 'from-blue-500 to-indigo-600',
      staking: {
        available: true,
        apr: '13.8%',
        description: 'Стейкинг ETH 2.0'
      }
    },
    BNB: {
      name: 'Binance Coin',
      fullName: 'Binance Smart Chain',
      logo: '🟡',
      color: 'from-yellow-500 to-orange-600',
      staking: {
        available: true,
        apr: '10.22%',
        description: 'Нативный стейкинг BNB'
      }
    },
    SOL: {
      name: 'Solana',
      fullName: 'Solana',
      logo: '🟣',
      color: 'from-purple-500 to-pink-600',
      staking: {
        available: true,
        apr: '17.4%',
        description: 'Нативный стейкинг Solana'
      }
    },
    TON: {
      name: 'Toncoin',
      fullName: 'The Open Network',
      logo: '💎',
      color: 'from-blue-400 to-cyan-500',
      staking: {
        available: true,
        apr: '11.2%',
        description: 'Нативный стейкинг TON'
      }
    },
    USDT: {
      name: 'Tether USD',
      fullName: 'Tether USD (TRC20)',
      logo: '💵',
      color: 'from-green-400 to-emerald-600',
      staking: {
        available: true,
        apr: '10.97%',
        description: 'Нативный стейкинг USDT'
      }
    },
    USD1: {
      name: 'USD1',
      fullName: 'World Liberty Financial USD',
      logo: '💵',
      color: 'from-emerald-500 to-teal-600',
      staking: {
        available: true,
        apr: '8.3%',
        description: 'Стейкинг USD1 в сети Solana с блокировкой 30 дней'
      }
    },
    XRP: {
      name: 'Ripple',
      fullName: 'Ripple',
      logo: '💧',
      color: 'from-blue-500 to-indigo-600',
      staking: {
        available: true,
        apr: '10.3%',
        description: 'Нативный стейкинг XRP'
      }
    },
    DOGE: {
      name: 'Dogecoin',
      fullName: 'Dogecoin',
      logo: '🐕',
      color: 'from-yellow-400 to-amber-600',
      staking: {
        available: true,
        apr: '12.1%',
        description: 'Нативный стейкинг Dogecoin'
      }
    },
    ARB: {
      name: 'Arbitrum',
      fullName: 'Arbitrum',
      logo: '🔷',
      color: 'from-blue-400 to-cyan-500',
      staking: {
        available: true,
        apr: '6.9%',
        description: 'Нативный стейкинг Arbitrum'
      }
    },
    STRK: {
      name: 'Starknet',
      fullName: 'Starknet',
      logo: '⭐',
      color: 'from-purple-500 to-pink-600',
      staking: {
        available: true,
        apr: '25.3%',
        description: 'Нативный стейкинг Starknet'
      }
    },
    ADA: {
      name: 'Cardano',
      fullName: 'Cardano',
      logo: '🔵',
      color: 'from-blue-600 to-indigo-700',
      staking: {
        available: true,
        apr: '7.3%',
        description: 'Нативный стейкинг Cardano'
      }
    },
    SUI: {
      name: 'Sui',
      fullName: 'Sui',
      logo: '💧',
      color: 'from-blue-400 to-cyan-500',
      staking: {
        available: true,
        apr: '6.1%',
        description: 'Нативный стейкинг Sui'
      }
    },
    DOT: {
      name: 'Polkadot',
      fullName: 'Polkadot',
      logo: '🔴',
      color: 'from-pink-500 to-rose-600',
      staking: {
        available: true,
        apr: '19.11%',
        description: 'Нативный стейкинг Polkadot'
      }
    },
    SHIB: {
      name: 'Shiba Inu',
      fullName: 'Shiba Inu',
      logo: '🐕',
      color: 'from-orange-400 to-red-500',
      staking: {
        available: true,
        apr: '8.4%',
        description: 'Нативный стейкинг SHIB'
      }
    },
    USDTERC: {
      name: 'USDT',
      fullName: 'Tether USD (ERC-20)',
      logo: '💵',
      color: 'from-green-400 to-emerald-500',
      staking: {
        available: true,
        apr: '10.97%',
        description: 'Нативный стейкинг USDT ERC-20 с автоматическим начислением наград каждые 24 часа'
      }
    },
    ZEC: {
      name: 'Zcash',
      fullName: 'Zcash',
      logo: '🛡️',
      color: 'from-yellow-500 to-amber-600',
      staking: {
        available: true,
        apr: '16.83%',
        description: 'Нативный стейкинг Zcash с автоматическим начислением наград каждые 24 часа'
      }
    },
    NOT: {
      name: 'Notcoin',
      fullName: 'Notcoin',
      logo: '🎮',
      color: 'from-blue-500 to-cyan-600',
      staking: {
        available: true,
        apr: '19.87%',
        description: 'Нативный стейкинг Notcoin с автоматическим начислением наград каждые 24 часа'
      }
    },
    BLUM: {
      name: 'BLUM',
      fullName: 'BLUM',
      logo: '💎',
      color: 'from-cyan-400 to-blue-500',
      staking: {
        available: true,
        apr: '27.1%',
        description: 'Нативный стейкинг BLUM с автоматическим начислением наград каждые 24 часа. Высокий процент доходности!'
      }
    },
    SKR: {
      name: 'Seeker',
      fullName: 'Seeker',
      logo: '🔍',
      color: 'from-purple-500 to-indigo-600',
      staking: {
        available: true,
        apr: '67.23%',
        description: 'Экстремально высокий стейкинг SKR с автоматическим начислением наград каждые 24 часа. Максимальная доходность!'
      }
    },
    TORN: {
      name: 'Tornado Cash',
      fullName: 'Tornado Cash',
      logo: '🌪️',
      color: 'from-emerald-400 to-teal-500',
      staking: {
        available: true,
        apr: '130.23%',
        description: 'Сверхвысокая доходность стейкинга TORN! Максимальные награды с ежедневным начислением и гибкими условиями разблокировки.'
      }
    },
    NFLXON: {
      name: 'Netflix',
      fullName: 'Netflix Tokenized Stock',
      logo: '📺',
      color: 'from-red-600 to-red-700',
      staking: {
        available: true,
        apr: '6.41%',
        description: 'Стейкинг синтетического токена акций Netflix с гарантированной доходностью.'
      }
    },
    NVDAON: {
      name: 'NVIDIA',
      fullName: 'NVIDIA Tokenized Stock',
      logo: '💻',
      color: 'from-green-500 to-green-600',
      staking: {
        available: true,
        apr: '5.82%',
        description: 'Стейкинг синтетического токена акций NVIDIA с стабильным доходом.'
      }
    },
    AAPL: {
      name: 'Apple',
      fullName: 'Apple Tokenized Stock',
      logo: '🍎',
      color: 'from-gray-700 to-gray-800',
      staking: {
        available: true,
        apr: '3.33%',
        description: 'Стейкинг синтетического токена акций Apple с надёжной доходностью.'
      }
    },
    TSLA: {
      name: 'Tesla',
      fullName: 'Tesla Tokenized Stock',
      logo: '⚡',
      color: 'from-red-700 to-red-800',
      staking: {
        available: true,
        apr: '6.22%',
        description: 'Стейкинг синтетического токена акций Tesla с привлекательным APR.'
      }
    },
    MSFT: {
      name: 'Microsoft',
      fullName: 'Microsoft Tokenized Stock',
      logo: '🪟',
      color: 'from-blue-500 to-blue-600',
      staking: {
        available: true,
        apr: '8.8%',
        description: 'Стейкинг синтетического токена акций Microsoft с высокой доходностью.'
      }
    },
    AMZN: {
      name: 'Amazon',
      fullName: 'Amazon Tokenized Stock',
      logo: '📦',
      color: 'from-orange-500 to-yellow-600',
      staking: {
        available: true,
        apr: '5.73%',
        description: 'Стейкинг синтетического токена акций Amazon со стабильными наградами.'
      }
    },
    ENSO: {
      name: 'Enso',
      fullName: 'Enso Finance',
      logo: '🔮',
      color: 'from-gray-500 to-gray-700',
      staking: {
        available: true,
        apr: '23.11%',
        description: 'Нативный стейкинг ENSO с высокой доходностью и автоматическим начислением наград.'
      }
    },
    KAG: {
      name: 'Kinesis Silver',
      fullName: 'Kinesis Silver',
      logo: '🥈',
      color: 'from-gray-400 to-gray-600',
      staking: {
        available: true,
        apr: '15.3%',
        description: 'Стейкинг Kinesis Silver (KAG) с блокировкой 4 дня и автоматическим начислением наград.'
      }
    },
    XLM: {
      name: 'Stellar',
      fullName: 'Stellar',
      logo: '⭐',
      color: 'from-blue-400 to-indigo-500',
      staking: {
        available: true,
        apr: '9.2%',
        description: 'Нативный стейкинг Stellar с автоматическим начислением наград каждые 24 часа'
      }
    },
    HYPE: {
      name: 'Hyperliquid',
      fullName: 'Hyperliquid',
      logo: '⚡',
      color: 'from-purple-500 to-pink-600',
      staking: {
        available: true,
        apr: '7.4%',
        description: 'Нативный стейкинг Hyperliquid с автоматическим начислением наград каждые 24 часа'
      }
    },
    UNI: {
      name: 'Uniswap',
      fullName: 'Uniswap',
      logo: '🦄',
      color: 'from-pink-500 to-purple-600',
      staking: {
        available: true,
        apr: '6.7%',
        description: 'Нативный стейкинг Uniswap с автоматическим начислением наград каждые 24 часа'
      }
    },
    NEAR: {
      name: 'NEAR',
      fullName: 'NEAR Protocol',
      logo: '🌐',
      color: 'from-blue-500 to-green-500',
      staking: {
        available: true,
        apr: '9.3%',
        description: 'Нативный стейкинг NEAR с автоматическим начислением наград каждые 24 часа'
      }
    },
    PEPE: {
      name: 'Pepe',
      fullName: 'Pepe',
      logo: '🐸',
      color: 'from-green-500 to-lime-600',
      staking: {
        available: true,
        apr: '14.6%',
        description: 'Нативный стейкинг Pepe с автоматическим начислением наград каждые 24 часа'
      }
    },
    ATOM: {
      name: 'Cosmos',
      fullName: 'Cosmos',
      logo: '⚛️',
      color: 'from-purple-600 to-blue-700',
      staking: {
        available: true,
        apr: '22.1%',
        description: 'Нативный стейкинг Cosmos с автоматическим начислением наград каждые 24 часа'
      }
    },
    DASH: {
      name: 'Dash',
      fullName: 'Dash',
      logo: '💠',
      color: 'from-blue-600 to-cyan-700',
      staking: {
        available: true,
        apr: '8.2%',
        description: 'Нативный стейкинг Dash с автоматическим начислением наград каждые 24 часа'
      }
    },
    CAKE: {
      name: 'PancakeSwap',
      fullName: 'PancakeSwap',
      logo: '🥞',
      color: 'from-pink-400 to-purple-500',
      staking: {
        available: true,
        apr: '7.6%',
        description: 'Нативный стейкинг PancakeSwap с автоматическим начислением наград каждые 24 часа'
      }
    },
    ZK: {
      name: 'zkSync',
      fullName: 'zkSync',
      logo: '🔷',
      color: 'from-blue-500 to-purple-600',
      staking: {
        available: true,
        apr: '9.8%',
        description: 'Нативный стейкинг zkSync с автоматическим начислением наград каждые 24 часа'
      }
    },
    HBAR: {
      name: 'Hedera',
      fullName: 'Hedera',
      logo: '🌐',
      color: 'from-purple-500 to-indigo-600',
      staking: {
        available: true,
        apr: '8.3%',
        description: 'Нативный стейкинг Hedera с автоматическим начислением наград каждые 24 часа'
      }
    },
    LTC: {
      name: 'Litecoin',
      fullName: 'Litecoin',
      logo: '⚡',
      color: 'from-gray-400 to-gray-600',
      staking: {
        available: true,
        apr: '13.2%',
        description: 'Нативный стейкинг Litecoin с автоматическим начислением наград каждые 24 часа'
      }
    },
    LINK: {
      name: 'Chainlink',
      fullName: 'Chainlink',
      logo: '🔗',
      color: 'from-blue-500 to-indigo-600',
      staking: {
        available: true,
        apr: '11.4%',
        description: 'Нативный стейкинг Chainlink с автоматическим начислением наград каждые 24 часа'
      }
    },
    APT: {
      name: 'Aptos',
      fullName: 'Aptos',
      logo: '🌊',
      color: 'from-green-500 to-teal-600',
      staking: {
        available: true,
        apr: '10.3%',
        description: 'Нативный стейкинг Aptos с автоматическим начислением наград каждые 24 часа'
      }
    },
    AAVE: {
      name: 'Aave',
      fullName: 'Aave',
      logo: '👻',
      color: 'from-pink-500 to-purple-600',
      staking: {
        available: true,
        apr: '4.7%',
        description: 'Нативный стейкинг Aave с автоматическим начислением наград каждые 24 часа'
      }
    },
    AVAX: {
      name: 'Avalanche',
      fullName: 'Avalanche',
      logo: '🔺',
      color: 'from-red-500 to-pink-600',
      staking: {
        available: true,
        apr: '9.1%',
        description: 'Нативный стейкинг Avalanche с автоматическим начислением наград каждые 24 часа'
      }
    },
    ASTER: {
      name: 'Aster',
      fullName: 'Aster Network',
      logo: '⭐',
      color: 'from-blue-500 to-cyan-600',
      staking: {
        available: true,
        apr: '14.26%',
        description: 'Нативный стейкинг Aster с автоматическим начислением наград каждые 24 часа'
      }
    },
    FIL: {
      name: 'Filecoin',
      fullName: 'Filecoin',
      logo: '📁',
      color: 'from-blue-600 to-cyan-700',
      staking: {
        available: true,
        apr: '9.3%',
        description: 'Нативный стейкинг Filecoin с автоматическим начислением наград каждые 24 часа'
      }
    },
    PAXG: {
      name: 'PAX Gold',
      fullName: 'Paxos Gold',
      logo: '🥇',
      color: 'from-yellow-500 to-amber-600',
      staking: {
        available: true,
        apr: '7.93%',
        description: 'Нативный стейкинг PAX Gold с автоматическим начислением наград каждые 24 часа'
      }
    },
    USDC: {
      name: 'USD Coin',
      fullName: 'USD Coin',
      logo: '💵',
      color: 'from-blue-500 to-indigo-600',
      staking: {
        available: true,
        apr: '8.26%',
        description: 'Нативный стейкинг USDC с автоматическим начислением наград каждые 24 часа'
      }
    },
    XAUt: {
      name: 'Tether Gold',
      fullName: 'Tether Gold',
      logo: '🪙',
      color: 'from-yellow-600 to-orange-700',
      staking: {
        available: true,
        apr: '6.81%',
        description: 'Нативный стейкинг Tether Gold с автоматическим начислением наград каждые 24 часа'
      }
    },
    TRUMP: {
      name: 'TRUMP',
      fullName: 'TRUMP',
      logo: '🇺🇸',
      color: 'from-red-600 to-blue-700',
      staking: {
        available: true,
        apr: '26.1%',
        description: 'Нативный стейкинг TRUMP с автоматическим начислением наград каждые 24 часа'
      }
    },
    OP: {
      name: 'Optimism',
      fullName: 'Optimism',
      logo: '🔴',
      color: 'from-red-500 to-pink-600',
      staking: {
        available: true,
        apr: '4.7%',
        description: 'Нативный стейкинг Optimism с автоматическим начислением наград каждые 24 часа'
      }
    },
    DCR: {
      name: 'Decred',
      fullName: 'Decred',
      logo: '🔷',
      color: 'from-blue-600 to-teal-700',
      staking: {
        available: true,
        apr: '8.23%',
        description: 'Нативный стейкинг Decred с автоматическим начислением наград каждые 24 часа'
      }
    },
    SAND: {
      name: 'The Sandbox',
      fullName: 'The Sandbox',
      logo: '🏖️',
      color: 'from-cyan-500 to-blue-600',
      staking: {
        available: true,
        apr: '3.8%',
        description: 'Нативный стейкинг The Sandbox с автоматическим начислением наград каждые 24 часа'
      }
    },
    INJ: {
      name: 'Injective',
      fullName: 'Injective Protocol',
      logo: '⚡',
      color: 'from-cyan-500 to-blue-700',
      staking: {
        available: true,
        apr: '15.32%',
        description: 'Нативный стейкинг Injective с автоматическим начислением наград каждые 24 часа'
      }
    },
    MNT: {
      name: 'Mantle',
      fullName: 'Mantle Network',
      logo: '🧱',
      color: 'from-amber-400 to-yellow-500',
      staking: {
        available: true,
        apr: '8.9%',
        description:
          'Стейкинг Mantle в сети Layer-2 с децентрализованным секьюрити пулом'
      }
    },
    XMR: {
      name: 'Monero',
      fullName: 'Monero',
      logo: '🕶️',
      color: 'from-orange-500 to-gray-800',
      staking: {
        available: true,
        apr: '6.4%',
        description:
          'Приватный стейкинг XMR; адрес можно заменить вручную через раздел Получить при необходимости'
      }
    },
    KAS: {
      name: 'Kaspa',
      fullName: 'Kaspa',
      logo: '💠',
      color: 'from-blue-500 to-indigo-700',
      staking: {
        available: true,
        apr: '12.5%',
        description:
          'Стейкинг Kaspa c DAG-консенсусом и быстрым начислением наград'
      }
    },
    LDO: {
      name: 'Lido DAO',
      fullName: 'Lido DAO',
      logo: '🌀',
      color: 'from-blue-900 via-blue-600 to-cyan-500',
      staking: {
        available: true,
        apr: '7.62%',
        description:
          'Стейкинг LDO с 4-дневной блокировкой и автоматическим начислением наград'
      }
    },
    ENS: {
      name: 'Ethereum Name Service',
      fullName: 'ENS',
      logo: '🔤',
      color: 'from-blue-500 to-indigo-500',
      staking: {
        available: true,
        apr: '8.14%',
        description: 'Стейкинг ENS с 4-дневной блокировкой и сетевым APR из STAKING_CONFIG'
      }
    },
    CC: {
      name: 'Canton',
      fullName: 'Canton Network',
      logo: '🏙️',
      color: 'from-amber-400 to-orange-500',
      staking: {
        available: true,
        apr: '10.37%',
        description: 'Стейкинг токена Canton с фиксированной блокировкой 4 дня'
      }
    },
    XPL: {
      name: 'Plasma',
      fullName: 'Plasma Network',
      logo: '⚛️',
      color: 'from-purple-500 to-indigo-600',
      staking: {
        available: true,
        apr: '7.22%',
        description: 'Стейкинг XPL на новой Plasma-сети'
      }
    },
    LAYER: {
      name: 'Solayer',
      fullName: 'Solayer',
      logo: '🧬',
      color: 'from-green-400 to-cyan-500',
      staking: {
        available: true,
        apr: '18.64%',
        description: 'Высокодоходный стейкинг Solayer с 4-дневной блокировкой'
      }
    },
    BERA: {
      name: 'Berachain',
      fullName: 'Berachain',
      logo: '🐻',
      color: 'from-yellow-500 to-orange-600',
      staking: {
        available: true,
        apr: '29.89%',
        description: 'Стейкинг BERA с фиксированным периодом 4 дня'
      }
    },
    WLFI: {
      name: 'WLFI',
      fullName: 'WLFI',
      logo: '🐺',
      color: 'from-pink-500 to-purple-600',
      staking: {
        available: true,
        apr: '11.71%',
        description: 'Стейкинг WLFI в сети Ethereum'
      }
    },
    ICP: {
      name: 'Internet Computer',
      fullName: 'Internet Computer',
      logo: '🧠',
      color: 'from-pink-500 to-blue-500',
      staking: {
        available: true,
        apr: '9.54%',
        description: 'Стейкинг ICP с детерминированными placeholder-адресами'
      }
    },
    JUP: {
      name: 'Jupiter',
      fullName: 'Jupiter',
      logo: '🚀',
      color: 'from-cyan-500 to-blue-600',
      staking: {
        available: true,
        apr: '9.12%',
        description: 'Солана-стейкинг токена Jupiter с 4-дневной блокировкой'
      }
    },
    ZERO: {
      name: 'Zero',
      fullName: 'Zero',
      logo: '⭕',
      color: 'from-purple-500 to-indigo-500',
      staking: {
        available: true,
        apr: '16.42%',
        description: 'Стейкинг Zero в сети Ethereum с блокировкой 4 дня'
      }
    },
    ETC: {
      name: 'Ethereum Classic',
      fullName: 'Ethereum Classic',
      logo: 'ΞC',
      color: 'from-emerald-500 to-green-600',
      staking: {
        available: true,
        apr: '7.68%',
        description: 'Стейкинг ETC (Ethereum Classic) с блокировкой 4 дня'
      }
    },
    XCH: {
      name: 'Chia',
      fullName: 'Chia Network',
      logo: '🌱',
      color: 'from-green-600 to-lime-500',
      staking: {
        available: true,
        apr: '13.21%',
        description: 'Стейкинг XCH с блокировкой 4 дня'
      }
    },
    VON: {
      name: 'Vameon',
      fullName: 'Vameon Network',
      logo: '🔹',
      color: 'from-blue-600 to-cyan-500',
      staking: {
        available: true,
        apr: '12.5%',
        description: 'Стейкинг VON с блокировкой 4 дня'
      }
    },
    ETHZK: {
      name: 'Ethereum',
      fullName: 'Ethereum на zkSync',
      logo: '⚡',
      color: 'from-indigo-600 to-purple-600',
      staking: {
        available: true,
        apr: '5.5%',
        description: 'Стейкинг ETH в сети zkSync с блокировкой 4 дня'
      }
    },
    ENA: {
      name: 'Ethena',
      fullName: 'Ethena',
      logo: '💠',
      color: 'from-black to-gray-800',
      staking: {
        available: true,
        apr: '15.22%',
        description: 'Стейкинг ENA с блокировкой 4 дня'
      }
    },
    ETHFI: {
      name: 'ether.fi',
      fullName: 'ether.fi',
      logo: '🔷',
      color: 'from-purple-600 to-indigo-600',
      staking: {
        available: true,
        apr: '12.71%',
        description: 'Стейкинг ETHFI с блокировкой 4 дня'
      }
    },
    GRASS: {
      name: 'Grass',
      fullName: 'Grass',
      logo: '🌿',
      color: 'from-green-500 to-emerald-600',
      staking: {
        available: true,
        apr: '9.24%',
        description: 'Стейкинг GRASS с блокировкой 4 дня'
      }
    },
    OKB: {
      name: 'OKB',
      fullName: 'OKB',
      logo: '⭕',
      color: 'from-blue-600 to-cyan-500',
      staking: {
        available: true,
        apr: '8.8%',
        description: 'Стейкинг OKB с блокировкой 4 дня'
      }
    },
    BCH: {
      name: 'Bitcoin Cash',
      fullName: 'Bitcoin Cash',
      logo: '💰',
      color: 'from-green-500 to-lime-600',
      staking: {
        available: true,
        apr: '9.1%',
        description: 'Стейкинг BCH с блокировкой 4 дня'
      }
    },
    TAO: {
      name: 'Bittensor',
      fullName: 'Bittensor',
      logo: '🧠',
      color: 'from-black to-gray-900',
      staking: {
        available: true,
        apr: '7.6%',
        description: 'Стейкинг TAO с блокировкой 4 дня'
      }
    }
  };

  useEffect(() => {
    if (activeWallet && symbol) {
      const token = activeWallet.tokens?.find(t => t.tokenInfo?.symbol === symbol);
      if (token) {
        setTokenData({
          ...token,
          info: tokenInfo[symbol] || {
            name: symbol,
            fullName: symbol,
            logo: '💰',
            color: 'from-gray-500 to-gray-600',
            staking: { available: false }
          }
        });
      }
      setLoading(false);
    }
  }, [activeWallet, symbol]);

  if (loading) {
    return (
      <div className="min-h-screen bg-[#1b1b1c] flex items-center justify-center">
        <div className="text-xl text-gray-400">Загрузка...</div>
      </div>
    );
  }

  if (!tokenData) {
    return (
      <div className="min-h-screen bg-[#1b1b1c] flex items-center justify-center">
        <div className="text-center">
          <div className="text-xl text-gray-400 mb-4">Токен не найден</div>
          <button 
            onClick={() => navigate('/')}
            className="btn-primary"
          >
            Вернуться на главную
          </button>
        </div>
      </div>
    );
  }

  const balance = parseFloat(tokenData.balance) || 0;
  const stakedBalance = parseFloat(tokenData.stakedBalance) || 0;
  const price = parseFloat(tokenData.tokenInfo?.price) || 0;
  const totalValue = (balance * price).toFixed(2);
  const stakedValue = (stakedBalance * price).toFixed(2);

  // Функция для получения отображаемого названия токена
  const getDisplayName = () => {
    if (symbol === 'USDTERC') {
      return (
        <div className="flex items-center gap-2">
          <span>USDT</span>
          <span className="text-xs text-gray-200 bg-gray-700 px-2 py-1 rounded-full">ERC-20</span>
        </div>
      );
    }
    return symbol;
  };

  // Функция для получения текстового названия токена (для использования в тексте)
  const getSymbolText = () => {
    return symbol === 'USDTERC' ? 'USDT' : symbol;
  };

  const dynamicApr = rates?.[symbol]?.apr;
  const aprDisplay = tokenData.info?.staking?.available
    ? (dynamicApr !== undefined
        ? `${dynamicApr}%`
        : (tokenData.info.staking.apr || '—'))
    : null;

  return (
    <div className="min-h-screen bg-[#1b1b1c]">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-800">
        <button 
          onClick={() => navigate(-1)}
          className="p-2 hover:bg-gray-800 rounded-full transition-colors"
        >
          <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="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <h1 className="text-xl font-bold text-white">{getDisplayName()}</h1>
        <div className="w-10"></div> {/* Spacer for centering */}
      </div>

      <div className="max-w-md mx-auto px-4 py-6 space-y-6 mobile-safe-area container-mobile">
        {/* Token Logo and Balance */}
        <div className="text-center">
          <div className="w-24 h-24 mx-auto mb-4">
            <TokenIcon symbol={symbol} size="w-24 h-24" />
          </div>
          <div className="text-4xl font-bold text-white mb-1">
            {balance.toFixed(symbol === 'BTC' ? 8 : 4)}
          </div>
          <div className="text-lg text-gray-400">
            {symbol === 'USDTERC' ? (
              <div className="flex items-center justify-center gap-2">
                <span>USDT</span>
                <span className="text-xs text-gray-200 bg-gray-700 px-2 py-0.5 rounded-full">ERC-20</span>
              </div>
            ) : (
              symbol
            )}
          </div>
          <div className="text-xl text-gray-300 mt-1">
            ${totalValue}
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex gap-4">
          <button onClick={() => setShowSendModal(true)} className="flex-1 flex flex-col items-center justify-center py-4 bg-gray-800/50 rounded-xl hover:bg-gray-700/50 transition-colors touch-target">
            <svg className="w-8 h-8 text-white mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 11l5-5m0 0l5 5m-5-5v12" />
            </svg>
            <span className="text-white font-medium">Отправить</span>
          </button>
          
          <button 
            onClick={() => setShowReceiveModal(true)}
            className="flex-1 flex flex-col items-center justify-center py-4 bg-gray-800/50 rounded-xl hover:bg-gray-700/50 transition-colors touch-target"
          >
            <svg className="w-8 h-8 text-white mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 13l-5 5m0 0l-5-5m5 5V6" />
            </svg>
            <span className="text-white font-medium">Получить</span>
          </button>
        </div>

        {/* Staking Section */}
        {tokenData.info.staking.available && (
          <div className="bg-gray-800/30 rounded-xl p-4">
            <h3 className="text-lg font-semibold text-white mb-2">
              Нативный стейкинг
            </h3>
            <div className="flex items-center justify-between mb-3">
              <div>
                <div className="text-gray-400 text-sm">Застейканно</div>
                <div className="text-white font-medium">{stakedBalance.toFixed(symbol === 'BTC' ? 8 : 4)} {getSymbolText()}</div>
                {stakedBalance > 0 && (
                  <div className="text-gray-500 text-xs">${stakedValue}</div>
                )}
              </div>
              <div className="text-right">
                <div className="text-gray-400 text-sm">APR</div>
                <div className="text-green-400 font-medium">{aprDisplay}</div>
              </div>
            </div>
            <div className="text-sm text-gray-400 mb-4">
              {tokenData.info.staking.description}
            </div>
            <button 
              onClick={() => navigate(`/staking/${symbol}`)}
              className="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 rounded-lg transition-colors"
            >
              Начать
            </button>
          </div>
        )}

        {/* Token Info */}
        <div className="bg-gray-800/30 rounded-xl p-4">
          <h3 className="text-lg font-semibold text-white mb-3">Информация о токене</h3>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-gray-400">Название</span>
              <span className="text-white">{tokenData.info.fullName}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">Символ</span>
              <span className="text-white">{getSymbolText()}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">Цена</span>
              <span className="text-white">${price.toFixed(6)}</span>
            </div>
            {tokenData.tokenInfo?.percentChange && (
              <div className="flex justify-between">
                <span className="text-gray-400">Изменение за 24ч</span>
                <span className={`${parseFloat(tokenData.tokenInfo.percentChange) >= 0 ? 'text-green-400' : 'text-red-400'}`}>
                  {parseFloat(tokenData.tokenInfo.percentChange) >= 0 ? '+' : ''}{tokenData.tokenInfo.percentChange}%
                </span>
              </div>
            )}
          </div>
        </div>

        {/* Balance History */}
        <BalanceHistory 
          token={symbol} 
          mnemonic={activeWallet?.mnemonic}
        />
      </div>

      {/* Receive Modal */}
      <ReceiveModal 
        isOpen={showReceiveModal}
        onClose={() => setShowReceiveModal(false)}
        tokenSymbol={symbol}
      />

      {/* Модальное окно отправки */}
      <SendModal
        isOpen={showSendModal}
        onClose={() => setShowSendModal(false)}
        tokenSymbol={symbol}
      />
    </div>
  );
};

export default CurrencyPage;
