{% extends "base.html" %}
{% block title %}DBSprout Dashboard — Progress{% endblock %}
{% block content %}
  <h1 class="text-2xl font-bold mb-4">Generation progress</h1>

  {# ── overall summary ─────────────────────────────────────────────── #}
  <div class="card bg-base-100 shadow mb-6">
    <div class="card-body">
      <div class="flex items-center justify-between">
        <h2 class="card-title">Overall</h2>
        <span id="progress-status" class="badge badge-outline">{{ snapshot.status }}</span>
      </div>
      <progress id="overall-bar" class="progress progress-primary w-full"
                value="{{ snapshot.overall_percent }}" max="100"></progress>
      <div class="grid grid-cols-2 gap-2 text-sm sm:grid-cols-4">
        <div>Completed: <span id="completed-tables">{{ snapshot.completed_tables }}</span>/<span id="total-tables">{{ snapshot.total_tables }}</span> tables</div>
        <div>Total rows: <span id="total-rows">{{ "{:,}".format(snapshot.total_rows) }}</span></div>
        <div>Current: <span id="current-table">{{ snapshot.current_table or "—" }}</span></div>
        <div>Elapsed: <span id="elapsed-ms">{{ snapshot.elapsed_ms }}</span> ms</div>
      </div>
    </div>
  </div>

  {# ── empty / idle state ──────────────────────────────────────────── #}
  <div id="idle-alert" class="alert alert-info {% if snapshot.status != 'idle' %}hidden{% endif %}">
    <span>No generation in progress. Run <code>dbsprout generate</code> to see live progress here.</span>
  </div>

  {# ── per-table progress ──────────────────────────────────────────── #}
  <div id="tables-wrap" class="overflow-x-auto {% if snapshot.status == 'idle' %}hidden{% endif %}">
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>Table</th>
          <th>Rows</th>
          <th>Rows/sec</th>
          <th>Elapsed (ms)</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody id="tables-body">
        {% for t in snapshot.tables %}
          <tr data-table="{{ t.table_name }}">
            <td>{{ t.table_name }}</td>
            <td>{{ "{:,}".format(t.row_count) }}</td>
            <td>{{ "{:,.0f}".format(t.rows_per_sec) }}</td>
            <td>{{ t.generation_ms }}</td>
            <td><span class="badge badge-success">{{ t.status }}</span></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# ──────────────────────────────────────────────────────────────────
     SSE client (vanilla JS, no build step). Subscribes to the BOUNDED
     /progress/stream; the server emits a terminal `complete` event and
     closes, so we also close the EventSource then to avoid auto-reconnect.
     ────────────────────────────────────────────────────────────────── #}
  <script>
    (function () {
      var fmt = function (n) { return (n == null) ? "—" : Number(n).toLocaleString(); };
      var source = new EventSource("/progress/stream");

      source.onmessage = function (evt) {
        if (!evt.data) { return; }
        var snap;
        try { snap = JSON.parse(evt.data); } catch (e) { return; }

        document.getElementById("progress-status").textContent = snap.status;
        document.getElementById("overall-bar").value = snap.overall_percent;
        document.getElementById("completed-tables").textContent = snap.completed_tables;
        document.getElementById("total-tables").textContent = snap.total_tables;
        document.getElementById("total-rows").textContent = fmt(snap.total_rows);
        document.getElementById("current-table").textContent = snap.current_table || "—";
        document.getElementById("elapsed-ms").textContent = snap.elapsed_ms;

        var idle = (snap.status === "idle");
        document.getElementById("idle-alert").classList.toggle("hidden", !idle);
        document.getElementById("tables-wrap").classList.toggle("hidden", idle);

        var body = document.getElementById("tables-body");
        body.innerHTML = "";
        (snap.tables || []).forEach(function (t) {
          var tr = document.createElement("tr");
          tr.setAttribute("data-table", t.table_name);
          tr.innerHTML =
            "<td>" + t.table_name + "</td>" +
            "<td>" + fmt(t.row_count) + "</td>" +
            "<td>" + fmt(Math.round(t.rows_per_sec)) + "</td>" +
            "<td>" + t.generation_ms + "</td>" +
            "<td><span class='badge badge-success'>" + t.status + "</span></td>";
          body.appendChild(tr);
        });
      };

      // Terminal sentinel: server closed the bounded stream — stop reconnecting.
      source.addEventListener("complete", function () { source.close(); });
      source.onerror = function () { source.close(); };
    })();
  </script>
{% endblock %}