import React, { useState } from 'react';

export const TOKEN_ICON_MAP = {
  BNB: {
    mainColor: 'transparent',
    networkColor: 'transparent',
    mainImage: '/coins/bnb.png',
    networkImage: '/coins/bnb.png',
    mainSymbol: 'B',
    networkSymbol: 'B',
    networkName: 'BSC'
  },
  ETH: {
    mainColor: '#627EEA',
    networkColor: '#627EEA',
    mainImage: '/coins/eth.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'Ξ',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  TRX: {
    mainColor: '#FF060A',
    networkColor: '#FF060A',
    mainImage: '/coins/trx.png',
    networkImage: '/coins/trx.png',
    mainSymbol: 'T',
    networkSymbol: 'T',
    networkName: 'TRX'
  },
  BTC: {
    mainColor: '#F7931A',
    networkColor: '#F7931A',
    mainImage: '/coins/btc.png',
    networkImage: '/coins/btc.png',
    mainSymbol: '₿',
    networkSymbol: '₿',
    networkName: 'BTC'
  },
  ARB: {
    mainColor: 'transparent',
    networkColor: '#627EEA',
    mainImage: '/coins/arb.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'A',
    networkSymbol: 'Ξ',
    networkName: 'ARB'
  },
  STRK: {
    mainColor: '#EC796B',
    networkColor: '#627EEA',
    mainImage: '/coins/strk.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '⭐',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  POL: {
    mainColor: '#8247E5',
    networkColor: '#8247E5',
    mainImage: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png',
    networkImage: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png',
    mainSymbol: 'P',
    networkSymbol: 'P',
    networkName: 'POL'
  },
  ADA: {
    mainColor: '#0033AD',
    networkColor: '#0033AD',
    mainImage: '/coins/ada.png',
    networkImage: '/coins/ada.png',
    mainSymbol: 'A',
    networkSymbol: 'A',
    networkName: 'ADA'
  },
  SUI: {
    mainColor: '#4FA8FF',
    networkColor: '#4FA8FF',
    mainImage: '/coins/sui.png',
    networkImage: '/coins/sui.png',
    mainSymbol: '💧',
    networkSymbol: '💧',
    networkName: 'SUI'
  },
  DOT: {
    mainColor: '#E6007A',
    networkColor: '#E6007A',
    mainImage: '/coins/dot.png',
    networkImage: '/coins/dot.png',
    mainSymbol: '🔴',
    networkSymbol: '🔴',
    networkName: 'DOT'
  },
  SHIB: {
    mainColor: 'transparent',
    networkColor: '#627EEA',
    mainImage: '/coins/shiba.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '🐕',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  USDTERC: {
    mainColor: '#26A17B',
    networkColor: '#627EEA',
    mainImage: '/coins/tether.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '💵',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  XRP: {
    mainColor: '#23292F',
    networkColor: '#23292F',
    mainImage: '/coins/xrp.png',
    networkImage: '/coins/xrp.png',
    mainSymbol: 'X',
    networkSymbol: 'X',
    networkName: 'XRP'
  },
  SOL: {
    mainColor: 'transparent',
    networkColor: 'transparent',
    mainImage: '/coins/sol.png',
    networkImage: '/coins/sol.png',
    mainSymbol: 'S',
    networkSymbol: 'S',
    networkName: 'SOL'
  },
  TON: {
    mainColor: '#0088CC',
    networkColor: '#0088CC',
    mainImage: '/coins/ton.png',
    networkImage: '/coins/ton.png',
    mainSymbol: 'T',
    networkSymbol: 'T',
    networkName: 'TON'
  },
  ALGO: {
    mainColor: '#000000',
    networkColor: '#000000',
    mainImage: 'https://s2.coinmarketcap.com/static/img/coins/64x64/4030.png',
    networkImage: 'https://s2.coinmarketcap.com/static/img/coins/64x64/4030.png',
    mainSymbol: 'A',
    networkSymbol: 'A',
    networkName: 'ALGO'
  },
  OP: {
    mainColor: '#FF0420',
    networkColor: '#FF0420',
    mainImage: '/coins/op.png',
    networkImage: '/coins/op.png',
    mainSymbol: 'O',
    networkSymbol: 'O',
    networkName: 'Optimism'
  },
  USDT: {
    mainColor: '#26A17B',
    networkColor: '#FF0013',
    mainImage: '/coins/tether.png',
    networkImage: '/coins/trx.png',
    mainSymbol: 'T',
    networkSymbol: 'T',
    networkName: 'TRC20'
  },
  DOGE: {
    mainColor: '#333334',
    networkColor: '#333334',
    mainImage: '/coins/doge.png',
    networkImage: '/coins/doge.png',
    mainSymbol: 'Ð',
    networkSymbol: 'Ð',
    networkName: 'DOGE'
  },
  ZEC: {
    mainColor: '#ECB244',
    networkColor: '#ECB244',
    mainImage: '/coins/zec.png',
    networkImage: '/coins/zec.png',
    mainSymbol: 'Z',
    networkSymbol: 'Z',
    networkName: 'ZEC'
  },
  NOT: {
    mainColor: '#000000',
    networkColor: '#0088CC',
    mainImage: '/coins/not.png',
    networkImage: '/coins/ton.png',
    mainSymbol: 'N',
    networkSymbol: 'TON',
    networkName: 'The Open Network'
  },
  BLUM: {
    mainColor: 'transparent',
    networkColor: '#0088CC',
    mainImage: '/coins/blum.png',
    networkImage: '/coins/ton.png',
    mainSymbol: 'B',
    networkSymbol: 'TON',
    networkName: 'The Open Network'
  },
  SKR: {
    mainColor: '#7B3FF2',
    networkColor: '#9945FF',
    mainImage: '/coins/skr.png',
    networkImage: '/coins/sol.png',
    mainSymbol: 'S',
    networkSymbol: 'S',
    networkName: 'Solana'
  },
  TORN: {
    mainColor: 'transparent',
    networkColor: '#627EEA',
    mainImage: '/coins/torn.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'T',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  NFLXON: {
    mainColor: '#E50914',
    networkColor: '#627EEA',
    mainImage: '/coins/nflxon.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '📺',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  NVDAON: {
    mainColor: '#76B900',
    networkColor: '#627EEA',
    mainImage: '/coins/nvdaon.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '💻',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  AAPL: {
    mainColor: '#555555',
    networkColor: '#627EEA',
    mainImage: '/coins/aapl.jpg',
    networkImage: '/coins/eth.png',
    mainSymbol: '🍎',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  TSLA: {
    mainColor: '#CC0000',
    networkColor: '#627EEA',
    mainImage: '/coins/tsla.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '⚡',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  MSFT: {
    mainColor: '#00A4EF',
    networkColor: '#627EEA',
    mainImage: '/coins/msft.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '🪟',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  AMZN: {
    mainColor: '#FF9900',
    networkColor: '#627EEA',
    mainImage: '/coins/amzn.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '📦',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  ENSO: {
    mainColor: 'transparent',
    networkColor: '#627EEA',
    mainImage: '/coins/enso.jpg',
    networkImage: '/coins/eth.png',
    mainSymbol: 'E',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  KAG: {
    mainColor: '#C0C0C0',
    networkColor: '#627EEA',
    mainImage: '/coins/kag.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'KAG',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  XLM: {
    mainColor: '#000000',
    networkColor: '#000000',
    mainImage: '/coins/xlm.png',
    networkImage: '/coins/xlm.png',
    mainSymbol: '⭐',
    networkSymbol: '⭐',
    networkName: 'XLM'
  },
  HYPE: {
    mainColor: '#8B5CF6',
    networkColor: '#14F195',
    mainImage: '/coins/hype.png',
    networkImage: '/coins/sol.png',
    mainSymbol: 'H',
    networkSymbol: 'SOL',
    networkName: 'Solana'
  },
  UNI: {
    mainColor: '#FF007A',
    networkColor: '#627EEA',
    mainImage: '/coins/uni.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '🦄',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  NEAR: {
    mainColor: '#000000',
    networkColor: '#000000',
    mainImage: '/coins/near.png',
    networkImage: '/coins/near.png',
    mainSymbol: 'N',
    networkSymbol: 'N',
    networkName: 'NEAR'
  },
  PEPE: {
    mainColor: '#14AE5C',
    networkColor: '#627EEA',
    mainImage: '/coins/pepe.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '🐸',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  ATOM: {
    mainColor: '#2E3148',
    networkColor: '#2E3148',
    mainImage: '/coins/atom.png',
    networkImage: '/coins/atom.png',
    mainSymbol: 'A',
    networkSymbol: 'A',
    networkName: 'ATOM'
  },
  DASH: {
    mainColor: '#008DE4',
    networkColor: '#008DE4',
    mainImage: '/coins/dash.png',
    networkImage: '/coins/dash.png',
    mainSymbol: 'D',
    networkSymbol: 'D',
    networkName: 'DASH'
  },
  CAKE: {
    mainColor: '#D1884F',
    networkColor: '#F3BA2F',
    mainImage: '/coins/cake.png',
    networkImage: '/coins/bnb.png',
    mainSymbol: '🥞',
    networkSymbol: 'B',
    networkName: 'BSC'
  },
  ZK: {
    mainColor: '#4E529A',
    networkColor: '#627EEA',
    mainImage: '/coins/zk.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'Z',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  HBAR: {
    mainColor: '#000000',
    networkColor: '#14F195',
    mainImage: '/coins/hbar.jpg',
    networkImage: '/coins/sol.png',
    mainSymbol: 'H',
    networkSymbol: 'SOL',
    networkName: 'Solana'
  },
  LTC: {
    mainColor: '#345D9D',
    networkColor: '#345D9D',
    mainImage: '/coins/ltc.png',
    networkImage: '/coins/ltc.png',
    mainSymbol: 'Ł',
    networkSymbol: 'Ł',
    networkName: 'LTC'
  },
  LDO: {
    mainColor: '#0C1C2C',
    networkColor: '#627EEA',
    mainImage: '/coins/ldo.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'L',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  LINK: {
    mainColor: '#2A5ADA',
    networkColor: '#627EEA',
    mainImage: '/coins/link.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '⬡',
    networkSymbol: 'Ξ',
    networkName: 'ETH'
  },
  APT: {
    mainColor: '#000000',
    networkColor: '#000000',
    mainImage: '/coins/apt.png',
    networkImage: '/coins/apt.png',
    mainSymbol: 'A',
    networkSymbol: 'A',
    networkName: 'APT'
  },
  AAVE: {
    mainColor: '#B6509E',
    networkColor: '#627EEA',
    mainImage: '/coins/aave.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'A',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  AVAX: {
    mainColor: '#E84142',
    networkColor: '#E84142',
    mainImage: '/coins/avax.png',
    networkImage: '/coins/avax.png',
    mainSymbol: 'A',
    networkSymbol: 'A',
    networkName: 'Avalanche'
  },
  ASTER: {
    mainColor: '#0AE2FF',
    networkColor: '#627EEA',
    mainImage: '/coins/aster.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'A',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  FIL: {
    mainColor: '#0090FF',
    networkColor: '#0090FF',
    mainImage: '/coins/fil.png',
    networkImage: '/coins/fil.png',
    mainSymbol: 'F',
    networkSymbol: 'F',
    networkName: 'Filecoin'
  },
  PAXG: {
    mainColor: '#E8C341',
    networkColor: '#627EEA',
    mainImage: '/coins/paxg.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'P',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  USDC: {
    mainColor: '#2775CA',
    networkColor: '#627EEA',
    mainImage: '/coins/usdc.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '$',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  USD1: {
    mainColor: 'transparent',
    networkColor: '#14F195',
    mainImage: '/coins/usd1.png',
    networkImage: '/coins/sol.png',
    mainSymbol: '$',
    networkSymbol: 'S',
    networkName: 'Solana'
  },
  XAUt: {
    mainColor: '#F7931A',
    networkColor: '#627EEA',
    mainImage: '/coins/xaut.png',
    networkImage: '/coins/eth.png',
    mainSymbol: '₮',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  TRUMP: {
    mainColor: '#FF0000',
    networkColor: '#9945FF',
    mainImage: '/coins/trump.png',
    networkImage: '/coins/sol.png',
    mainSymbol: 'T',
    networkSymbol: 'S',
    networkName: 'Solana'
  },
  DCR: {
    mainColor: '#2ED6A1',
    networkColor: '#2ED6A1',
    mainImage: '/coins/dcr.png',
    networkImage: '/coins/dcr.png',
    mainSymbol: 'D',
    networkSymbol: 'D',
    networkName: 'Decred'
  },
  SAND: {
    mainColor: '#00ADEF',
    networkColor: '#627EEA',
    mainImage: '/coins/sand.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'S',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  INJ: {
    mainColor: '#00D1FF',
    networkColor: '#00D1FF',
    mainImage: '/coins/inj.png',
    networkImage: '/coins/inj.png',
    mainSymbol: 'I',
    networkSymbol: 'I',
    networkName: 'Injective'
  },
  MNT: {
    mainColor: '#F5C451',
    networkColor: '#111214',
    mainImage: '/coins/mnt.png',
    networkImage: '/coins/mnt.png',
    mainSymbol: 'M',
    networkSymbol: 'M',
    networkName: 'Mantle'
  },
  XMR: {
    mainColor: '#FF6C00',
    networkColor: '#1E1F24',
    mainImage: '/coins/xmr.png',
    networkImage: '/coins/xmr.png',
    mainSymbol: 'X',
    networkSymbol: 'X',
    networkName: 'Monero'
  },
  KAS: {
    mainColor: 'transparent',
    networkColor: '#0F1A36',
    mainImage: '/coins/kas.png',
    networkImage: '/coins/kas.png',
    mainSymbol: 'K',
    networkSymbol: 'K',
    networkName: 'Kaspa'
  },
  ENS: {
    mainColor: 'transparent',
    networkColor: '#627EEA',
    mainImage: '/coins/ens.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'Ε',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  CC: {
    mainColor: 'transparent',
    networkColor: '#1B1B1C',
    mainImage: '/coins/cc.png',
    networkImage: '/coins/cc.png',
    mainSymbol: 'C',
    networkSymbol: 'C',
    networkName: 'Canton'
  },
  XPL: {
    mainColor: 'transparent',
    networkColor: '#2D2E7A',
    mainImage: '/coins/xpl.png',
    networkImage: '/coins/xpl.png',
    mainSymbol: 'P',
    networkSymbol: 'P',
    networkName: 'Plasma'
  },
  LAYER: {
    mainColor: 'transparent',
    networkColor: '#0EA5E9',
    mainImage: '/coins/layer.png',
    networkImage: '/coins/layer.png',
    mainSymbol: 'L',
    networkSymbol: 'L',
    networkName: 'Solayer'
  },
  BERA: {
    mainColor: 'transparent',
    networkColor: '#1E293B',
    mainImage: '/coins/bera.png',
    networkImage: '/coins/bera.png',
    mainSymbol: 'B',
    networkSymbol: 'B',
    networkName: 'Berachain'
  },
  WLFI: {
    mainColor: 'transparent',
    networkColor: '#627EEA',
    mainImage: '/coins/wlfi.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'W',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  ICP: {
    mainColor: 'transparent',
    networkColor: '#00D5FF',
    mainImage: '/coins/icp.png',
    networkImage: '/coins/icp.png',
    mainSymbol: 'I',
    networkSymbol: 'I',
    networkName: 'Internet Computer'
  },
  JUP: {
    mainColor: 'transparent',
    networkColor: '#14F195',
    mainImage: '/coins/jup.png',
    networkImage: '/coins/sol.png',
    mainSymbol: 'J',
    networkSymbol: 'S',
    networkName: 'Solana'
  },
  ZERO: {
    mainColor: 'transparent',
    networkColor: '#627EEA',
    mainImage: '/coins/zero.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'Z',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  ETC: {
    mainColor: '#328332',
    networkColor: '#627EEA',
    mainImage: '/coins/etc.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'E',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  XCH: {
    mainColor: 'transparent',
    networkColor: 'transparent',
    mainImage: '/coins/chia.png',
    networkImage: '/coins/chia.png',
    mainSymbol: 'X',
    networkSymbol: 'X',
    networkName: 'Chia'
  },
  VON: {
    mainColor: 'transparent',
    networkColor: 'transparent',
    mainImage: '/coins/von.jpg',
    networkImage: '/coins/von.jpg',
    mainSymbol: 'V',
    networkSymbol: 'V',
    networkName: 'Vameon'
  },
  ETHZK: {
    mainColor: 'transparent',
    networkColor: 'transparent',
    mainImage: '/coins/eth.png',
    networkImage: '/coins/zk.png',
    mainSymbol: 'Ξ',
    networkSymbol: 'Z',
    networkName: 'zkSync'
  },
  ENA: {
    mainColor: '#000000',
    networkColor: '#627EEA',
    mainImage: '/coins/ena.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'E',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  ETHFI: {
    mainColor: '#7C3AED',
    networkColor: '#627EEA',
    mainImage: '/coins/ethfi.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'E',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  GRASS: {
    mainColor: '#00C853',
    networkColor: '#14F195',
    mainImage: '/coins/grass.jpg',
    networkImage: '/coins/sol.png',
    mainSymbol: 'G',
    networkSymbol: 'S',
    networkName: 'Solana'
  },
  OKB: {
    mainColor: '#3075EE',
    networkColor: '#627EEA',
    mainImage: '/coins/okb.png',
    networkImage: '/coins/eth.png',
    mainSymbol: 'O',
    networkSymbol: 'Ξ',
    networkName: 'Ethereum'
  },
  BCH: {
    mainColor: '#8DC351',
    networkColor: '#8DC351',
    mainImage: '/coins/bch.png',
    networkImage: '/coins/bch.png',
    mainSymbol: 'B',
    networkSymbol: 'B',
    networkName: 'Bitcoin Cash'
  },
  TAO: {
    mainColor: '#000000',
    networkColor: '#000000',
    mainImage: '/coins/tao.png',
    networkImage: '/coins/tao.png',
    mainSymbol: 'T',
    networkSymbol: 'T',
    networkName: 'Bittensor'
  }
};

const DEFAULT_TOKEN_INFO = {
  mainColor: '#666666',
  networkColor: '#666666',
  mainImage: null,
  networkImage: null,
  mainSymbol: '?',
  networkSymbol: '?',
  networkName: 'UNK'
};

const TokenIcon = ({ symbol, size = 'w-12 h-12' }) => {
  const [imageError, setImageError] = useState(false);
  const [networkImageError, setNetworkImageError] = useState(false);

  const token = TOKEN_ICON_MAP[symbol] || DEFAULT_TOKEN_INFO;

  const mainSize = size.includes('w-12') ? 'w-12 h-12' : size;
  const networkSize = size.includes('w-12')
    ? 'w-6 h-6'
    : size
        .replace('w-', 'w-')
        .replace('h-', 'h-')
        .replace(/\d+/g, (match) => Math.floor(parseInt(match, 10) / 2));

  return (
    <div className={`relative ${mainSize}`}>
      <div
        className={`${mainSize} rounded-full flex items-center justify-center shadow-lg overflow-hidden`}
        style={{ backgroundColor: token.mainColor }}
      >
        {token.mainImage && !imageError ? (
          <img
            src={token.mainImage}
            alt={symbol}
            className="w-full h-full object-contain"
            onError={() => setImageError(true)}
          />
        ) : (
          <span className="text-white font-bold text-xl">{token.mainSymbol}</span>
        )}
      </div>

      <div
        className={`absolute -bottom-1 -right-1 ${networkSize} rounded-full flex items-center justify-center shadow-lg overflow-hidden`}
        style={{ backgroundColor: token.networkColor }}
      >
        {token.networkImage && !networkImageError ? (
          <img
            src={token.networkImage}
            alt={`${token.networkName} network`}
            className="w-full h-full object-contain"
            onError={() => setNetworkImageError(true)}
          />
        ) : (
          <span className="text-white font-bold text-xs">{token.networkSymbol}</span>
        )}
      </div>
    </div>
  );
};

export default TokenIcon;
