import RepositoryNav from "./components/RepositoryNav";
import StatusBar from "./components/StatusBar";

/**
 * The application shell: a title bar, a repository navigation sidebar, the
 * history pane, and a status bar. Everything below is still a placeholder —
 * the history pane is filled in once the graph streams from Rust.
 */
export default function App() {
  return (
    <div class="grid h-full grid-cols-[16rem_1fr] grid-rows-[auto_1fr_auto] bg-surface text-on-surface">
      <a
        href="#history"
        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
      </a>

      <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>
        <p class="text-body-sm text-on-surface-variant">No repository open</p>
        <button
          type="button"
          class="ml-auto rounded-large bg-primary px-4 py-2 text-label-lg text-on-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
        >
          Open repository…
        </button>
      </header>

      <RepositoryNav />

      {/* tabindex="-1" so the skip link actually moves focus here, not just scroll */}
      <main id="history" tabindex="-1" class="overflow-auto p-6">
        <h2 class="sr-only">History</h2>
        <p class="text-body-md text-on-surface-variant">Open a repository to see its history.</p>
      </main>

      <StatusBar />
    </div>
  );
}