import { post } from "./api.js";
import { errorText, h, replace, showAlert } from "./dom.js";
import { openTranscript, type View } from "./panes.js";
import { activeTasks, currentSession, findTask, lastVisits, onEach, state } from "./state.js";

export function mountNavbar(root: HTMLElement, show: (view: View) => void): void {
  const crumb = h("button", { class: "crumb", title: "Switch task (⌘K)" });
  crumb.onclick = openSwitcher;

  const inbox = h("button", { class: "inbox-count" });
  inbox.onclick = () => show("inbox");

  const admin = h("button", { class: "nav-link" }, "Admin");
  admin.onclick = () => show("admin");

  const conn = h("span", { class: "connection down", title: "connecting" });
  const connLabel = h("span", { class: "connection-label" }, "reconnecting…");
  const me = h("span", { class: "me" });

  const render = () => {
    const task = state.selectedTaskId ? findTask(state.selectedTaskId) : undefined;
    const project = task ? state.projects.find((p) => p.id === task.project_id) : undefined;
    replace(crumb, task ? `${project?.name ?? ""} ▸ ${task.title}` : "No task", " ▾");

    const blocked = state.inbox.filter((i) => i.priority === "blocked").length;
    inbox.className = blocked > 0 ? "inbox-count urgent" : "inbox-count";
    replace(inbox, `Inbox ${state.inbox.length}`, blocked > 0 && h("span", { class: "blocked-count" }, ` · ${blocked} blocked`));

    conn.className = state.connected ? "connection up" : "connection down";
    conn.title = state.connected ? "live" : "reconnecting";
    connLabel.hidden = state.connected;
    replace(me, state.me?.display_name ?? "");
  };

  onEach(["me", "projects", "tasks", "inbox", "selection", "connection"], render);
  replace(root, h("a", { href: "#/", class: "brand" }, "byre"), crumb, h("span", { class: "spacer" }), inbox, admin, connLabel, conn, me);
  render();

  addEventListener("keydown", (e) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey) && !document.querySelector("dialog[open]")) {
      e.preventDefault();
      openSwitcher();
    }
  });
}

function openSwitcher(): void {
  if (document.querySelector(".switcher")) {
    return;
  }

  const input = h("input", { placeholder: "Go to a task, or type a title to create one…", autocomplete: "off" });
  const list = h("ul", { class: "switcher-list" });
  const backdrop = h("div", { class: "switcher-backdrop" });
  const box = h("div", { class: "switcher" }, input, list);
  let selected = 0;
  let rows: { el: HTMLElement; pick: () => void }[] = [];

  const offs = onEach(["projects", "tasks", "sessions", "inbox"], () => render());
  const onEscape = (e: KeyboardEvent) => {
    if (e.key !== "Escape") {
      return;
    }
    e.preventDefault();
    e.stopPropagation();
    close();
  };
  addEventListener("keydown", onEscape, { capture: true });
  const close = () => {
    offs();
    removeEventListener("keydown", onEscape, { capture: true });
    backdrop.remove();
    box.remove();
  };

  const go = (taskId: string) => {
    close();
    location.hash = `#/task/${taskId}`;
    openTranscript();
  };

  const create = async (projectId: string, title: string) => {
    close();
    try {
      const task = await post("/api/projects/{projectId}/tasks", { path: { projectId }, body: { title } });
      go(task.id);
    } catch (err) {
      void showAlert(errorText(err));
    }
  };

  const render = () => {
    const title = input.value.trim();
    const q = title.toLowerCase();
    const inbox = (taskId: string) => state.inbox.filter((item) => item.task_id === taskId).length;
    const visits = lastVisits();
    const matches = activeTasks()
      .filter(({ project, task }) => `${project.name} ${task.title}`.toLowerCase().includes(q))
      .map((m) => ({ ...m, count: inbox(m.task.id), visited: visits[m.task.id] ?? 0 }))
      .sort((a, b) => Number(b.count > 0) - Number(a.count > 0) || a.visited - b.visited);
    rows = matches.map(({ project, task, count }) => {
      const sess = currentSession(task.id);
      const el = h(
        "li",
        {},
        h("span", { class: `dot ${sess?.state ?? "none"}`, title: sess?.state ?? "no session" }),
        h("span", { class: "task-title" }, h("span", { class: "project-name" }, project.name), " ", task.title),
        count > 0 && h("span", { class: "badge", title: "inbox items" }, count),
        h("span", { class: "task-state" }, sess?.state ?? "no agent"),
      );
      return { el, pick: () => go(task.id) };
    });
    const current = state.selectedTaskId ? findTask(state.selectedTaskId) : undefined;
    const project = state.projects.find((p) => p.id === current?.project_id) ?? state.projects[0];
    if (title && project) {
      const el = h("li", { class: "new-task" }, h("span", { class: "task-title" }, "New task in ", h("span", { class: "project-name" }, project.name), ": ", title));
      rows.push({ el, pick: () => void create(project.id, title) });
    }
    selected = Math.min(selected, Math.max(rows.length - 1, 0));
    rows.forEach((row, i) => {
      row.el.classList.toggle("selected", i === selected);
      row.el.onmousedown = (e) => {
        e.preventDefault();
        row.pick();
      };
    });
    replace(list, ...rows.map((r) => r.el), rows.length === 0 && h("li", { class: "empty-row" }, "No active tasks. Type a title to create one."));
  };

  input.oninput = () => {
    selected = 0;
    render();
  };
  input.onkeydown = (e) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      selected = Math.min(selected + 1, rows.length - 1);
      render();
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      selected = Math.max(selected - 1, 0);
      render();
    } else if (e.key === "Enter") {
      e.preventDefault();
      rows[selected]?.pick();
    }
  };
  backdrop.onclick = close;

  document.body.append(backdrop, box);
  render();
  input.focus();
}