import React, { useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { router } from 'expo-router';
import { Text } from '~/components/ui/text';
import { ROUTES } from '~/lib/routes';

/**
 * Firebase Auth callback handler
 * This route catches the deep link callback from Firebase Phone Auth reCAPTCHA
 * and redirects back to the appropriate screen
 */
export default function FirebaseAuthLink() {
    useEffect(() => {
        // Firebase handles the auth callback internally
        // We redirect to signin - the auth state listener will handle navigation
        // if the user becomes authenticated
        const timer = setTimeout(() => {
            // Use replace to avoid navigation stack issues
            router.replace(ROUTES.SIGNIN);
        }, 100);

        return () => clearTimeout(timer);
    }, []);

    return (
        <View className="flex-1 items-center justify-center bg-background">
            <ActivityIndicator size="large" color="#F7931A" />
            <Text className="mt-4 text-gray-600">Verifying...</Text>
        </View>
    );
}