import { serverHelpers } from "../_trpc/serverHelper";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import WrapperContent from "@/components/WrapperContent";
import { lazy, Suspense } from "react";
import ErrorBoundary from "@/components/ErrorBoundary";
import { ProjectResumeSkeleton } from "./_components/ProjectResumeSkeleton";
import ChartSkeleton from "./_components/ChartSkeleton";
import FilterByTime from "./_components/FilterByTime";
export const dynamic = "force-dynamic";
const RecentModifiedTasks = lazy(
  () => import("./_components/RecentModifiedTasks")
);
const ProjectEarningsChart = lazy(
  () => import("@/components/dashboard/ProjectEarningsChart")
);
const UserTaksChart = lazy(
  () => import("@/components/dashboard/UserTaksChart")
);
const RecentCompleatedProjects = lazy(
  () => import("./_components/RecentCompleatedProjects")
);
const ProjectsResume = lazy(() => import("./_components/ProjectsResume"));
const RecentWorkingProjects = lazy(
  () => import("./_components/RecentWorkingProjects")
);

export default async function Home({
  searchParams,
}: {
  searchParams: Record<string, any>;
}) {
  serverHelpers.users.getUserRecentCompleatedTasks.prefetch(searchParams);
  serverHelpers.projects.getProjectEarningsYear.prefetch(searchParams);
  serverHelpers.projects.getProjectsSummary.prefetch(searchParams);
  serverHelpers.projects.getProjects.prefetch({
    limit: 3,
    status: "en proceso",
  });
  serverHelpers.tasks.getRecentModifiedTasks.prefetch();

  const dehydratedState = dehydrate(serverHelpers.queryClient);

  return (
    <HydrationBoundary state={dehydratedState}>
      <WrapperContent>
        <section className="flex flex-col gap-2 pb-3 min-h-[90svh]">
          <div className="self-end">
            <FilterByTime />
          </div>
          <div className="">
            <ErrorBoundary>
              <Suspense
                key={searchParams?.range}
                fallback={<ProjectResumeSkeleton />}
              >
                <ProjectsResume searchParams={searchParams} />
              </Suspense>
            </ErrorBoundary>
          </div>
          <div className="flex-grow flex flex-grow-2 flex-col md:flex-row justify-around flex-wrap gap-1 md:gap-3">
            <div className="flex-1">
              <ErrorBoundary>
                <Suspense
                  key={searchParams?.range}
                  fallback={<ChartSkeleton />}
                >
                  <UserTaksChart searchParams={searchParams} />
                </Suspense>
              </ErrorBoundary>
            </div>
            <div className="flex-">
              <ErrorBoundary>
                <Suspense
                  key={searchParams?.range}
                  fallback={<ChartSkeleton />}
                >
                  <ProjectEarningsChart searchParams={searchParams} />
                </Suspense>
              </ErrorBoundary>
            </div>
            <div className="flex-1">
              <ErrorBoundary>
                <Suspense
                  key={searchParams?.range}
                  fallback={<ChartSkeleton />}
                >
                  <RecentCompleatedProjects searchParams={searchParams} />
                </Suspense>
              </ErrorBoundary>
            </div>
          </div>
          <div className=" flex-grow flex flex-col-reverse md:flex-row md:flex-wrap-reverse gap-3">
            <div className="flex-1 ">
              <ErrorBoundary>
                <Suspense fallback={<ChartSkeleton />}>
                  <RecentModifiedTasks  />
                </Suspense>
              </ErrorBoundary>
            </div>
            <div className="sm:flex-1 md:flex-grow-0 min-w-[250px] ">
              <ErrorBoundary>
                <Suspense fallback={<ChartSkeleton />}>
                  <RecentWorkingProjects />
                </Suspense>
              </ErrorBoundary>
            </div>
          </div>
        </section>
      </WrapperContent>
    </HydrationBoundary>
  );
}