{% extends "base.html" %}
{% block title %}SOVD REST Tester{% endblock %}

{% block content %}
<h3>SOVD REST Tester</h3>
<p>Build and send HTTP requests to any SOVD endpoint. Async operations show live progress polling.</p>

<div class="card">
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
    <label><strong>Entity</strong>
      <select id="entity-select" onchange="onEntityChange()">
        <option value="">— select entity —</option>
        {% for e in entities %}
        <option value="{{ e.id }}">{{ e.name }} ({{ e.id }})</option>
        {% endfor %}
      </select>
    </label>

    <label><strong>Resource type</strong>
      <select id="res-type-select" onchange="onResTypeChange()">
        <option value="data">data</option>
        <option value="operations">operations</option>
        <option value="faults">faults</option>
        <option value="modes">modes</option>
      </select>
    </label>
  </div>

  <label style="margin-top:.6rem"><strong>Resource ID</strong>
    <span id="async-badge" style="display:none;margin-left:.5rem;padding:2px 7px;
          border-radius:3px;font-size:.75em;font-weight:bold;background:#f59e0b;color:#fff">ASYNC</span>
    <span id="sync-badge"  style="display:none;margin-left:.5rem;padding:2px 7px;
          border-radius:3px;font-size:.75em;font-weight:bold;background:#10b981;color:#fff">SYNC</span>
    <select id="res-id-select" onchange="onResIdChange()" style="width:100%">
      <option value="">— all resources (collection) —</option>
    </select>
  </label>

  <div style="display:grid;grid-template-columns:auto 1fr;gap:1rem;margin-top:.6rem;align-items:end">
    <label><strong>Method</strong>
      <select id="method-select" onchange="onMethodChange()">
        <option>GET</option>
        <option>POST</option>
        <option>PUT</option>
        <option>DELETE</option>
      </select>
    </label>
    <label><strong>Full URL</strong> <small>(editable)</small>
      <input id="url-input" type="text" style="font-family:monospace;width:100%">
    </label>
  </div>

  <label id="body-label" style="margin-top:.6rem;display:none"><strong>Request body</strong> <small>(JSON)</small>
    <textarea id="body-input" rows="5" style="font-family:monospace;width:100%"
      placeholder='{"parameters": {"key": "value"}}'></textarea>
  </label>

  <div style="margin-top:.8rem;display:flex;gap:.6rem;align-items:center">
    <button id="send-btn" onclick="sendRequest()">&#9654; Send</button>
    <button id="poll-btn" onclick="pollOnce()" style="display:none">&#8635; Poll status</button>
    <button id="stop-btn" onclick="stopExecution()" style="display:none;color:#dc2626">&#9632; Terminate</button>
    <button onclick="clearResponse()" style="background:none;border:1px solid currentColor">Clear</button>
    <label style="margin-left:auto;font-size:.85em">
      <input type="checkbox" id="auto-poll-chk" onchange="toggleAutoPoll()"> Auto-poll every
      <input type="number" id="poll-interval" value="2" min="1" max="30" style="width:3.5rem"> s
    </label>
  </div>
</div>

<!-- async progress bar -->
<div id="progress-card" class="card" style="display:none">
  <strong>Async Execution</strong>
  <div style="margin:.4rem 0;font-size:.9em">
    <span id="exec-id-label" style="font-family:monospace;font-size:.85em;color:#666"></span>
  </div>
  <div style="background:#e5e7eb;border-radius:4px;height:18px;margin:.4rem 0;overflow:hidden">
    <div id="progress-bar"
         style="height:100%;background:#3b82f6;width:0%;transition:width .4s;border-radius:4px"></div>
  </div>
  <div id="progress-label" style="font-size:.85em;color:#666">0%</div>
</div>

<div class="card">
  <strong>Response</strong>
  <div id="status-line" style="margin:.4rem 0;font-size:.9em;color:#666"></div>
  <pre id="response-area"
       style="overflow:auto;max-height:500px;background:var(--background-alt,#f8f8f8);
              padding:.8rem;border-radius:4px;white-space:pre-wrap;min-height:3rem"></pre>
</div>

<style>
  #progress-bar[data-status="completed"] { background:#10b981; }
  #progress-bar[data-status="failed"]    { background:#ef4444; }
  #progress-bar[data-status="stopped"]   { background:#6b7280; }
</style>

<script>
/* ── state ─────────────────────────────────────────────────── */
let _asyncExecId  = null;
let _asyncPollUrl = null;
let _pollTimer    = null;
let _opCatalog    = {};   // entity_path → [{id, name, asynchronous_execution}, ...]

/* ── helpers ────────────────────────────────────────────────── */
function ent()     { return document.getElementById("entity-select").value; }
function resType() { return document.getElementById("res-type-select").value; }
function resId()   { return document.getElementById("res-id-select").value; }
function method()  { return document.getElementById("method-select").value; }

function buildUrl() {
  const e = ent();
  if (!e) return window.location.origin;
  let url = window.location.origin + e + "/" + resType();
  if (resId()) url += "/" + resId();
  return url;
}
function syncUrl() {
  document.getElementById("url-input").value = buildUrl();
}

/* ── async badge ─────────────────────────────────────────────── */
function updateAsyncBadge() {
  const id = resId();
  const entityOps = _opCatalog[ent()] || [];
  const op = entityOps.find(o => o.id === id);
  const asyncEl = document.getElementById("async-badge");
  const syncEl  = document.getElementById("sync-badge");
  asyncEl.style.display = "none";
  syncEl.style.display  = "none";
  if (resType() === "operations" && op) {
    if (op.asynchronous_execution) asyncEl.style.display = "inline";
    else                            syncEl.style.display  = "inline";
  }
}

/* ── dynamic resource-id dropdown ────────────────────────────── */
async function populateResIds() {
  const sel = document.getElementById("res-id-select");
  sel.innerHTML = '<option value="">— all resources (collection) —</option>';
  const entity = ent();
  if (!entity) { syncUrl(); updateAsyncBadge(); return; }

  try {
    const resp = await fetch(`/catalog?type=${resType()}`);
    const data = await resp.json();
    const items = (data[resType()] || []).filter(r => r.entity_path === entity);

    // For operations, also fetch the live list so we get asynchronous_execution
    if (resType() === "operations") {
      try {
        const opResp = await fetch(`${window.location.origin}${entity}/operations`);
        const opData = await opResp.json();
        _opCatalog[entity] = opData.items || [];
      } catch (_) {}
    }

    items.forEach(r => {
      const opt = document.createElement("option");
      opt.value = r.id;
      const op = (_opCatalog[entity] || []).find(o => o.id === r.id);
      const tag = op ? (op.asynchronous_execution ? " [ASYNC]" : " [SYNC]") : "";
      opt.textContent = `${r.id}${r.name ? " — " + r.name : ""}${tag}`;
      sel.appendChild(opt);
    });
  } catch (e) { /* no-op */ }
  syncUrl();
  updateAsyncBadge();
}

function onEntityChange()  { clearAsyncState(); populateResIds(); }
function onResTypeChange() { clearAsyncState(); populateResIds(); }
function onResIdChange()   { syncUrl(); updateAsyncBadge(); }

function onMethodChange() {
  const show = ["PUT","POST"].includes(method());
  document.getElementById("body-label").style.display = show ? "block" : "none";
}

/* ── send ────────────────────────────────────────────────────── */
async function sendRequest() {
  clearAsyncState();
  const method_val = method();
  const url   = document.getElementById("url-input").value.trim();
  const body  = document.getElementById("body-input").value.trim();
  const btn   = document.getElementById("send-btn");

  btn.disabled = true;
  setStatus("Sending…", "#666");
  document.getElementById("response-area").textContent = "";

  const opts = { method: method_val, headers: {"Content-Type": "application/json"} };
  if (body && ["PUT","POST"].includes(method_val)) {
    try { JSON.parse(body); }
    catch(e) { setStatus("ERROR: invalid JSON body", "#dc2626"); btn.disabled = false; return; }
    opts.body = body;
  }

  try {
    const t0  = Date.now();
    const res = await fetch(url, opts);
    const ms  = Date.now() - t0;
    const ct  = res.headers.get("content-type") || "";
    let text, parsed;
    if (ct.includes("json")) {
      parsed = await res.json();
      text = JSON.stringify(parsed, null, 2);
    } else {
      text = await res.text() || "(empty body)";
    }

    const colour = res.ok ? "#16a34a" : "#dc2626";
    setStatus(
      `<span style="color:${colour};font-weight:bold">HTTP ${res.status} ${res.statusText}</span> &nbsp; ${ms} ms`,
      null
    );
    document.getElementById("response-area").textContent = text;

    // If 202 async, wire up polling
    if (res.status === 202 && parsed?.id) {
      const loc = res.headers.get("location") || url + "/" + parsed.id;
      startAsyncTracking(parsed.id, loc);
    }
  } catch(e) {
    setStatus("Network error: " + e.message, "#dc2626");
  } finally {
    btn.disabled = false;
  }
}

/* ── async tracking ──────────────────────────────────────────── */
function startAsyncTracking(execId, pollUrl) {
  _asyncExecId  = execId;
  _asyncPollUrl = pollUrl;
  document.getElementById("exec-id-label").textContent = "UUID: " + execId;
  document.getElementById("progress-card").style.display = "block";
  document.getElementById("poll-btn").style.display  = "inline-block";
  document.getElementById("stop-btn").style.display  = "inline-block";
  setProgress(0, "running");
  if (document.getElementById("auto-poll-chk").checked) startAutoPoll();
}

function clearAsyncState() {
  stopAutoPoll();
  _asyncExecId = _asyncPollUrl = null;
  document.getElementById("progress-card").style.display = "none";
  document.getElementById("poll-btn").style.display  = "none";
  document.getElementById("stop-btn").style.display  = "none";
}

async function pollOnce() {
  if (!_asyncPollUrl) return;
  try {
    const res = await fetch(_asyncPollUrl);
    if (!res.ok) {
      setStatus(`Poll error: HTTP ${res.status}`, "#dc2626");
      stopAutoPoll();
      return;
    }
    const data = await res.json();
    setProgress(data.progress ?? 0, data.status);
    document.getElementById("response-area").textContent = JSON.stringify(data, null, 2);
    const colour = data.status === "completed" ? "#16a34a"
                 : data.status === "failed"    ? "#dc2626"
                 : data.status === "stopped"   ? "#6b7280" : "#3b82f6";
    setStatus(
      `<span style="font-weight:bold;color:${colour}">Status: ${data.status}</span>` +
      (data.progress != null ? ` &mdash; ${data.progress}%` : ""), null
    );
    if (["completed","failed","stopped"].includes(data.status)) stopAutoPoll();
  } catch(e) {
    setStatus("Poll error: " + e.message, "#dc2626");
    stopAutoPoll();
  }
}

async function stopExecution() {
  if (!_asyncPollUrl) return;
  if (!confirm("Terminate this execution?")) return;
  try {
    const res = await fetch(_asyncPollUrl, {method: "DELETE"});
    setStatus(`Terminated — HTTP ${res.status}`, "#6b7280");
    stopAutoPoll();
    setProgress(0, "stopped");
  } catch(e) { setStatus("Error: " + e.message, "#dc2626"); }
}

function toggleAutoPoll() {
  if (document.getElementById("auto-poll-chk").checked && _asyncPollUrl) startAutoPoll();
  else stopAutoPoll();
}

function startAutoPoll() {
  stopAutoPoll();
  const secs = parseInt(document.getElementById("poll-interval").value) || 2;
  _pollTimer = setInterval(pollOnce, secs * 1000);
}

function stopAutoPoll() {
  if (_pollTimer) { clearInterval(_pollTimer); _pollTimer = null; }
}

/* ── ui helpers ──────────────────────────────────────────────── */
function setProgress(pct, status) {
  const bar = document.getElementById("progress-bar");
  bar.style.width = pct + "%";
  bar.setAttribute("data-status", status || "running");
  document.getElementById("progress-label").textContent = `${pct}% — ${status}`;
}

function setStatus(html, colour) {
  const el = document.getElementById("status-line");
  if (colour) el.style.color = colour;
  else el.style.color = "";
  el.innerHTML = html;
}

function clearResponse() {
  clearAsyncState();
  setStatus("", "#666");
  document.getElementById("response-area").textContent = "";
}

/* ── init ────────────────────────────────────────────────────── */
syncUrl();
</script>
{% endblock %}