import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { Suspense } from 'react';
import PageContainer from '@/components/layout/page-container';
import { MyDayWorkspace, MyDayWorkspaceSkeleton } from '@/features/crm/my-day/components/my-day-workspace';
import { myDayQueryOptions } from '@/features/crm/my-day/api/queries';
import { getQueryClient } from '@/lib/query-client';

export const metadata = {
  title: 'CRM: My Day'
};

export default function MyDayPage() {
  const queryClient = getQueryClient();
  const filters = { mode: 'personal' as const, range: 'today' as const };
  void queryClient.prefetchQuery(myDayQueryOptions(filters));

  return (
    <PageContainer
      pageTitle='My Day'
      pageDescription='Personal operational workspace for today, overdue work, approvals, hot projects, and recent updates.'
    >
      <HydrationBoundary state={dehydrate(queryClient)}>
        <Suspense fallback={<MyDayWorkspaceSkeleton />}>
          <MyDayWorkspace initialFilters={filters} />
        </Suspense>
      </HydrationBoundary>
    </PageContainer>
  );
}