import { createFileRoute } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { StudentHome } from "@/components/student-home";
import { type AppRole } from "@/lib/identity";
import { useDeskRole } from "@/lib/role-store";
import { getShellMeta } from "@/lib/server/api-core";

export const Route = createFileRoute("/learn/courses")({
  validateSearch: (search: Record<string, unknown>): { as?: AppRole } =>
    search.as === "student" || search.as === "staff" ? { as: search.as } : {},
  loader: () => getShellMeta(),
  component: Page,
});

function Page() {
  const meta = Route.useLoaderData();
  const account = useDeskRole("student");
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Student"
        title="All courses"
        description="Classes you are enrolled in this season. The percent is how much of that course you have finished — it is not a grade. NIL means Name, Image & Likeness, not hockey. Enrolled athletes are auto-placed in CFL-101, Athletic Branding (CFL-102), and NIL Tax Implications (CFL-103)."
      />
      <StudentHome email={account.email} section="courses" />
    </AppShell>
  );
}