import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import PageContainer from '@/components/layout/page-container';
import TrainingRecordReviewPage from '@/features/training-records/components/training-record-review-page';
import {
  certificatesQueryOptions,
  trainingRecordByIdOptions
} from '@/features/training-records/api/queries';
import { requireHRDDashboardAccess } from '@/lib/auth/page-guards';
import { getQueryClient } from '@/lib/query-client';

export const metadata = {
  title: 'Dashboard: ตรวจสอบรายการอบรม'
};

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

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

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

  await Promise.all([
    queryClient.fetchQuery(trainingRecordByIdOptions(trainingRecordId)),
    queryClient.fetchQuery(certificatesQueryOptions(trainingRecordId))
  ]);

  return (
    <PageContainer
      pageTitle='ตรวจสอบรายการอบรม'
      pageDescription='อนุมัติหรือไม่อนุมัติรายการอบรมที่พนักงานส่งเข้ามา'
    >
      <HydrationBoundary state={dehydrate(queryClient)}>
        <TrainingRecordReviewPage trainingRecordId={trainingRecordId} />
      </HydrationBoundary>
    </PageContainer>
  );
}
