import { useAppDispatch, useAppSelector } from "@/app/hooks";
import { useEffect, useRef } from "react";
import { push } from "redux-first-history";
import { setAppLoading } from "@/app/loadingSlice";

export function HandleLogin() {
  const userData = useAppSelector((state) => state.user);
  const calendars = useAppSelector((state) => state.calendars);
  const dispatch = useAppDispatch();
  const hasNavigatedRef = useRef(false);

  // Navigate to /calendar only when all data is ready
  useEffect(() => {
    if (hasNavigatedRef.current) return;
    if (userData.loading || calendars.pending) return;
    if (userData.error || calendars.error) {
      dispatch(setAppLoading(false));
      dispatch(push("/error"));
      return;
    }
    if (!userData.userData || !userData.tokens) return;
    // Calendars list can be empty, that's valid - just need to finish loading

    // All data is ready, navigate to calendar
    hasNavigatedRef.current = true;
    dispatch(setAppLoading(false));
    dispatch(push("/calendar"));
  }, [
    userData.loading,
    userData.userData,
    userData.tokens,
    userData.error,
    calendars.pending,
    calendars.error,
    dispatch,
  ]);

  return null;
}

export default HandleLogin;