// panes/inbox.js — sweep & route CxAI/_inbox via MCP tools.
import { registerPane } from '../app.js';
import { mcp, escapeHtml } from '../lib/api.js';
import { ok, err, fmtJSON } from '../lib/ui.js';

const TPL = `
  <div class="pane-head">
    <div>
      <div class="title">Inbox</div>
      <div class="sub">Route artifacts through the CxAI inbox classifier.</div>
    </div>
    <div class="grow"></div>
    <button class="btn btn-secondary" id="inbox-refresh">Refresh</button>
  </div>

  <div class="grid cols-2">
    <div class="card">
      <div class="card-title"><h2>Sweep</h2><span class="muted mono" id="inbox-sweep-meta">idle</span></div>
      <form id="inbox-sweep-form" class="grid cols-2 gap-3">
        <label class="field">
          <span class="lbl">Mode</span>
          <select class="input" id="inbox-mode">
            <option value="all">all (inbox + needs-review)</option>
            <option value="inbox">inbox only</option>
            <option value="needs_review">needs-review only</option>
          </select>
        </label>
        <label class="field">
          <span class="lbl">Threshold</span>
          <input class="input" id="inbox-threshold" type="number" min="0" max="1" step="0.05" value="0.7" />
        </label>
        <label class="check" style="grid-column: span 2"><input type="checkbox" id="inbox-dry" /> dry-run (don't move files)</label>
        <button class="btn btn-primary" type="submit" style="grid-column: span 2">Run sweep</button>
      </form>
      <div class="mt-3">
        <h3 class="mb-2">Last result</h3>
        <pre id="inbox-result" class="muted">no sweep yet</pre>
      </div>
    </div>

    <div class="card">
      <div class="card-title"><h2>Route a single file</h2><span class="muted" id="inbox-route-meta"></span></div>
      <form id="inbox-route-form" class="flex gap-2 mb-3">
        <input class="input" id="inbox-route-path" placeholder="/absolute/path/to/file.md" />
        <label class="check"><input type="checkbox" id="inbox-route-dry" /> dry</label>
        <button class="btn btn-primary" type="submit">Route</button>
      </form>
      <pre id="inbox-route-result" class="muted">no route yet</pre>
    </div>
  </div>
`;

async function runSweep(host) {
  const mode = host.querySelector('#inbox-mode').value;
  const threshold = parseFloat(host.querySelector('#inbox-threshold').value);
  const dry_run = host.querySelector('#inbox-dry').checked;
  host.querySelector('#inbox-sweep-meta').textContent = 'running…';
  host.querySelector('#inbox-result').textContent = 'running…';
  try {
    const r = await mcp.call('inbox_sweep_tool', { mode, threshold, dry_run });
    host.querySelector('#inbox-result').textContent = fmtJSON(r);
    const total = (r?.routed?.length ?? r?.routed ?? 0) || (r?.summary?.routed ?? 0);
    host.querySelector('#inbox-sweep-meta').textContent =
      dry_run ? `dry-run · ${JSON.stringify(r).length}b` : `routed ${total}`;
    const pill = document.getElementById('nav-inbox-pill');
    if (pill && !dry_run) pill.textContent = String(total || '');
    ok(`Sweep complete${dry_run ? ' (dry)' : ''}`);
  } catch (e) {
    host.querySelector('#inbox-result').textContent = fmtJSON(e.body ?? { error: e.message });
    host.querySelector('#inbox-sweep-meta').textContent = `error ${e.status ?? ''}`;
    err(`sweep: ${e.message}`);
  }
}

async function routeOne(host) {
  const path = host.querySelector('#inbox-route-path').value.trim();
  if (!path) return;
  const dry_run = host.querySelector('#inbox-route-dry').checked;
  host.querySelector('#inbox-route-meta').textContent = 'routing…';
  host.querySelector('#inbox-route-result').textContent = 'routing…';
  try {
    const r = await mcp.call('route_file_tool', { path, dry_run });
    host.querySelector('#inbox-route-result').textContent = fmtJSON(r);
    host.querySelector('#inbox-route-meta').textContent = r?.target || r?.destination || 'ok';
    ok(`Routed ${path.split('/').pop()}`);
  } catch (e) {
    host.querySelector('#inbox-route-result').textContent = fmtJSON(e.body ?? { error: e.message });
    host.querySelector('#inbox-route-meta').textContent = `error ${e.status ?? ''}`;
    err(`route: ${e.message}`);
  }
}

registerPane('inbox', {
  label: 'Inbox',
  init(host) {
    host.innerHTML = TPL;
    host.querySelector('#inbox-sweep-form').addEventListener('submit', (e) => { e.preventDefault(); runSweep(host); });
    host.querySelector('#inbox-route-form').addEventListener('submit', (e) => { e.preventDefault(); routeOne(host); });
    host.querySelector('#inbox-refresh').addEventListener('click', () => runSweep(host));
  },
});
