// ============================================================
// Side panels — MarketSnapshot, DirectivePanel, WatchlistPanel
// ============================================================

function MarketSnapshot({ research }) {
  const snap = research?.market_snapshot || {};
  const perp = research?.perp_signals || {};
  const opts = research?.options_signals || {};

  const fg = snap.fear_greed_index ?? 0;
  const fgSeries = snap.fear_greed_last7_oldest_to_newest || [];
  const fgColor =
    fg < 20 ? 'var(--red)' :
    fg < 40 ? 'var(--amber)' :
    fg < 60 ? 'var(--text-dim)' :
    fg < 80 ? 'var(--blue)' : 'var(--green)';

  const fundingBps = (perp.funding_rate_latest_realized || 0) * 10000;
  const fundingPredBps = (perp.funding_rate_current_predicted || 0) * 10000;

  return (
    <div className="card accent-cyan">
      <CardCommand command="./query_market.sh" flag="--snapshot" />
      <div className="card-head">
        <div className="card-head-row">
          <span className="section-label">MARKET</span>
          <span className="badge accent">{research?.market_regime?.replace('_', ' ') || '—'}</span>
        </div>
        <div className="section-meta">{snap.fear_greed_label || ''}</div>
      </div>

      <div className="market-big">
        <div className="btc-price">{BTC.fmtUSD(snap.btc_spot_price_usdt)}</div>
        <div className="price-row">
          <span className={`delta-pill ${BTC.deltaClass(snap.change_24h_pct)}`}>
            {BTC.fmtPctSigned(snap.change_24h_pct, 2)} 24h
          </span>
          <span className={`delta-pill ${BTC.deltaClass(snap.change_7d_pct)}`}>
            {BTC.fmtPctSigned(snap.change_7d_pct, 2)} 7d
          </span>
          <span className={`delta-pill ${BTC.deltaClass(snap.change_30d_pct)}`}>
            {BTC.fmtPctSigned(snap.change_30d_pct, 2)} 30d
          </span>
        </div>
      </div>

      <div className="fg-row" style={{ color: fgColor }}>
        <div className="fg-ring" style={{ '--pct': fg }}>
          <div className="fg-ring-inner">{fg}</div>
        </div>
        <div className="fg-info">
          <div className="fg-label">Fear &amp; Greed · {snap.fear_greed_label || '—'}</div>
          <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
            7d trend · {snap.fear_greed_3d_trend || '—'}
          </div>
          <div className="fg-spark" style={{ color: fgColor }}>
            {fgSeries.map((v, i) => (
              <div
                key={i}
                className={`fg-bar ${i === fgSeries.length - 1 ? 'curr' : ''}`}
                style={{ height: `${Math.max(15, (v / 100) * 100)}%` }}
                title={`${v}`}
              ></div>
            ))}
          </div>
        </div>
      </div>

      <div>
        <div className="market-row">
          <span className="market-key">Funding (latest)</span>
          <span className={`market-val ${BTC.signClass(-fundingBps)}`}>{fundingBps.toFixed(2)} bps</span>
        </div>
        <div className="market-row">
          <span className="market-key">Funding (predicted)</span>
          <span className={`market-val ${BTC.signClass(-fundingPredBps)}`}>{fundingPredBps.toFixed(2)} bps</span>
        </div>
        <div className="market-row">
          <span className="market-key">Open interest 24h</span>
          <span className={`market-val ${BTC.signClass(perp.open_interest_24h_change_pct)}`}>
            {BTC.fmtPctSigned(perp.open_interest_24h_change_pct, 2)}
          </span>
        </div>
        <div className="market-row">
          <span className="market-key">L/S buy ratio</span>
          <span className="market-val">{perp.long_short_ratio?.toFixed(3) || '—'}</span>
        </div>
        <div className="market-row">
          <span className="market-key">Basis</span>
          <span className={`market-val ${BTC.signClass(perp.basis_pct)}`}>
            {perp.basis_pct != null ? `${perp.basis_pct.toFixed(3)}%` : '—'}
          </span>
        </div>
        <div className="market-row">
          <span className="market-key">ATM IV (weekly)</span>
          <span className="market-val">{opts.atm_iv_pct_comparable_weekly_22MAY26?.toFixed(1) || opts.atm_iv_pct_short_dated_weekly?.toFixed(1) || '—'}%</span>
        </div>
        <div className="market-row">
          <span className="market-key">BTC dominance</span>
          <span className="market-val">{snap.btc_dominance_pct?.toFixed(2) || '—'}%</span>
        </div>
        <div className="market-row">
          <span className="market-key">Sentiment</span>
          <span className="market-val">
            <span className={`badge ${snap.sentiment_summary === 'bullish' ? 'active' : snap.sentiment_summary === 'bearish' ? 'under' : 'neutral'}`}>
              {snap.sentiment_summary || '—'}
            </span>
          </span>
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
// DirectivePanel — orchestrator priority/focus/notes
// ------------------------------------------------------------

function DirectivePanel({ directive }) {
  const [open, setOpen] = useState(false);
  if (!directive) return null;

  const priorityCol = BTC.priorityColor(directive.priority_this_week);

  return (
    <div className="card accent-purple">
      <CardCommand command="./read_directive.sh" />
      <div className="card-head">
        <div className="card-head-row">
          <span className="section-label">ORCHESTRATOR_DIRECTIVE</span>
        </div>
        <div className="section-meta">{directive.date || '—'} · {directive.mode || ''}</div>
      </div>

      <div className="directive-row">
        <div className="directive-cell">
          <div className="lbl">Priority</div>
          <div className="val" style={{ color: priorityCol, textTransform: 'capitalize' }}>
            {directive.priority_this_week || '—'}
          </div>
        </div>
        <div className="directive-cell">
          <div className="lbl">Max position</div>
          <div className="val c-accent">{directive.max_position_size_pct || '—'}%</div>
        </div>
        <div className="directive-cell">
          <div className="lbl">Confidence</div>
          <div className="val" style={{ textTransform: 'capitalize' }}>{directive.allocation_confidence || '—'}</div>
        </div>
        <div className="directive-cell">
          <div className="lbl">USDT trade</div>
          <div className="val">{directive.usdt_trade_active ? 'active' : 'off'}</div>
        </div>
        <div className="directive-cell">
          <div className="lbl">Alt rotation</div>
          <div className="val">{directive.alt_rotation_active ? 'active' : 'off'}</div>
        </div>
      </div>

      <div style={{
        fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase',
        letterSpacing: '0.12em', marginBottom: 8
      }}>
        Focus area
      </div>
      <div className={`directive-notes ${open ? 'open' : ''}`}>
        {directive.focus_area || directive.notes || '—'}
      </div>
      {(directive.focus_area || directive.notes || '').length > 200 && (
        <button className="expand-btn" onClick={() => setOpen(!open)}>
          {open ? '▴ collapse' : '▾ expand directive'}
        </button>
      )}
    </div>
  );
}

// ------------------------------------------------------------
// WatchlistPanel — near-miss alt candidates
// ------------------------------------------------------------

function WatchlistPanel({ watchlist }) {
  const candidates = watchlist?.candidates || [];
  const nearMiss = watchlist?.near_miss_candidates || [];
  const all = [...candidates, ...nearMiss].slice(0, 3);

  return (
    <div className="card accent-amber">
      <CardCommand command="./scan_alts.sh" flag="--btc-pairs" live={true} />
      <div className="card-head">
        <div className="card-head-row">
          <span className="section-label">ALT_WATCHLIST</span>
          <span className={`badge ${candidates.length > 0 ? 'active' : 'neutral'}`}>
            {candidates.length > 0 ? `${candidates.length} ready` : 'rotation off'}
          </span>
        </div>
        <div className="section-meta">dom {watchlist?.btc_dominance_pct_today?.toFixed(2)}%</div>
      </div>

      {all.length === 0 ? (
        <div className="empty-state">
          <div className="empty-state-body">No candidates this scan.</div>
        </div>
      ) : (
        <>
          {all.map((c) => (
            <div key={c.symbol} className="watch-item">
              <div className="watch-head">
                <div>
                  <div className="watch-sym">{c.symbol}</div>
                  <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                    {c.coin} · vol {c.volume_24h_btc_turnover?.toFixed(1)} BTC
                  </div>
                </div>
                <div className="watch-score" style={{ color: c.score >= 65 ? 'var(--green)' : c.score >= 50 ? 'var(--amber)' : 'var(--muted)' }}>
                  {c.score}<span style={{ fontSize: 10, color: 'var(--muted)' }}>/100</span>
                </div>
              </div>
              {c.score_breakdown && (
                <div className="watch-breakdown">
                  <div className="watch-stat">
                    <div className="v">{c.score_breakdown.relative_strength_vs_btc}</div>
                    <div className="k">Rel str</div>
                  </div>
                  <div className="watch-stat">
                    <div className="v">{c.score_breakdown.catalyst_quality}</div>
                    <div className="k">Catalyst</div>
                  </div>
                  <div className="watch-stat">
                    <div className="v">{c.score_breakdown.entry_quality}</div>
                    <div className="k">Entry</div>
                  </div>
                  <div className="watch-stat">
                    <div className="v">{c.score_breakdown.liquidity}</div>
                    <div className="k">Liq</div>
                  </div>
                </div>
              )}
              <div className="watch-foot">
                <span className={`chip ${BTC.deltaClass(c.btc_pair_24h_change_pct)}`}>
                  24h {BTC.fmtPctSigned(c.btc_pair_24h_change_pct, 2)}
                </span>
                <span className={`chip ${BTC.deltaClass(c.btc_pair_7d_change_pct)}`}>
                  7d {BTC.fmtPctSigned(c.btc_pair_7d_change_pct, 2)}
                </span>
                <span className={`chip ${BTC.deltaClass(c.btc_pair_14d_change_pct)}`}>
                  14d {BTC.fmtPctSigned(c.btc_pair_14d_change_pct, 2)}
                </span>
              </div>
              {c.rejection_reason && (
                <div style={{
                  marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border)',
                  fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.55
                }}>
                  <span className="c-muted" style={{
                    fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.12em', marginRight: 4
                  }}>why not</span>
                  {BTC.truncate(c.rejection_reason, 180)}
                </div>
              )}
            </div>
          ))}
        </>
      )}

      {watchlist?.tomorrow_watch_triggers?.length > 0 && (
        <div style={{
          marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)',
          fontSize: 11
        }}>
          <div className="c-muted" style={{
            textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 9, marginBottom: 6
          }}>
            Tomorrow watch
          </div>
          <ul style={{ listStyle: 'none', padding: 0, color: 'var(--text-dim)' }}>
            {watchlist.tomorrow_watch_triggers.slice(0, 3).map((t, i) => (
              <li key={i} style={{
                padding: '4px 0', display: 'flex', gap: 8, alignItems: 'flex-start'
              }}>
                <span style={{ color: 'var(--accent)', flexShrink: 0 }}>▸</span>
                <span>{BTC.truncate(t, 110)}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MarketSnapshot, DirectivePanel, WatchlistPanel });