from __future__ import annotations

import html
import json

from fastapi import FastAPI
from fastapi.responses import HTMLResponse, RedirectResponse


_BASE_CSS = """
:root { --bg:#0b1020; --panel:#111a33; --muted:#95a3c6; --fg:#e8eeff; --accent:#7aa2ff; --danger:#ff6b6b; --ok:#3ddc97; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
.layout { display:flex; min-height:100vh; }
.nav { width: 240px; padding:16px; background: linear-gradient(180deg, #0e1630, #0b1020); border-right: 1px solid rgba(255,255,255,0.06); }
.brand { font-weight: 700; letter-spacing: .2px; margin-bottom: 12px; }
.nav a { display:block; padding:10px 10px; border-radius:10px; color: var(--fg); opacity: .9; }
.nav a.active { background: rgba(122,162,255,0.14); border: 1px solid rgba(122,162,255,0.22); }
.nav a:hover { background: rgba(255,255,255,0.06); }
.main { flex:1; padding: 20px 24px; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px; }
.row { display:flex; gap: 12px; align-items:center; flex-wrap: wrap; }
.muted { color: var(--muted); }
.btn { border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: var(--fg); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.btn:hover { background: rgba(255,255,255,0.10); }
.btn.danger { border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.10); }
.pill { display:inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); font-size: 12px; }
.pill.ok { border-color: rgba(61,220,151,0.35); background: rgba(61,220,151,0.12); }
.pill.bad { border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.12); }
textarea, input { width: 100%; color: var(--fg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 10px 12px; outline: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
pre { white-space: pre-wrap; word-break: break-word; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align:left; }
""".strip()


_BASE_JS = """
function mvpTokenGet() {
  return (localStorage.getItem("mvp_token") || "").trim();
}
function mvpTokenSet(v) {
  localStorage.setItem("mvp_token", (v || "").trim());
}
function mvpSftpPasswordGet() {
  return (localStorage.getItem("mvp_sftp_password") || "").trim();
}
function mvpSftpPasswordSet(v) {
  localStorage.setItem("mvp_sftp_password", (v || "").trim());
}
async function apiFetch(path, opts) {
  opts = opts || {};
  opts.headers = opts.headers || {};
  const tok = mvpTokenGet();
  if (tok) opts.headers["Authorization"] = "Bearer " + tok;
  return fetch(path, opts);
}
async function apiJson(path, opts) {
  const resp = await apiFetch(path, opts);
  const text = await resp.text();
  if (!resp.ok) {
    const err = new Error("HTTP " + resp.status);
    err.status = resp.status;
    err.body = text;
    throw err;
  }
  return JSON.parse(text);
}
function fmtJson(obj) {
  try { return JSON.stringify(obj, null, 2); } catch (e) { return String(obj); }
}
function curOriginWithPort(port) {
  const proto = window.location.protocol;
  const host = window.location.hostname;
  return proto + "//" + host + ":" + port;
}
async function copyText(v) {
  if (!v) return false;
  try {
    await navigator.clipboard.writeText(v);
    return true;
  } catch (e) {
    // Fallback for non-secure contexts (http) or older browsers.
    try {
      const ta = document.createElement("textarea");
      ta.value = v;
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      const ok = document.execCommand("copy");
      document.body.removeChild(ta);
      return ok;
    } catch (e2) {
      return false;
    }
  }
}
document.addEventListener("DOMContentLoaded", () => {
  const el = document.getElementById("nav-ray-dashboard");
  if (el) el.href = curOriginWithPort(8265);
});
""".strip()


def _nav(active: str) -> str:
    links = [
        ("login", "/ui/login", "Login"),
        ("tasks", "/ui/tasks", "Tasks"),
        ("new", "/ui/tasks/new", "New Task"),
        ("data", "/ui/data", "Data"),
        ("admin", "/ui/admin", "Admin"),
        ("ray", "#", "Ray Dashboard"),
    ]
    items = []
    for key, href, label in links:
        cls = "active" if key == active else ""
        extra = ""
        if key == "ray":
            extra = ' id="nav-ray-dashboard" target="_blank" rel="noopener"'
        items.append(f'<a class="{cls}" href="{href}"{extra}>{html.escape(label)}</a>')
    return "\n".join(items)


def _page(title: str, active: str, body: str, script: str = "") -> str:
    return f"""<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{html.escape(title)}</title>
  <style>{_BASE_CSS}</style>
</head>
<body>
  <div class="layout">
    <nav class="nav">
      <div class="brand">Argus MVP</div>
      {_nav(active)}
      <div style="margin-top:12px" class="muted">
        Token stored in browser localStorage as <code>mvp_token</code>.
      </div>
    </nav>
    <main class="main">
      {body}
    </main>
  </div>
  <script>{_BASE_JS}</script>
  <script>{script}</script>
</body>
</html>"""


def register_ui_routes(app: FastAPI) -> None:
    @app.get("/ui")
    async def ui_root() -> RedirectResponse:
        return RedirectResponse(url="/ui/tasks")

    @app.get("/ui/login")
    async def ui_login() -> HTMLResponse:
        body = """
<h1>Login</h1>
<div class="card">
  <div class="muted">Paste your API token (without the <code>Bearer</code> prefix).</div>
  <div style="height:10px"></div>
  <input id="tok" placeholder="token..." />
  <div style="height:10px"></div>
  <div class="row">
    <button class="btn" id="save">Save</button>
    <button class="btn" id="clear">Clear</button>
    <a href="/ui/tasks" class="btn" style="display:inline-block">Go to Tasks</a>
  </div>
  <div style="height:10px"></div>
  <div id="msg" class="muted"></div>
</div>
""".strip()
        script = """
const tokEl = document.getElementById("tok");
const msg = document.getElementById("msg");
tokEl.value = mvpTokenGet();
document.getElementById("save").onclick = () => { mvpTokenSet(tokEl.value); msg.textContent = "Saved."; };
document.getElementById("clear").onclick = () => { mvpTokenSet(""); tokEl.value = ""; msg.textContent = "Cleared."; };
""".strip()
        return HTMLResponse(content=_page("Login", "login", body, script))

    @app.get("/ui/tasks")
    async def ui_tasks() -> HTMLResponse:
        body = """
<h1>Tasks</h1>
<div class="card">
  <div class="row">
    <button class="btn" id="refresh">Refresh</button>
    <a class="btn" href="/ui/tasks/new" style="display:inline-block">New Task</a>
  </div>
  <div style="height:10px"></div>
  <div id="out" class="muted">Loading...</div>
</div>
""".strip()
        script = """
const out = document.getElementById("out");
async function refresh() {
  out.textContent = "Loading...";
  try {
    const q = await apiJson("/api/v2/queue");
    const completedLimit = 25;
    const completedOffset = Number(localStorage.getItem("mvp_completed_offset") || "0") || 0;
    const done = await apiJson("/api/v2/tasks?limit=" + completedLimit + "&offset=" + completedOffset + "&states=SUCCEEDED,FAILED,CANCELED");

    function pill(state) {
    const s = String(state || "");
    if (s === "SUCCEEDED") return `<span class="pill ok">${s}</span>`;
    if (s === "FAILED") return `<span class="pill bad">${s}</span>`;
    if (s === "CANCELED") return `<span class="pill">${s}</span>`;
    if (s === "RUNNING") return `<span class="pill ok">${s}</span>`;
    if (s === "QUEUED" || s === "PENDING_RESOURCES" || s === "SUBMITTING" || s === "SUBMITTED") return `<span class="pill">${s}</span>`;
    return `<span class="pill">${s}</span>`;
  }
  function row(t) {
    const id = t.task_id;
    return `<tr>
      <td><a href="/ui/tasks/${id}">${id}</a></td>
      <td>${t.workload}</td>
      <td>${pill(t.state)}</td>
      <td>${t.nnodes} x ${t.n_gpus_per_node} GPU</td>
      <td>${t.updated_at || ""}</td>
    </tr>`;
  }

  const running = (q.running || []).map(row).join("");
  const pending = (q.pending || []).map(row).join("");
  const doneRows = (done.tasks || []).map(row).join("");
  const pageNo = Math.floor(completedOffset / completedLimit) + 1;
  const prevDisabled = completedOffset <= 0;
  const nextDisabled = !done.has_more;
  out.innerHTML = `
    <div class="muted">Tip: configure token in <a href="/ui/login">Login</a>.</div>
    <div style="height:10px"></div>
    <h3>Running</h3>
    <table><thead><tr><th>Task</th><th>Workload</th><th>State</th><th>Resources</th><th>Updated</th></tr></thead><tbody>${running || "<tr><td colspan=5 class=muted>(none)</td></tr>"}</tbody></table>
    <div style="height:12px"></div>
    <h3>Pending</h3>
    <table><thead><tr><th>Task</th><th>Workload</th><th>State</th><th>Resources</th><th>Updated</th></tr></thead><tbody>${pending || "<tr><td colspan=5 class=muted>(none)</td></tr>"}</tbody></table>
    <div style="height:12px"></div>
    <h3>Completed</h3>
    <div class="row" style="justify-content: space-between; margin-bottom: 8px;">
      <div class="muted">Page ${pageNo}</div>
      <div class="row">
        <button class="btn" id="done-prev" ${prevDisabled ? "disabled" : ""}>Prev</button>
        <button class="btn" id="done-next" ${nextDisabled ? "disabled" : ""}>Next</button>
      </div>
    </div>
    <table><thead><tr><th>Task</th><th>Workload</th><th>State</th><th>Resources</th><th>Updated</th></tr></thead><tbody>${doneRows || "<tr><td colspan=5 class=muted>(none)</td></tr>"}</tbody></table>
  `;

  const prevBtn = document.getElementById("done-prev");
  const nextBtn = document.getElementById("done-next");
  if (prevBtn) prevBtn.onclick = () => {
    const cur = Number(localStorage.getItem("mvp_completed_offset") || "0") || 0;
    const next = Math.max(0, cur - completedLimit);
    localStorage.setItem("mvp_completed_offset", String(next));
    refresh();
  };
  if (nextBtn) nextBtn.onclick = () => {
    const cur = Number(localStorage.getItem("mvp_completed_offset") || "0") || 0;
    const next = cur + completedLimit;
    localStorage.setItem("mvp_completed_offset", String(next));
    refresh();
  };
  } catch (e) {
    out.textContent = "Error: " + (e.status || "") + "\\n" + (e.body || String(e));
  }
}
document.getElementById("refresh").onclick = refresh;
refresh();
""".strip()
        return HTMLResponse(content=_page("Tasks", "tasks", body, script))

    @app.get("/ui/tasks/new")
    async def ui_new_task() -> HTMLResponse:
        ppo = """# PPO TaskSpec (YAML)
workload: ppo
nnodes: 2
n_gpus_per_node: 4
code_path: /private/common/code/verl/verl_repo
train_file: /private/common/datasets/gsm8k/train.parquet
val_file: /private/common/datasets/gsm8k/test.parquet
model_id: Qwen/Qwen2.5-0.5B-Instruct
""".strip()
        grpo = """# GRPO TaskSpec (YAML)
workload: grpo
nnodes: 2
n_gpus_per_node: 4
code_path: /private/common/code/verl/verl_repo
train_file: /private/common/datasets/gsm8k/train.parquet
val_file: /private/common/datasets/gsm8k/test.parquet
model_id: Qwen/Qwen2.5-0.5B-Instruct
""".strip()
        sft = """# SFT TaskSpec (YAML)
workload: sft
nnodes: 1
n_gpus_per_node: 1
code_path: /private/common/code/verl/verl_repo
train_file: /private/common/datasets/gsm8k_sft/train.parquet
val_file: /private/common/datasets/gsm8k_sft/test.parquet
model_id: Qwen/Qwen2.5-0.5B-Instruct
""".strip()
        body = f"""
<h1>New Task</h1>
<div class="card">
  <div class="muted">Paste TaskSpec YAML and submit to API server. Note: <code>code_path</code> is required (v3.0 does not execute user code; use the common snapshot).</div>
  <div style="height:10px"></div>
  <div class="row">
    <button class="btn" id="tpl-ppo">PPO example</button>
    <button class="btn" id="tpl-grpo">GRPO example</button>
    <button class="btn" id="tpl-sft">SFT example</button>
  </div>
  <div style="height:10px"></div>
  <textarea id="yaml" rows="16">{html.escape(ppo)}</textarea>
  <div style="height:10px"></div>
  <div class="row">
    <button class="btn" id="submit">Submit</button>
    <a class="btn" href="/ui/tasks" style="display:inline-block">Back</a>
  </div>
  <div style="height:10px"></div>
  <pre id="msg" class="muted"></pre>
</div>
""".strip()
        tpl_ppo = json.dumps(ppo)
        tpl_grpo = json.dumps(grpo)
        tpl_sft = json.dumps(sft)
        script = (
            """
const msg = document.getElementById("msg");
const yamlEl = document.getElementById("yaml");
const TPL_PPO = __TPL_PPO__;
const TPL_GRPO = __TPL_GRPO__;
const TPL_SFT = __TPL_SFT__;
document.getElementById("tpl-ppo").onclick = () => { yamlEl.value = TPL_PPO; msg.textContent = ""; };
document.getElementById("tpl-grpo").onclick = () => { yamlEl.value = TPL_GRPO; msg.textContent = ""; };
document.getElementById("tpl-sft").onclick = () => { yamlEl.value = TPL_SFT; msg.textContent = ""; };
document.getElementById("submit").onclick = async () => {
  msg.textContent = "Submitting...";
  const body = yamlEl.value;
  const resp = await apiFetch("/api/v2/tasks", { method: "POST", headers: {"Content-Type":"text/plain"}, body });
  const text = await resp.text();
  if (!resp.ok) { msg.textContent = "Error: " + resp.status + "\\n" + text; return; }
  const obj = JSON.parse(text);
  msg.textContent = "OK: " + fmtJson(obj);
  if (obj.task_id) window.location.href = "/ui/tasks/" + obj.task_id;
};
""".strip()
            .replace("__TPL_PPO__", tpl_ppo)
            .replace("__TPL_GRPO__", tpl_grpo)
            .replace("__TPL_SFT__", tpl_sft)
        )
        return HTMLResponse(content=_page("New Task", "new", body, script))

    @app.get("/ui/tasks/{task_id}")
    async def ui_task_detail(task_id: str) -> HTMLResponse:
        safe_id = html.escape(task_id)
        body = f"""
<h1>Task: <code>{safe_id}</code></h1>
<div class="card">
  <div class="row">
    <a class="btn" href="/ui/tasks/{safe_id}/logs" style="display:inline-block">Logs</a>
    <button class="btn" id="refresh">Refresh</button>
    <button class="btn danger" id="cancel">Cancel</button>
    <a class="btn" href="/ui/tasks" style="display:inline-block">Back</a>
  </div>
  <div style="height:10px"></div>
  <pre id="out" class="muted">Loading...</pre>
</div>
""".strip()
        script = f"""
document.getElementById("nav-ray-dashboard").href = curOriginWithPort(8265);
const out = document.getElementById("out");
async function refresh() {{
  out.textContent = "Loading...";
  const resp = await apiFetch("/api/v2/tasks/{task_id}");
  const text = await resp.text();
  if (!resp.ok) {{ out.textContent = "Error: " + resp.status + "\\n" + text; return; }}
  out.textContent = fmtJson(JSON.parse(text));
}}
document.getElementById("refresh").onclick = refresh;
document.getElementById("cancel").onclick = async () => {{
  if (!confirm("Cancel this task?")) return;
  const resp = await apiFetch("/api/v2/tasks/{task_id}:cancel", {{ method: "POST" }});
  const text = await resp.text();
  out.textContent = (resp.ok ? "Canceled.\\n" : "Error: " + resp.status + "\\n") + text;
  setTimeout(refresh, 800);
}};
refresh();
""".strip()
        return HTMLResponse(content=_page(f"Task {task_id}", "tasks", body, script))

    @app.get("/ui/tasks/{task_id}/logs")
    async def ui_task_logs(task_id: str) -> HTMLResponse:
        safe_id = html.escape(task_id)
        body = f"""
<h1>Logs: <code>{safe_id}</code></h1>
<div class="card">
  <div class="row">
    <button class="btn" id="refresh">Refresh</button>
    <label class="muted">Auto refresh <input type="checkbox" id="auto" /></label>
    <a class="btn" href="/ui/tasks/{safe_id}" style="display:inline-block">Back</a>
  </div>
  <div style="height:10px"></div>
  <pre id="out" class="muted">Loading...</pre>
</div>
""".strip()
        script = f"""
document.getElementById("nav-ray-dashboard").href = curOriginWithPort(8265);
const out = document.getElementById("out");
let timer = null;
async function refresh() {{
  const resp = await apiFetch("/api/v2/tasks/{task_id}/logs?tail=4000");
  const text = await resp.text();
  out.textContent = resp.ok ? text : ("Error: " + resp.status + "\\n" + text);
}}
document.getElementById("refresh").onclick = refresh;
document.getElementById("auto").onchange = (e) => {{
  if (e.target.checked) {{
    timer = setInterval(refresh, 2000);
  }} else {{
    if (timer) clearInterval(timer);
    timer = null;
  }}
}};
refresh();
""".strip()
        return HTMLResponse(content=_page(f"Logs {task_id}", "tasks", body, script))

    @app.get("/ui/data")
    async def ui_data() -> HTMLResponse:
        body = """
<h1>Data</h1>
<div class="card">
  <div class="muted">User files live under your home directory. Keep long-term artifacts in <code>models/</code> or <code>datasets/</code>.</div>
  <div style="height:14px"></div>

  <div class="row">
    <div style="flex:1; min-width:260px">
      <div class="muted">Username</div>
      <div style="height:6px"></div>
      <div class="row" style="gap:8px">
        <input id="u" readonly />
        <button class="btn" id="copy-u">Copy</button>
      </div>
    </div>
    <div style="flex:1; min-width:260px">
      <div class="muted">SFTPGo password</div>
      <div style="height:6px"></div>
      <div class="row" style="gap:8px">
        <input id="p" placeholder="Click Reset to generate..." />
        <button class="btn" id="copy-p">Copy</button>
        <button class="btn" id="reset-p">Reset</button>
      </div>
    </div>
  </div>

  <div style="height:12px"></div>
  <div class="row">
    <a class="btn" id="sftp-web" target="_blank" rel="noopener" href="#">Open SFTPGo Web Client (:8081)</a>
  </div>

  <div style="height:12px"></div>
  <div class="muted">
    You can also use an SFTP client (e.g. FileZilla) with the same username/password.
    Host: <code id="sftp-host"></code>, Port: <code id="sftp-port"></code>.
  </div>

  <div style="height:14px"></div>
  <pre id="out" class="muted">Loading...</pre>
</div>
""".strip()
        script = """
const out = document.getElementById("out");
document.getElementById("nav-ray-dashboard").href = curOriginWithPort(8265);
const u = document.getElementById("u");
const p = document.getElementById("p");
const sftpWeb = document.getElementById("sftp-web");
const sftpHost = document.getElementById("sftp-host");
const sftpPort = document.getElementById("sftp-port");
document.getElementById("copy-u").onclick = async () => { await copyText(u.value || ""); };
document.getElementById("copy-p").onclick = async () => { await copyText(p.value || ""); };

async function refresh() {
  const resp = await apiFetch("/api/v2/me");
  const text = await resp.text();
  if (!resp.ok) { out.textContent = "Error: " + resp.status + "\\n" + text; return; }
  const obj = JSON.parse(text);
  u.value = (obj.user_id || "");
  const cached = mvpSftpPasswordGet();
  if (cached) p.value = cached;
  const host = curOriginWithPort(8081);
  sftpWeb.href = host + "/web/client";
  sftpHost.textContent = (obj.sftp && obj.sftp.host) ? obj.sftp.host : window.location.hostname;
  sftpPort.textContent = (obj.sftp && obj.sftp.port) ? String(obj.sftp.port) : "2022";
  out.textContent = fmtJson(obj);
}
document.getElementById("reset-p").onclick = async () => {
  p.value = "";
  const resp = await apiFetch("/api/v2/me/sftp:reset_password", { method: "POST" });
  const text = await resp.text();
  if (!resp.ok) { out.textContent = "Error: " + resp.status + "\\n" + text; return; }
  const obj = JSON.parse(text);
  p.value = obj.password || "";
  mvpSftpPasswordSet(p.value);
  out.textContent = "SFTPGo password rotated.\\n\\n" + fmtJson(obj);
};
refresh();
""".strip()
        return HTMLResponse(content=_page("Data", "data", body, script))

    @app.get("/ui/admin")
    async def ui_admin() -> HTMLResponse:
        body = """
<h1>Admin</h1>
<div class="card">
  <div class="muted">
    This page requires the <code>admin</code> token (set it in <a href="/ui/login">Login</a>).
  </div>
  <div style="height:14px"></div>

  <h3>Create user</h3>
  <div class="row">
    <input id="new-user-id" placeholder="user_id (e.g. alice)" style="max-width:320px" />
    <input id="new-display-name" placeholder="display_name (optional)" style="max-width:320px" />
    <button class="btn" id="create-user">Create</button>
  </div>
  <div style="height:10px"></div>
  <pre id="create-msg" class="muted"></pre>

  <div style="height:14px"></div>
  <div class="row">
    <button class="btn" id="refresh">Refresh</button>
  </div>
  <div style="height:10px"></div>
  <div id="out" class="muted">Loading...</div>
</div>
""".strip()
        script = """
const out = document.getElementById("out");
const createMsg = document.getElementById("create-msg");
const userIdEl = document.getElementById("new-user-id");
const displayNameEl = document.getElementById("new-display-name");

function esc(s) {
  s = String(s || "");
  return s.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;");
}

async function refresh() {
  out.textContent = "Loading...";
  try {
    const obj = await apiJson("/api/v2/users?limit=200");
    const users = (obj.users || []);
    function row(u) {
      const uid = u.user_id;
      const tok = u.token || "";
      const tokShort = tok ? (tok.length > 18 ? (tok.slice(0, 18) + "…") : tok) : "";
      const created = u.created_at || "";
      const updated = u.updated_at || "";
      const tCreated = u.token_created_at || "";
      const tUsed = u.token_last_used_at || "";
      return `<tr>
        <td><code>${esc(uid)}</code></td>
        <td class="muted">${esc(created)}</td>
        <td class="muted">${esc(updated)}</td>
        <td>
          <div class="row" style="gap:8px">
            <code title="${esc(tok)}">${esc(tokShort)}</code>
            <button class="btn" data-copy="${esc(tok)}">Copy</button>
            <button class="btn" data-issue="${esc(uid)}">Issue token</button>
          </div>
          <div class="muted" style="margin-top:6px">token_created_at: ${esc(tCreated)}; last_used_at: ${esc(tUsed)}</div>
        </td>
      </tr>`;
    }
    out.innerHTML = `
      <table>
        <thead><tr><th>User</th><th>Created</th><th>Updated</th><th>Token</th></tr></thead>
        <tbody>${users.map(row).join("") || "<tr><td colspan=4 class=muted>(none)</td></tr>"}</tbody>
      </table>
    `;
    for (const btn of out.querySelectorAll("button[data-copy]")) {
      btn.onclick = async () => { await copyText(btn.getAttribute("data-copy") || ""); };
    }
    for (const btn of out.querySelectorAll("button[data-issue]")) {
      btn.onclick = async () => {
        const uid = btn.getAttribute("data-issue");
        if (!uid) return;
        try {
          const r = await apiJson("/api/v2/users/" + encodeURIComponent(uid) + "/tokens", { method: "POST" });
          createMsg.textContent = "Issued token:\\n" + fmtJson(r);
          await refresh();
        } catch (e) {
          createMsg.textContent = "Error issuing token: " + (e.status || "") + "\\n" + (e.body || String(e));
        }
      };
    }
  } catch (e) {
    out.textContent = "Error: " + (e.status || "") + "\\n" + (e.body || String(e));
  }
}

document.getElementById("refresh").onclick = refresh;
document.getElementById("create-user").onclick = async () => {
  createMsg.textContent = "Creating...";
  const user_id = (userIdEl.value || "").trim();
  const display_name = (displayNameEl.value || "").trim();
  if (!user_id) { createMsg.textContent = "user_id is required"; return; }
  const payload = { user_id: user_id };
  if (display_name) payload.display_name = display_name;
  try {
    const r = await apiJson("/api/v2/users", { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify(payload) });
    createMsg.textContent = "Created:\\n" + fmtJson(r);
    userIdEl.value = "";
    displayNameEl.value = "";
    await refresh();
  } catch (e) {
    createMsg.textContent = "Error: " + (e.status || "") + "\\n" + (e.body || String(e));
  }
};

refresh();
""".strip()
        return HTMLResponse(content=_page("Admin", "admin", body, script))