"use client";

import { useState } from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import superjson from "superjson";
import type { AnyTRPCRouter } from "@trpc/server";
import { TRPCProvider } from "../client";
import { getQueryClient } from "../query-client";

function getBaseUrl() {
  if (typeof window !== "undefined") return "";
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

export function NextTrpcProvider({
  children,
  trpcUrl = "/api/trpc",
}: {
  children: React.ReactNode;
  trpcUrl?: string;
}) {
  const [queryClient] = useState(() => getQueryClient());
  const [trpcClient] = useState(() =>
    // Router-agnostic on purpose: procedure typing comes from useTRPC<TRouter>
    // at the call sites, not from the wire-level client.
    createTRPCClient<AnyTRPCRouter>({
      links: [
        httpBatchLink({
          url: `${getBaseUrl()}${trpcUrl}`,
          transformer: superjson,
        }),
      ],
    }),
  );

  return (
    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </TRPCProvider>
  );
}