import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { Suspense } from 'react';
import PageContainer from '@/components/layout/page-container';
import {
  CalendarWorkspace,
  CalendarWorkspaceSkeleton
} from '@/features/crm/calendar/components/calendar-workspace';
import { calendarItemsQueryOptions } from '@/features/crm/calendar/api/queries';
import { getQueryClient } from '@/lib/query-client';

function defaultCalendarRange() {
  const now = new Date();
  const start = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1, 0, 0, 0));
  const end = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 0, 23, 59, 59));
  return {
    startFrom: start.toISOString(),
    startTo: end.toISOString(),
    lens: 'personal' as const,
    limit: 300
  };
}

export default function CrmCalendarPage() {
  const queryClient = getQueryClient();
  const filters = defaultCalendarRange();
  void queryClient.prefetchQuery(calendarItemsQueryOptions(filters));

  return (
    <PageContainer
      pageTitle='Calendar'
      pageDescription='Operational schedule workspace for activities and governed CRM milestones.'
    >
      <HydrationBoundary state={dehydrate(queryClient)}>
        <Suspense fallback={<CalendarWorkspaceSkeleton />}>
          <CalendarWorkspace filters={filters} />
        </Suspense>
      </HydrationBoundary>
    </PageContainer>
  );
}