import PageContainer from '@/components/layout/page-container';
import { EmployeeDirectoryHeader } from '@/features/employee-directory/components/employee-directory-header';
import EmployeeDirectoryListingPage from '@/features/employee-directory/components/employee-directory-listing';
import { requireHRDDashboardAccess } from '@/lib/auth/page-guards';
import { searchParamsCache } from '@/lib/searchparams';
import type { SearchParams } from 'nuqs/server';

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

type PageProps = {
  searchParams: Promise<SearchParams>;
};

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

  const searchParams = await props.searchParams;
  searchParamsCache.parse(searchParams);
  const search = searchParamsCache.get('search');
  const company = searchParamsCache.get('company');
  const department = searchParamsCache.get('department');
  const position = searchParamsCache.get('position');
  const status = searchParamsCache.get('status');
  const sort = searchParamsCache.get('sort');
  const filters = {
    page: searchParamsCache.get('page'),
    limit: searchParamsCache.get('perPage'),
    ...(search ? { search } : {}),
    ...(company ? { company } : {}),
    ...(department ? { department } : {}),
    ...(position ? { position } : {}),
    ...(status ? { status } : {}),
    ...(sort ? { sort } : {})
  };

  return (
    <PageContainer>
      <div className='flex min-w-0 flex-1 flex-col gap-4 md:gap-5'>
        <EmployeeDirectoryHeader />
        <EmployeeDirectoryListingPage filters={filters} />
      </div>
    </PageContainer>
  );
}