// ============================================================
// TickerBar — running data strip across the top
// CardCommand — terminal-prompt subheader for cards
// ============================================================

function TickerBar({ research, portfolio, directive }) {
  const snap = research?.market_snapshot || {};
  const perp = research?.perp_signals || {};
  const perf = portfolio?.performance || {};

  const items = [
    {
      label: 'BTC',
      value: snap.btc_spot_price_usdt ? BTC.fmtUSD(snap.btc_spot_price_usdt) : '—',
      delta: snap.change_24h_pct,
      tone: BTC.deltaClass(snap.change_24h_pct),
    },
    {
      label: 'STACK',
      value: '₿' + (portfolio?.btc_equivalent_total || 0).toFixed(6),
      delta: perf.vs_hodl_btc_pct,
      tone: BTC.deltaClass(perf.vs_hodl_btc_pct),
      subLabel: 'vs hodl',
    },
    {
      label: 'F&G',
      value: snap.fear_greed_index ?? '—',
      sub: snap.fear_greed_label,
      tone: snap.fear_greed_index < 30 ? 'neg' : snap.fear_greed_index > 70 ? 'pos' : 'flat',
    },
    {
      label: 'FUNDING',
      value: ((perp.funding_rate_latest_realized || 0) * 10000).toFixed(2) + ' bps',
      delta: null,
      tone: perp.funding_rate_latest_realized < 0 ? 'pos' : 'flat',
    },
    {
      label: 'OI 24H',
      value: BTC.fmtPctSigned(perp.open_interest_24h_change_pct, 2),
      tone: BTC.deltaClass(perp.open_interest_24h_change_pct),
    },
    {
      label: 'BASIS',
      value: perp.basis_pct != null ? perp.basis_pct.toFixed(3) + '%' : '—',
      tone: BTC.deltaClass(perp.basis_pct),
    },
    {
      label: 'L/S',
      value: (perp.long_short_ratio || 0).toFixed(3),
      tone: 'flat',
    },
    {
      label: 'BTC.D',
      value: snap.btc_dominance_pct?.toFixed(2) + '%',
      tone: 'flat',
    },
    {
      label: 'REGIME',
      value: (research?.market_regime || '—').replace('_', ' ').toUpperCase(),
      tone: 'flat',
    },
    {
      label: 'COLD-START',
      value: directive?.cold_start ? `${directive.cold_start_day}/14` : 'off',
      tone: directive?.cold_start ? 'cool' : 'flat',
    },
  ];

  return (
    <div className="ticker-bar">
      <div className="ticker-inner">
        {items.map((item, i) => (
          <div key={i} className="ticker-item">
            <span className="ticker-label">{item.label}</span>
            <span className={`ticker-value ${item.tone === 'pos' ? 'c-pos' : item.tone === 'neg' ? 'c-neg' : item.tone === 'cool' ? 'c-blue' : ''}`}>
              {item.value}
            </span>
            {item.delta != null && (
              <span className={`ticker-delta ${item.tone === 'pos' ? 'c-pos' : item.tone === 'neg' ? 'c-neg' : 'c-muted'}`}>
                {BTC.fmtPctSigned(item.delta, 2)}
              </span>
            )}
            {item.sub && <span className="ticker-sub">{item.sub}</span>}
            {item.subLabel && <span className="ticker-sub">{item.subLabel}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------------------------------------------------
// CardCommand — terminal prompt subheader for cards
// ------------------------------------------------------------

function CardCommand({ command, flag, live = false }) {
  return (
    <div className="card-cmd">
      <span className="card-cmd-prompt">$</span>
      <span className="card-cmd-script">{command}</span>
      {flag && <span className="card-cmd-flag">{flag}</span>}
      {live && <span className="card-cmd-live">● live</span>}
    </div>
  );
}

Object.assign(window, { TickerBar, CardCommand });