// Dashboard SPA. Renders containers + approvals from `/api/state`, wires
// up async-form submission (URL-encoded POST + spinner + state refresh),
// and tails the broker over `/messages/stream` SSE.

(() => {
  // ─── helpers ────────────────────────────────────────────────────────────
  const $ = (id) => document.getElementById(id);
  const esc = (s) => String(s).replace(/[&<>"]/g, (c) =>
    ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;' }[c])
  );
  const el = (tag, attrs = {}, ...children) => {
    const e = document.createElement(tag);
    for (const [k, v] of Object.entries(attrs)) {
      if (k === 'class') e.className = v;
      else if (k === 'html') e.innerHTML = v;
      else if (k.startsWith('data-')) e.setAttribute(k, v);
      else e.setAttribute(k, v);
    }
    for (const c of children) {
      if (c == null) continue;
      e.append(c.nodeType ? c : document.createTextNode(c));
    }
    return e;
  };
  const form = (action, btnClass, btnLabel, confirmMsg, extra = {}) => {
    const f = el('form', {
      method: 'POST', action, class: 'inline', 'data-async': '',
      ...(confirmMsg ? { 'data-confirm': confirmMsg } : {}),
    });
    for (const [name, value] of Object.entries(extra)) {
      f.append(el('input', { type: 'hidden', name, value }));
    }
    f.append(el('button', { type: 'submit', class: 'btn ' + btnClass }, btnLabel));
    return f;
  };

  // ─── async forms ────────────────────────────────────────────────────────
  document.addEventListener('submit', async (e) => {
    const f = e.target;
    if (!(f instanceof HTMLFormElement) || !f.hasAttribute('data-async')) return;
    e.preventDefault();
    if (f.dataset.confirm && !confirm(f.dataset.confirm)) return;
    const btn = f.querySelector('button[type="submit"], button:not([type]), .btn-inline');
    const original = btn ? btn.innerHTML : '';
    if (btn) { btn.disabled = true; btn.innerHTML = '<span class="spinner">◐</span>'; }
    try {
      const resp = await fetch(f.action, {
        method: f.method || 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams(new FormData(f)),
        redirect: 'manual',
      });
      const ok = resp.ok || resp.type === 'opaqueredirect'
        || (resp.status >= 200 && resp.status < 400);
      if (!ok) {
        const text = await resp.text().catch(() => '');
        alert('action failed: ' + resp.status + (text ? '\n\n' + text : ''));
        if (btn) { btn.disabled = false; btn.innerHTML = original; }
        return;
      }
      // Re-enable the button — refreshState() rebuilds most lists but
      // skips forms that didn't change (e.g. the spawn form), so without
      // this the spinner sticks and the button can't be clicked again.
      if (btn) { btn.disabled = false; btn.innerHTML = original; }
      // Clear text inputs whose value was just submitted.
      f.querySelectorAll('input[type="text"], input:not([type]), textarea').forEach((i) => { i.value = ''; });
      refreshState();
    } catch (err) {
      alert('action failed: ' + err);
      if (btn) { btn.disabled = false; btn.innerHTML = original; }
    }
  });

  // ─── state rendering ────────────────────────────────────────────────────
  function renderContainers(s) {
    const root = $('containers-section');
    root.innerHTML = '';

    if (s.any_stale) {
      root.append(form(
        '/update-all', 'btn-rebuild', '↻ UPD4TE 4LL',
        'rebuild every stale container?',
      ));
    }

    const spawn = el('form', {
      method: 'POST', action: '/request-spawn',
      class: 'spawnform', 'data-async': '',
    });
    spawn.append(
      el('input', {
        name: 'name',
        placeholder: 'new agent name (≤9 chars)',
        maxlength: '9', required: '', autocomplete: 'off',
      }),
      el('button', { type: 'submit', class: 'btn btn-spawn' }, '◆ R3QU3ST SP4WN'),
    );
    root.append(spawn);
    root.append(el('p', { class: 'meta' },
      'spawn requests queue as approvals. operator approves below to actually create the container.',
    ));

    if (s.transients.length) {
      const ul = el('ul');
      for (const t of s.transients) {
        ul.append(el('li', {},
          el('span', { class: 'glyph spinner' }, '◐'), ' ',
          el('span', { class: 'agent' }, t.name), ' ',
          el('span', { class: 'role role-pending' }, t.kind + '…'), ' ',
          el('span', { class: 'meta' }, `nixos-container create + start (${t.secs}s)`),
        ));
      }
      root.append(ul);
    }

    if (!s.containers.length && !s.transients.length) {
      root.append(el('p', { class: 'empty' }, 'no managed containers'));
      return;
    }

    const ul = el('ul');
    for (const c of s.containers) {
      const url = `http://${s.hostname}:${c.port}/`;
      const li = el('li');
      li.append(
        el('a', { href: url }, c.name),
        ' ',
        el('span', { class: c.is_manager ? 'role role-m1nd' : 'role role-ag3nt' },
          c.is_manager ? 'm1nd' : 'ag3nt'),
      );
      if (c.needs_login) {
        li.append(' ', el('a',
          { class: 'role role-pending', href: url }, 'needs login →'));
      }
      if (c.needs_update) {
        li.append(' ', form(
          '/rebuild/' + c.name, 'role role-pending btn-inline', 'needs update ↻',
          'rebuild ' + c.name + '? hot-reloads the container.',
        ));
      }
      li.append(' ', el('span', { class: 'meta' }, `${c.container} :${c.port}`));

      if (c.running) {
        li.append(
          ' ',
          form('/restart/' + c.name, 'btn-restart', '↺ R3ST4RT', 'restart ' + c.name + '?'),
        );
        if (!c.is_manager) {
          li.append(
            ' ',
            form('/kill/' + c.name, 'btn-stop', '■ ST0P', 'stop ' + c.name + '?'),
          );
        }
      } else {
        li.append(
          ' ',
          form('/start/' + c.name, 'btn-start', '▶ ST4RT', 'start ' + c.name + '?'),
        );
      }
      li.append(
        ' ',
        form('/rebuild/' + c.name, 'btn-rebuild', '↻ R3BU1LD',
          'rebuild ' + c.name + '? hot-reloads the container.'),
      );
      if (!c.is_manager) {
        li.append(
          ' ',
          form('/destroy/' + c.name, 'btn-destroy', 'DESTR0Y',
            'destroy ' + c.name + '? container is removed; state + creds kept.'),
        );
      }
      ul.append(li);
    }
    root.append(ul);
  }

  function renderQuestions(s) {
    const root = $('questions-section');
    root.innerHTML = '';
    if (!s.questions || !s.questions.length) {
      root.append(el('p', { class: 'empty' }, 'no pending questions'));
      return;
    }
    const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19);
    const ul = el('ul', { class: 'questions' });
    for (const q of s.questions) {
      const li = el('li', { class: 'question' });
      li.append(
        el('div', { class: 'q-head' },
          el('span', { class: 'msg-ts' }, fmt(q.asked_at)), ' ',
          el('span', { class: 'msg-from' }, q.asker), ' ',
          el('span', { class: 'msg-sep' }, 'asks:'),
        ),
        el('div', { class: 'q-body' }, q.question),
      );
      const f = el('form', {
        method: 'POST', action: '/answer-question/' + q.id,
        class: 'qform', 'data-async': '',
      });
      let input;
      if (q.options && q.options.length) {
        input = el('select', { name: 'answer', required: '' });
        input.append(el('option', { value: '', disabled: '', selected: '' }, 'choose…'));
        for (const opt of q.options) {
          input.append(el('option', { value: opt }, opt));
        }
      } else {
        input = el('input', {
          name: 'answer', type: 'text', required: '',
          placeholder: 'your answer', autocomplete: 'off',
        });
      }
      f.append(input, el('button', { type: 'submit', class: 'btn btn-approve' }, '▸ ANSW3R'));
      li.append(f);
      ul.append(li);
    }
    root.append(ul);
  }

  function renderInbox(s) {
    const root = $('inbox-section');
    root.innerHTML = '';
    if (!s.operator_inbox || !s.operator_inbox.length) {
      root.append(el('p', { class: 'empty' }, 'no messages'));
      return;
    }
    const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19);
    const ul = el('ul', { class: 'inbox' });
    for (const m of s.operator_inbox) {
      const li = el('li');
      li.append(
        el('span', { class: 'msg-ts' }, fmt(m.at)), ' ',
        el('span', { class: 'msg-from' }, m.from), ' ',
        el('span', { class: 'msg-sep' }, '→ '),
        el('span', { class: 'msg-body' }, m.body),
      );
      ul.append(li);
    }
    root.append(ul);
  }

  function renderApprovals(s) {
    const root = $('approvals-section');
    root.innerHTML = '';
    if (!s.approvals.length) {
      root.append(el('p', { class: 'empty' }, 'queue empty'));
      return;
    }
    const ul = el('ul', { class: 'approvals' });
    for (const a of s.approvals) {
      const li = el('li');
      const row = el('div', { class: 'row' });
      if (a.kind === 'apply_commit') {
        row.append(
          el('span', { class: 'glyph' }, '→'), ' ',
          el('span', { class: 'id' }, '#' + a.id), ' ',
          el('span', { class: 'agent' }, a.agent), ' ',
          el('span', { class: 'kind' }, 'apply'), ' ',
          el('code', {}, a.sha_short || ''),
        );
      } else {
        row.append(
          el('span', { class: 'glyph' }, '⊕'), ' ',
          el('span', { class: 'id' }, '#' + a.id), ' ',
          el('span', { class: 'agent' }, a.agent), ' ',
          el('span', { class: 'kind kind-spawn' }, 'spawn'), ' ',
          el('span', { class: 'meta' },
            'new sub-agent — container will be created on approve'),
        );
      }
      row.append(
        ' ',
        form('/approve/' + a.id, 'btn-approve', '◆ APPR0VE'),
        ' ',
        form('/deny/' + a.id, 'btn-deny', 'DENY'),
      );
      li.append(row);
      if (a.diff_html) {
        const details = el('details');
        details.append(el('summary', {}, 'diff vs applied'));
        // diff_html is pre-rendered server-side (per-line class spans inside
        // a <pre>); inject as innerHTML.
        const pre = el('pre', { class: 'diff', html: a.diff_html });
        details.append(pre);
        li.append(details);
      }
      ul.append(li);
    }
    root.append(ul);
  }

  // ─── state polling ──────────────────────────────────────────────────────
  let pollTimer = null;
  async function refreshState() {
    try {
      const resp = await fetch('/api/state');
      if (!resp.ok) throw new Error('http ' + resp.status);
      const s = await resp.json();
      renderContainers(s);
      renderQuestions(s);
      renderInbox(s);
      renderApprovals(s);
      // Auto-refresh while a spawn is in flight; otherwise back off.
      const next = s.transients.length ? 2000 : 0;
      if (pollTimer) { clearTimeout(pollTimer); pollTimer = null; }
      if (next) pollTimer = setTimeout(refreshState, next);
    } catch (err) {
      console.error('refreshState failed', err);
      pollTimer = setTimeout(refreshState, 5000);
    }
  }
  refreshState();

  // ─── message flow SSE ───────────────────────────────────────────────────
  (() => {
    const flow = $('msgflow');
    if (!flow) return;
    flow.innerHTML = '';
    const es = new EventSource('/messages/stream');
    const MAX_ROWS = 200;
    const tsFmt = (n) => new Date(n * 1000).toISOString().slice(11, 19);
    // Animate the banner whenever a broker event lands. Each event nudges
    // the shimmer window; if traffic stops, the class falls off after the
    // grace timer.
    const banner = document.querySelector('.banner');
    let bannerOffTimer = null;
    function pulseBanner() {
      if (!banner) return;
      banner.classList.add('active');
      if (bannerOffTimer) clearTimeout(bannerOffTimer);
      bannerOffTimer = setTimeout(() => banner.classList.remove('active'), 4000);
    }
    es.onmessage = (e) => {
      let m;
      try { m = JSON.parse(e.data); } catch { return; }
      pulseBanner();
      // Live-update the inbox when claude sends to operator.
      if (m.kind === 'sent' && m.to === 'operator') refreshState();
      const row = document.createElement('div');
      row.className = 'msgrow ' + m.kind;
      const kind = m.kind === 'sent' ? '→' : '✓';
      row.innerHTML =
        '<span class="msg-ts">' + tsFmt(m.at) + '</span>' +
        '<span class="msg-arrow">' + kind + '</span>' +
        '<span class="msg-from">' + esc(m.from) + '</span>' +
        '<span class="msg-sep">→</span>' +
        '<span class="msg-to">' + esc(m.to) + '</span>' +
        '<span class="msg-body">' + esc(m.body) + '</span>';
      flow.insertBefore(row, flow.firstChild);
      while (flow.childNodes.length > MAX_ROWS) flow.removeChild(flow.lastChild);
    };
    es.onerror = () => {
      flow.insertBefore(Object.assign(document.createElement('div'), {
        className: 'msgrow meta', textContent: '[connection lost — retrying]',
      }), flow.firstChild);
    };
  })();
})();