import React, { useEffect, useState } from 'react';
import { Pressable, StyleSheet, ActivityIndicator, Alert } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { GoogleSignin, GoogleSigninButton, statusCodes, User } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';

export default function GoogleSignInSection() {
  const [loading, setLoading] = useState(false);
  const [firebaseUser, setFirebaseUser] = useState<User | null>();

  useEffect(() => {
    GoogleSignin.configure({ webClientId: 'YOUR_WEB_CLIENT_ID' });

    const checkSignInStatus = async () => {
      try {
        const userInfo = await GoogleSignin.signInSilently();
        if (userInfo) setFirebaseUser(userInfo.data);
      } catch (error) {
        console.error('Google Sign-In check failed', error);
      }
    };
    checkSignInStatus();
  }, []);

  const signIn = async () => {
    try {
      setLoading(true);
      const userInfo = await GoogleSignin.signIn();
      setFirebaseUser(userInfo.data);
    } catch (error:any) {
      if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        Alert.alert('Error', 'Google Play Services unavailable.');
      } else {
        Alert.alert('Error', 'Something went wrong.');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      {firebaseUser ? (
        <Pressable onPress={() => GoogleSignin.signOut()} style={styles.button}>
          <ThemedText style={styles.text}>Logout</ThemedText>
        </Pressable>
      ) : (
        <GoogleSigninButton onPress={signIn} style={styles.googleButton} />
      )}
    </>
  );
}

const styles = StyleSheet.create({
  button: { backgroundColor: '#007bff', padding: 12, borderRadius: 8 },
  text: { color: '#fff', textAlign: 'center' },
  googleButton: { width: '100%', height: 48 },
});