// ============================================================
// Sparkline + MarketContext banner + vs-hodl mini trend
// ============================================================

// ------------------------------------------------------------
// Sparkline — generic inline SVG line/area chart
// ------------------------------------------------------------

function Sparkline({ values, width = 80, height = 24, color = 'var(--accent)', area = true, baseline = null }) {
  if (!values || values.length < 2) {
    return <svg width={width} height={height} style={{ opacity: 0.4 }}><line x1="0" x2={width} y1={height/2} y2={height/2} stroke="currentColor" strokeWidth="1" strokeDasharray="2 3" /></svg>;
  }
  const min = Math.min(...values, baseline ?? Infinity);
  const max = Math.max(...values, baseline ?? -Infinity);
  const range = max - min || 1;
  const stepX = width / (values.length - 1);
  const pts = values.map((v, i) => [i * stepX, height - ((v - min) / range) * (height - 2) - 1]);
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const areaPath = `${path} L${width},${height} L0,${height} Z`;
  const last = pts[pts.length - 1];

  return (
    <svg width={width} height={height} style={{ display: 'block', overflow: 'visible' }}>
      {area && <path d={areaPath} fill={color} opacity="0.12" />}
      <path d={path} stroke={color} strokeWidth="1.5" fill="none" strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={last[0]} cy={last[1]} r="2" fill={color} />
    </svg>
  );
}

// ------------------------------------------------------------
// MarketContext — tier-1 event + headlines slim banner
// ------------------------------------------------------------

function MarketContext({ research }) {
  const snap = research?.market_snapshot || {};
  const tier1 = snap.active_tier1_event;
  const tier2 = snap.active_tier2_event;
  const headlines = snap.top_headlines || [];
  const divergence = snap.price_sentiment_divergence;

  if (!tier1 && headlines.length === 0) return null;

  return (
    <div className="context-banner">
      <div className="context-head">
        <div className="context-tag">
          <span className="context-tag-dot"></span>
          <span>Tier-1 context</span>
        </div>
        <div className="context-meta">
          {divergence && <span className="badge accent" style={{ marginRight: 8 }}>{divergence.replace(/_/g, ' ')}</span>}
          <span className="c-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em', fontSize: 10 }}>
            {snap.fear_greed_extreme_fear_first_print_this_cycle ? 'first extreme-fear print this cycle' : 'live'}
          </span>
        </div>
      </div>
      {tier1 && (
        <div className="context-body">{BTC.truncate(tier1, 360)}</div>
      )}
      {headlines.length > 0 && (
        <div className="context-headlines">
          {headlines.slice(0, 3).map((h, i) => (
            <div key={i} className="context-headline">
              <span className="bullet">▸</span>
              <span>{BTC.truncate(h, 130)}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Sparkline, MarketContext });