// ============================================================
// Strategy proximity meters, today's signals, open positions
// ============================================================

function Strategy({ strat, research, isFocus }) {
  const cfg = BTC.LEG_CONFIG[strat.id];
  const legs = cfg ? cfg.legs.map((leg) => ({ ...leg, ...leg.read(research) })) : [];
  const metCount = legs.filter((l) => l.met).length;
  const totalLegs = legs.length;
  const badge = BTC.statusBadge(strat.status);
  const scoreHistory = (strat.score_history || []).map((s) => s.score);
  const scoreTrend = scoreHistory.length >= 2
    ? scoreHistory[scoreHistory.length - 1] - scoreHistory[0] : 0;
  const sparkColor =
    scoreTrend > 0 ? 'var(--green)' :
    scoreTrend < 0 ? 'var(--red)' : 'var(--muted2)';

  return (
    <div className={`strategy ${isFocus ? 'focus' : ''}`}>
      <div className="strategy-head">
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="strategy-name">{strat.name}</div>
          <div className="strategy-id">
            {strat.id} · {strat.type} · {strat.trade_pair}
            {isFocus && <span style={{ color: 'var(--accent)', marginLeft: 8, letterSpacing: 0.1 }}>● closest</span>}
          </div>
        </div>
        <div className="strategy-right">
          {scoreHistory.length >= 2 && (
            <div className="strategy-spark">
              <span className="strategy-spark-label">{scoreHistory.length}d</span>
              <Sparkline values={scoreHistory} width={50} height={20} color={sparkColor} area={false} />
            </div>
          )}
          <div className="score-block">
            <div className="score-num">{strat.score ?? '—'}<span style={{ fontSize: 11, color: 'var(--muted)' }}>/100</span></div>
            <div className="score-label">score</div>
          </div>
          <span className={`badge ${badge}`}>{(strat.status || '').replace('_', ' ')}</span>
        </div>
      </div>

      {totalLegs > 0 && (
        <>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8,
            fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--muted)'
          }}>
            <span>Entry conditions</span>
            <span style={{ color: metCount > 0 ? 'var(--green)' : 'var(--text-dim)' }}>
              {metCount} of {totalLegs} met
            </span>
            <span style={{ flex: 1, height: 1, background: 'var(--border)' }}></span>
          </div>
          <div className="leg-meter">
            {legs.map((leg) => (
              <div key={leg.key} className={`leg ${leg.met ? 'met' : leg.near ? 'near' : ''}`}>
                <div className="leg-head">
                  <span className="leg-name">{leg.name}</span>
                  <span className="leg-dot"></span>
                </div>
                <div className="leg-current">{leg.display}</div>
                <div className="leg-trigger">trigger {leg.triggerLabel}</div>
                <div className="leg-bar" style={{ width: `${Math.max(0, Math.min(100, leg.progressPct || 0))}%` }}></div>
              </div>
            ))}
          </div>
        </>
      )}

      <div className="strategy-meta">
        <div><span className="lbl">win</span><span>{BTC.fmt(strat.win_rate || 0)}%</span></div>
        <div>
          <span className="lbl">vs btc</span>
          <span className={BTC.signClass(strat.return_vs_btc_pct || 0)}>
            {BTC.fmtPctSigned(strat.return_vs_btc_pct || 0, 2)}
          </span>
        </div>
        <div><span className="lbl">trades</span><span>{strat.trades_taken || 0}</span></div>
        <div><span className="lbl">days</span><span>{strat.days_active || 0}</span></div>
        {strat.net_edge_per_trade_pct != null && (
          <div><span className="lbl">edge</span><span>{BTC.fmt(strat.net_edge_per_trade_pct)}%</span></div>
        )}
      </div>

      {strat.trigger_distance_notes && (
        <div className="strategy-summary">
          <span className="lbl">Proximity</span>
          {BTC.truncate(strat.trigger_distance_notes, 240)}
        </div>
      )}
    </div>
  );
}

function StrategiesPanel({ strategies, research, signals }) {
  const list = (strategies?.strategies || []).filter((s) => s.status !== 'retired');
  const sorted = [...list].sort((a, b) => (b.score || 0) - (a.score || 0));
  const focusId = signals?.evaluation_summary?.closest_to_triggering?.split('—')[0].trim();

  return (
    <div className="card accent-cyan">
      <CardCommand command="./scan_strategies.sh" flag="--all" live={true} />
      <div className="card-head">
        <div className="card-head-row">
          <span className="section-label">ACTIVE_STRATEGIES</span>
          <span className="badge neutral">{list.length}</span>
        </div>
        <div className="section-meta">
          {strategies?.evaluation_summary_today?.strategies_triggered ?? 0} triggered today ·{' '}
          {(strategies?.strategies || []).filter((s) => s.status === 'retired').length} retired
        </div>
      </div>
      <div className="strategies-list">
        {sorted.map((s) => (
          <Strategy
            key={s.id}
            strat={s}
            research={research}
            isFocus={focusId && s.id === focusId}
          />
        ))}
        {sorted.length === 0 && (
          <div className="empty-state">
            <div className="empty-state-title">
              <span className="dot-big"></span>
              No strategies yet
            </div>
            <div className="empty-state-body">
              Researcher will generate hypotheses on its next run; Strategy Tester then registers them here.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ------------------------------------------------------------
// TodaySignals — signals or rich empty state
// ------------------------------------------------------------

function TodaySignals({ signals, research, directive }) {
  const list = signals?.signals || [];
  const evalSum = signals?.evaluation_summary;

  if (list.length === 0) {
    const reason = signals?.no_signal_reason || 'No signals generated today.';
    return (
      <div className="card accent-amber">
        <div className="card-head">
          <div className="card-head-row">
            <span className="section-label">TODAYS_SIGNALS</span>
            <span className="badge warn">none</span>
          </div>
          <div className="section-meta">{signals?.date || BTC.formatDay(new Date().toISOString())}</div>
        </div>
        <div className="empty-state">
          <div className="empty-state-title">
            <span className="dot-big"></span>
            Standing pat
          </div>
          <div className="empty-state-body">{BTC.truncate(reason, 520)}</div>
          <div className="empty-state-foot">
            <div><strong>Regime</strong> · {evalSum?.regime_today?.split('—')[0].trim() || research?.market_regime || '—'}</div>
            <div><strong>Evaluated</strong> · {evalSum?.strategies_evaluated ?? '—'}</div>
            <div><strong>Closest</strong> · {BTC.truncate(evalSum?.closest_to_triggering?.split('—')[0].trim() || '—', 32)}</div>
            <div><strong>Priority</strong> · {directive?.priority_this_week || '—'}</div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="card accent-cyan">
      <div className="card-head">
        <div className="card-head-row">
          <span className="section-label">TODAYS_SIGNALS</span>
          <span className="badge active">{list.length} firing</span>
        </div>
        <div className="section-meta">{signals?.date || ''}</div>
      </div>
      {list.map((s, i) => (
        <div key={i} className="signal-card">
          <div className="signal-head">
            <div>
              <div className={`signal-action ${s.action === 'BUY' ? 'c-pos' : s.action === 'SELL' ? 'c-neg' : ''}`}>
                {s.action} {s.asset}
              </div>
              <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                {s.strategy_id}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <span className="badge neutral">{s.confidence} conf</span>
              {s.paper_only && <span className="badge paper" style={{ marginLeft: 6 }}>paper</span>}
            </div>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.55 }}>{s.reasoning}</div>
          <div className="signal-meta">
            <div><span className="lbl">TP</span><span className="c-pos">+{s.take_profit_pct}%</span></div>
            <div><span className="lbl">SL</span><span className="c-neg">-{s.stop_loss_pct}%</span></div>
            <div><span className="lbl">size</span><span>{s.position_size_pct_of_portfolio}%</span></div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ------------------------------------------------------------
// OpenPositions — table or empty state
// ------------------------------------------------------------

function OpenPositions({ portfolio }) {
  const positions = portfolio?.open_positions || [];

  return (
    <div className="card accent-magenta">
      <div className="card-head">
        <div className="card-head-row">
          <span className="section-label">OPEN_POSITIONS</span>
          <span className="badge neutral">{positions.length}</span>
        </div>
        <div className="section-meta">
          {(portfolio?.closed_trades || []).length} closed
        </div>
      </div>
      {positions.length === 0 ? (
        <div className="empty-state">
          <div className="empty-state-title">
            <span className="dot-big" style={{ background: 'var(--muted)' }}></span>
            Flat — 100% spot BTC
          </div>
          <div className="empty-state-body">
            No active trades. Trader is paper-tracking {BTC.fmtBTC(portfolio?.btc_holdings || 0, 8)} BTC against the hodl benchmark.
          </div>
        </div>
      ) : (
        <table className="positions">
          <thead>
            <tr>
              <th>Asset</th>
              <th>Type</th>
              <th>Entry</th>
              <th>Qty</th>
              <th>TP</th>
              <th>SL</th>
              <th>Strategy</th>
              <th>Opened</th>
            </tr>
          </thead>
          <tbody>
            {positions.map((pos, i) => (
              <tr key={i}>
                <td><strong>{pos.asset || 'BTC'}</strong></td>
                <td><span className={`badge ${pos.trade_type === 'usdt_trade' ? 'under' : 'active'}`}>{pos.trade_type || 'buy'}</span></td>
                <td>{pos.entry_price_usdt ? BTC.fmtUSD(pos.entry_price_usdt) : '—'}</td>
                <td>₿{BTC.fmtBTC(pos.quantity_btc, 6)}</td>
                <td>{pos.take_profit_price_usdt ? BTC.fmtUSD(pos.take_profit_price_usdt) : '—'}</td>
                <td>{pos.stop_loss_price_usdt ? BTC.fmtUSD(pos.stop_loss_price_usdt) : '—'}</td>
                <td className="c-muted">{pos.strategy_id || '—'}</td>
                <td className="c-muted">{pos.opened_date || '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

Object.assign(window, { StrategiesPanel, TodaySignals, OpenPositions });