import { Show, createSignal, onSettled } from "solid-js";

import History from "./components/History";
import OpenRepository from "./components/OpenRepository";
import RepositoryNav from "./components/RepositoryNav";
import StatusBar from "./components/StatusBar";
import Welcome from "./components/Welcome";
import { openRepository } from "./lib/api";
import { isGigitError, type OpenedRepository } from "./lib/bindings";
import { createGraphView } from "./lib/graph";
import { createRecents } from "./lib/recents";

/** What to call a repository: its working tree's folder, or the git directory. */
function nameOf(repository: OpenedRepository): string {
  const path = repository.summary.workdir ?? repository.summary.gitDir;

  return path.replace(/\/+$/u, "").split("/").pop() ?? path;
}

/** How the current HEAD reads in the title bar. */
function headOf(repository: OpenedRepository): string {
  const head = repository.summary.head;

  switch (head.state) {
    case "branch":
      return head.shorthand;
    case "detached":
      return `detached at ${head.id.slice(0, 7)}`;
    case "unborn":
      return `${head.shorthand} (no commits yet)`;
  }
}

export default function App() {
  const [repository, setRepository] = createSignal<OpenedRepository | undefined>();
  const [opening, setOpening] = createSignal(false);
  const [error, setError] = createSignal<string | undefined>();
  const graph = createGraphView();
  const recents = createRecents();

  onSettled(() => void recents.refresh());

  async function open(path: string) {
    setOpening(true);
    setError(undefined);

    try {
      const opened = await openRepository(path);
      setRepository(opened);
      // Opening promotes the repository to the front of the list, so the
      // welcome pane is right when it is next seen.
      void recents.refresh();
      await graph.show(opened.id);
    } catch (failure) {
      setRepository(undefined);
      setError(isGigitError(failure) ? failure.message : String(failure));
    } finally {
      setOpening(false);
    }
  }

  return (
    <div class="grid h-full grid-cols-[16rem_1fr] grid-rows-[auto_1fr_auto] bg-surface text-on-surface">
      {/* A button rather than a link to `#history`, which is the conventional
          shape for this. WebKit leaves links out of the tab order unless the
          system's keyboard navigation setting is turned on, and it is off by
          default — so on macOS, where the app runs in WKWebView, a skip link
          is a skip link nobody can reach. A button is tabbable in every engine.
          Verified in tests/e2e/accessibility.spec.ts against both. */}
      <button
        type="button"
        onClick={() => document.querySelector<HTMLElement>("#history")?.focus()}
        class="sr-only rounded-large bg-primary px-4 py-2 text-label-lg text-on-primary focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-10"
      >
        Skip to history
      </button>

      <header class="col-span-2 flex items-center gap-3 border-b border-outline-variant bg-surface-container px-4 py-2">
        <h1 class="text-title-md">gigit</h1>
        <Show
          when={repository()}
          fallback={<p class="text-body-sm text-on-surface-variant">No repository open</p>}
        >
          {(current) => (
            <p class="text-body-sm text-on-surface-variant">
              {nameOf(current())} · {headOf(current())}
            </p>
          )}
        </Show>

        <OpenRepository busy={opening()} onOpen={open} class="ml-auto" />
      </header>

      <RepositoryNav />

      {/* tabindex="-1" so the skip button actually moves focus here */}
      <main id="history" tabindex="-1" class="min-h-0 overflow-hidden">
        <Show
          when={repository()}
          fallback={<Welcome recents={recents} busy={opening()} onOpen={open} />}
        >
          <h2 class="sr-only">History</h2>
          <History graph={graph} />
        </Show>
      </main>

      <StatusBar
        message={error() ?? graph.message() ?? recents.message()}
        isError={error() !== undefined}
      />
    </div>
  );
}