import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { notFound } from 'next/navigation';
import PageContainer from '@/components/layout/page-container';
import { canReadAllContent } from '@/features/content-approval/lib/workflow';
import { onlineLessonByIdOptions } from '@/features/online-lessons/api/queries';
import OnlineLessonDetailPage from '@/features/online-lessons/components/online-lesson-detail-page';
import { requireEmployeeDashboardAccess } from '@/lib/auth/page-guards';
import { getQueryClient } from '@/lib/query-client';

export const metadata = {
  title: 'Dashboard : Online Lesson Detail'
};

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

export default async function Page(props: PageProps) {
  const access = await requireEmployeeDashboardAccess();
  const { id } = await props.params;
  const lessonId = Number(id);

  if (Number.isNaN(lessonId)) {
    notFound();
  }

  const queryClient = getQueryClient();
  await queryClient.fetchQuery(onlineLessonByIdOptions(lessonId));
  const permissions = access.session.user.effectivePermissions;

  return (
    <PageContainer>
      <HydrationBoundary state={dehydrate(queryClient)}>
        <OnlineLessonDetailPage
          lessonId={lessonId}
          currentUserId={access.session.user.id}
          permissions={permissions}
          canViewInternalReviewData={canReadAllContent('online_lesson', permissions)}
        />
      </HydrationBoundary>
    </PageContainer>
  );
}
