import React, { createContext, useContext, useState, useEffect } from 'react';
import { 
  User,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  getAuth
} from 'firebase/auth';
import { auth } from '../config/firebase';

interface AuthContextType {
  currentUser: User | null;
  login: (email: string, password: string) => Promise<void>;
  loginWithGoogle: () => Promise<any>;
  register: (email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
  loading: boolean;
}

// Tipo extendido para el usuario de Firebase
interface ExtendedUser extends User {
  providerData: Array<{
    photoURL: string | null;
    displayName: string | null;
    email: string | null;
  }>;
}

const AuthContext = createContext<AuthContextType | null>(null);

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        try {
          const extendedUser = user as ExtendedUser;
          // Asegurarse de que tenemos todos los datos del usuario
          const updatedUser = {
            ...user,
            photoURL: user.photoURL || extendedUser.providerData[0]?.photoURL,
            displayName: user.displayName || extendedUser.providerData[0]?.displayName,
            email: user.email || extendedUser.providerData[0]?.email
          };
          setCurrentUser(updatedUser);
        } catch (error) {
          console.error('Error updating user:', error);
          setCurrentUser(null);
        }
      } else {
        setCurrentUser(null);
      }
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const register = async (email: string, password: string) => {
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      setCurrentUser(userCredential.user);
    } catch (error) {
      throw error;
    }
  };

  const login = async (email: string, password: string) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      setCurrentUser(userCredential.user);
    } catch (error) {
      throw error;
    }
  };

  const loginWithGoogle = async () => {
    try {
      const provider = new GoogleAuthProvider();
      provider.addScope('profile');
      provider.addScope('email');
      provider.setCustomParameters({
        prompt: 'select_account'
      });
      
      const result = await signInWithPopup(auth, provider);
      const user = result.user as ExtendedUser;
      
      // Debug logs
      console.log('Google Sign In Result:', {
        photoURL: user.photoURL,
        providerData: user.providerData,
        displayName: user.displayName,
        email: user.email
      });
      
      // Asegurarse de que tenemos la foto de perfil más actualizada
      const photoURL = user.photoURL || user.providerData[0]?.photoURL;
      console.log('Final photoURL:', photoURL);
      
      // Crear un nuevo objeto de usuario con todos los datos
      const updatedUser = {
        ...user,
        photoURL,
        displayName: user.displayName || user.providerData[0]?.displayName,
        email: user.email || user.providerData[0]?.email
      };
      
      // Actualizar el estado con el usuario completo
      setCurrentUser(updatedUser);
      
      return result;
    } catch (error) {
      console.error('Error signing in with Google:', error);
      throw error;
    }
  };

  const logout = async () => {
    try {
      await signOut(auth);
      setCurrentUser(null);
    } catch (error) {
      throw error;
    }
  };

  const value = {
    currentUser,
    login,
    loginWithGoogle,
    register,
    logout,
    loading
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
};