import React from "react";
import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
import { getTranslations } from "next-intl/server";
import { JobList } from "@/components/dashboard/job/job-list";
import { DashboardLayout, DashboardBreadcrump } from "@/components/layout/dashboard";
import { createHelpers } from "@/lib/trpc/server";
import { nuqsTransformServerSchema } from "@/lib/utils/nuqs-transform-server-schema";
import { JobListQuerySchema } from "@/server/modules/job/validators/job.validators";
import { Routes } from "@/config/routes";

type Props = {
    searchParams: Promise<Record<string, string | string[] | undefined>>;
};

export default async function Page({ searchParams }: Props) {
    const t = await getTranslations("dashboard.job.list");
    const search = nuqsTransformServerSchema(JobListQuerySchema).parse(await searchParams);
    const helpers = await createHelpers();

    await Promise.all([
        helpers.job.count.prefetch({
            access: "dashboard",
            status: search.status || undefined
        }),
        helpers.job.list.prefetch({
            access: "dashboard",
            status: search.status || undefined,
            offset: search.page * search.perPage,
            limit: search.perPage,
            orderBy: search.orderBy,
            orderDir: search.orderDir
        })
    ]);

    return (
        <HydrationBoundary state={dehydrate(helpers.queryClient)}>
            <DashboardLayout title={t("title")} description={t("description")}>
                <DashboardBreadcrump>
                    <DashboardBreadcrump.Item href={Routes.DASHBOARD.JOB_LIST}>
                        {t("title")}
                    </DashboardBreadcrump.Item>
                </DashboardBreadcrump>

                <JobList />
            </DashboardLayout>
        </HydrationBoundary>
    );
}