import type { ReactNode } from "react";
import { Navigate, useParams } from "react-router";
import { homePath, isScreen, orderScreens, type Screen } from "../auth/roles";
import { useAuth } from "../auth/useAuth";
import { AdminPage } from "./admin/AdminPage";
import { ClericalHome } from "./clerical/ClericalHome";
import { PlaceholderScreen } from "./PlaceholderScreen";
import { StallHome } from "./stall/StallHome";
import { SupervisorHome } from "./supervisor/SupervisorHome";
import { WarehouseHome } from "./warehouse/WarehouseHome";

/** A page under a screen, like /clerical/projects/7. Users without the screen go to their first screen. */
export function RequireScreen({ screen, children }: { screen: Screen; children: ReactNode }) {
  const { me } = useAuth();
  if (!me) return null;
  if (!orderScreens(me.screens).includes(screen)) return <Navigate to={homePath(me.screens)} replace />;
  return <>{children}</>;
}

/** /:screen. An unknown screen, or one the user does not have, goes to the user's first screen. */
export function ScreenRoute() {
  const { screen } = useParams();
  const { me } = useAuth();
  if (!me) return null;
  const allowed = orderScreens(me.screens);
  if (!isScreen(screen) || !allowed.includes(screen)) return <Navigate to={homePath(me.screens)} replace />;
  if (screen === "admin") return <AdminPage />;
  if (screen === "clerical") return <ClericalHome />;
  if (screen === "warehouse") return <WarehouseHome />;
  if (screen === "supervisor") return <SupervisorHome />;
  if (screen === "stall") return <StallHome />;
  return <PlaceholderScreen key={screen} screen={screen} />;
}