AuthContext.tsx

import { createContext, ReactNode, useEffect, useState } from "react";

import { CreateToastFnReturn } from "@chakra-ui/react";
import { AnimatePresence, motion } from "framer-motion";
import { LoadingScreen } from "../components/common/LoadingScreen";

import { AxiosInstance } from "axios";
import {
  createUserWithEmailAndPassword,
  getRedirectResult,
  sendPasswordResetEmail,
  signInWithEmailAndPassword,
  signOut,
  User,
  UserCredential,
} from "firebase/auth";
import { NavigateFunction } from "react-router-dom";

import { auth } from "../utils/auth/firebase";
import { cookieKeys, setCookie } from "../utils/auth/cookie";
import { useBackendContext } from "./hooks/useBackendContext";

interface AuthContextProps {
  currentUser: User | null;
  signup: ({ email, password }: EmailPassword) => Promise<UserCredential>;
  login: ({ email, password }: EmailPassword) => Promise<UserCredential>;
  logout: () => Promise<void>;
  resetPassword: ({ email }: Pick<EmailPassword, "email">) => Promise<void>;
  handleRedirectResult: (
    backend: AxiosInstance,
    navigate: NavigateFunction,
    toast: CreateToastFnReturn
  ) => Promise<void>;
}

export const AuthContext = createContext<AuthContextProps | null>(null);

interface EmailPassword {
  email: string;
  password: string;
}

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const { backend } = useBackendContext();

  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  const signup = async ({ email, password }: EmailPassword) => {
    if (currentUser) {
      signOut(auth);
    }

    const userCredential = await createUserWithEmailAndPassword(
      auth,
      email,
      password
    );

    await backend.post("/users", {
      email: email,
      firebaseUid: userCredential.user.uid,
    });

    return userCredential;
  };

  const login = ({ email, password }: EmailPassword) => {
    if (currentUser) {
      signOut(auth);
    }

    return signInWithEmailAndPassword(auth, email, password);
  };

  const logout = () => {
    return signOut(auth);
  };

  const resetPassword = ({ email }: Pick<EmailPassword, "email">) => {
    return sendPasswordResetEmail(auth, email);
  };

  /**
   * Helper function which keeps our DB and our Firebase in sync.
   * If a user exists in Firebase, but does not exist in our DB, we create a new user.
   *
   * **If creating a DB user fails, we rollback by deleting the Firebase user.**
   */
  const handleRedirectResult = async (
    backend: AxiosInstance,
    navigate: NavigateFunction,
    toast: CreateToastFnReturn
  ) => {
    try {
      const result = await getRedirectResult(auth);
      
      
      if (!result?.user) return;

      const idToken = await result.user.getIdToken();
      setCookie({ key: cookieKeys.ACCESS_TOKEN, value: idToken });

      let response = await backend.get(`/users/firebase/${result.user.uid}`);

      if (response.data.length === 0) {
        try {
          response = await backend.post("/users", {
            email: result.user.email,
            firebaseUid: result.user.uid,
            firstName: result.user.displayName?.split(" ")[0] || "",
            lastName: result.user.displayName?.split(" ").slice(1).join(" ") || "",
            photoURL: result.user.photoURL ?? null,
          });

        } catch (e) {
          await backend.delete(`/users/firebase/${result.user.uid}`);
          const errorMessage = e instanceof Error ? e.message : "Unknown error";
          toast({
            title: "An error occurred",
            description: `Account was not created: ${errorMessage}`,
            status: "error",
          });
          return;
        }
      } else {
        // Sync photoURL in case the user updated their Google profile picture
        try {
          await backend.put(`/users/firebase/${result.user.uid}`, {
            photoURL: result.user.photoURL ?? null,
          });
        } catch (e) {
          console.error("Failed to sync photoURL:", e);
        }
 
      }

      const data = response.data;
      const user = Array.isArray(data) ? data[0] : data;

      if (!user) return;

      navigate(
        user.status === "pending" ? "/pending-approval" : "/quota-tracking",
        { replace: true }
      );
      
    } catch (error) {
      console.error("Redirect result error:", error);
    }
  };


  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider
      value={{
        currentUser,
        signup,
        login,
        logout,
        resetPassword,
        handleRedirectResult,
      }}
    >
      <AnimatePresence>{loading && <LoadingScreen key="loading" />}</AnimatePresence>
      {!loading && (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
          {children}
        </motion.div>
      )}
    </AuthContext.Provider>
  );
};