const state = {
  summary: null,
  detail: null,
  newKey: null,
  loading: false
};

const content = document.getElementById("content");
const notice = document.getElementById("notice");
const pageTitle = document.getElementById("pageTitle");
const pageSubtitle = document.getElementById("pageSubtitle");
const sidebarMeta = document.getElementById("sidebarMeta");

document.getElementById("refreshButton").addEventListener("click", () => refresh(true));
window.addEventListener("hashchange", () => renderRoute());

content.addEventListener("click", async (event) => {
  const button = event.target.closest("button[data-action]");
  if (!button) {
    return;
  }

  const { action, clientId, model, keyId } = button.dataset;

  try {
    setBusy(button, true);

    if (action === "disable-hour") {
      await api(`/clients/${encodeURIComponent(clientId)}/disable`, {
        method: "POST",
        body: { mode: "duration", durationMinutes: 60 }
      });
      setNotice(`Disabled ${clientId} for one hour.`);
      await refresh();
    }

    if (action === "disable-manual") {
      await api(`/clients/${encodeURIComponent(clientId)}/disable`, {
        method: "POST",
        body: { mode: "manual" }
      });
      setNotice(`Disabled ${clientId}.`);
      await refresh();
    }

    if (action === "enable-client") {
      await api(`/clients/${encodeURIComponent(clientId)}/enable`, { method: "POST" });
      setNotice(`Enabled ${clientId}.`);
      await refresh();
    }

    if (action === "model-command") {
      await runModelCommand(clientId, model, button.dataset.modelAction);
    }

    if (action === "delete-key") {
      if (!confirm("Delete this API key?")) {
        return;
      }

      await api(`/api-keys/${encodeURIComponent(keyId)}`, { method: "DELETE" });
      setNotice("API key deleted.");
      await refresh();
    }

    if (action === "copy-key") {
      await navigator.clipboard.writeText(button.dataset.key);
      setNotice("API key copied.");
    }
  } catch (error) {
    setNotice(error.message, true);
  } finally {
    setBusy(button, false);
  }
});

content.addEventListener("submit", async (event) => {
  const form = event.target;
  if (!(form instanceof HTMLFormElement)) {
    return;
  }

  event.preventDefault();
  const data = Object.fromEntries(new FormData(form).entries());
  const submit = form.querySelector("button[type=submit]");

  try {
    setBusy(submit, true);

    if (form.dataset.form === "model-action") {
      await runModelCommand(data.clientId, data.model, data.action);
      form.reset();
    }

    if (form.dataset.form === "model-detail") {
      await loadModelDetail(data.model, data.clientId);
    }

    if (form.dataset.form === "api-key") {
      state.newKey = await api("/api-keys", {
        method: "POST",
        body: { name: data.name }
      });
      setNotice("API key created.");
      await refresh();
    }
  } catch (error) {
    setNotice(error.message, true);
  } finally {
    setBusy(submit, false);
  }
});

async function boot() {
  await refresh();
  setInterval(() => refresh(), 15000);
}

async function refresh(showNotice = false, render = true) {
  state.loading = true;

  try {
    state.summary = await api("/summary");
    updateShell();
    if (render) {
      await renderRoute();
    }

    if (showNotice) {
      setNotice("Refreshed.");
    }
  } catch (error) {
    setNotice(error.message, true);
    content.innerHTML = `<div class="panel"><div class="empty">${escapeHtml(error.message)}</div></div>`;
  } finally {
    state.loading = false;
  }
}

async function api(path, options = {}) {
  const headers = options.headers ? { ...options.headers } : {};
  const init = {
    method: options.method || "GET",
    credentials: "same-origin",
    headers
  };

  if (options.body !== undefined) {
    headers["Content-Type"] = "application/json";
    init.body = JSON.stringify(options.body);
  }

  const response = await fetch(`/api/admin${path}`, init);
  const contentType = response.headers.get("content-type") || "";
  const body = contentType.includes("application/json")
    ? await response.json()
    : await response.text();

  if (!response.ok) {
    const message = body?.detail || body?.error || body?.title || response.statusText;
    throw new Error(message);
  }

  return body;
}

async function renderRoute() {
  const hash = (window.location.hash || "#clients").slice(1);
  const [view, encodedModel] = hash.split("/");

  document.querySelectorAll("[data-nav]").forEach((link) => {
    link.classList.toggle("active", link.dataset.nav === view);
  });

  if (view === "models" && encodedModel) {
    const model = decodeURIComponent(encodedModel);
    await loadModelDetail(model);
    return;
  }

  state.detail = null;

  if (view === "models") {
    renderModels();
    return;
  }

  if (view === "api-keys") {
    renderApiKeys();
    return;
  }

  renderClients();
}

function updateShell() {
  const summary = state.summary;
  if (!summary) {
    return;
  }

  sidebarMeta.innerHTML = `
    <div>${escapeHtml(summary.user?.name || "Signed in")}</div>
    <div>${summary.clients.length} clients</div>
    <div>${summary.models.length} models</div>
    <div>${formatDate(summary.generatedAtUtc)}</div>
  `;
}

function renderClients() {
  const clients = state.summary?.clients || [];
  pageTitle.textContent = "Clients";
  pageSubtitle.textContent = "Connected tunnel clients, request counts, and forwarding controls.";

  content.innerHTML = `
    <div class="panel">
      <div class="panel-header">
        <h2>Clients</h2>
        <span class="badge">${clients.length} total</span>
      </div>
      <div class="table-wrap">
        ${clients.length ? clientsTable(clients) : emptyState("No clients have connected yet.")}
      </div>
    </div>
  `;
}

function clientsTable(clients) {
  const rows = clients.map((client) => `
    <tr>
      <td>
        <div class="cell-main">${escapeHtml(client.id)}</div>
        <div class="cell-sub">${client.connected ? "Connected" : "Offline"}${client.modelsUpdatedAt ? `, models ${formatDate(client.modelsUpdatedAt)}` : ""}</div>
      </td>
      <td>
        <div class="badge-row">
          ${client.connected ? badge("Connected", "good") : badge("Offline", "")}
          ${client.disabled ? badge(client.disabledManually ? "Disabled manual" : "Disabled timed", "bad") : badge("Enabled", "good")}
        </div>
        ${client.disabled ? `<div class="cell-sub">${escapeHtml(disabledText(client))}</div>` : ""}
      </td>
      <td>${number(client.pendingRequests)}</td>
      <td>
        <div class="cell-main">${number(client.requestStats.total)}</div>
        <div class="cell-sub">${number(client.requestStats.last10Minutes)} in 10m, ${number(client.requestStats.lastHour)} in 1h</div>
      </td>
      <td>${modelBadges(client.models)}</td>
      <td>${modelBadges(client.activeModels)}</td>
      <td>
        <div class="actions">
          <button class="button warning" data-action="disable-hour" data-client-id="${escapeAttr(client.id)}" ${client.disabled ? "disabled" : ""}>Disable 1h</button>
          <button class="button warning" data-action="disable-manual" data-client-id="${escapeAttr(client.id)}" ${client.disabled ? "disabled" : ""}>Disable</button>
          <button class="button secondary" data-action="enable-client" data-client-id="${escapeAttr(client.id)}" ${client.disabled ? "" : "disabled"}>Enable</button>
        </div>
      </td>
    </tr>
  `).join("");

  return `
    <table>
      <thead>
        <tr>
          <th>Client</th>
          <th>Status</th>
          <th>Pending</th>
          <th>Requests</th>
          <th>Listed models</th>
          <th>Active models</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>${rows}</tbody>
    </table>
  `;
}

function renderModels() {
  const models = state.summary?.models || [];
  const clients = connectedClients();
  pageTitle.textContent = "Models";
  pageSubtitle.textContent = "Listed and active models, recent request volume, and model operations.";

  content.innerHTML = `
    <div class="panel">
      <div class="panel-header">
        <h2>Run model action</h2>
      </div>
      <div class="panel-body">
        ${modelActionForm(clients)}
      </div>
    </div>
    <div class="panel">
      <div class="panel-header">
        <h2>Models</h2>
        <span class="badge">${models.length} total</span>
      </div>
      <div class="table-wrap">
        ${models.length ? modelsTable(models) : emptyState("No models have been reported yet.")}
      </div>
    </div>
  `;
}

function modelActionForm(clients, selectedModel = "", selectedClient = "") {
  return `
    <form class="form-row" data-form="model-action">
      <div class="field">
        <label for="modelActionClient">Client</label>
        <select class="select" id="modelActionClient" name="clientId" required>
          ${clientOptions(clients, selectedClient)}
        </select>
      </div>
      <div class="field">
        <label for="modelActionModel">Model</label>
        <input class="input" id="modelActionModel" name="model" value="${escapeAttr(selectedModel)}" placeholder="llama3.1" required>
      </div>
      <div class="field">
        <label for="modelActionAction">Action</label>
        <select class="select" id="modelActionAction" name="action" required>
          <option value="add">Add</option>
          <option value="load">Load</option>
          <option value="unload">Unload</option>
          <option value="remove">Remove</option>
        </select>
      </div>
      <button class="button" type="submit" ${clients.length ? "" : "disabled"}>Run</button>
    </form>
  `;
}

function modelsTable(models) {
  const rows = models.map((model) => `
    <tr>
      <td>
        <div class="cell-main">${escapeHtml(model.name)}</div>
        <div class="cell-sub">${number(model.metrics.totalRequests)} total requests</div>
      </td>
      <td>${modelBadges(model.listedClients)}</td>
      <td>${modelBadges(model.activeClients)}</td>
      <td>
        <div class="cell-main">${number(model.metrics.requestsLast10Minutes)}</div>
        <div class="cell-sub">${number(model.metrics.requestsLastHour)} in last hour</div>
      </td>
      <td>
        <div class="cell-main">${number(model.metrics.tokensLast10Minutes)}</div>
        <div class="cell-sub">${number(model.metrics.tokensLastHour)} in last hour</div>
      </td>
      <td>
        <a class="button secondary" href="#models/${encodeURIComponent(model.name)}">Details</a>
      </td>
    </tr>
  `).join("");

  return `
    <table>
      <thead>
        <tr>
          <th>Model</th>
          <th>Listed on</th>
          <th>Active on</th>
          <th>Requests 10m</th>
          <th>Tokens 10m</th>
          <th></th>
        </tr>
      </thead>
      <tbody>${rows}</tbody>
    </table>
  `;
}

async function loadModelDetail(model, clientId) {
  pageTitle.textContent = "Model Detail";
  pageSubtitle.textContent = model;
  content.innerHTML = `<div class="panel"><div class="empty">Loading model detail...</div></div>`;

  const query = new URLSearchParams({ model });
  if (clientId) {
    query.set("clientId", clientId);
  }

  state.detail = await api(`/models/detail?${query.toString()}`);
  renderModelDetail();
}

function renderModelDetail() {
  const detail = state.detail;
  const clients = connectedClients();
  const model = detail.model;
  const selectedClient = detail.selectedClientId || clients[0]?.id || "";
  const metrics = detail.metrics;
  const showBody = detail.show?.body === undefined ? null : detail.show.body;

  pageTitle.textContent = "Model Detail";
  pageSubtitle.textContent = model;

  content.innerHTML = `
    <div class="toolbar">
      <a class="button secondary" href="#models">Back to models</a>
    </div>
    <div class="metric-grid">
      ${metric(number(metrics.requestsLast10Minutes), "Requests in 10 minutes")}
      ${metric(number(metrics.requestsLastHour), "Requests in 1 hour")}
      ${metric(number(metrics.tokensLast10Minutes), "Tokens in 10 minutes")}
      ${metric(number(metrics.tokensLastHour), "Tokens in 1 hour")}
    </div>
    <div class="panel">
      <div class="panel-header">
        <h2>Placement</h2>
      </div>
      <div class="panel-body">
        <div class="badge-row">
          ${badge("Listed", detail.listedClients.length ? "good" : "")}
          ${modelBadges(detail.listedClients)}
        </div>
        <div class="badge-row" style="margin-top:8px">
          ${badge("Active", detail.activeClients.length ? "good" : "warn")}
          ${modelBadges(detail.activeClients)}
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-header">
        <h2>Client action</h2>
      </div>
      <div class="panel-body">
        <form class="form-row" data-form="model-detail">
          <input type="hidden" name="model" value="${escapeAttr(model)}">
          <div class="field">
            <label for="detailClient">Client</label>
            <select class="select" id="detailClient" name="clientId" required>
              ${clientOptions(clients, selectedClient)}
            </select>
          </div>
          <button class="button secondary" type="submit" ${clients.length ? "" : "disabled"}>Refresh detail</button>
        </form>
        <div class="actions" style="margin-top:10px">
          <button class="button secondary" data-action="model-command" data-model-action="load" data-client-id="${escapeAttr(selectedClient)}" data-model="${escapeAttr(model)}" ${selectedClient ? "" : "disabled"}>Load</button>
          <button class="button secondary" data-action="model-command" data-model-action="unload" data-client-id="${escapeAttr(selectedClient)}" data-model="${escapeAttr(model)}" ${selectedClient ? "" : "disabled"}>Unload</button>
          <button class="button danger" data-action="model-command" data-model-action="remove" data-client-id="${escapeAttr(selectedClient)}" data-model="${escapeAttr(model)}" ${selectedClient ? "" : "disabled"}>Remove</button>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-header">
        <h2>Ollama show response</h2>
        ${detail.show ? badge(detail.show.ok ? "OK" : `HTTP ${detail.show.statusCode}`, detail.show.ok ? "good" : "bad") : ""}
      </div>
      <div class="panel-body">
        ${detail.show ? `<pre class="pre">${escapeHtml(formatJson(showBody))}</pre>` : emptyState("No connected client was available for details.")}
      </div>
    </div>
  `;
}

async function runModelCommand(clientId, model, action) {
  if (!clientId || !model || !action) {
    throw new Error("Client, model, and action are required.");
  }

  if (action === "remove" && !confirm(`Remove ${model} from ${clientId}?`)) {
    return;
  }

  const result = await api("/models/actions", {
    method: "POST",
    body: { clientId, model, action }
  });

  if (!result.ok) {
    throw new Error(modelActionError(result));
  }

  const detail = modelActionResultDetail(result);
  const completed = `${capitalize(action)} completed for ${model} on ${clientId}${detail ? ` (${detail})` : ""}.`;

  if (action === "load" || action === "unload") {
    const shouldBeActive = action === "load";
    setNotice(`${completed} Waiting for active model snapshot.`);

    if (await waitForModelActiveState(clientId, model, shouldBeActive)) {
      setNotice(completed);
      return;
    }

    setNotice(`${completed} The active model snapshot has not reflected the change yet.`);
    return;
  }

  setNotice(completed);
  await refreshAfterModelCommand(model, clientId);
}

function renderApiKeys() {
  const keys = state.summary?.apiKeys || [];
  pageTitle.textContent = "API Keys";
  pageSubtitle.textContent = "Keys accepted by the proxy token header, bearer auth, query token, and token path.";

  content.innerHTML = `
    ${state.newKey ? newKeyPanel(state.newKey) : ""}
    <div class="panel">
      <div class="panel-header">
        <h2>Create API key</h2>
      </div>
      <div class="panel-body">
        <form class="form-row" data-form="api-key">
          <div class="field">
            <label for="apiKeyName">Name</label>
            <input class="input" id="apiKeyName" name="name" placeholder="e.g. openwebui_prod" required>
          </div>
          <button class="button" type="submit">Create</button>
        </form>
      </div>
    </div>
    <div class="panel">
      <div class="panel-header">
        <h2>API keys</h2>
        <span class="badge">${keys.length} total</span>
      </div>
      <div class="table-wrap">
        ${keys.length ? apiKeysTable(keys) : emptyState("No API keys have been created.")}
      </div>
    </div>
  `;
}

function newKeyPanel(key) {
  return `
    <div class="new-key">
      <strong>New API key</strong>
      <code>${escapeHtml(key.key)}</code>
      <div class="actions">
        <button class="button secondary" type="button" data-action="copy-key" data-key="${escapeAttr(key.key)}">Copy</button>
      </div>
    </div>
  `;
}

function apiKeysTable(keys) {
  const rows = keys.map((key) => `
    <tr>
      <td>
        <div class="cell-main">${escapeHtml(key.name)}</div>
        <div class="cell-sub">${escapeHtml(key.keyPrefix)}...</div>
      </td>
      <td>${formatDate(key.createdAtUtc)}</td>
      <td>${key.lastUsedUtc ? formatDate(key.lastUsedUtc) : "Never"}</td>
      <td>
        <button class="button danger" data-action="delete-key" data-key-id="${escapeAttr(key.id)}">Delete</button>
      </td>
    </tr>
  `).join("");

  return `
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Created</th>
          <th>Last used</th>
          <th></th>
        </tr>
      </thead>
      <tbody>${rows}</tbody>
    </table>
  `;
}

function connectedClients() {
  return (state.summary?.clients || []).filter((client) => client.connected);
}

async function waitForModelActiveState(clientId, model, shouldBeActive) {
  const deadline = Date.now() + 15000;

  while (Date.now() <= deadline) {
    await refreshAfterModelCommand(model, clientId);

    const client = (state.summary?.clients || [])
      .find((item) => sameText(item.id, clientId));

    if (client && modelListContains(client.activeModels, model) === shouldBeActive) {
      return true;
    }

    await delay(1000);
  }

  return false;
}

async function refreshAfterModelCommand(model, clientId) {
  await refresh(false, false);

  const hash = window.location.hash || "";
  if (hash.startsWith(`#models/${encodeURIComponent(model)}`)) {
    await loadModelDetail(model, clientId);
    return;
  }

  await renderRoute();
}

function modelActionResultDetail(result) {
  const body = result?.body;

  if (!body || typeof body === "string") {
    return body || "";
  }

  if (body.status) {
    return body.status;
  }

  if (body.done_reason) {
    return `done: ${body.done_reason}`;
  }

  if (body.done) {
    return "done";
  }

  return "";
}

function modelActionError(result) {
  const body = result?.body;

  if (typeof body === "string" && body) {
    return body;
  }

  if (body?.error) {
    return body.error;
  }

  if (body?.message) {
    return body.message;
  }

  return `Model action failed with HTTP ${result.statusCode}.`;
}

function modelListContains(models, model) {
  return (models || []).some((item) => sameModelName(item, model));
}

function sameModelName(left, right) {
  return stripLatestTag(left).toLowerCase() === stripLatestTag(right).toLowerCase();
}

function sameText(left, right) {
  return String(left || "").trim().toLowerCase() === String(right || "").trim().toLowerCase();
}

function stripLatestTag(model) {
  const value = String(model || "").trim();
  return value.toLowerCase().endsWith(":latest") ? value.slice(0, -":latest".length) : value;
}

function delay(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

function clientOptions(clients, selectedClient) {
  if (!clients.length) {
    return `<option value="">No connected clients</option>`;
  }

  return clients.map((client) => `
    <option value="${escapeAttr(client.id)}" ${client.id === selectedClient ? "selected" : ""}>${escapeHtml(client.id)}</option>
  `).join("");
}

function modelBadges(items) {
  if (!items || !items.length) {
    return `<span class="cell-sub">None</span>`;
  }

  return `<div class="badge-row">${items.map((item) => badge(item, "")).join("")}</div>`;
}

function badge(text, kind) {
  return `<span class="badge ${kind || ""}">${escapeHtml(text)}</span>`;
}

function metric(value, label) {
  return `
    <div class="metric">
      <strong>${escapeHtml(value)}</strong>
      <span>${escapeHtml(label)}</span>
    </div>
  `;
}

function emptyState(text) {
  return `<div class="empty">${escapeHtml(text)}</div>`;
}

function disabledText(client) {
  if (client.disabledManually) {
    return "Until enabled manually";
  }

  return client.disabledUntilUtc ? `Until ${formatDate(client.disabledUntilUtc)}` : "Disabled";
}

function formatDate(value) {
  if (!value) {
    return "";
  }

  return new Intl.DateTimeFormat(undefined, {
    dateStyle: "short",
    timeStyle: "medium"
  }).format(new Date(value));
}

function formatJson(value) {
  if (typeof value === "string") {
    return value;
  }

  return JSON.stringify(value, null, 2);
}

function number(value) {
  return new Intl.NumberFormat().format(value || 0);
}

function capitalize(value) {
  return value ? value[0].toUpperCase() + value.slice(1) : value;
}

function setNotice(message, isError = false) {
  notice.hidden = false;
  notice.textContent = message;
  notice.classList.toggle("error", isError);

  clearTimeout(setNotice.timer);
  setNotice.timer = setTimeout(() => {
    notice.hidden = true;
  }, isError ? 7000 : 3500);
}

function setBusy(element, busy) {
  if (!element) {
    return;
  }

  element.disabled = busy;
}

function escapeHtml(value) {
  return String(value ?? "")
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

function escapeAttr(value) {
  return escapeHtml(value);
}

boot();