import { Signal } from "@char/aftercare";
import {
  type Project,
  projectFor,
  type ProjectIndex,
  type ProjectInput,
  type Workspace,
  workspaceFor,
} from "@berry/api/projects.ts";
import { api } from "./client.ts";
import { configurationField } from "./configuration.tsx";
import { folderInput } from "./folders.tsx";
import { Scope } from "./ui.ts";

const workspaceLabel = (root: { environment: string; cwd: string }) =>
  `${root.environment === "local" ? "" : `${root.environment} · `}${root.cwd || "home"}`;

/** The sidebar's groups in order, `""` being no project; those never ordered follow by name. */
export function sidebarOrder(projects: ProjectIndex, order: readonly string[]): string[] {
  const named = Object.keys(projects).sort((a, b) =>
    projects[a].name.localeCompare(projects[b].name)
  );
  return [...new Set([...order, ...named, ""])].filter((id) => id === "" || id in projects);
}

/** Move a sidebar group to `index`, saving the new order. */
export async function moveGroup(
  projects: ProjectIndex,
  order: Signal<readonly string[]>,
  id: string,
  index: number,
) {
  const ids = sidebarOrder(projects, order.get()).filter((other) => other !== id);
  ids.splice(index, 0, id);
  await api("PUT", "/api/project-order", { ids });
  order.set(ids);
}

export function projectPicker(
  scope: Scope,
  projects: Signal<ProjectIndex>,
  choose: (workspace: Workspace | null) => void,
) {
  const select = <select aria-label="project" /> as HTMLSelectElement;
  const workspace = <select aria-label="workspace" /> as HTMLSelectElement;
  const workspaceField = (
    <label class="field" hidden>
      <span>workspace</span>
      {workspace}
    </label>
  ) as HTMLLabelElement;
  const element = (
    <div class="project-picker">
      <label class="field">
        <span>project</span>
        {select}
      </label>
      {workspaceField}
    </div>
  ) as HTMLElement;
  const draw = (reset = false) => {
    const previous = workspace.selectedOptions[0]?.dataset.key;
    const selected = select.value;
    const index = projects.get();
    select.replaceChildren(
      <option value="">no project</option>,
      ...Object.entries(index)
        .sort(([, a], [, b]) => a.name.localeCompare(b.name))
        .map(([id, project]) => <option value={id}>{project.name}</option>),
    );
    select.value = index[selected] ? selected : "";
    const project = index[select.value];
    const key = (root: Workspace) => `${root.environment}\n${root.cwd}`;
    workspace.replaceChildren(
      ...(project?.roots ?? []).map((root, i) => (
        <option value={String(i)} data-key={key(root)}>{workspaceLabel(root)}</option>
      )),
    );
    const previousIndex = reset
      ? -1
      : project?.roots.findIndex((root) => key(root) === previous) ?? -1;
    workspace.value = String(previousIndex >= 0 ? previousIndex : project?.defaultRoot ?? 0);
    workspaceField.hidden = !project || project.roots.length < 2;
    element.hidden = Object.keys(index).length === 0;
  };
  const pick = (id: string) => {
    select.value = id;
    draw(true);
    const project = projects.get()[select.value];
    choose(project?.roots[project.defaultRoot] ?? null);
  };
  select.addEventListener("change", () => pick(select.value));
  workspace.addEventListener("change", () => {
    const root = projects.get()[select.value]?.roots[Number(workspace.value)];
    if (root) choose(root);
  });
  scope.add(projects.subscribe(() => draw()).unsubscribe);
  draw();
  return {
    element,
    pick,
    /** Show the project, and its workspace, that a place chosen by hand is in, without choosing it again. */
    show(place: { environment: string; cwd: string }) {
      const id = projectFor(projects.get(), place) ?? "";
      if (select.value !== id) {
        select.value = id;
        draw(true);
      }
      const project = projects.get()[id];
      const root = project && workspaceFor(project, place);
      if (root) workspace.value = String(project.roots.indexOf(root));
    },
  };
}

export function projectEditor(
  scope: Scope,
  machines: Signal<readonly string[]>,
  projects: Signal<ProjectIndex>,
  order = new Signal<readonly string[]>([]),
) {
  const title = <h2 id="project-editor-title" /> as HTMLElement;
  const name = <input required maxLength={200} /> as HTMLInputElement;
  const roots = <div class="project-roots" /> as HTMLElement;
  const status = <p role="status" class="error" /> as HTMLElement;
  const remove = (
    <button type="button" class="link danger project-delete">
      delete project
    </button>
  ) as HTMLButtonElement;
  const move = <input type="checkbox" /> as HTMLInputElement;
  const moveField = (
    <label class="field" hidden>
      <span>{move} move conversations from removed workspaces to the default workspace</span>
    </label>
  ) as HTMLLabelElement;
  let original: Project | undefined;
  let id: string | undefined;
  let draft: ProjectInput = { name: "", roots: [], defaultRoot: 0 };
  let fields = new Scope();
  let pending = false;
  const updateRemoval = () => {
    moveField.hidden = !original?.roots.some((root) =>
      !draft.roots.some((saved) => saved.environment === root.environment && saved.cwd === root.cwd)
    );
  };
  const draw = () => {
    fields.dispose();
    fields = new Scope();
    roots.replaceChildren(...draft.roots.map((root, i) => {
      const environment = new Signal(root.environment);
      const folder = folderInput({ scope: fields, environment, projects, base: () => null });
      folder.input.value = root.cwd;
      folder.input.setAttribute("aria-label", `folder of workspace ${i + 1}`);
      folder.input.addEventListener("input", () => {
        root.cwd = folder.input.value;
        updateRemoval();
      });
      const machine = configurationField(
        "environment",
        { type: "string" },
        root.environment,
        (value) => {
          root.environment = String(value);
          root.cwd = folder.input.value = "";
          environment.set(root.environment);
          updateRemoval();
        },
        { scope: fields, choices: machines },
      ).input;
      machine.setAttribute("aria-label", `environment of workspace ${i + 1}`);
      return (
        <div class="project-root" role="group" aria-label={`workspace ${i + 1}`}>
          <input
            type="radio"
            name="default-workspace"
            title="default directory for new conversations"
            aria-label={`start new conversations in workspace ${i + 1}`}
            checked={draft.defaultRoot === i}
            _onchange={() => draft.defaultRoot = i}
          />
          {machine}
          {folder.element}
          <button
            type="button"
            class="link danger"
            title="remove workspace"
            aria-label={`remove workspace ${i + 1}`}
            disabled={draft.roots.length === 1}
            _onclick={() => {
              draft.roots.splice(i, 1);
              if (draft.defaultRoot === i) draft.defaultRoot = 0;
              else if (draft.defaultRoot > i) draft.defaultRoot--;
              draw();
            }}
          >
            ×
          </button>
        </div>
      );
    }));
    updateRemoval();
  };
  const close = () => {
    if (pending) return;
    dialog.close();
    fields.dispose();
  };
  const up = (
    <button type="button" class="link" aria-label="move up">
      ↑
    </button>
  ) as HTMLButtonElement;
  const down = (
    <button type="button" class="link" aria-label="move down">
      ↓
    </button>
  ) as HTMLButtonElement;
  // reordering saves at once, so it sits apart from the fields that wait for save
  const ordering = <div class="project-order">{up}{down}</div> as HTMLElement;
  const drawOrder = () => {
    const ids = sidebarOrder(projects.get(), order.get());
    ordering.hidden = id === undefined;
    up.disabled = ids[0] === id;
    down.disabled = ids.at(-1) === id;
  };
  for (const [button, delta] of [[up, -1], [down, 1]] as const) {
    button.addEventListener("click", async () => {
      if (pending || id === undefined) return;
      pending = true;
      status.textContent = "";
      try {
        const at = sidebarOrder(projects.get(), order.get()).indexOf(id);
        await moveGroup(projects.get(), order, id, at + delta);
      } catch (error) {
        status.textContent = (error as Error).message;
      } finally {
        pending = false;
        drawOrder();
      }
    });
  }
  const details = (
    <div class="project-details">
      <label class="field">
        <span>name</span>
        {name}
      </label>
      <div class="field">
        <span>workspaces</span>
        {roots}
        <button
          type="button"
          class="link"
          _onclick={() => {
            draft.roots.push({ environment: "local", cwd: "" });
            draw();
            roots.querySelector<HTMLInputElement>(".project-root:last-child [role=combobox]")
              ?.focus();
          }}
        >
          add workspace
        </button>
      </div>
      {moveField}
    </div>
  ) as HTMLElement;
  const dismiss = <button type="button" _onclick={close}>cancel</button> as HTMLButtonElement;
  const save = <button type="submit" class="primary">save</button> as HTMLButtonElement;
  const controls = (
    <fieldset class="project-controls">
      {details}
      {status}
      <div class="dialog-actions">
        {remove}
        {dismiss}
        {save}
      </div>
    </fieldset>
  ) as HTMLFieldSetElement;
  const dialog = (
    <dialog class="dialog project-dialog" aria-labelledby="project-editor-title">
      <form
        _onsubmit={async (event) => {
          event.preventDefault();
          if (pending) return;
          pending = true;
          controls.disabled = true;
          status.textContent = "";
          try {
            await api(id ? "PUT" : "POST", id ? `/api/projects/${id}` : "/api/projects", {
              ...draft,
              name: name.value,
              ...(!moveField.hidden && move.checked ? { moveConversations: true } : {}),
            });
            pending = false;
            close();
          } catch (error) {
            status.textContent = (error as Error).message;
          } finally {
            pending = false;
            controls.disabled = false;
          }
        }}
      >
        <header class="project-dialog-header">
          {title}
          {ordering}
        </header>
        {controls}
      </form>
    </dialog>
  ) as HTMLDialogElement;
  dialog.addEventListener("cancel", (event) => {
    if (pending) event.preventDefault();
  });
  dialog.addEventListener("close", () => fields.dispose());
  remove.addEventListener("click", async () => {
    if (
      !id || pending || !confirm("delete this project? conversations will move to 'no project'")
    ) {
      return;
    }
    pending = true;
    controls.disabled = true;
    try {
      await api("DELETE", `/api/projects/${id}`);
      pending = false;
      close();
    } catch (error) {
      status.textContent = (error as Error).message;
    } finally {
      pending = false;
      controls.disabled = false;
    }
  });
  scope.add(() => {
    fields.dispose();
    dialog.remove();
  });
  return {
    element: dialog,
    open(projectId?: string) {
      id = projectId;
      const project: Project | undefined = id ? projects.get()[id] : undefined;
      original = project;
      move.checked = false;
      title.textContent = id === "" ? "no project" : project ? "edit project" : "new project";
      details.hidden = save.hidden = id === "";
      dismiss.textContent = id === "" ? "done" : "cancel";
      name.value = project?.name ?? "";
      draft = {
        name: name.value,
        roots: project?.roots.map(({ environment, cwd }) => ({ environment, cwd })) ??
          [{ environment: "local", cwd: "" }],
        defaultRoot: project?.defaultRoot ?? 0,
      };
      status.textContent = "";
      remove.hidden = !project;
      draw();
      drawOrder();
      dialog.showModal();
      if (id !== "") name.focus();
    },
  };
}