;(function () {
/* SymbolMark — single source of truth for visual representation of a
   tradable symbol. Resolves in this order:
     1. BTCUSD: bespoke inline BitcoinIcon SVG.
     2. forex: split sym.sym (e.g. EURUSD → 'EU' + 'US') and render two
        overlapping circular flags via flag-icons CSS classes.
     3. stocks (apple, google, tesla, netflix): delegate to existing
        AssetMark.
     4. NVDA / XAUUSD / indices: bespoke inline SVGs.
     5. fallback: 3-letter monogram on a category-tinted circle. */

const FOREX_PAIR_FLAGS = {
  EURUSD: ['eu', 'us'],
  GBPUSD: ['gb', 'us'],
  USDJPY: ['us', 'jp'],
  AUDUSD: ['au', 'us'],
  USDCAD: ['us', 'ca'],
  USDCHF: ['us', 'ch'],
  NZDUSD: ['nz', 'us'],
  EURGBP: ['eu', 'gb'],
  EURJPY: ['eu', 'jp'],
};

const STOCK_KIND_BY_SYM = {
  AAPL: 'apple',
  GOOGL: 'google',
  TSLA: 'tesla',
  NFLX: 'netflix',
};

/* Commodities that have a built-in AssetMark visual treatment.
   XAUUSD now uses the bespoke GoldIcon below (stacked-bars glyph from
   icons/trade/gold.svg); XAGUSD still uses the AssetMark silver
   treatment until a custom silver icon arrives. */
const COMMODITY_KIND_BY_SYM = {
  XAGUSD: 'silver',
};

/* BitcoinIcon — circular 32×32 BTC mark from the user-supplied
   /Users/yusri/Downloads/Crypto Icons/icon/circular/32x32/bitcoin (BTC).svg.
   The asset already provides the orange F7931A background circle and the
   stylised "B" glyph inside one viewBox, so we render it as one SVG and
   scale uniformly via `size`. flexShrink stays 0 to match the other
   inline icons in this file. */
const BitcoinIcon = ({ size = 36 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0, display: 'block' }}>
    <path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="#F7931A"/>
    <path d="M23.0102 13.7033C23.3287 11.5738 21.7075 10.4291 19.4905 9.66548L20.2097 6.7809L18.4538 6.34336L17.7537 9.15199C17.292 9.03686 16.818 8.92838 16.3468 8.82083L17.052 5.99366L15.2972 5.55612L14.5776 8.43976C14.1956 8.35279 13.8204 8.26683 13.4564 8.17626L13.4584 8.16718L11.0369 7.5625L10.5698 9.43795C10.5698 9.43795 11.8726 9.73657 11.8451 9.75495C12.5562 9.93243 12.6848 10.4031 12.6634 10.7762L11.8442 14.0624C11.8932 14.0749 11.9567 14.0929 12.0267 14.121C11.9682 14.1065 11.9058 14.0906 11.8411 14.0751L10.6929 18.6786C10.606 18.8946 10.3854 19.2189 9.88826 19.0957C9.90586 19.1212 8.61202 18.7772 8.61202 18.7772L7.74023 20.7872L10.0253 21.3569C10.4504 21.4635 10.867 21.575 11.2772 21.6799L10.5506 24.5976L12.3045 25.0351L13.0241 22.1484C13.5032 22.2785 13.9682 22.3985 14.4234 22.5116L13.7063 25.3846L15.4623 25.8222L16.1888 22.91C19.1831 23.4767 21.4345 23.2482 22.3821 20.5399C23.1458 18.3594 22.3441 17.1017 20.7689 16.2816C21.9162 16.017 22.7804 15.2623 23.0108 13.7035L23.0103 13.7031L23.0102 13.7033ZM18.9983 19.329C18.4557 21.5095 14.7844 20.3308 13.5941 20.0352L14.5583 16.1698C15.7485 16.4669 19.5655 17.0549 18.9984 19.329H18.9983ZM19.5414 13.6717C19.0463 15.655 15.9907 14.6474 14.9995 14.4003L15.8737 10.8946C16.8649 11.1417 20.057 11.6029 19.5415 13.6717H19.5414Z" fill="white"/>
  </svg>
);

/* GoldIcon — three stacked gold-bar shapes with two small spark-glints
   above. Inlined from icons/trade/gold.svg. Tinted gold so it reads
   as a commodity icon at a glance. */
const GoldIcon = ({ size = 36 }) => (
  <div style={{
    width: `${size}px`, height: `${size}px`,
    borderRadius: `${size / 2}px`,
    background: 'linear-gradient(214deg, #F5DC8A 0%, #D8AB44 55%, #9A6B1C 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  }}>
    <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none">
      <path d="M8.39225 8.15257C8.55313 7.47687 9.15686 7 9.85145 7H14.1485C14.8431 7 15.4469 7.47687 15.6078 8.15257L16.5601 12.1526C16.7846 13.0951 16.0698 14 15.1009 14H8.89907C7.93016 14 7.21544 13.0951 7.43986 12.1526L8.39225 8.15257Z" stroke="#fff" strokeWidth="2"/>
      <path d="M3.39225 15.1526C3.55313 14.4769 4.15686 14 4.85145 14H9.14855C9.84314 14 10.4469 14.4769 10.6078 15.1526L11.5601 19.1526C11.7846 20.0951 11.0698 21 10.1009 21H3.89907C2.93016 21 2.21544 20.0951 2.43986 19.1526L3.39225 15.1526Z" stroke="#fff" strokeWidth="2"/>
      <path d="M13.3922 15.1526C13.5531 14.4769 14.1569 14 14.8515 14H19.1485C19.8431 14 20.4469 14.4769 20.6078 15.1526L21.5601 19.1526C21.7846 20.0951 21.0698 21 20.1009 21H13.8991C12.9302 21 12.2154 20.0951 12.4399 19.1526L13.3922 15.1526Z" stroke="#fff" strokeWidth="2"/>
      <path d="M12 3V4" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M18 4L17 5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M6 4L7 5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  </div>
);

/* Per-index palette + label. Colours nod to each index's market identity. */
const INDEX_META_BY_SYM = {
  NAS100: { label: 'NDX', fromColor: '#0E1420', toColor: '#1F2A3A' },
  US30:   { label: 'DJ',  fromColor: '#1554F0', toColor: '#0E1420' },
  SPX500: { label: 'SPX', fromColor: '#475467', toColor: '#1F2A3A' },
  GER40:  { label: 'DAX', fromColor: '#FFCE00', toColor: '#DD0000' },
};

/* NvdaIcon — circular NVIDIA mark from /Users/yusri/Downloads/nvidia.svg.
   The asset already provides the 76B900 background circle and the
   inline "NV" wordmark inside one viewBox, so we render it as one
   SVG and scale uniformly via `size`. flexShrink stays 0 to match
   the other inline icons in this file. */
const NvdaIcon = ({ size = 36 }) => (
  <svg width={size} height={size} viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0, display: 'block' }}>
    <circle cx="512.25" cy="512.25" r="512" fill="#76b900"/>
    <path d="M430.58 436.9v-33.66c3.26-.23 6.56-.41 9.92-.51 92-2.89 152.41 79.09 152.41 79.09S527.7 572.4 457.78 572.4a84.86 84.86 0 0 1-27.2-4.35V466c35.83 4.33 43 20.15 64.57 56.06l47.91-40.4s-35-45.87-93.91-45.87a170.07 170.07 0 0 0-18.56 1.1m0-111.17V376c3.3-.27 6.61-.47 9.92-.59 128-4.31 211.37 105 211.37 105s-95.79 116.42-195.57 116.42a146.92 146.92 0 0 1-25.74-2.27v31.08A169.64 169.64 0 0 0 452 627c92.85 0 160-47.42 225-103.54 10.77 8.64 54.9 29.63 64 38.83-61.83 51.76-205.91 93.48-287.59 93.48-7.87 0-15.44-.47-22.86-1.19v43.67h352.93V325.73zm0 242.31v26.52C344.69 579.26 320.85 490 320.85 490s41.24-45.69 109.73-53.08V466h-.14c-35.93-4.31-64 29.25-64 29.25s15.74 56.53 64.16 72.8M278 486.11s50.9-75.11 152.54-82.87V376C318 385 220.52 480.36 220.52 480.36S275.73 640 430.58 654.6v-29C316.95 611.34 278 486.11 278 486.11" fill="#fff"/>
  </svg>
);

/* Inline index icons — small geometric monograms with category-tinted gradient. */
const IndexIcon = ({ size = 36, label, fromColor, toColor }) => (
  <div style={{
    width: `${size}px`, height: `${size}px`,
    borderRadius: `${size / 2}px`,
    background: `linear-gradient(135deg, ${fromColor} 0%, ${toColor} 100%)`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  }}>
    <span style={{
      fontFamily: 'Gilroy', fontWeight: 700,
      fontSize: `${Math.round(size * 0.32)}px`,
      color: '#fff',
      letterSpacing: '-0.02em',
    }}>{label}</span>
  </div>
);

/* Category-color fallback for the monogram. */
const CAT_COLORS = {
  forex: '#2E90FA',
  indices: '#344054',
  commodities: '#FAC515',
  crypto: '#5CC6F3',
  stocks: '#00AFAB',
};

const SymbolMark = ({ sym, size = 36 }) => {
  if (!sym) return null;

  /* 1 — Bitcoin gets its own bespoke inline icon. */
  if (sym.cat === 'crypto' && sym.sym === 'BTCUSD') {
    return <BitcoinIcon size={size} />;
  }

  /* 1a — any other crypto with an explicit icon URL (legacy escape
     hatch — no live code path populates `sym.icon` anymore). */
  if (sym.cat === 'crypto' && sym.icon) {
    return (
      <div style={{
        width: `${size}px`, height: `${size}px`,
        borderRadius: `${size / 2}px`,
        overflow: 'hidden',
        backgroundColor: '#fff',
        flexShrink: 0,
        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.05)',
      }}>
        <img src={sym.icon} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
    );
  }

  /* 2 — forex pair with flag-icons */
  if (sym.cat === 'forex' && FOREX_PAIR_FLAGS[sym.sym]) {
    const pair = FOREX_PAIR_FLAGS[sym.sym];
    const a = pair[0];
    const b = pair[1];
    const flagSize = Math.round(size * 0.66);
    return (
      <div style={{ width: `${size}px`, height: `${size}px`, position: 'relative', flexShrink: 0 }}>
        <span className={'fi fi-' + a} style={{
          position: 'absolute',
          top: 0, left: 0,
          width: `${flagSize}px`, height: `${flagSize}px`,
          borderRadius: `${flagSize / 2}px`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          boxShadow: '0 0 0 1.5px #fff',
          display: 'inline-block',
        }}/>
        <span className={'fi fi-' + b} style={{
          position: 'absolute',
          bottom: 0, right: 0,
          width: `${flagSize}px`, height: `${flagSize}px`,
          borderRadius: `${flagSize / 2}px`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          boxShadow: '0 0 0 1.5px #fff',
          display: 'inline-block',
        }}/>
      </div>
    );
  }

  /* 3 — known stocks via AssetMark */
  if (sym.cat === 'stocks' && STOCK_KIND_BY_SYM[sym.sym]) {
    return <window.AssetMark kind={STOCK_KIND_BY_SYM[sym.sym]} size={size} />;
  }

  /* 3a — NVDA bespoke green-N icon */
  if (sym.cat === 'stocks' && sym.sym === 'NVDA') {
    return <NvdaIcon size={size} />;
  }

  /* 3b — XAUUSD uses the bespoke GoldIcon glyph. */
  if (sym.cat === 'commodities' && sym.sym === 'XAUUSD') {
    return <GoldIcon size={size} />;
  }

  /* 3c — silver / other commodities via AssetMark commodity treatment */
  if (sym.cat === 'commodities' && COMMODITY_KIND_BY_SYM[sym.sym]) {
    return <window.AssetMark kind={COMMODITY_KIND_BY_SYM[sym.sym]} size={size} />;
  }

  /* 3c — indices via inline IndexIcon (NAS100, US30, SPX500, GER40) */
  if (sym.cat === 'indices' && INDEX_META_BY_SYM[sym.sym]) {
    const meta = INDEX_META_BY_SYM[sym.sym];
    return <IndexIcon size={size} label={meta.label} fromColor={meta.fromColor} toColor={meta.toColor} />;
  }

  /* 4 — monogram fallback */
  const bg = CAT_COLORS[sym.cat] || '#475467';
  const label = (sym.sym || '').slice(0, 3);
  return (
    <div style={{
      width: `${size}px`, height: `${size}px`,
      borderRadius: `${size / 2}px`,
      backgroundColor: bg,
      color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'Gilroy', fontWeight: 700,
      fontSize: `${Math.round(size * 0.32)}px`,
      flexShrink: 0,
    }}>{label}</div>
  );
};

Object.assign(window, { SymbolMark });
})();