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

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

function Page() {
  const meta = Route.useLoaderData();
  const account = useDeskRole("instructor");
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Instructor"
        title="Courses you teach"
        description="Edit the work students see. You can also drop a special assignment from the coach desk. Super Admin can edit any of these too."
      />
      <InstructorHome email={account.email} section="courses" />
    </AppShell>
  );
}