from __future__ import annotations

from fastapi import FastAPI
from fastapi.responses import HTMLResponse

from ..layout.page import page


def register(app: FastAPI) -> None:
    @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>
<div style="height:12px"></div>
<div class="card">
  <h3 style="margin-top:0">User Info</h3>
  <div class="muted">Shown after login via <code>/api/v2/me</code>.</div>
  <div style="height:10px"></div>
  <div class="row">
    <button class="btn" id="me-refresh">Refresh</button>
  </div>
  <div style="height:10px"></div>
  <pre id="me" class="muted">(not loaded)</pre>
</div>
<div style="height:12px"></div>
<div class="card">
  <h3 style="margin-top:0">W&B</h3>
  <div class="muted">Weights &amp; Biases local server (v3.6). Metrics are written by training jobs; this UI is for viewing.</div>
  <div style="height:10px"></div>
  <div class="row">
    <a class="btn" id="wandb-open" target="_blank" rel="noopener" href="#">Open W&amp;B (:8090)</a>
    <button class="btn" id="wandb-copy-project">Copy project</button>
  </div>
  <div style="height:10px"></div>
  <div class="muted">project: <code id="wandb-project">(unknown)</code></div>
  <div class="muted">base_url (job runtime): <code id="wandb-base-url">(unknown)</code></div>
</div>
""".strip()
        script = """
const tokEl = document.getElementById("tok");
const msg = document.getElementById("msg");
const me = document.getElementById("me");
const wandbOpen = document.getElementById("wandb-open");
const wandbProject = document.getElementById("wandb-project");
const wandbBaseUrl = document.getElementById("wandb-base-url");
document.getElementById("wandb-copy-project").onclick = async () => { await copyText(wandbProject.textContent || ""); };
wandbOpen.href = curOriginWithPort(8090);
tokEl.value = mvpTokenGet();

async function refreshMe() {
  me.textContent = "Loading...";
  try {
    const obj = await apiJson("/api/v2/me");
    me.textContent = fmtJson(obj);
    if (obj.wandb && obj.wandb.enabled) {
      wandbProject.textContent = obj.wandb.project_name || "(unknown)";
      wandbBaseUrl.textContent = obj.wandb.base_url || "(unknown)";
    } else {
      wandbProject.textContent = "(disabled)";
      wandbBaseUrl.textContent = "(disabled)";
    }
  } catch (e) {
    me.textContent = "Error: " + (e.status || "") + "\\n" + (e.body || String(e));
    wandbProject.textContent = "(error)";
    wandbBaseUrl.textContent = "(error)";
  }
}

document.getElementById("me-refresh").onclick = refreshMe;
document.getElementById("save").onclick = () => { mvpTokenSet(tokEl.value); msg.textContent = "Saved."; refreshMe(); };
document.getElementById("clear").onclick = () => { mvpTokenSet(""); tokEl.value = ""; msg.textContent = "Cleared."; me.textContent = "(not loaded)"; };
if (mvpTokenGet()) refreshMe();
""".strip()
        return HTMLResponse(content=page("Login", "login", body, script))

