import { authClient } from "@/lib/auth-client";
{{#if (eq api "trpc")}}
import { useTRPC } from "@/utils/trpc";
{{/if}}
{{#if (eq api "orpc")}}
import { orpc } from "@/utils/orpc";
{{/if}}
import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { useEffect } from "react";

export const Route = createFileRoute("/dashboard")({
  component: RouteComponent,
});

function RouteComponent() {
  const navigate = Route.useNavigate();
  {{#if (eq api "trpc")}}
  const trpc = useTRPC();
  {{/if}}
  {{#if (eq api "orpc")}}
  {{/if}}
  const { data: session, isPending } = authClient.useSession();

  {{#if (eq api "trpc")}}
  const privateData = useQuery(trpc.privateData.queryOptions());
  {{/if}}
  {{#if (eq api "orpc")}}
  const privateData = useQuery(orpc.privateData.queryOptions());
  {{/if}}

  useEffect(() => {
    if (!session && !isPending) {
      navigate({
        to: "/login",
      });
    }
  }, [session, isPending]);

  if (isPending) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome {session?.user.name}</p>
      <p>privateData: {privateData.data?.message}</p>
    </div>
  );
}