import "./styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import {
  createRootRoute,
  createRoute,
  createRouter,
  Outlet,
  RouterProvider,
  Link,
} from "@tanstack/react-router";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { NoteListPage } from "./pages/NoteListPage";
import { NoteDetailPage } from "./pages/NoteDetailPage";
import { FilesPage } from "./pages/FilesPage";

const queryClient = new QueryClient();

const rootRoute = createRootRoute({
  component: () => (
    <div className="shell">
      <header className="topbar">
        <Link to="/" className="brand">
          🗒️ SupaNotes
        </Link>
        <nav className="nav">
          <Link to="/" activeProps={{ className: "active" }}>
            Catatan
          </Link>
          <Link to="/files" activeProps={{ className: "active" }}>
            File
          </Link>
        </nav>
        <span className="tag">TanStack ⚛ · Cloudflare Worker · Supabase Storage = DB</span>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  ),
});

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/",
  component: NoteListPage,
});

const noteRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/notes/$id",
  component: NoteDetailPage,
});

const filesRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/files",
  component: FilesPage,
});

const routeTree = rootRoute.addChildren([indexRoute, noteRoute, filesRoute]);

export const router = createRouter({ routeTree });

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
);