"use client";
//imports

interface AuthContextProps {
  user: FirebaseUser | null;
  googleSignIn: () => Promise<void>;
  logOut: () => Promise<void>;
}

const AuthContext = createContext<AuthContextProps | undefined>(undefined);

interface AuthContextProviderProps {
  children: ReactNode;
}

export const AuthContextProvider = ({ children }: AuthContextProviderProps) => {
  const [user, setUser] = useState<FirebaseUser | null>(null);

  const googleSignIn = async () => {
    try {
      const provider = new GoogleAuthProvider();
      const result = await signInWithPopup(auth, provider);
      setUser(result.user);
    } catch (error) {
      console.error("Error signing in with Google:", error);
    }
  };

  const logOut = async () => {
    try {
      await signOut(auth);
      setUser(null);
    } catch (error) {
      console.error("Error signing out:", error);
    }
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      if (currentUser) {
        setUser(currentUser);

        const userExists = await getUser(currentUser.uid);
        if (!userExists) {
          await addUser(
            currentUser.uid,
            currentUser.email ?? "",
            currentUser.displayName ?? "",
            currentUser.photoURL ?? ""
          );
        }
      } else {
        setUser(null);
      }
    });

    return () => unsubscribe();
  }, []);

  return (
    <AuthContext.Provider value={{ user, googleSignIn, logOut }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthContextProvider");
  }
  return context;
};

"use client";
//imports

const AccountPage = () => {
  const { user } = useAuth();
  const [userData, setUserData] = useState<User | null>();

  console.log('userData', userData);
  useEffect(() => {
    const fetchData = async () => {
      try {
        if (!user) return;
        const userDataFromFunction = await getUser(user.uid);
        console.log("userDataFromFunction", userDataFromFunction);
        setUserData(userDataFromFunction);
      } catch (error) {
        console.error("Error fetching user data:", error);
      }
    };

    fetchData();
  }, []);


return 
//the reset of the component (uses the userData hook)

"use server"
//imports

const AccountPage = async () => {
  const { user } = useAuth();

const fetchData = async () => {
  try {
    if (!user) return;
    const userDataFromFunction = await getUser(user.uid);
    console.log("userDataFromFunction", userDataFromFunction);
    return userDataFromFunction;
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
};

const userData = await fetchData();

return 
//the reset of the component that uses the variable userData