import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { getQueryClient } from '@/lib/query-client';
import { courseByIdOptions } from '@/features/courses/api/queries';
import PageContainer from '@/components/layout/page-container';
import CourseViewPage from '@/features/courses/components/course-view-page';
import { requireHRDDashboardAccess } from '@/lib/auth/page-guards';

export const metadata = {
  title: 'Dashboard : Course View'
};

type PageProps = { params: Promise<{ courseId: string }> };

export default async function Page(props: PageProps) {
  await requireHRDDashboardAccess();

  const params = await props.params;
  const queryClient = getQueryClient();

  if (params.courseId !== 'new') {
    await queryClient.fetchQuery(courseByIdOptions(Number(params.courseId)));
  }

  return (
    <PageContainer>
      <div className='flex-1 space-y-4'>
        <HydrationBoundary state={dehydrate(queryClient)}>
          <CourseViewPage courseId={params.courseId} />
        </HydrationBoundary>
      </div>
    </PageContainer>
  );
}
