// panes/system.js — /api/version + /api/system.
import { registerPane } from '../app.js';
import { jget, formatUptime } from '../lib/api.js';
import { fmtJSON } from '../lib/ui.js';

const TPL = `
  <div class="pane-head">
    <div><div class="title">System</div><div class="sub">Process introspection.</div></div>
    <div class="grow"></div>
    <button class="btn btn-secondary" id="sys-refresh">Refresh</button>
  </div>
  <div class="grid cols-2">
    <div class="card"><div class="card-title"><h2>Version</h2></div><pre id="sys-v">…</pre></div>
    <div class="card">
      <div class="card-title"><h2>System</h2><span class="muted mono" id="sys-up">—</span></div>
      <pre id="sys-s">…</pre>
    </div>
  </div>
`;

async function load(host) {
  try {
    const [v, s] = await Promise.all([jget('/api/version'), jget('/api/system')]);
    host.querySelector('#sys-v').textContent = fmtJSON(v);
    host.querySelector('#sys-s').textContent = fmtJSON(s);
    if (s.uptime_seconds != null) host.querySelector('#sys-up').textContent = formatUptime(s.uptime_seconds);
  } catch (e) {
    host.querySelector('#sys-v').textContent = 'error: ' + e.message;
  }
}

registerPane('system', {
  label: 'System',
  init(host) {
    host.innerHTML = TPL;
    host.querySelector('#sys-refresh').addEventListener('click', () => load(host));
    load(host);
  },
  refresh: load,
});