mediahub-fe/hooks/use-facebook-login.ts

import { useEffect, useState, useCallback } from 'react';
import { 
  FacebookLoginResponse, 
  FacebookLoginError, 
  FacebookUser,
  FacebookSDKInitOptions 
} from '@/types/facebook-login';

export interface UseFacebookLoginOptions extends FacebookSDKInitOptions {}

export const useFacebookLogin = (options: UseFacebookLoginOptions) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState<FacebookUser | null>(null);

  const { appId, version = 'v18.0', cookie = true, xfbml = true, autoLogAppEvents = true } = options;

  // Initialize Facebook SDK
  useEffect(() => {
    if (typeof window === 'undefined') return;

    // Load Facebook SDK if not already loaded
    if (!window.FB) {
      const script = document.createElement('script');
      script.src = `https://connect.facebook.net/en_US/sdk.js`;
      script.async = true;
      script.defer = true;
      script.crossOrigin = 'anonymous';
      
      window.fbAsyncInit = () => {
        window.FB.init({
          appId,
          cookie,
          xfbml,
          version,
          autoLogAppEvents,
        });
        setIsLoaded(true);
        
        // Check login status
        window.FB.getLoginStatus((response: any) => {
          if (response.status === 'connected') {
            setIsLoggedIn(true);
            getUserInfo(response.authResponse.accessToken);
          }
        });
      };

      document.head.appendChild(script);
    } else {
      setIsLoaded(true);
    }

    return () => {
      // Cleanup if needed
    };
  }, [appId, cookie, xfbml, version, autoLogAppEvents]);

  const getUserInfo = useCallback((accessToken: string) => {
    window.FB.api('/me', { fields: 'name,email,picture' }, (response: FacebookUser) => {
      if (response && !response.error) {
        setUser(response);
      }
    });
  }, []);

  const login = useCallback((permissions: string[] = ['public_profile', 'email']) => {
    return new Promise<FacebookLoginResponse>((resolve, reject) => {
      if (!window.FB) {
        reject(new Error('Facebook SDK not loaded'));
        return;
      }

      window.FB.login((response: any) => {
        if (response.status === 'connected') {
          setIsLoggedIn(true);
          getUserInfo(response.authResponse.accessToken);
          resolve(response.authResponse);
        } else if (response.status === 'not_authorized') {
          reject({ error: 'not_authorized', errorDescription: 'User denied permissions' });
        } else {
          reject({ error: 'unknown', errorDescription: 'Login failed' });
        }
      }, { scope: permissions.join(',') });
    });
  }, [getUserInfo]);

  const logout = useCallback(() => {
    return new Promise<void>((resolve, reject) => {
      if (!window.FB) {
        reject(new Error('Facebook SDK not loaded'));
        return;
      }

      window.FB.logout((response: any) => {
        setIsLoggedIn(false);
        setUser(null);
        resolve();
      });
    });
  }, []);

  const getLoginStatus = useCallback(() => {
    return new Promise<any>((resolve, reject) => {
      if (!window.FB) {
        reject(new Error('Facebook SDK not loaded'));
        return;
      }

      window.FB.getLoginStatus((response: any) => {
        resolve(response);
      });
    });
  }, []);

  return {
    isLoaded,
    isLoggedIn,
    user,
    login,
    logout,
    getLoginStatus,
  };
};