// panes/lang.js — language pipelines (LangChain-ish sidecar).
import { registerPane } from '../app.js';
import { jget, jpost, escapeHtml } from '../lib/api.js';
import { fmtJSON, err } from '../lib/ui.js';

const TPL = `
  <div class="pane-head">
    <div><div class="title">Lang</div><div class="sub">Run language pipelines.</div></div>
    <div class="grow"></div>
    <span class="muted" id="lang-status">—</span>
  </div>
  <div class="grid cols-2">
    <div class="card">
      <div class="card-title"><h2>Pipelines</h2></div>
      <div id="lang-pipelines" class="mb-3">…</div>
      <div class="grid gap-3">
        <label class="field"><span class="lbl">Pipeline</span><select class="input" id="lang-pipeline"></select></label>
        <label class="field"><span class="lbl">Input (JSON)</span><textarea class="input" id="lang-input" rows="6">{}</textarea></label>
        <div class="btn-row">
          <button class="btn btn-primary" id="lang-run">Run</button>
          <button class="btn btn-secondary" id="lang-health">Health</button>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-title"><h2>Result</h2></div>
      <pre id="lang-result" class="muted">—</pre>
    </div>
  </div>
`;

async function refresh(host) {
  try {
    const r = await jget('/api/lang/pipelines');
    const items = r.pipelines || [];
    host.querySelector('#lang-pipelines').innerHTML = items.map(p =>
      `<div class="row"><div class="grow"><div class="ttl mono">${escapeHtml(p.name)}</div><div class="desc">${escapeHtml(p.description || '')}</div></div></div>`
    ).join('') || '<div class="muted" style="padding:12px">no pipelines</div>';
    const sel = host.querySelector('#lang-pipeline');
    if (sel && sel.children.length === 0) {
      sel.innerHTML = items.map(p => `<option value="${escapeHtml(p.name)}">${escapeHtml(p.name)}</option>`).join('');
    }
    host.querySelector('#lang-status').textContent = 'ok';
  } catch (e) {
    host.querySelector('#lang-status').textContent = 'upstream unavailable: ' + e.message;
  }
}

registerPane('lang', {
  label: 'Lang',
  init(host) {
    host.innerHTML = TPL;
    host.querySelector('#lang-run').addEventListener('click', async () => {
      const name = host.querySelector('#lang-pipeline').value;
      let input;
      try { input = JSON.parse(host.querySelector('#lang-input').value || '{}'); }
      catch (e) { return err(`bad JSON: ${e.message}`); }
      host.querySelector('#lang-status').textContent = 'running…';
      try {
        const r = await jpost(`/api/lang/pipelines/${encodeURIComponent(name)}`, { input });
        host.querySelector('#lang-result').textContent = fmtJSON(r);
        host.querySelector('#lang-status').textContent = `ok · ${r.duration_ms ?? '?'}ms`;
      } catch (e) {
        host.querySelector('#lang-result').textContent = fmtJSON(e.body ?? { error: e.message });
        host.querySelector('#lang-status').textContent = `error ${e.status ?? ''}`;
      }
    });
    host.querySelector('#lang-health').addEventListener('click', async () => {
      try { host.querySelector('#lang-result').textContent = fmtJSON(await jget('/api/lang/healthz')); }
      catch (e) { host.querySelector('#lang-result').textContent = e.message; }
    });
    refresh(host);
  },
  refresh,
});