// Your account: password and API tokens.
import { h, mount, table, time, input, field, errorBox, toast } from "../ui.js";
import { get, api, state, catalog } from "../api.js";
import { rerender } from "../app.js";
import { revoke, rotateDialog, tokenDialog } from "./users.js";

export async function render(el) {
  const me = state.me;
  const [tokens, cat] = await Promise.all([get("/me/tokens"), catalog()]);
  const cur = input({ type: "password", autocomplete: "current-password" });
  const pw = input({ type: "password", autocomplete: "new-password" });
  const pw2 = input({ type: "password", autocomplete: "new-password" });
  const err = h("div");
  const change = async () => {
    mount(err);
    if (pw.value !== pw2.value) { mount(err, h("div", { class: "msg err" }, "The new passwords don't match.")); return; }
    try {
      await api("POST", "/me/password", { body: { current: cur.value, password: pw.value } });
      toast("Password changed; your other sessions are logged out");
      cur.value = pw.value = pw2.value = "";
    } catch (e) { mount(err, errorBox(e)); }
  };
  mount(el,
    h("div", { class: "page-head" }, h("div", { class: "grow" }, h("h1", null, me.user.username),
      h("div", { class: "muted" }, me.admin ? "Administrator" : "May: " + (me.permissions.join(", ") || "nothing")))),
    me.method === "session" ? h("div", { class: "panel" },
      h("h2", null, "Password"),
      h("div", { class: "form-grid" }, field("Current password", cur), field("New password", pw), field("Repeat", pw2)), err,
      h("div", { class: "actions", style: { marginTop: "12px" } }, h("button", { class: "primary", onclick: change }, "Change password"))) : null,
    h("div", { class: "panel" },
      h("div", { class: "page-head" }, h("div", { class: "grow" }, h("h2", null, "API tokens"),
        h("div", { class: "muted" }, "For the hc CLI and scripts: 'hc config set token'.")),
        h("button", { onclick: () => tokenDialog(cat) }, "New token")),
      table([
        { label: "Name", render: (t) => t.name },
        { label: "May", render: (t) => h("span", { class: "mono small" }, t.grant_strings.join(" ")) },
        { label: "Expires", render: (t) => t.expires_at ? time(t.expires_at) : "never" },
        { label: "Last used", render: (t) => t.last_used_at ? time(t.last_used_at) : "never" },
        { label: "", tdClass: "actions-cell", render: (t) => [
          h("button", { class: "small reveal", onclick: () => rotateDialog(t) }, "Rotate"), " ",
          h("button", { class: "small reveal", onclick: () => revoke(t) }, "Revoke")] },
      ], tokens, { empty: "No tokens." })));
}