import React, { useEffect } from 'react';
import { Text, View } from 'react-native';
import { useRouter } from 'expo-router';
import * as WebBrowser from 'expo-web-browser';
import { Platform } from 'react-native';

/**
 * This component handles authentication callbacks on web platforms.
 * It's designed to process the authentication response and close the browser window
 * after a successful authentication flow.
 */
export default function WebAuthCallback() {
  const router = useRouter();

  useEffect(() => {
    // Handle the auth callback
    const handleCallback = async () => {
      try {
        // Close the auth session and return to the app
        if (Platform.OS === 'web') {
          WebBrowser.maybeCompleteAuthSession();
        }
        
        // Navigate back to the main app after a short delay
        setTimeout(() => {
          router.replace('/');
        }, 1000);
      } catch (error) {
        console.error('Error handling auth callback:', error);
      }
    };

    handleCallback();
  }, [router]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Authentication complete. Redirecting...</Text>
    </View>
  );
}