Catalyst/js/ui.js

// Module-level UI state
let editingVmid = null;
let currentVmid = null;
let toastTimer  = null;

// ── Helpers ───────────────────────────────────────────────────────────────────

function esc(str) {
  const d = document.createElement('div');
  d.textContent = (str == null) ? '' : String(str);
  return d.innerHTML;
}

function fmtDate(d) {
  if (!d) return '—';
  try {
    return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
  } catch (e) { return d; }
}

function fmtDateFull(d) {
  if (!d) return '—';
  try {
    return new Date(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
  } catch (e) { return d; }
}

// ── Dashboard ─────────────────────────────────────────────────────────────────

async function renderDashboard() {
  const all = await getInstances();
  document.getElementById('nav-count').textContent = `${all.length} instance${all.length !== 1 ? 's' : ''}`;

  const states = {};
  all.forEach(i => { states[i.state] = (states[i.state] || 0) + 1; });

  document.getElementById('stats-bar').innerHTML = `
    <div class="stat-cell"><div class="stat-label">total</div><div class="stat-value accent">${all.length}</div></div>
    <div class="stat-cell"><div class="stat-label">deployed</div><div class="stat-value">${states['deployed'] || 0}</div></div>
    <div class="stat-cell"><div class="stat-label">testing</div><div class="stat-value amber">${states['testing'] || 0}</div></div>
    <div class="stat-cell"><div class="stat-label">degraded</div><div class="stat-value red">${states['degraded'] || 0}</div></div>
  `;

  await populateStackFilter();
  await filterInstances();
}

async function populateStackFilter() {
  const select = document.getElementById('filter-stack');
  const current = select.value;
  select.innerHTML = '<option value="">all stacks</option>';
  const stacks = await getDistinctStacks();
  stacks.forEach(s => {
    const opt = document.createElement('option');
    opt.value = s;
    opt.textContent = s;
    if (s === current) opt.selected = true;
    select.appendChild(opt);
  });
}

async function filterInstances() {
  const search = document.getElementById('search-input').value;
  const state  = document.getElementById('filter-state').value;
  const stack  = document.getElementById('filter-stack').value;
  const instances = await getInstances({ search, state, stack });
  const grid = document.getElementById('instance-grid');

  if (!instances.length) {
    grid.innerHTML = `<div class="empty-state"><div class="empty-icon">⊘</div><p>no instances match the current filters</p></div>`;
    return;
  }

  grid.innerHTML = instances.map(inst => {
    const dots = CARD_SERVICES.map(s =>
      `<div class="svc-dot ${inst[s] ? 'on' : ''}" title="${s}"></div>`
    ).join('');
    const activeCount = CARD_SERVICES.filter(s => inst[s]).length;
    return `
      <div class="instance-card state-${esc(inst.state)}" onclick="navigate('instance', ${inst.vmid})">
        <div class="card-top">
          <div>
            <div class="card-name">${esc(inst.name)}</div>
            <div class="card-vmid">vmid: ${inst.vmid}</div>
          </div>
          <div style="display:flex;flex-direction:column;align-items:flex-end;gap:5px">
            <div class="badge ${esc(inst.state)}">${esc(inst.state)}</div>
            <div class="badge ${esc(inst.stack)}">${esc(inst.stack)}</div>
          </div>
        </div>
        <div class="card-services">
          ${dots}
          <span class="svc-label">${activeCount} service${activeCount !== 1 ? 's' : ''} active</span>
        </div>
        ${inst.tailscale_ip ? `<div class="card-ip">ts: <span>${esc(inst.tailscale_ip)}</span></div>` : ''}
      </div>`;
  }).join('');
}

// ── Detail Page ───────────────────────────────────────────────────────────────

const BOOL_FIELDS = ['atlas','argus','semaphore','patchmon','tailscale','andromeda','hardware_acceleration'];

function stateClass(field, val) {
  if (field !== 'state') return '';
  return { deployed: 'tl-deployed', testing: 'tl-testing', degraded: 'tl-degraded' }[val] ?? '';
}

function fmtHistVal(field, val) {
  if (val == null || val === '') return '—';
  if (BOOL_FIELDS.includes(field)) return val === '1' ? 'on' : 'off';
  return esc(val);
}

async function renderDetailPage(vmid) {
  const [inst, history] = await Promise.all([getInstance(vmid), getInstanceHistory(vmid)]);
  if (!inst) { navigate('dashboard'); return; }
  currentVmid = vmid;

  document.getElementById('detail-vmid-crumb').textContent  = vmid;
  document.getElementById('detail-name').textContent        = inst.name;
  document.getElementById('detail-vmid-sub').textContent    = inst.vmid;
  document.getElementById('detail-id-sub').textContent      = inst.id;
  document.getElementById('detail-created-sub').textContent = fmtDate(inst.created_at);

  document.getElementById('detail-identity').innerHTML = `
    <div class="kv-row"><span class="kv-key">name</span><span class="kv-val highlight">${esc(inst.name)}</span></div>
    <div class="kv-row"><span class="kv-key">state</span><span class="kv-val"><span class="badge ${esc(inst.state)}">${esc(inst.state)}</span></span></div>
    <div class="kv-row"><span class="kv-key">stack</span><span class="kv-val highlight">${esc(inst.stack) || '—'}</span></div>
    <div class="kv-row"><span class="kv-key">vmid</span><span class="kv-val highlight">${inst.vmid}</span></div>
    <div class="kv-row"><span class="kv-key">internal id</span><span class="kv-val">${inst.id}</span></div>
  `;

  document.getElementById('detail-network').innerHTML = `
    <div class="kv-row"><span class="kv-key">tailscale ip</span><span class="kv-val highlight">${esc(inst.tailscale_ip) || '—'}</span></div>
    <div class="kv-row"><span class="kv-key">tailscale</span><span class="kv-val ${inst.tailscale ? 'on' : 'off'}">${inst.tailscale ? 'enabled' : 'disabled'}</span></div>
  `;

  document.getElementById('detail-services').innerHTML = [
    ...DETAIL_SERVICES.map(s => ({ key: s, label: s })),
    { key: 'hardware_acceleration', label: 'hw acceleration' },
  ].map(({ key, label }) => `
    <div class="svc-item">
      <span class="svc-name">${esc(label)}</span>
      <span class="svc-status ${inst[key] ? 'on' : 'off'}">${inst[key] ? 'enabled' : 'disabled'}</span>
    </div>
  `).join('');

  document.getElementById('detail-timestamps').innerHTML = history.length
    ? history.map(e => {
        if (e.field === 'created') return `
          <div class="tl-item tl-created">
            <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
            <span class="tl-field">created</span>
            <span class="tl-change">—</span>
          </div>`;
        return `
          <div class="tl-item">
            <span class="tl-time">${fmtDateFull(e.changed_at)}</span>
            <span class="tl-field">${esc(e.field)}</span>
            <span class="tl-change">
              <span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
              <span class="tl-arrow">→</span>
              <span class="tl-new ${stateClass(e.field, e.new_value)}">${fmtHistVal(e.field, e.new_value)}</span>
            </span>
          </div>`;
      }).join('')
    : '<div class="tl-empty">no history yet</div>';

  document.getElementById('detail-edit-btn').onclick   = () => openEditModal(inst.vmid);
  document.getElementById('detail-delete-btn').onclick = () => confirmDeleteDialog(inst);
}

// ── Modal ─────────────────────────────────────────────────────────────────────

function openNewModal() {
  editingVmid = null;
  document.getElementById('modal-title').textContent = 'new instance';
  clearForm();
  document.getElementById('instance-modal').classList.add('open');
}

async function openEditModal(vmid) {
  const inst = await getInstance(vmid);
  if (!inst) return;
  editingVmid = inst.vmid;
  document.getElementById('modal-title').textContent    = `edit / ${inst.name}`;
  document.getElementById('f-name').value               = inst.name;
  document.getElementById('f-vmid').value               = inst.vmid;
  document.getElementById('f-state').value              = inst.state;
  document.getElementById('f-stack').value              = inst.stack;
  document.getElementById('f-tailscale-ip').value       = inst.tailscale_ip;
  document.getElementById('f-atlas').checked            = !!inst.atlas;
  document.getElementById('f-argus').checked            = !!inst.argus;
  document.getElementById('f-semaphore').checked        = !!inst.semaphore;
  document.getElementById('f-patchmon').checked         = !!inst.patchmon;
  document.getElementById('f-tailscale').checked        = !!inst.tailscale;
  document.getElementById('f-andromeda').checked        = !!inst.andromeda;
  document.getElementById('f-hardware-accel').checked   = !!inst.hardware_acceleration;
  document.getElementById('instance-modal').classList.add('open');
}

function closeModal() {
  document.getElementById('instance-modal').classList.remove('open');
}

function clearForm() {
  document.getElementById('f-name').value         = '';
  document.getElementById('f-vmid').value         = '';
  document.getElementById('f-tailscale-ip').value = '';
  document.getElementById('f-state').value        = 'deployed';
  document.getElementById('f-stack').value        = 'production';
  ['f-atlas', 'f-argus', 'f-semaphore', 'f-patchmon', 'f-tailscale', 'f-andromeda', 'f-hardware-accel']
    .forEach(id => { document.getElementById(id).checked = false; });
}

async function saveInstance() {
  const name  = document.getElementById('f-name').value.trim();
  const vmid  = parseInt(document.getElementById('f-vmid').value, 10);
  const state = document.getElementById('f-state').value;
  const stack = document.getElementById('f-stack').value;

  if (!name)        { showToast('name is required', 'error'); return; }
  if (!vmid || vmid < 1) { showToast('a valid vmid is required', 'error'); return; }

  const data = {
    name, state, stack, vmid,
    tailscale_ip:          document.getElementById('f-tailscale-ip').value.trim(),
    atlas:                 +document.getElementById('f-atlas').checked,
    argus:                 +document.getElementById('f-argus').checked,
    semaphore:             +document.getElementById('f-semaphore').checked,
    patchmon:              +document.getElementById('f-patchmon').checked,
    tailscale:             +document.getElementById('f-tailscale').checked,
    andromeda:             +document.getElementById('f-andromeda').checked,
    hardware_acceleration: +document.getElementById('f-hardware-accel').checked,
  };

  const result = editingVmid
    ? await updateInstance(editingVmid, data)
    : await createInstance(data);

  if (!result.ok) { showToast(result.error, 'error'); return; }

  showToast(`${name} ${editingVmid ? 'updated' : 'created'}`, 'success');
  closeModal();

  if (currentVmid && document.getElementById('page-detail').classList.contains('active')) {
    await renderDetailPage(vmid);
  } else {
    await renderDashboard();
  }
}

// ── Confirm Dialog ────────────────────────────────────────────────────────────

function confirmDeleteDialog(inst) {
  if (inst.stack !== 'development') {
    showToast(`demote ${inst.name} to development before deleting`, 'error');
    return;
  }
  document.getElementById('confirm-title').textContent = `delete ${inst.name}?`;
  document.getElementById('confirm-msg').textContent   =
    `This will permanently remove instance "${inst.name}" (vmid: ${inst.vmid}) from Catalyst. This action cannot be undone.`;
  document.getElementById('confirm-ok').onclick = () => doDelete(inst.vmid, inst.name);
  document.getElementById('confirm-overlay').classList.add('open');
}

function closeConfirm() {
  document.getElementById('confirm-overlay').classList.remove('open');
}

async function doDelete(vmid, name) {
  closeConfirm();
  await deleteInstance(vmid);
  showToast(`${name} deleted`, 'success');
  navigate('dashboard');
}

// ── Toast ─────────────────────────────────────────────────────────────────────

function showToast(msg, type = 'success') {
  const t = document.getElementById('toast');
  document.getElementById('toast-msg').textContent = msg;
  t.className = `toast ${type} show`;
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove('show'), 3000);
}

// ── Settings Modal ────────────────────────────────────────────────────────────

function openSettingsModal() {
  document.getElementById('settings-modal').classList.add('open');
}

function closeSettingsModal() {
  document.getElementById('settings-modal').classList.remove('open');
  document.getElementById('import-file').value = '';
}

async function exportDB() {
  const res = await fetch('/api/export');
  const blob = await res.blob();
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `catalyst-backup-${new Date().toISOString().slice(0, 10)}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

async function importDB() {
  const file = document.getElementById('import-file').files[0];
  if (!file) { showToast('Select a backup file first', 'error'); return; }
  document.getElementById('confirm-title').textContent = 'Replace all instances?';
  document.getElementById('confirm-msg').textContent =
    `This will delete all current instances and replace them with the contents of "${file.name}". This cannot be undone.`;
  document.getElementById('confirm-overlay').classList.add('open');
  document.getElementById('confirm-ok').onclick = async () => {
    closeConfirm();
    try {
      const { instances } = JSON.parse(await file.text());
      const res = await fetch('/api/import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ instances }),
      });
      const data = await res.json();
      if (!res.ok) { showToast(data.error ?? 'Import failed', 'error'); return; }
      showToast(`Imported ${data.imported} instance${data.imported !== 1 ? 's' : ''}`, 'success');
      closeSettingsModal();
      renderDashboard();
    } catch {
      showToast('Invalid backup file', 'error');
    }
  };
}

// ── Keyboard / backdrop ───────────────────────────────────────────────────────

document.addEventListener('keydown', e => {
  if (e.key !== 'Escape') return;
  if (document.getElementById('instance-modal').classList.contains('open'))  { closeModal();         return; }
  if (document.getElementById('confirm-overlay').classList.contains('open')) { closeConfirm();       return; }
  if (document.getElementById('settings-modal').classList.contains('open'))  { closeSettingsModal(); return; }
});

document.getElementById('instance-modal').addEventListener('click', e => {
  if (e.target === document.getElementById('instance-modal')) closeModal();
});
document.getElementById('confirm-overlay').addEventListener('click', e => {
  if (e.target === document.getElementById('confirm-overlay')) closeConfirm();
});
document.getElementById('settings-modal').addEventListener('click', e => {
  if (e.target === document.getElementById('settings-modal')) closeSettingsModal();
});