{% extends "base.html" %}
{% block title %}OpenLCB monitor{% endblock %}
{% block content %}
<h2>OpenLCB bus monitor</h2>

<p>
  <a href="/openlcb">&larr; back to discovery</a>
</p>

{% if not olcb_active %}
<div class="card" style="border-color:var(--warn,#c93)">
  <p>The active connection isn't OpenLCB. Configure an OpenLCB
  connection to see bus traffic here.</p>
</div>
{% else %}

<div class="card">
  <h3 style="margin-top:0">Send a frame</h3>
  <p class="muted small" style="margin-top:-0.4rem">
    Hand-craft an OpenLCB CAN frame and put it on the wire. Header
    is a 29-bit hex value; data is up to 8 bytes of hex. Result
    lands in the monitor below (any peer that answers will show
    up too). Meant for troubleshooting — probe peers, replay
    captured frames, prod a stuck decoder.
  </p>

  {% if presets %}
  <div class="row" style="gap:0.4rem;margin-bottom:0.75rem;flex-wrap:wrap">
    <span class="muted small" style="align-self:center">Presets:</span>
    {% for p in presets %}
    <button type="button"
            data-header="{{ p.header }}"
            data-body="{{ p.data }}"
            title="{{ p.description }}"
            onclick="olcbFillFrame(this)">
      {{ p.name }}
    </button>
    {% endfor %}
  </div>
  {% endif %}

  {% include "_openlcb_send_history.html" %}

  <form id="openlcb-send-form"
        hx-post="/openlcb/monitor/send" hx-target="#openlcb-send-notice"
        hx-swap="innerHTML" class="row">
    <label>Header
      <input type="text" name="header" required
             pattern="0x?[0-9A-Fa-f]+"
             placeholder="195B4123"
             style="width:12em;font-family:monospace" />
    </label>
    <label style="flex:1">Data
      <input type="text" name="data"
             placeholder="0501010100000042 (up to 16 hex chars)"
             pattern="[0-9A-Fa-f. ]*"
             style="font-family:monospace" />
    </label>
    {% if well_known_events and our_alias %}
    <label class="small">Well-known
      <select id="openlcb-well-known-select"
              data-alias="{{ our_alias }}"
              onchange="olcbFillWellKnown(this)"
              style="font-family:monospace">
        <option value="">(pick one)</option>
        {% for ev in well_known_events %}
        <option value="{{ ev.event }}">{{ ev.name }}</option>
        {% endfor %}
      </select>
    </label>
    {% endif %}
    <button type="submit">Send</button>
  </form>
  <div id="openlcb-send-notice" class="small" style="margin-top:0.5rem"></div>
</div>

<div class="card">
  <h3 style="margin-top:0">Send a datagram</h3>
  <p class="muted small" style="margin-top:-0.4rem">
    Send an arbitrary datagram to a peer. Payload is up to 72 bytes
    of hex; the CT-side engine awaits the peer's Received-OK reply
    (or surfaces a Rejected code). Intended for memory-config
    debugging and firmware-upgrade experiments — do not send
    payloads to a peer's memory-config space unless you know what
    the bytes mean.
  </p>
  <form id="openlcb-send-datagram-form"
        hx-post="/openlcb/monitor/send_datagram"
        hx-target="#openlcb-send-datagram-notice"
        hx-swap="innerHTML" class="row">
    <label>Dest alias
      <input type="text" name="alias" required
             pattern="0x?[0-9A-Fa-f]+"
             placeholder="222"
             style="width:6em;font-family:monospace" />
    </label>
    <label style="flex:1">Payload
      <input type="text" name="data" required
             placeholder="20 82 (hex, up to 72 bytes)"
             pattern="[0-9A-Fa-f. ]*"
             style="font-family:monospace;width:100%" />
    </label>
    <label class="small">Timeout
      <input type="number" name="timeout" value="3" min="1" max="30"
             step="1" style="width:4em" />
    </label>
    <button type="submit">Send</button>
  </form>
  <div id="openlcb-send-datagram-notice" class="small" style="margin-top:0.5rem"></div>
</div>

<script>
  function olcbFillFrame(btn) {
    const form = document.getElementById("openlcb-send-form");
    form.querySelector("input[name='header']").value = btn.dataset.header || "";
    form.querySelector("input[name='data']").value = btn.dataset.body || "";
  }
  // Fill the send form from the well-known event catalog. The dotted
  // event ID gets flattened to hex bytes for the Data input; the
  // Header is a PCER frame from our own alias, computed as
  // 0x19_5B_4000 | our_12bit_alias — matches the make_pcer_header
  // encoding on the server side. Reset the dropdown afterwards so
  // the operator can pick it again.
  // Row expander for the frame drill-down: shows/hides the details
  // row rendered inline right after the clicked frame row. Kept
  // inline (no fetch) so expanding is instant + survives htmx
  // auto-poll swaps naturally (the swap rebuilds both rows).
  function olcbToggleDetails(row) {
    const next = row.nextElementSibling;
    if (next && next.classList.contains("openlcb-frame-details")) {
      next.style.display = (next.style.display === "none") ? "" : "none";
    }
  }
  // Click-to-filter: fill the src input with the clicked alias and
  // fire an 'input' event so the filter form's hx-trigger picks it
  // up + re-fetches. Prevents the anchor click from navigating.
  function olcbFilterToAlias(evt, link) {
    evt.preventDefault();
    const alias = link.dataset.alias || "";
    const form = document.getElementById("openlcb-monitor-filter");
    const src = form.querySelector("input[name='src']");
    src.value = alias.replace(/^0x/i, "");
    src.dispatchEvent(new Event("input", { bubbles: true }));
    src.dispatchEvent(new Event("change", { bubbles: true }));
  }
  function olcbFillWellKnown(sel) {
    if (!sel.value) return;
    const form = document.getElementById("openlcb-send-form");
    const hex = sel.value.replaceAll(".", "").toLowerCase();
    const aliasHex = sel.dataset.alias || "0x000";
    const alias = parseInt(aliasHex, 16) & 0xFFF;
    const header = 0x195B4000 | alias;
    form.querySelector("input[name='header']").value =
      "0x" + header.toString(16).padStart(8, "0");
    form.querySelector("input[name='data']").value = hex;
    sel.value = "";
  }
  // Read the filter form's current values and navigate to the CSV
  // endpoint so the download honours whatever the operator has typed
  // in the filter row.
  function olcbCollectFilterParams() {
    const f = document.getElementById("openlcb-monitor-filter");
    const params = new URLSearchParams();
    for (const name of ["src", "mti", "text"]) {
      const el = f.querySelector(`[name='${name}']`);
      if (el && el.value) params.set(name, el.value);
      const invert = f.querySelector(`[name='${name}_invert']`);
      if (invert && invert.checked) params.set(name + "_invert", "on");
    }
    return params;
  }
  function olcbExportCsv() {
    const q = olcbCollectFilterParams().toString();
    window.location = "/openlcb/monitor/export.csv" + (q ? "?" + q : "");
  }
  function olcbExportSession() {
    const q = olcbCollectFilterParams().toString();
    window.location =
      "/openlcb/monitor/export_session.zip" + (q ? "?" + q : "");
  }
</script>

<div class="card">
  <h3 style="margin-top:0">Bus stats</h3>
  <div hx-get="/openlcb/monitor/stats"
       hx-trigger="every 2s"
       hx-target="#openlcb-stats" hx-swap="outerHTML">
    {% include "_openlcb_stats.html" %}
  </div>
</div>

<div class="card">
  <div class="row" style="align-items:baseline">
    <h3 style="margin:0">Recent frames</h3>
    {% if our_alias %}
    <span class="muted small mono" title="Local connection's alias — rows tagged 'us' are frames we emitted">
      us = <code>{{ our_alias }}</code>
    </span>
    {% endif %}
    <span class="muted small">
      Auto-refresh every 2 seconds. Newest first.
    </span>
    <span style="margin-left:auto"></span>
    {% include "_openlcb_pause_button.html" %}
    <button type="button" onclick="olcbExportCsv()"
            title="Download the currently-filtered frame log as CSV">
      Download CSV
    </button>
    <button type="button" onclick="olcbExportSession()"
            title="Download a ZIP with the CSV plus metadata (filter state + bus stats snapshot) for offline analysis">
      Download session
    </button>
    <button hx-post="/openlcb/monitor/clear"
            hx-target="#openlcb-monitor" hx-swap="outerHTML"
            hx-include="#openlcb-monitor-filter"
            hx-confirm="Clear the frame monitor buffer?">
      Clear
    </button>
    <button hx-get="/openlcb/monitor/refresh"
            hx-target="#openlcb-monitor" hx-swap="outerHTML"
            hx-include="#openlcb-monitor-filter">
      Refresh now
    </button>
  </div>

  {# Filter row — case-insensitive substring on summary + exact
     hex match on src alias / MTI. Empty fields = no filter. The
     ``hx-include`` on the auto-poll container below picks up the
     current filter values every tick, so a paused operator's
     filter survives the swap. #}
  <form id="openlcb-monitor-filter" class="row"
        style="margin-bottom:0.5rem;gap:0.4rem"
        hx-get="/openlcb/monitor/refresh"
        hx-target="#openlcb-monitor" hx-swap="outerHTML"
        hx-trigger="input changed delay:250ms from:#openlcb-monitor-filter, change from:#openlcb-monitor-filter">
    <label class="small">Src alias
      <input type="text" name="src" value="{{ filter_src or '' }}"
             placeholder="e.g. 222"
             style="width:6em;font-family:monospace" />
      <label class="small muted" title="Hide frames matching this alias instead of showing only them">
        <input type="checkbox" name="src_invert" value="on"
               {% if filter_src_invert %}checked{% endif %} />
        hide
      </label>
    </label>
    <label class="small">Frame type
      <input type="text" name="mti" value="{{ filter_mti or '' }}"
             placeholder="9"
             style="width:4em;font-family:monospace" />
      <label class="small muted" title="Hide frames matching this frame type instead">
        <input type="checkbox" name="mti_invert" value="on"
               {% if filter_mti_invert %}checked{% endif %} />
        hide
      </label>
    </label>
    <label class="small" style="flex:1">Text search
      <input type="text" name="text" value="{{ filter_text or '' }}"
             placeholder="PCER, AMD, ..."
             style="width:100%" />
      <label class="small muted" title="Hide frames whose summary matches this text instead">
        <input type="checkbox" name="text_invert" value="on"
               {% if filter_text_invert %}checked{% endif %} />
        hide
      </label>
    </label>
    <label class="small">Show
      {% set current_limit = filter_limit or 100 %}
      <select name="limit" style="font-family:monospace">
        {% for n in [25, 50, 100, 250, 500] %}
        <option value="{{ n }}"{% if current_limit == n %} selected{% endif %}>{{ n }}</option>
        {% endfor %}
      </select>
    </label>
  </form>

  {# Auto-refreshing fragment — htmx polls the refresh endpoint
     every 2 seconds and swaps the table. ``hx-include`` carries
     the filter form's current values on every request so the
     server-side filter matches what the operator sees. The custom
     ``olcb-sse-nudge`` trigger fires on each SSE push so live
     traffic updates in near real-time; the 2s poll remains as a
     safety net for browsers where EventSource is unavailable or
     the SSE connection drops. #}
  <div hx-get="/openlcb/monitor/refresh"
       hx-trigger="every 2s, olcb-sse-nudge from:body"
       hx-include="#openlcb-monitor-filter"
       hx-target="#openlcb-monitor" hx-swap="outerHTML">
    {% include "_openlcb_monitor.html" %}
  </div>
</div>

<script>
  // Live push: subscribe to the SSE nudge stream and fire a custom
  // event on the body every time a frame lands on the wire. The
  // auto-poll container above listens for it and re-fetches with
  // the current filter state. Falls back to plain polling if the
  // browser (or a corporate proxy) blocks EventSource.
  (function() {
    if (typeof EventSource === "undefined") return;
    try {
      const src = new EventSource("/openlcb/monitor/sse");
      src.onmessage = function() {
        document.body.dispatchEvent(new Event("olcb-sse-nudge"));
      };
      // Silent on error — the 2s polling covers us if SSE fails.
      src.onerror = function() { /* keep browser retry behaviour */ };
    } catch (_) { /* fall back to polling */ }
  })();
</script>
{% endif %}
{% endblock %}