import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import PageContainer from '@/components/layout/page-container';
import { employeeDirectoryTargetQueryOptions } from '@/features/employee-directory/api/queries';
import { EmployeeTargetForm } from '@/features/employee-directory/components/employee-target-form';
import { requireHRDDashboardAccess } from '@/lib/auth/page-guards';
import { getQueryClient } from '@/lib/query-client';

export const metadata = {
  title: 'Dashboard: Employee Targets'
};

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

export default async function Page(props: PageProps) {
  await requireHRDDashboardAccess();
  const params = await props.params;
  const year = new Date().getUTCFullYear();
  const employeeId = Number(params.id);
  const queryClient = getQueryClient();

  await queryClient.fetchQuery(employeeDirectoryTargetQueryOptions(employeeId, year));

  return (
    <PageContainer
      pageTitle='กำหนดเป้าหมาย K / S / A'
      pageDescription='จัดการเป้าหมายชั่วโมงอบรมรายบุคคล'
    >
      <HydrationBoundary state={dehydrate(queryClient)}>
        <EmployeeTargetForm employeeId={employeeId} year={year} />
      </HydrationBoundary>
    </PageContainer>
  );
}
