{% extends "base.html" %}
{% block title %}Jobs{% endblock %}
{% block content %}
<h1>Jobs</h1>
<p class="muted">The collectors defined in your config. Start the histo
  <strong>scheduler</strong> to poll OHLC candles periodically, and start/stop
  live <strong>streams</strong> individually. Edit job definitions on the
  <a href="/config">Config</a> page.</p>

<h2>Histo scheduler</h2>
<div class="card">
  <div class="row" style="justify-content:space-between; align-items:center;">
    <div>
      <div class="muted">Scheduler</div>
      <strong id="sched-state" style="font-size:1.3rem;">…</strong>
      <span id="sched-jobs" class="muted"></span>
    </div>
    <button id="sched-toggle" onclick="toggleScheduler()" style="display:none;"></button>
  </div>
  <p id="sched-msg" class="muted" style="min-height:1.2rem; margin:.6rem 0 0;"></p>
</div>

<h3>Scheduled jobs</h3>
<p class="muted">Read-only view of the periodic OHLC polls. Add or remove jobs by
  editing <code>histo_jobs</code> on the <a href="/config">Config</a> page.</p>
<div id="histo-root"><p class="muted">Loading…</p></div>

<h2>Live streams</h2>
<p class="muted">Continuous WebSocket collection of trades/orderbook. Start or stop
  each configured stream. Add streams via <code>stream_jobs</code> on the
  <a href="/config">Config</a> page.</p>
<div class="card">
  <table>
    <thead><tr><th>Exchange</th><th>Pair</th><th>Channels</th><th>Step</th>
      <th>Status</th><th></th></tr></thead>
    <tbody id="stream-body"><tr><td colspan="6" class="muted">Loading…</td></tr></tbody>
  </table>
</div>
{% endblock %}
{% block scripts %}
<script>
  let schedRunning = false;

  function schedMsg(text, cls) {
    const el = document.getElementById('sched-msg');
    el.className = cls || 'muted';
    el.textContent = text;
  }

  function renderScheduler(s) {
    schedRunning = !!s.running;
    const state = document.getElementById('sched-state');
    state.textContent = schedRunning ? 'running' : 'stopped';
    state.className = schedRunning ? 'ok' : 'muted';
    const btn = document.getElementById('sched-toggle');
    btn.style.display = '';
    btn.textContent = schedRunning ? 'Stop scheduler' : 'Start scheduler';
    btn.className = schedRunning ? 'danger' : '';
    document.getElementById('sched-jobs').textContent =
      ' — ' + (s.jobs || []).length + ' scheduled job(s)';
    renderJobs(s.jobs || []);
  }

  function renderJobs(jobs) {
    const root = document.getElementById('histo-root');
    if (!jobs.length) {
      root.innerHTML = '<div class="card"><p class="muted">No histo jobs configured. '
        + 'Add a <code>histo_jobs</code> entry on the Config page.</p></div>';
      return;
    }
    const rows = jobs.map(function (j) {
      const next = j.next_run ? fmtTs(j.next_run) : '<span class="muted">paused</span>';
      return '<tr><td>' + escapeHtml(j.name || j.id) + '</td><td>' + next + '</td></tr>';
    }).join('');
    root.innerHTML = '<div class="card"><table><thead><tr><th>Job</th>' +
      '<th>Next run</th></tr></thead><tbody>' + rows + '</tbody></table></div>';
  }

  async function toggleScheduler() {
    const btn = document.getElementById('sched-toggle');
    btn.disabled = true;
    try {
      await api('POST', schedRunning ? '/api/scheduler/stop' : '/api/scheduler/start');
      schedMsg(schedRunning ? 'Scheduler stopped.' : 'Scheduler started — jobs will fire on schedule.', 'ok');
      await loadScheduler();
    } catch (e) {
      schedMsg(e.message, 'err');
    } finally {
      btn.disabled = false;
    }
  }

  async function loadScheduler() {
    try { renderScheduler(await api('GET', '/api/scheduler')); }
    catch (e) { schedMsg(e.message, 'err'); }
  }

  async function loadStreams() {
    let rows;
    try { rows = await api('GET', '/api/streams'); } catch (e) { return; }
    const sb = document.getElementById('stream-body');
    if (!rows.length) {
      sb.innerHTML = '<tr><td colspan="6" class="muted">No streams configured. '
        + 'Add a <code>stream_jobs</code> entry on the Config page, then start it here.</td></tr>';
      return;
    }
    sb.innerHTML = rows.map(function (j) {
      const chans = attrJson(j.channels);
      const status = j.running
        ? '<span class="ok">running</span>' : '<span class="muted">stopped</span>';
      const btn = j.running
        ? '<button class="danger" onclick="stopStream(' + attrJson(j.exchange) +
          ',' + attrJson(j.pair) + ',' + chans + ')">Stop</button>'
        : '<button onclick="startStream(' + attrJson(j.exchange) +
          ',' + attrJson(j.pair) + ',' + chans + ')">Start</button>';
      return '<tr><td>' + escapeHtml(j.exchange) + '</td><td>' + escapeHtml(j.pair) +
        '</td><td>' + escapeHtml(j.channels.join(', ')) + '</td><td>' + j.time_step +
        '</td><td>' + status + '</td><td>' + btn + '</td></tr>';
    }).join('');
  }

  async function startStream(exchange, pair, channels) {
    try {
      await api('POST', '/api/streams/start', { exchange, pair, channels });
      loadStreams();
    } catch (e) { toast(e.message, 'err'); }
  }

  async function stopStream(exchange, pair, channels) {
    try {
      await api('POST', '/api/streams/stop', { exchange, pair, channels });
      loadStreams();
    } catch (e) { toast(e.message, 'err'); }
  }

  loadScheduler();
  loadStreams();
  setInterval(loadScheduler, 5000);
  setInterval(loadStreams, 5000);
</script>
{% endblock %}