{% extends "base.html" %}
{% block content %}
<div class="stats">
  {# Height, peers and mempool share one box, each with its own label:
     six boxes wrapped the row onto a second line and left net emission
     stranded there alone, and one box labelled for whichever figure it
     led with left the other two to be guessed. #}
  <div class="stat stat-trio">
    <div class="stat-group">
      {# The live poll below (refresh(), called immediately on load) fills
         these in within its first round trip; until then a spinner shows
         rather than the server-rendered figure, so a fresh node at a
         genuine height 0 with 0 peers doesn't read as broken on the very
         first paint. #}
      <a id="live-height-link" href="/explorer/block/{{ info.height }}">
        <div class="stat-label">Height</div>
        <div class="stat-value" id="live-height"><span class="stat-spinner"></span></div>
      </a>
      <a href="/network">
        <div class="stat-label">Peers</div>
        <div class="stat-value" id="live-peers"><span class="stat-spinner"></span></div>
      </a>
      <div>
        <div class="stat-label">Pending</div>
        <div class="stat-value" id="live-mempool"><span class="stat-spinner"></span></div>
      </div>
      <div>
        <div class="stat-label">Sync</div>
        <div class="stat-value" id="live-sync"><span class="stat-spinner"></span></div>
      </div>
    </div>
    {% if info.block_time_ratio is not none %}
    <div class="stat-sub" style="color:{{ 'var(--red)' if info.block_time_ratio > 1 else 'var(--green)' }}" id="live-block-time-diff">{{ "%.1f" | format(info.block_time_ratio) }}x current median</div>
    {% else %}
    <div class="stat-sub" id="live-block-time-diff">no builds yet</div>
    {% endif %}
  </div>
  <div class="stat">
    <div class="stat-label">Network age</div>
    <div class="stat-value" id="live-age">{{ fmt_duration(info.network_age_seconds) }}</div>
    <div class="stat-sub">since genesis</div>
  </div>
  {# LAPSE with decimals rather than "N LAPSE M ticks": at this magnitude
     the tick half is nine digits that wrapped the value onto three lines
     and told nobody anything. #}
  <div class="stat">
    <div class="stat-label">Circulating</div>
    <div class="stat-value" style="font-size:1rem" id="live-circulating">{{ fmt_lapse(info.circulating) }}</div>
    <div class="stat-sub" id="live-circulating-pct">{{ "%.4f"|format(info.total_minted / supply_cap * 100) }}% of 21M cap minted{% if info.burned %}, {{ fmt_lapse(info.burned) }} burned{% endif %}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Net emission</div>
    <div class="stat-value" style="font-size:1rem;color:var(--green)" id="live-reward">+{{ fmt_lapse_dp(info.block_reward) }}</div>
    <div class="stat-sub">per block</div>
  </div>
</div>
<div class="card">
  <div class="card-title">Address</div>
  <div class="hash">{{ info.address }}</div>
</div>
<div class="card" data-tx-page="{{ tx_page }}">
  <div class="card-title">Recent transactions</div>
  <div class="table-wrap">
  <table class="stacked">
    <thead><tr><th>Height</th><th>Hash</th><th>From</th><th>Amount</th></tr></thead>
    <tbody id="live-recent-txs">
    {% if recent_txs %}
      {% for height, h, t, amount in recent_txs %}
      <tr>
        <td data-label="Height"><a href="/explorer/block/{{ height }}">{{ height }}</a></td>
        <td data-label="Hash" class="hash-short"><a href="/explorer/tx/{{ h }}">{{ h[:20] }}…</a></td>
        <td data-label="From" class="hash-short">{{ "self" if t.from == info.address else t.from[:24] ~ "…" }}</td>
        <td data-label="Amount">{{ fmt_lapse_dp(amount) }}</td>
      </tr>
      {% endfor %}
    {% else %}
      <tr><td colspan="4" style="color:var(--muted);text-align:center">No transactions yet</td></tr>
    {% endif %}
    </tbody>
  </table>
  </div>
{% if tx_total_pages > 1 %}
  <nav class="pager" aria-label="Recent transaction pagination">
    {% if tx_has_prev %}<a href="/?tx_page={{ tx_page - 1 }}">Prev</a>{% endif %}
    {% for p in tx_page_window %}
      {% if p is none %}<span class="pager-ellipsis">&hellip;</span>
      {% elif p == tx_page %}<span class="pager-current">{{ p }}</span>
      {% else %}<a href="/?tx_page={{ p }}">{{ p }}</a>
      {% endif %}
    {% endfor %}
    {% if tx_has_next %}<a href="/?tx_page={{ tx_page + 1 }}">Next</a>{% endif %}
  </nav>
{% endif %}
</div>
<script>
(function () {
  const TICKS_PER_LAPSE = {{ TICKS_PER_LAPSE }};
  const SUPPLY_CAP = {{ supply_cap }};
  const SELF_ADDRESS = {{ info.address|tojson }};
  const TX_PAGE = parseInt(
    document.querySelector("[data-tx-page]").getAttribute("data-tx-page"), 10);

  function fmtDuration(seconds) {
    seconds = Math.max(Math.floor(seconds || 0), 0);
    const units = [["y", 31536000], ["d", 86400], ["h", 3600], ["m", 60]];
    const parts = [];
    for (const [suffix, size] of units) {
      if (seconds >= size || parts.length) {
        const count = Math.floor(seconds / size);
        seconds -= count * size;
        if (count || parts.length) parts.push(count + suffix);
        if (parts.length === 2) return parts.join(" ");
      }
    }
    return parts.length ? parts.join(" ") : "just now";
  }

  function fmtLapse(ticks) {
    return (ticks / TICKS_PER_LAPSE).toLocaleString(undefined, {
      minimumFractionDigits: 4, maximumFractionDigits: 4}) + " LAPSE";
  }

  function fmtLapseWhole(ticks) {
    return Math.floor(ticks / TICKS_PER_LAPSE).toLocaleString() + " LAPSE";
  }

  const statusEl = document.getElementById("live-status");
  let syncStartH = -1, syncStartT = 0, bps = 0;

  async function refresh() {
    try {
      const res = await fetch("/api/info", {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const info = await res.json();

      document.getElementById("live-height").textContent = info.height;
      document.getElementById("live-height-link").href = "/explorer/block/" + info.height;
      document.getElementById("live-mempool").textContent = info.mempool_size;
      document.getElementById("live-peers").textContent = info.peer_count;
      const now = Date.now() / 1000;
      if (info.sync_target > info.height) {
        if (syncStartH === -1 || info.height < syncStartH) {
          syncStartH = info.height;
          syncStartT = now;
        } else if (info.height > syncStartH && now > syncStartT) {
          bps = (info.height - syncStartH) / (now - syncStartT);
        }
      } else {
        syncStartH = -1;
      }
      let syncStr = Math.round(info.sync_percent || 100) + "%";
      if (info.sync_percent < 100 && bps > 0 && info.sync_target > info.height) {
        const sec = Math.round((info.sync_target - info.height) / bps);
        let eta = "";
        if (sec > 3600) eta = Math.floor(sec/3600) + "h " + Math.floor((sec%3600)/60) + "m";
        else if (sec > 60) eta = Math.floor(sec/60) + "m " + (sec%60) + "s";
        else eta = sec + "s";
        syncStr += ` <span style="font-size:0.85em;color:var(--muted)">(${eta})</span>`;
      }
      document.getElementById("live-sync").innerHTML = syncStr;
      document.getElementById("live-circulating").textContent = fmtLapseWhole(info.circulating);
      document.getElementById("live-circulating-pct").textContent =
        (info.total_minted / SUPPLY_CAP * 100).toFixed(4) + "% of 21M cap minted"
        + (info.burned ? ", " + fmtLapseWhole(info.burned) + " burned" : "");
      document.getElementById("live-reward").textContent = "+" + fmtLapse(info.block_reward);
      const diffEl = document.getElementById("live-block-time-diff");
      if (info.block_time_ratio === null) {
        diffEl.textContent = "no builds yet";
        diffEl.style.color = "";   // back to .stat-sub's own colour
      } else {
        diffEl.textContent = info.block_time_ratio.toFixed(1) + "x current median";
        diffEl.style.color = info.block_time_ratio > 1 ? "var(--red)" : "var(--green)";
      }

      document.getElementById("live-age").textContent =
        fmtDuration(info.network_age_seconds);

      const txBody = document.getElementById("live-recent-txs");
      const txs = info.recent_txs || [];
      if (TX_PAGE !== 1) {
        // The poll only ever carries the newest transactions, so writing
        // them into a table showing page 3 would silently yank the reader
        // back to page 1. Stats above still refresh.
      } else if (txs.length) {
        txBody.innerHTML = txs.map(function (tx) {
          return "<tr>" +
            "<td data-label=\"Height\"><a href=\"/explorer/block/" + tx.height + "\">" + tx.height + "</a></td>" +
            "<td data-label=\"Hash\" class=\"hash-short\"><a href=\"/explorer/tx/" + tx.hash + "\">" + tx.hash.slice(0, 20) + "…</a></td>" +
            "<td data-label=\"From\" class=\"hash-short\">" +
              (tx.from === SELF_ADDRESS ? "self" : tx.from.slice(0, 24) + "…") +
              "</td>" +
            "<td data-label=\"Amount\">" + fmtLapse(tx.amount) + "</td>" +
            "</tr>";
        }).join("");
      } else {
        txBody.innerHTML = "<tr><td colspan=\"4\" style=\"color:var(--muted);text-align:center\">No transactions yet</td></tr>";
      }

      statusEl.textContent = "refreshed " + new Date().toLocaleTimeString();
    } catch (e) {
      statusEl.textContent = "live refresh paused (connection lost)";
    }
  }

  refresh();
  setInterval(refresh, 6000);
})();
</script>
{% endblock %}