import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { getQueryClient } from '@/lib/query-client';
import { searchParamsCache } from '@/lib/searchparams';
import { notificationsQueryOptions } from '../api/queries';
import NotificationsPage from './notifications-page';

export default async function NotificationsListingPage() {
  const page = searchParamsCache.get('page');
  const perPage = searchParamsCache.get('perPage');
  const search = searchParamsCache.get('search');
  const status = searchParamsCache.get('status');
  const type = searchParamsCache.get('type');

  const filters = {
    page,
    limit: perPage,
    ...(search && { search }),
    ...(status && { status: status as 'all' | 'unread' | 'read' }),
    ...(type && { type: type as Parameters<typeof notificationsQueryOptions>[0]['type'] })
  };

  const queryClient = getQueryClient();
  await queryClient.fetchQuery(notificationsQueryOptions(filters));

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <NotificationsPage />
    </HydrationBoundary>
  );
}
