(function () {
  const esc = (s) => String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  async function api(path, opts = {}) {
    const h = { ...(opts.headers || {}) };
    const t = window.DeskAuth?.getToken?.();
    if (t) h.Authorization = `Bearer ${t}`;
    const r = await fetch(`/api/v1/agents${path}`, { ...opts, headers: h });
    if (!r.ok) throw new Error(`${r.status}`);
    return r.json();
  }
  async function renderAgenticOps() {
    const el = document.getElementById('agentic-ops-content');
    if (!el) return;
    el.innerHTML = '<p class="loading">Carregando Agentic Ops…</p>';
    try {
      const [health, scenarios, findings, log] = await Promise.all([
        api('/health'), api('/scenarios'), api('/findings?limit=30'), api('/action-log?limit=40'),
      ]);
      const tier = health.tier === 't1' ? 'T1 LLM' : 'T0';
      const ollama = health.ollama ? '<span class="pill pill-ok">Ollama OK</span>' : '<span class="pill pill-warn">Ollama offline</span>';
      const sRows = (scenarios.scenarios || []).map(s => `<tr><td><code>${esc(s.id)}</code></td><td>${esc(s.title)}</td><td>${esc(s.last_run_status||'—')}</td><td class="ticket-meta">${esc(s.last_run_at||'—')}</td></tr>`).join('');
      const fRows = (findings.findings || []).map(f => `<article class="card agentic-finding"><h3>${esc(f.title)} <span class="pill">${esc(f.severity)}</span></h3><p class="ticket-meta">${esc(f.created_at)}</p>${f.suggested_human_action?`<p><strong>Acção:</strong> ${esc(f.suggested_human_action)}</p>`:''}<button type="button" class="btn btn-ghost btn-sm" data-ack="${f.id}">Marcar visto</button></article>`).join('') || '<p class="empty">Sem findings abertos.</p>';
      const lRows = (log.events || []).map(e => `<tr><td class="ticket-meta">${esc(e.ts)}</td><td><code>${esc(e.event_type)}</code></td><td>${esc(e.message)}</td></tr>`).join('');
      el.innerHTML = `<div class="toolbar agentic-toolbar"><div><h2>Agentic Ops</h2><p class="ticket-meta">Spec 029 · ${tier} ${ollama}</p></div><button type="button" class="btn btn-primary btn-sm" id="btn-agentic-refresh">Actualizar</button></div><div class="agentic-grid"><div class="card"><h3>Cenários</h3><table class="data-table"><thead><tr><th>ID</th><th>Título</th><th>Último</th><th>Quando</th></tr></thead><tbody>${sRows}</tbody></table></div><div class="agentic-findings-col"><h3>Findings</h3>${fRows}</div></div><section class="card" style="margin-top:1rem"><h3>Audit log</h3><table class="data-table data-table-compact"><thead><tr><th>Quando</th><th>Evento</th><th>Mensagem</th></tr></thead><tbody>${lRows}</tbody></table></section>`;
      el.querySelector('#btn-agentic-refresh')?.addEventListener('click', renderAgenticOps);
      el.querySelectorAll('[data-ack]').forEach(btn => btn.addEventListener('click', async () => {
        await api(`/findings/${btn.dataset.ack}/ack`, { method: 'POST' });
        await renderAgenticOps();
      }));
    } catch (err) {
      el.innerHTML = `<p class="error">Erro: ${esc(err.message)}</p>`;
    }
  }
  window.renderAgenticOps = renderAgenticOps;
})();
