import { requireUser } from "@/lib/auth/requireUser";
import CourseCatalogIntro from "@/components/courses/CourseCatalogIntro";
import CourseLevelTabs from "@/components/courses/CourseLevelTabs";
import ProgramSection from "@/components/courses/ProgramSection";
import { getCourseCatalogViewModel } from "@/lib/courses/publicCourses";

export const dynamic = "force-dynamic";

export default async function CoursesPage() {
  const user = await requireUser().catch(() => null);
  const catalog = await getCourseCatalogViewModel(user?.id ?? null);

  return (
    <div className="acve-page">
      <CourseCatalogIntro
        instructorCount={catalog.totals.instructorCount}
        totalCourses={catalog.totals.totalCourses}
        totalLessons={catalog.totals.totalLessons}
      />

      <CourseLevelTabs
        items={catalog.sections.map((section) => ({
          id: section.id,
          label: section.tabLabel,
          anchorId: section.anchorId,
          count: section.courses.length,
        }))}
      />

      {catalog.sections.map((section) => (
        <ProgramSection key={section.id} section={section} />
      ))}
    </div>
  );
}