import { useRouter } from "next/router";
import {
  createContext,
  useContext,
  useEffect,
  type FC,
  type ReactNode,
} from "react";
import type { Session } from "~/server/api/trpc";
import { api } from "~/utils/api";
type SessionStatus = "pending" | "success" | "error";
export type SessionContextType = {
  user: Session | null;
  status: SessionStatus;
};

const SessionContext = createContext<SessionContextType>({
  user: null,
  status: "pending",
});

export const SessionProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const router = useRouter();
  const utils = api.useUtils();

  const {
    data: user,
    status,
    isLoading,
  } = api.auth.getSession.useQuery(undefined, {
    refetchOnWindowFocus: true,
    refetchOnReconnect: true,
    refetchOnMount: true,
    staleTime: 0,
  });

  // Invalidate session on route change
  useEffect(() => {
    const handleRouteChange = () => {
      if (isLoading) return;
      utils.auth.getSession.invalidate().catch((error: Error) => {
        console.error("Error invalidating session on route change:", error);
      });
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router, utils]);

  // Invalidate session if user is null
  useEffect(() => {
    if (!user) {
      utils.auth.getSession.invalidate().catch((error: Error) => {
        console.error("Error during session invalidation:", error);
      });
    }
  }, [user]);

  return (
    <SessionContext.Provider value={{ user: user || null, status }}>
      {children}
    </SessionContext.Provider>
  );
};

export const useSession = () => useContext(SessionContext);
