import { createRoot } from "react-dom/client";
import { lazy, Suspense } from "react";
import { createBrowserRouter, Link, Outlet, RouterProvider, type RouteObject } from "react-router-dom";
import { AppShell } from "@stc/ui";
import { webFeatures } from "./features";

function Home() {
  return <p className="work">No features installed yet</p>;
}

function Layout() {
  const nav = webFeatures.flatMap((f) => f.routes.filter((r) => r.nav?.area === "header"));
  const header = (
    <>
      <Link to="/" style={{ fontWeight: 600, color: "var(--head)", textDecoration: "none" }}>STCourses</Link>
      <nav style={{ display: "flex", gap: 14 }}>
        {nav.map((r) => <Link key={r.path} to={r.path}>{r.nav!.label}</Link>)}
      </nav>
    </>
  );
  return (
    <AppShell header={header}>
      <Suspense fallback={null}><Outlet /></Suspense>
    </AppShell>
  );
}

const featureRoutes: RouteObject[] = webFeatures.flatMap((f) =>
  f.routes.map((r) => {
    const Element = lazy(r.element);
    return { path: r.path, element: <Element /> };
  }),
);

const router = createBrowserRouter([
  { element: <Layout />, children: [...featureRoutes, ...(featureRoutes.some((r) => r.path === "/") ? [] : [{ path: "*", element: <Home /> }])] },
]);

createRoot(document.getElementById("root")!).render(<RouterProvider router={router} />);