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/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>
  <div id="msg" class="muted"></div>
</div>
""".strip()
        script = """
const msg = document.getElementById("msg");
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) { msg.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";
  msg.textContent = "";
}
document.getElementById("reset-p").onclick = async () => {
  p.value = "";
  mvpSftpPasswordSet("");
  msg.textContent = "Resetting...";
  const resp = await apiFetch("/api/v2/me/sftp:reset_password", { method: "POST" });
  const text = await resp.text();
  if (!resp.ok) { msg.textContent = "Error: " + resp.status + "\\n" + text; return; }
  const obj = JSON.parse(text);
  p.value = obj.password || "";
  mvpSftpPasswordSet(p.value);
  msg.textContent = "SFTPGo password rotated.";
};
refresh();
""".strip()
        return HTMLResponse(content=page("Data", "data", body, script))

