;(function () {
/* ExpandedChart — modal overlay layered ON TOP of the trade page (does
   NOT route-navigate). Renders a much taller candlestick TVChart of the
   selected symbol, plus a header with the symbol name and a close X.
   Backdrop tap dismisses. Entry: fade + 0.92→1 scale. */

const ExpandedChart = ({ sym, onClose }) => {
  const [mounted, setMounted] = React.useState(false);
  const [shown, setShown] = React.useState(false);

  React.useEffect(() => {
    if (sym) {
      setMounted(true);
      const raf = requestAnimationFrame(() => setShown(true));
      return () => cancelAnimationFrame(raf);
    } else if (mounted) {
      setShown(false);
      const t = setTimeout(() => setMounted(false), (window.TRANSITION && window.TRANSITION.OUT_DURATION) || 350);
      return () => clearTimeout(t);
    }
  }, [sym]);

  if (!mounted || !sym) return null;

  /* Build chart data from sym.spark — same convention as the hero. */
  const data = (sym.spark || []).map((v, i, arr) => ({
    time: Math.floor(Date.now() / 1000) - (arr.length - 1 - i) * 5,
    value: v,
  }));
  /* Symbols without a live tick feed get the same 20-candle static
     shape as the inline hero chart; symbols with realFeed: 'dummy'
     have a populated sym.ohlc that wins. */
  const ohlc = (sym && sym.ohlc)
    || (sym && sym.realFeed !== 'dummy' && window.makeStaticCandles ? window.makeStaticCandles(sym, 20) : null);
  const positive = sym.change >= 0;
  const color = positive ? '#079455' : '#F04438';

  return (
    <div
      onClick={onClose}
      style={{
        position: 'absolute',
        inset: 0,
        background: 'rgba(14,20,32,0.55)',
        zIndex: 9000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '20px',
        opacity: shown ? 1 : 0,
        transition: shown
          ? (window.TRANSITION ? window.TRANSITION.IN_TRANSITION : 'opacity 750ms ease')
          : (window.TRANSITION ? window.TRANSITION.OUT_TRANSITION : 'opacity 350ms ease'),
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          backgroundColor: '#fff',
          borderRadius: '20px',
          padding: '20px 16px 16px',
          width: '100%',
          maxWidth: '350px',
          maxHeight: '600px',
          display: 'flex',
          flexDirection: 'column',
          gap: '12px',
          transform: shown ? 'scale(1)' : 'scale(0.92)',
          transition: shown
            ? `transform ${(window.TRANSITION ? window.TRANSITION.IN_DURATION : 750)}ms cubic-bezier(0.16, 1, 0.3, 1)`
            : `transform ${(window.TRANSITION ? window.TRANSITION.OUT_DURATION : 350)}ms cubic-bezier(0.32, 0, 0.67, 0)`,
          boxShadow: '0 30px 60px rgba(14,20,32,0.35)',
        }}
      >
        {/* Header row: mark + name + close X */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <window.SymbolMark sym={sym} size={36} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Gilroy', fontWeight: 700, fontSize: '18px', color: colors.ink }}>{sym.sym}</div>
            <div style={{ fontFamily: 'Inter', fontSize: '12px', color: colors.muted2 }}>{sym.name}</div>
          </div>
          <button
            onClick={onClose}
            style={{
              border: 'none',
              background: colors.bg,
              width: '32px',
              height: '32px',
              borderRadius: '16px',
              cursor: 'pointer',
              fontFamily: 'Gilroy',
              fontWeight: 600,
              fontSize: '16px',
              color: colors.ink2,
            }}
          >×</button>
        </div>
        {/* Big price + change */}
        <div style={{ marginTop: '4px' }}>
          <div style={{ fontFamily: 'Gilroy', fontWeight: 700, fontSize: '28px', color: colors.ink, fontVariantNumeric: 'tabular-nums' }}>
            {window.formatPrice(sym.bid, sym)}
          </div>
          <div style={{ fontFamily: 'Inter', fontSize: '13px', fontWeight: 600, color: color, marginTop: '2px' }}>
            {positive ? '↑ +' : '↓ '}{sym.change.toFixed(2)}%
          </div>
        </div>
        {/* Tall candlestick chart */}
        <div style={{ flex: 1, minHeight: '320px' }}>
          <window.TVChart data={data} ohlc={ohlc} color={color} kind="candlestick" height={320} />
        </div>
      </div>
    </div>
  );
};

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