{% extends "base.html" %}
{% block title %}Inventory{% endblock %}
{% block content %}
<div class="row" style="justify-content:space-between; align-items:flex-end;">
  <div>
    <h1>Inventory</h1>
    <p class="muted">Stored data, grouped by exchange. <strong>Update</strong> fetches
      candles up to now; <strong>Backfill</strong> fills missing history from a
      chosen start date.</p>
  </div>
  <div class="row">
    <button id="collect-all-btn" class="ghost" onclick="updateSeries(null, null)" style="display:none;">Update all</button>
    <button id="bf-all-btn" onclick="openBackfill(null, null)" style="display:none;">Backfill all</button>
  </div>
</div>
<p id="inv-status" class="muted" style="min-height:1.2rem;"></p>
<div id="inv-root"><p class="muted">Loading…</p></div>
{% include "partials/backfill_modal.html" %}
{% endblock %}
{% block scripts %}
<script>
  function invStatus(text, cls) {
    const el = document.getElementById('inv-status');
    el.className = cls || 'muted';
    el.textContent = text;
  }

  async function updateSeries(exchange, pair) {
    const label = pair ? (exchange + ' ' + pair) : (exchange || 'all jobs');
    invStatus('Updating ' + label + '…', 'muted');
    try {
      const body = {};
      if (exchange) body.exchange = exchange;
      if (pair) body.pair = pair;
      await api('POST', '/api/collect', body);
      invStatus('Update started for ' + label +
        '. Candles up to now are being fetched — check the Dashboard for updated metrics.', 'ok');
    } catch (e) {
      invStatus(e.message, 'err');
    }
  }

  function rowHtml(s) {
    let actions = '';
    if (s.type === 'ohlc') {
      actions =
        '<button class="ghost" onclick="updateSeries(' + attrJson(s.exchange) + ',' +
        attrJson(s.pair) + ')">Update</button> ' +
        '<button class="ghost" onclick="openBackfill(' + attrJson(s.exchange) + ',' +
        attrJson(s.pair) + ')">Backfill</button>';
    }
    const gapCls = s.gaps > 0 ? 'err' : 'ok';
    return '<tr><td>' + escapeHtml(s.pair) + '</td><td>' + escapeHtml(s.type) +
      '</td><td>' + s.span + '</td><td>' + (s.first || '-') + '</td><td>' +
      (s.last || '-') + '</td><td>' + s.rows.toLocaleString() +
      '</td><td class="' + gapCls + '">' + s.gaps + '</td><td style="white-space:nowrap;">' +
      actions + '</td></tr>';
  }

  async function loadInventory() {
    const root = document.getElementById('inv-root');
    try {
      const rows = await api('GET', '/api/inventory');
      if (!rows.length) {
        root.innerHTML = '<div class="card"><p class="muted">No data found yet. '
          + 'Run a backfill or collect from a configured job to populate it.</p></div>';
        return;
      }
      document.getElementById('bf-all-btn').style.display = '';
      document.getElementById('collect-all-btn').style.display = '';
      const groups = {};
      rows.forEach(function (s) { (groups[s.exchange] = groups[s.exchange] || []).push(s); });
      root.innerHTML = Object.keys(groups).sort().map(function (ex) {
        const body = groups[ex].map(rowHtml).join('');
        return '<div class="row" style="justify-content:space-between; align-items:center; margin-top:1.2rem;">' +
          '<h2 style="margin:0;">' + escapeHtml(ex) + '</h2>' +
          '<div class="row"><button class="ghost" onclick="updateSeries(' + attrJson(ex) +
          ', null)">Update ' + escapeHtml(ex) + '</button>' +
          '<button class="ghost" onclick="openBackfill(' + attrJson(ex) +
          ', null)">Backfill ' + escapeHtml(ex) + '</button></div></div>' +
          '<div class="card"><table><thead><tr><th>Pair</th><th>Type</th>' +
          '<th>Span</th><th>From</th><th>To</th><th>Rows</th><th>Gaps</th><th></th>' +
          '</tr></thead><tbody>' + body + '</tbody></table></div>';
      }).join('');
    } catch (e) {
      root.innerHTML = '<div class="card"><p class="err">' + escapeHtml(e.message) + '</p></div>';
    }
  }

  loadInventory();
</script>
{% endblock %}