import React from "react";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { createHelpers } from "@/lib/trpc/server";
import { DashboardLayout } from "@/components/layout/dashboard";
import { TagList } from "@/components/dashboard/tag/tag-list";
import { nuqsTransformServerSchema } from "@/lib/utils/nuqs-transform-server-schema";
import { TagListQueryValidator } from "@/server/modules/tag/validators/tag-list-query.validator";

interface PageProps {
    searchParams: Promise<Record<string, string | string[] | undefined>>;
}

export default async function TagsPage({ searchParams }: PageProps) {
    const params = nuqsTransformServerSchema(TagListQueryValidator).parse(await searchParams);
    const helpers = await createHelpers();

    await Promise.all([
        helpers.tags.list.prefetch({
            with: ["usage"],
            search: params.search || undefined,
            offset: params.perPage * params.page,
            limit: params.perPage,
            orderBy: params.orderBy,
            orderDir: params.orderDir
        }),
        helpers.tags.count.prefetch({
            search: params.search || undefined
        })
    ]);

    return (
        <HydrationBoundary state={dehydrate(helpers.queryClient)}>
            <DashboardLayout title="Tags">
                <TagList />
            </DashboardLayout>
        </HydrationBoundary>
    );
}