@onairos/react-native 3.4.1 → 3.5.4

package/src/components/UniversalOnboarding.tsx

@@ -1,1839 +0,0 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  Dimensions,
-  Platform,
-  Modal,
-  Animated,
-  SafeAreaView,
-  TouchableWithoutFeedback,
-  ScrollView,
-  Image,
-  Switch,
-  Linking,
-  Alert,
-  TextInput,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { PlatformList } from './PlatformList';
-import { PinInput } from './PinInput';
-import { TrainingModal } from './TrainingModal';
-import { DataRequestScreen } from './DataRequestScreen';
-import { OAuthWebView } from './onboarding/OAuthWebView';
-import { useConnections } from '../hooks/useConnections';
-import { COLORS, DEEP_LINK_CONFIG } from '../constants';
-import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback, testApiConnectivity, handleOAuthCallbackUrl, refreshYouTubeTokens, requestEmailVerification, verifyEmailCode, checkEmailVerificationStatus, disconnectPlatform } from '../services/platformAuthService';
-import type { UniversalOnboardingProps, ConnectionStatus, TestModeOptions } from '../types';
-
-// Optional Opacity SDK imports with error handling
-let opacityInit: any = null;
-let OpacityEnvironment: any = null;
-let opacityGet: any = null;
-
-try {
-  const opacitySDK = require('@opacity-labs/react-native-opacity');
-  opacityInit = opacitySDK.init;
-  OpacityEnvironment = opacitySDK.OpacityEnvironment;
-  opacityGet = opacitySDK.get;
-} catch (error) {
-  console.warn('Opacity SDK not available:', error);
-  // Opacity SDK will be disabled if not available
-}
-
-const { height, width } = Dimensions.get('window');
-
-export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
-  visible,
-  onClose,
-  AppName,
-  appIcon,
-  requestData,
-  returnLink,
-  onComplete,
-  embedd = false,
-  debug = false,
-  testMode = false,
-  preferredPlatform,
-  inferenceData,
-  auto = false,
-  partner,
-}) => {
-  const [step, setStep] = useState<'email' | 'verify' | 'dataRequest' | 'connect' | 'pin' | 'training' | 'oauth' | 'success'>('email');
-  const [connections, setConnections] = useState<ConnectionStatus>({});
-  const [pin, setPin] = useState<string>('');
-  const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
-  const [training, setTraining] = useState<{
-    progress: number;
-    eta: string;
-  }>({ progress: 0, eta: '' });
-  const [slideAnim] = useState(new Animated.Value(height));
-  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
-  const [oauthUrl, setOauthUrl] = useState<string>('');
-  const [currentPlatform, setCurrentPlatform] = useState<string>('');
-  const [username, setUsername] = useState<string>('Avatar');
-  const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
-  const [showLoginWebView, setShowLoginWebView] = useState<boolean>(false);
-  const [email, setEmail] = useState<string>('');
-  const [verificationCode, setVerificationCode] = useState<string>('');
-  const [isVerifyingCode, setIsVerifyingCode] = useState<boolean>(false);
-
-  const [isExistingUser, setIsExistingUser] = useState<boolean>(false);
-  
-  // Add refs for cleanup and code inputs
-  const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const isMountedRef = useRef<boolean>(true);
-  const codeInputRefs = useRef<Array<TextInput | null>>([]);
-
-  // Add state for showing additional platforms
-  const [showAllPlatforms, setShowAllPlatforms] = useState<boolean>(false);
-
-
-  // Parse test mode options
-  const testModeOptions = typeof testMode === 'object' ? testMode : {} as any;
-  const isTestMode = testMode === true || (typeof testMode === 'object' && testMode !== null);
-  const showTestControls = (debug || isTestMode) && requestData;
-  
-  // Simple 2-flow system
-  const isExistingUserFlow = testModeOptions.existingUser || false;
-  const isNewUserFlow = testModeOptions.newUser || false;
-
-  const platforms = [
-    { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
-    { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
-    { id: 'email', name: 'Gmail', icon: require('../assets/images/email.png') },
-    { id: 'reddit', name: 'Reddit', icon: require('../assets/images/reddit.png') },
-    { id: 'pinterest', name: 'Pinterest', icon: require('../assets/images/pinterest.png') },
-  ];
-
-  // Handle preferredPlatform to show ONLY preferred platforms (up to 2)
-  const getDisplayPlatforms = () => {
-    if (!preferredPlatform) {
-      // Default behavior: show first 3 platforms initially
-      return showAllPlatforms ? platforms : platforms.slice(0, 3);
-    }
-    
-    const preferredArray = Array.isArray(preferredPlatform) ? preferredPlatform : [preferredPlatform];
-    const maxPreferred = Math.min(preferredArray.length, 2); // Limit to 2 preferred platforms max
-    
-    // Show ONLY the preferred platforms (in specified order)
-    return preferredArray.slice(0, maxPreferred)
-      .map(id => platforms.find(p => p.id === id))
-      .filter(Boolean) as typeof platforms;
-  };
-
-  const platformsToDisplay = getDisplayPlatforms();
-  
-  // Calculate additional platforms for "Show More" button
-  const additionalPlatforms = preferredPlatform ? [] : platforms.slice(3);
-
-  const {
-    connectPlatform,
-    disconnectPlatform,
-    getConnectionStatus,
-    isConnecting,
-  } = useConnections();
-
-  useEffect(() => {
-    // Set mounted flag
-    isMountedRef.current = true;
-    
-    if (visible) {
-      loadInitialStatus();
-      // Animate in
-      Animated.spring(slideAnim, {
-        toValue: 0,
-        useNativeDriver: true,
-        bounciness: 0,
-      }).start();
-      
-      // Set up deep link listener for OAuth callbacks
-      // Using the subscription pattern for React Native's Linking API
-      const subscription = Linking.addListener('url', ({ url }) => {
-        if (isOAuthCallback(url)) {
-          handleOAuthCallback(url);
-        }
-      });
-      
-      // Check for initial URL (app was opened via deep link)
-      Linking.getInitialURL().then(initialUrl => {
-        if (initialUrl && isOAuthCallback(initialUrl)) {
-          handleOAuthCallback(initialUrl);
-        }
-      });
-      
-      // Initialize platform toggles
-      const initialToggles: { [key: string]: boolean } = {};
-      platforms.forEach((platform) => {
-        initialToggles[platform.id] = false;
-      });
-      setPlatformToggles(initialToggles);
-      
-      // Debug mode for Expo Go
-      if (debug || Platform.OS === 'web') {
-        console.log('Debug mode enabled - Using mock data for onboarding');
-        console.log('Configuration:', {
-          auto,
-          partner,
-          hasInferenceData: !!inferenceData,
-          inferenceDataType: typeof inferenceData,
-        });
-        
-        // Pre-populate with mock connections in debug mode
-        if (testMode || Platform.OS === 'web') {
-          setConnections({
-            instagram: { userName: 'instagram_user', connected: true },
-            youtube: { userName: 'youtube_user', connected: true },
-          });
-        }
-      }
-      
-      // If there's a preferred platform, pre-connect
-      if (preferredPlatform && debug) {
-        const preferredArray = Array.isArray(preferredPlatform) ? preferredPlatform : [preferredPlatform];
-        const newConnections: any = {};
-        preferredArray.slice(0, 2).forEach(platform => {
-          newConnections[platform] = { userName: `${platform}_user`, connected: true };
-        });
-        setConnections(prev => ({
-          ...prev,
-          ...newConnections
-        }));
-      }
-      
-      // Return cleanup function
-      return () => {
-        // Remove event listener using the subscription
-        subscription.remove();
-      };
-    } else {
-      // Animate out
-      Animated.timing(slideAnim, {
-        toValue: height,
-        duration: 250,
-        useNativeDriver: true,
-      }).start(() => {
-        // Reset state if needed
-      });
-    }
-  }, [visible, preferredPlatform]);
-
-  // Cleanup effect for unmounting
-  useEffect(() => {
-    return () => {
-      // Set mounted flag to false
-      isMountedRef.current = false;
-      
-      // Clear any pending timeouts
-      if (successTimeoutRef.current) {
-        clearTimeout(successTimeoutRef.current);
-        successTimeoutRef.current = null;
-      }
-    };
-  }, []);
-
-  const handleClose = () => {
-    // Clear any pending timeouts before closing
-    if (successTimeoutRef.current) {
-      clearTimeout(successTimeoutRef.current);
-      successTimeoutRef.current = null;
-    }
-    
-    // Set mounted flag to false
-    isMountedRef.current = false;
-    
-    // Animate out and then call onClose
-    Animated.timing(slideAnim, {
-      toValue: height,
-      duration: 250,
-      useNativeDriver: true,
-    }).start(() => {
-      // Only call onClose if component is still meant to be mounted
-      // This prevents the "User closed onboarding" error
-      onClose();
-    });
-  };
-
-  const loadInitialStatus = useCallback(async () => {
-    try {
-      console.log('🔄 Loading initial connection status...');
-      const status = await getConnectionStatus();
-      console.log('✅ Connection status loaded:', status);
-      setConnections(status || {});
-    } catch (error) {
-      console.error('❌ Failed to load connection status:', error);
-      // Set empty connections to prevent crashes
-      setConnections({});
-    }
-  }, [getConnectionStatus]);
-
-  const togglePlatform = useCallback(async (platformId: string) => {
-    if (!platformToggles[platformId]) {
-      // Attempt to connect platform
-      try {
-        setIsConnectingPlatform(true);
-        console.log(`🔌 Initiating connection for ${platformId}`);
-        
-        // Test API connectivity first
-        console.log('🔍 Testing API connectivity...');
-        const connectivityTest = await testApiConnectivity();
-        
-        if (!connectivityTest.success) {
-          console.error('❌ API connectivity test failed:', connectivityTest.error);
-          Alert.alert('Network Error', `${connectivityTest.error}\n\nPlease check your internet connection and try again.`);
-          return;
-        }
-        
-        console.log('✅ API connectivity confirmed');
-        
-        // Instagram: Use Opacity SDK exclusively
-        if (platformId === 'instagram') {
-          // Check if Opacity SDK is available
-          if (!opacityInit || !OpacityEnvironment || !opacityGet) {
-            console.error('❌ Opacity SDK not available for Instagram');
-            throw new Error('Instagram connection requires the Opacity SDK. Please ensure @opacity-labs/react-native-opacity is properly installed and configured.');
-          }
-          
-          console.log('🔌 Initializing Opacity SDK for Instagram...');
-          
-          // Initialize Opacity SDK with your API key
-          const apiKey = 'OsamaTest-7bde2407-7360-462a-86b4-b26d7f890cbb';
-          
-          await opacityInit({
-            apiKey,
-            environment: OpacityEnvironment.Production,
-            shouldShowErrorsInWebView: true,
-          });
-          
-          console.log('✅ Opacity SDK initialized successfully');
-          console.log('📱 Fetching Instagram profile...');
-          
-          // Fetch Instagram profile using Opacity SDK
-          const profile = await opacityGet('flow:instagram:profile');
-          
-          if (profile && typeof profile === 'object') {
-            console.log('✅ Instagram profile retrieved:', profile);
-            
-            // Extract username from profile or use fallback
-            const instagramUsername = profile.username || profile.name || username;
-            
-            // Update platform toggle state
-            setPlatformToggles(prev => ({
-              ...prev,
-              [platformId]: true
-            }));
-            
-            // Update connections state with Instagram data
-            setConnections(prev => ({
-              ...prev,
-              [platformId]: { 
-                userName: instagramUsername, 
-                connected: true,
-                profileData: profile // Store additional profile data
-              }
-            }));
-            
-            console.log(`✅ Instagram successfully connected for user: ${instagramUsername}`);
-            
-          } else {
-            throw new Error('Invalid or empty Instagram profile data returned from Opacity SDK');
-          }
-        } else {
-          // For all other platforms (non-Instagram), check if they have native SDK
-        if (hasNativeSDK(platformId)) {
-          console.log(`📱 Using native SDK for ${platformId}`);
-          // Use native SDK for authentication
-            const success = await initiateNativeAuth(platformId, username);
-          if (success) {
-            console.log(`✅ Native authentication successful for ${platformId}`);
-            // Update platform toggle state
-            setPlatformToggles(prev => ({
-              ...prev,
-              [platformId]: true
-            }));
-            
-            // Update connections state
-            setConnections(prev => ({
-              ...prev,
-              [platformId]: { userName: username, connected: true }
-            }));
-            } else {
-              throw new Error(`Native authentication failed for ${platformId}`);
-          }
-        } else {
-            // Use OAuth WebView flow
-          console.log(`🌐 Initiating OAuth flow for ${platformId}`);
-            
-          const oauthUrl = await initiateOAuth(platformId, username, AppName);
-            
-          if (oauthUrl) {
-            console.log(`✅ Received OAuth URL for ${platformId}:`, oauthUrl);
-            setCurrentPlatform(platformId);
-            setOauthUrl(oauthUrl);
-            setStep('oauth');
-          } else {
-            console.error(`❌ No OAuth URL returned for ${platformId}`);
-              throw new Error(`Failed to get authorization URL for ${platformId}. Please try again.`);
-            }
-          }
-        }
-      } catch (error) {
-        console.error(`❌ Error connecting ${platformId}:`, error);
-        
-        // Provide user-friendly error messages based on platform
-        let errorMessage = 'Unknown error occurred';
-        if (error instanceof Error) {
-          if (platformId === 'instagram') {
-            if (error.message.includes('Initialize')) {
-              errorMessage = 'Failed to initialize Instagram connection. Please check your internet connection.';
-            } else if (error.message.includes('profile')) {
-              errorMessage = 'Unable to retrieve Instagram profile. Please try again or check your Instagram account permissions.';
-            } else {
-              errorMessage = error.message;
-            }
-          } else {
-            errorMessage = error.message;
-          }
-        }
-        
-        Alert.alert(
-          `${platformId.charAt(0).toUpperCase() + platformId.slice(1)} Connection Failed`, 
-          errorMessage,
-          [{ text: 'OK', style: 'default' }]
-        );
-      } finally {
-        setIsConnectingPlatform(false);
-      }
-    } else {
-      // Disconnect platform
-      console.log(`🔌 Disconnecting ${platformId}`);
-      setPlatformToggles(prev => ({
-        ...prev,
-        [platformId]: false
-      }));
-      
-      // Update connections state
-      setConnections(prev => {
-        const newConnections = { ...prev };
-        delete newConnections[platformId];
-        return newConnections;
-      });
-    }
-  }, [platformToggles, username, AppName]);
-
-  /**
-   * Handles OAuth callback URLs
-   */
-  const handleOAuthCallback = useCallback((url: string) => {
-    console.log('🔗 OAuth callback received:', url);
-    
-    const result = handleOAuthCallbackUrl(url);
-    
-    if (result.success && result.platform && result.code) {
-      console.log(`✅ OAuth successful for ${result.platform}`);
-      
-      // Update connections state
-      setConnections(prev => ({
-        ...prev,
-        [result.platform!]: { userName: username, connected: true }
-      }));
-      
-      // Update platform toggles
-      setPlatformToggles(prev => ({
-        ...prev,
-        [result.platform!]: true
-      }));
-      
-      // Close OAuth window and return to connect step
-      setOauthUrl('');
-      setCurrentPlatform('');
-      setStep('connect');
-      
-      console.log(`🎉 ${result.platform} successfully connected via OAuth`);
-    } else {
-      console.error('❌ OAuth callback failed or incomplete');
-    }
-  }, [username]);
-
-  /**
-   * Handles completion of the OAuth flow
-   */
-  const handleOAuthSuccess = useCallback((code: string) => {
-    console.log(`OAuth success for ${currentPlatform} with code: ${code}`);
-    
-    // Update connections for the current platform
-    if (currentPlatform) {
-      // Update connections state
-      setConnections(prev => ({
-        ...prev,
-        [currentPlatform]: { userName: username, connected: true }
-      }));
-      
-      // Update platform toggles
-      setPlatformToggles(prev => ({
-        ...prev,
-        [currentPlatform]: true
-      }));
-      
-      console.log(`Successfully connected ${currentPlatform} for user ${username}`);
-    }
-    
-    // Close OAuth window and return to connect step
-    setOauthUrl('');
-    setCurrentPlatform('');
-    setStep('connect');
-  }, [currentPlatform, username]);
-
-
-
-  // Function to check for existing account (spoofed for now)
-  const checkExistingAccount = useCallback(async () => {
-    console.log('Checking for existing account...');
-    // TODO: Implement actual logic to check cookies/storage for existing account
-    // For now, this is spoofed and doesn't do anything
-    return false;
-  }, []);
-
-  // Function to handle email submission
-  const handleEmailSubmit = useCallback(async () => {
-    console.log('🚀 handleEmailSubmit called with email:', email);
-    console.log('🧪 testMode value:', testMode);
-    console.log('🧪 isTestMode computed:', isTestMode);
-    
-    try {
-      if (!email || !email.trim()) {
-        console.log('❌ No email provided');
-        Alert.alert('Error', 'Please enter your email address');
-        return;
-      }
-      
-      // Basic email validation
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(email.trim())) {
-        console.log('❌ Invalid email format');
-        Alert.alert('Error', 'Please enter a valid email address');
-        return;
-      }
-      
-      console.log('📧 Email validation passed, proceeding...');
-      
-      // Check if we should skip API calls entirely (only for specific test scenarios)
-      const shouldSkipApiCalls = (typeof testMode === 'object' && testMode !== null && testMode.skipApiCalls === true);
-      
-      if (shouldSkipApiCalls) {
-        console.log('🧪 Test mode with skipApiCalls: true - Skipping API call, proceeding to verification');
-        setStep('verify');
-        return;
-      }
-      
-      // Add loading state to prevent multiple submissions
-      if (isVerifyingCode) {
-        console.log('⚠️ Email verification already in progress');
-        return;
-      }
-      
-      setIsVerifyingCode(true);
-      console.log('🔄 Starting email verification process...');
-      console.log('📡 Will make API call with testMode flag:', isTestMode);
-      
-      // Wrap the entire API call in a timeout to prevent hanging
-      const timeoutPromise = new Promise((_, reject) => {
-        setTimeout(() => reject(new Error('Request timeout')), 10000); // 10 second timeout
-      });
-      
-      try {
-        // Safety check for function availability with detailed debugging
-        console.log('🔍 Checking requestEmailVerification function availability...');
-        console.log('🔍 Type of requestEmailVerification:', typeof requestEmailVerification);
-        console.log('🔍 requestEmailVerification function:', requestEmailVerification);
-        
-        if (typeof requestEmailVerification !== 'function') {
-          console.error('❌ requestEmailVerification function not available');
-          console.error('❌ Available functions from platformAuthService:', {
-            requestEmailVerification: typeof requestEmailVerification,
-            verifyEmailCode: typeof verifyEmailCode,
-            checkEmailVerificationStatus: typeof checkEmailVerificationStatus,
-          });
-          // In development, just proceed anyway
-          console.log('🧪 Proceeding without API call in development mode');
-          setStep('verify');
-          return;
-        }
-        
-        console.log('✅ requestEmailVerification function is available');
-        console.log('🔄 Making API call to requestEmailVerification...');
-        
-        // Race between API call and timeout
-        const result = await Promise.race([
-          requestEmailVerification(email.trim(), isTestMode),
-          timeoutPromise
-        ]) as any;
-        
-        console.log('📡 Email verification API result:', result);
-        
-        if (result && result.success) {
-          console.log('✅ Verification code requested successfully');
-          setStep('verify');
-        } else {
-          console.warn('⚠️ Email verification request failed, but proceeding anyway:', result);
-          // In development mode, proceed even if API fails
-          setStep('verify');
-        }
-      } catch (verificationError) {
-        console.error('❌ Error in email verification API call:', verificationError);
-        // In development mode, proceed even if API fails
-        console.log('🧪 API failed but proceeding to verification step in development mode');
-        setStep('verify');
-      } finally {
-        setIsVerifyingCode(false);
-      }
-    } catch (error) {
-      console.error('❌ Unexpected error in email submission:', error);
-      setIsVerifyingCode(false);
-      
-      // In development mode, still try to proceed
-      console.log('🧪 Error occurred but attempting to proceed to verification step');
-      try {
-        setStep('verify');
-      } catch (stepError) {
-        console.error('❌ Failed to set step to verify:', stepError);
-        Alert.alert('Error', 'An unexpected error occurred. Please try again.');
-      }
-    }
-  }, [email, isVerifyingCode, debug, testMode, isTestMode]);
-
-  // Function to handle verification code submission
-  const handleVerificationSubmit = useCallback(async () => {
-    if (!verificationCode.trim() || verificationCode.trim().length !== 6) {
-      Alert.alert('Error', 'Please enter a 6-digit verification code');
-      return;
-    }
-    
-    setIsVerifyingCode(true);
-    
-    try {
-      // Safety check for function availability
-      if (typeof verifyEmailCode !== 'function') {
-        throw new Error('Email verification service not available');
-      }
-      
-      // Test Mode: Use specific flows
-      if (isTestMode) {
-        console.log('🧪 Test mode verification - simulating success');
-        
-        if (isExistingUserFlow) {
-          // Flow 1: Existing User → Data Request → Close (return API URL)
-          console.log('🧪 Test Flow 1: Existing User → Show Data Request');
-          setIsExistingUser(true);
-          setStep('dataRequest');
-          return;
-        } else if (isNewUserFlow) {
-          // Flow 2: New User → Platform Connect → PIN → Training
-          console.log('🧪 Test Flow 2: New User → Platform Connect');
-          const emailPrefix = email.trim().split('@')[0] || 'TestUser';
-          setUsername(emailPrefix);
-          setStep('connect');
-          return;
-        }
-      }
-
-      // Real API call (production) or test mode
-      const result = await verifyEmailCode(email.trim(), verificationCode.trim(), isTestMode);
-      
-      if (result.success) {
-        console.log('✅ Email verification successful');
-        
-        // Check if user exists in backend (properly typed now)
-        const existingUser = result.existingUser || false;
-        setIsExistingUser(existingUser);
-        
-        if (existingUser) {
-          console.log('👤 Existing user detected, showing data request screen');
-          setStep('dataRequest');
-        } else {
-          console.log('🆕 New user, proceeding to platform connection');
-          // Safely set username from email prefix
-          try {
-            const emailPrefix = email.trim().split('@')[0];
-            if (emailPrefix && emailPrefix.length > 0) {
-              setUsername(emailPrefix);
-            } else {
-              setUsername('User'); // Fallback username
-            }
-          } catch (usernameError) {
-            console.warn('Failed to extract username from email, using fallback:', usernameError);
-            setUsername('User');
-          }
-          setStep('connect');
-        }
-      } else {
-        Alert.alert('Verification Failed', result.error || 'Invalid verification code');
-      }
-    } catch (error) {
-      console.error('❌ Error verifying code:', error);
-      Alert.alert('Error', 'Failed to verify code');
-    } finally {
-      setIsVerifyingCode(false);
-    }
-  }, [email, verificationCode]);
-
-  const handlePinSubmit = useCallback(async (userPin: string) => {
-    setPin(userPin);
-    setStep('training');
-    
-    // Save session data for "Never Connect Again" functionality
-    try {
-      const sessionData = {
-        pin: userPin,
-        connections,
-        platformToggles,
-        selectedTier,
-        username,
-        timestamp: Date.now(),
-        appName: AppName,
-        inferenceData: auto ? inferenceData : undefined,
-        partner,
-      };
-      
-      // Store session data in secure storage for future use
-      console.log('Saving session data for future "Never Connect Again" functionality:', sessionData);
-      
-      // TODO: Implement actual secure storage of session data
-      // This would typically involve:
-      // 1. Storing encrypted session data locally
-      // 2. Setting cookies in WebView for onairos.uk domain
-      // 3. Storing authentication tokens securely
-      
-      // For now, we'll simulate this with console logging
-      console.log('Session data saved - future apps will detect existing account');
-      
-    } catch (error) {
-      console.error('Failed to save session data:', error);
-    }
-  }, [connections, selectedTier, platformToggles, username, AppName, auto, inferenceData, partner]);
-
-  const handleTrainingComplete = useCallback(async () => {
-    console.log('🎉 Training completed successfully');
-    console.log('🔍 Auto mode enabled:', auto);
-    console.log('🔍 Inference data available:', !!inferenceData);
-    
-    try {
-      if (auto && inferenceData) {
-        console.log('🤖 Auto mode: Making API request to get URL and perform inference');
-        
-        // First, get the API URL from backend
-        const apiUrlResponse = await fetch('https://api2.onairos.uk/', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            Info: {
-              storage: 'secure',
-              appId: AppName,
-              confirmations: Object.keys(requestData || {}),
-              EncryptedUserPin: pin, // Use the actual PIN from user
-              account: email.trim(),
-              proofMode: false,
-            }
-          })
-        });
-        
-        if (!apiUrlResponse.ok) {
-          throw new Error(`Failed to get API URL: ${apiUrlResponse.status}`);
-        }
-        
-        const { apiUrl, token } = await apiUrlResponse.json();
-        console.log('✅ Received API URL:', apiUrl);
-        console.log('✅ Received token:', token?.substring(0, 20) + '...');
-        
-        // Now make the inference call with the provided data
-        const inferenceResponse = await fetch(apiUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`,
-          },
-          body: JSON.stringify({
-            ...inferenceData,
-            userEmail: email.trim(),
-            appName: AppName,
-            timestamp: new Date().toISOString(),
-          })
-        });
-        
-        if (!inferenceResponse.ok) {
-          throw new Error(`Inference API failed: ${inferenceResponse.status}`);
-        }
-        
-        const inferenceResults = await inferenceResponse.json();
-        console.log('✅ Auto mode inference results:', inferenceResults);
-        
-        // Close the modal first
-        handleClose();
-        
-        // Complete onboarding with inference results
-        setTimeout(() => {
-          onComplete(apiUrl, token, {
-            pin,
-            connections,
-            platformToggles,
-            selectedTier,
-            tierData: requestData?.[selectedTier],
-            sessionSaved: true,
-            // Add inference data if auto mode is enabled
-            ...(auto && inferenceData && { inferenceData }),
-            // Add partner info for special partners
-            ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
-            autoMode: true,
-            inferenceResults,
-            apiUrl,
-            token,
-          });
-        }, 100);
-        
-      } else {
-        console.log('📋 Standard mode: Returning API URL for manual use');
-        
-        // Prepare completion data
-        const completionData = {
-          pin,
-          connections,
-          platformToggles,
-          selectedTier,
-          tierData: requestData?.[selectedTier],
-          sessionSaved: true,
-          // Add inference data if auto mode is enabled
-          ...(auto && inferenceData && { inferenceData }),
-          // Add partner info for special partners
-          ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
-          autoMode: false,
-        };
-        
-        console.log('Completion data prepared:', completionData);
-        
-        // Close the modal first
-        handleClose();
-        
-        // Then call the completion callback
-        setTimeout(() => {
-          onComplete('https://api2.onairos.uk', 'dummy-token', completionData);
-        }, 100);
-      }
-    } catch (error) {
-      console.error('❌ Error in training complete:', error);
-      
-      // Fallback to standard mode
-      const completionData = {
-        pin,
-        connections,
-        platformToggles,
-        selectedTier,
-        tierData: requestData?.[selectedTier],
-        sessionSaved: true,
-        // Add inference data if auto mode is enabled
-        ...(auto && inferenceData && { inferenceData }),
-        // Add partner info for special partners
-        ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
-        autoMode: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
-      };
-      
-      console.log('Fallback completion data:', completionData);
-      
-      // Close the modal first
-      handleClose();
-      
-      // Then call the completion callback
-      setTimeout(() => {
-        onComplete('https://api2.onairos.uk', 'dummy-token', completionData);
-      }, 100);
-    }
-  }, [pin, connections, platformToggles, selectedTier, requestData, auto, inferenceData, partner, handleClose, onComplete, AppName, email]);
-
-  const handleDataRequestAccept = useCallback(async () => {
-    console.log('Data request accepted for existing user');
-    console.log('🔍 Auto mode enabled:', auto);
-    console.log('🔍 Inference data available:', !!inferenceData);
-    
-    try {
-      if (auto && inferenceData) {
-        console.log('🤖 Auto mode: Making API request to get URL and perform inference');
-        
-        // First, get the API URL from backend
-        const apiUrlResponse = await fetch('https://api2.onairos.uk/', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            Info: {
-              storage: 'secure', // or whatever storage type
-              appId: AppName,
-              confirmations: Object.keys(requestData || {}),
-              EncryptedUserPin: 'temp-pin', // This would come from user PIN in real flow
-              account: email.trim(),
-              proofMode: false,
-            }
-          })
-        });
-        
-        if (!apiUrlResponse.ok) {
-          throw new Error(`Failed to get API URL: ${apiUrlResponse.status}`);
-        }
-        
-        const { apiUrl, token } = await apiUrlResponse.json();
-        console.log('✅ Received API URL:', apiUrl);
-        console.log('✅ Received token:', token?.substring(0, 20) + '...');
-        
-        // Now make the inference call with the provided data
-        const inferenceResponse = await fetch(apiUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`,
-          },
-          body: JSON.stringify({
-            ...inferenceData,
-            userEmail: email.trim(),
-            appName: AppName,
-            timestamp: new Date().toISOString(),
-          })
-        });
-        
-        if (!inferenceResponse.ok) {
-          throw new Error(`Inference API failed: ${inferenceResponse.status}`);
-        }
-        
-        const inferenceResults = await inferenceResponse.json();
-        console.log('✅ Auto mode inference results:', inferenceResults);
-        
-        // Complete onboarding with inference results
-        onComplete(apiUrl, token, {
-          existingAccount: true,
-          email: email.trim(),
-          dataRequestAccepted: true,
-          requestData,
-          autoMode: true,
-          inferenceResults,
-          apiUrl,
-          token,
-        });
-        
-      } else {
-        console.log('📋 Standard mode: Returning API URL for manual use');
-        
-        // Standard mode: just return the API URL
-        onComplete('https://api2.onairos.uk', 'existing-session-token', {
-          existingAccount: true,
-          email: email.trim(),
-          dataRequestAccepted: true,
-          requestData,
-          autoMode: false,
-        });
-      }
-    } catch (error) {
-      console.error('❌ Error in data request accept:', error);
-      
-      // Fallback to standard mode
-      onComplete('https://api2.onairos.uk', 'existing-session-token', {
-        existingAccount: true,
-        email: email.trim(),
-        dataRequestAccepted: true,
-        requestData,
-        autoMode: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
-      });
-    }
-  }, [email, onComplete, requestData, auto, inferenceData, AppName]);
-
-  const handleDataRequestDecline = useCallback(() => {
-    console.log('Data request declined');
-    handleClose();
-  }, [handleClose]);
-
-  const canProceedToPin = useCallback(() => {
-    // Test mode: Always allow proceeding (simulates platform connections)
-    if (isTestMode || testModeOptions.skipRealConnections) {
-      console.log('🧪 Test mode: Allowing proceed without real platform connections');
-      return true;
-    }
-    
-    // Production: Check if at least one platform is connected
-    const hasPlatformConnected = Object.values(platformToggles).some(value => value === true);
-    
-    // Auto mode validation
-    if (auto && partner !== 'couplebible' && !inferenceData) {
-      console.warn('Auto mode enabled but no inference data provided (and partner is not couplebible)');
-      return false;
-    }
-    
-    return hasPlatformConnected;
-  }, [platformToggles, auto, partner, inferenceData, isTestMode, testModeOptions]);
-
-  const handleProceed = () => {
-    console.log('Proceeding to next step');
-    // Show success screen first
-    setStep('success');
-    
-    // Clear any existing timeout
-    if (successTimeoutRef.current) {
-      clearTimeout(successTimeoutRef.current);
-    }
-    
-    // After a delay, proceed to PIN
-    successTimeoutRef.current = setTimeout(() => {
-      // Only proceed if component is still mounted and visible
-      if (isMountedRef.current && visible) {
-        setStep('pin');
-      }
-      successTimeoutRef.current = null;
-    }, 3000);
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none"
-      statusBarTranslucent
-      onRequestClose={handleClose}
-    >
-      <TouchableWithoutFeedback onPress={handleClose}>
-        <View style={styles.modalOverlay}>
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-            <Animated.View 
-              style={[
-                styles.bottomSheet,
-                {
-                  transform: [{ translateY: slideAnim }],
-                }
-              ]}
-            >
-              <SafeAreaView style={styles.container}>
-                <View style={styles.handleContainer}>
-                  <View style={styles.handle} />
-                </View>
-                
-                {step === 'email' && (
-                  <View style={styles.emailInputContainer}>
-                    <View style={styles.emailHeader}>
-                      <View style={styles.onairosIcon}>
-                        <Image 
-                          source={require('../assets/images/onairos_logo.png')} 
-                          style={styles.onairosLogo} 
-                          resizeMode="contain"
-                        />
-                      </View>
-                      <Text style={styles.emailTitle}>Welcome to Onairos</Text>
-                      <Text style={styles.emailSubtitle}>Enter your email to get started</Text>
-                    </View>
-                    
-                    <View style={styles.emailInputSection}>
-                      <TextInput
-                        style={styles.emailInput}
-                        value={email}
-                        onChangeText={setEmail}
-                        placeholder="Enter your email address"
-                        keyboardType="email-address"
-                        autoCapitalize="none"
-                        autoCorrect={false}
-                        autoFocus
-                      />
-                      
-                      <TouchableOpacity
-                        style={[styles.emailSubmitButton, !email.trim() && styles.emailSubmitButtonDisabled]}
-                        onPress={handleEmailSubmit}
-                        disabled={!email.trim()}
-                      >
-                        <Text style={styles.emailSubmitButtonText}>Continue</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </View>
-                )}
-
-                {step === 'verify' && (
-                  <View style={styles.emailInputContainer}>
-                    <View style={styles.emailHeader}>
-                      <View style={styles.onairosIcon}>
-                        <Image 
-                          source={require('../assets/images/onairos_logo.png')} 
-                          style={styles.onairosLogo} 
-                          resizeMode="contain"
-                        />
-                      </View>
-                      <Text style={styles.emailTitle}>Enter Verification Code</Text>
-                      <Text style={styles.emailSubtitle}>
-                        We've sent a 6-digit code to {email}
-                      </Text>
-                      {isTestMode && (
-                        <Text style={styles.developmentNote}>
-                          🔍 Test Mode: Any 6-digit code will work
-                        </Text>
-                      )}
-                    </View>
-                    
-                    <View style={styles.emailInputSection}>
-                      <View style={styles.codeInputContainer}>
-                        {[0, 1, 2, 3, 4, 5].map((index) => (
-                          <TextInput
-                            key={index}
-                            ref={(ref) => (codeInputRefs.current[index] = ref)}
-                            style={[
-                              styles.codeDigit,
-                              verificationCode.length === index && styles.codeDigitActive
-                            ]}
-                            value={verificationCode[index] || ''}
-                            onChangeText={(text) => {
-                              if (text.length <= 1 && /^\d*$/.test(text)) {
-                                const newCode = verificationCode.split('');
-                                newCode[index] = text;
-                                const updatedCode = newCode.join('').slice(0, 6);
-                                setVerificationCode(updatedCode);
-                                
-                                // Auto-focus next input
-                                if (text && index < 5) {
-                                  codeInputRefs.current[index + 1]?.focus();
-                                }
-                              }
-                            }}
-                            onKeyPress={({ nativeEvent }) => {
-                              // Handle backspace to move to previous input
-                              if (nativeEvent.key === 'Backspace' && !verificationCode[index] && index > 0) {
-                                codeInputRefs.current[index - 1]?.focus();
-                              }
-                            }}
-                            keyboardType="number-pad"
-                            maxLength={1}
-                            textAlign="center"
-                            autoFocus={index === 0}
-                          />
-                        ))}
-                      </View>
-                      
-                      <TouchableOpacity
-                        style={[
-                          styles.emailSubmitButton, 
-                          (verificationCode.length !== 6 || isVerifyingCode) && styles.emailSubmitButtonDisabled
-                        ]}
-                        onPress={handleVerificationSubmit}
-                        disabled={verificationCode.length !== 6 || isVerifyingCode}
-                      >
-                        {isVerifyingCode ? (
-                          <ActivityIndicator size="small" color="#fff" />
-                        ) : (
-                          <Text style={styles.emailSubmitButtonText}>Verify</Text>
-                        )}
-                      </TouchableOpacity>
-                      
-                      <TouchableOpacity
-                        style={styles.backButton}
-                        onPress={() => setStep('email')}
-                      >
-                        <Text style={styles.backButtonText}>← Back to email</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </View>
-                )}
-
-                {step === 'connect' && (
-                  <>
-                    {/* Header with Onairos icon and arrow to app icon */}
-                    <View style={styles.header}>
-                      <View style={styles.headerContent}>
-                        <View style={styles.onairosIcon}>
-                          <Image 
-                            source={require('../assets/images/onairos_logo.png')} 
-                            style={styles.onairosLogo} 
-                            resizeMode="contain"
-                          />
-                        </View>
-                        <Icon name="arrow-forward" size={24} color="#666" style={styles.arrow} />
-                        <View style={styles.appIcon}>
-                          {appIcon ? (
-                            <Image 
-                              source={appIcon} 
-                              style={styles.appIconImage} 
-                              resizeMode="contain"
-                            />
-                          ) : (
-                            <Text style={styles.appIconText}>
-                              {AppName.charAt(0)}
-                            </Text>
-                          )}
-                        </View>
-                      </View>
-                      
-
-                    </View>
-
-                    <ScrollView 
-                      style={styles.content}
-                      contentContainerStyle={styles.scrollContent}
-                      showsVerticalScrollIndicator={true}
-                      bounces={true}
-                      scrollEnabled={true}
-                      nestedScrollEnabled={true}
-                      keyboardShouldPersistTaps="handled"
-                    >
-                      {/* Main title and description */}
-                      <View style={styles.titleContainer}>
-                        <Text style={styles.mainTitle}>
-                          Let {AppName} learn about you from your data and apps
-                        </Text>
-                        <Text style={styles.privacyMessage}>
-                          None of your app data is shared with ANYONE
-                        </Text>
-                        {(debug || testMode) && (
-                          <Text style={styles.developmentNote}>
-                            🧪 Test Mode: You can proceed without connecting any platforms
-                          </Text>
-                        )}
-                      </View>
-
-                      {/* Platform connection options */}
-                      <View style={styles.platformsContainer}>
-                        {platformsToDisplay.map((platform) => (
-                          <TouchableOpacity 
-                            key={platform.id} 
-                            style={styles.platformItem}
-                            onPress={() => togglePlatform(platform.id)}
-                            disabled={isConnectingPlatform}
-                          >
-                            <View style={styles.platformInfo}>
-                              <Image 
-                                source={platform.icon} 
-                                style={styles.platformIcon} 
-                                resizeMode="contain"
-                              />
-                              <Text style={styles.platformName}>
-                                {platform.name}
-                              </Text>
-                            </View>
-                            
-                            {isConnectingPlatform && currentPlatform === platform.id ? (
-                              <ActivityIndicator size="small" color={COLORS.primary} />
-                            ) : (
-                              <View style={[
-                                styles.platformToggle,
-                                platformToggles[platform.id] && styles.platformToggleActive
-                              ]}>
-                                <View style={[
-                                  styles.platformToggleThumb,
-                                  platformToggles[platform.id] && styles.platformToggleThumbActive
-                                ]} />
-                              </View>
-                            )}
-                          </TouchableOpacity>
-                        ))}
-                        
-                        {/* Show more/less platforms button */}
-                        {additionalPlatforms.length > 0 && (
-                          <TouchableOpacity 
-                            style={styles.expandButton}
-                            onPress={() => setShowAllPlatforms(!showAllPlatforms)}
-                          >
-                            <Icon 
-                              name={showAllPlatforms ? "expand_less" : "add"} 
-                              size={24} 
-                              color={COLORS.primary} 
-                            />
-                            <Text style={styles.expandButtonText}>
-                              {showAllPlatforms 
-                                ? "Show Less" 
-                                : `${additionalPlatforms.length} More Connectors`
-                              }
-                            </Text>
-                          </TouchableOpacity>
-                        )}
-                      </View>
-
-                      {/* Test mode controls - Simple 2-flow system */}
-                      {showTestControls && (
-                        <View style={styles.testModeContainer}>
-                          <Text style={styles.testModeTitle}>🧪 Test Mode - 2 Main Flows</Text>
-                          
-                                                     <TouchableOpacity 
-                             style={styles.testExistingUserButton}
-                             onPress={() => {
-                               // Flow 1: Existing User
-                               setIsExistingUser(true);
-                               setStep('dataRequest');
-                             }}
-                           >
-                            <Icon name="person" size={20} color="#28a745" />
-                            <Text style={styles.testExistingUserButtonText}>
-                              Flow 1: Existing User (Email → Code → Data Request → Close)
-                            </Text>
-                          </TouchableOpacity>
-
-                          <TouchableOpacity 
-                            style={styles.testSkipToTrainingButton}
-                            onPress={() => {
-                              // Flow 2: New User - Skip to connect step
-                              setStep('connect');
-                            }}
-                          >
-                            <Icon name="person-add" size={20} color="#17a2b8" />
-                            <Text style={styles.testSkipToTrainingButtonText}>
-                              Flow 2: New User (Connect → PIN → Training)
-                            </Text>
-                          </TouchableOpacity>
-
-                          <TouchableOpacity 
-                            style={styles.testDataRequestButton}
-                            onPress={() => setStep('dataRequest')}
-                          >
-                            <Icon name="preview" size={20} color={COLORS.primary} />
-                            <Text style={styles.testDataRequestButtonText}>
-                              Preview Data Request Screen
-                            </Text>
-                          </TouchableOpacity>
-                        </View>
-                      )}
-                    </ScrollView>
-
-                    <View style={styles.footer}>
-                      <TouchableOpacity
-                        style={styles.footerButtonCancel}
-                        onPress={handleClose}
-                      >
-                        <Text style={styles.footerButtonText}>Cancel</Text>
-                      </TouchableOpacity>
-
-                      <TouchableOpacity
-                        style={[
-                          styles.footerButtonConfirm,
-                          !canProceedToPin() && styles.footerButtonDisabled
-                        ]}
-                        onPress={handleProceed}
-                        disabled={!canProceedToPin()}
-                      >
-                        <Text style={styles.footerButtonTextConfirm}>Connect</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </>
-                )}
-
-                {step === 'success' && (
-                  <View style={styles.successContainer}>
-                    <View style={styles.successContent}>
-                      {/* Big green checkmark */}
-                      <View style={styles.successIcon}>
-                        <Icon name="check" size={48} color="#fff" />
-                      </View>
-                      
-                      <Text style={styles.successTitle}>Never Connect Again!</Text>
-                      <Text style={styles.successSubtitle}>
-                        Your login session has been saved
-                      </Text>
-                      
-                      <View style={styles.successMessage}>
-                        <Text style={styles.successMessageText}>
-                          Your Onairos account and platform connections are now saved in your browser cookies. 
-                          Next time you use any app with Onairos, you'll be automatically signed in without 
-                          needing to reconnect your accounts.
-                        </Text>
-                      </View>
-                      
-                      {/* Auto-progress indicator */}
-                      <View style={styles.progressIndicator}>
-                        <ActivityIndicator size="small" color="#4CAF50" />
-                        <Text style={styles.progressText}>Continuing...</Text>
-                      </View>
-                    </View>
-                  </View>
-                )}
-
-                {step === 'pin' && (
-                  <PinInput
-                    onSubmit={handlePinSubmit}
-                    minLength={8}
-                    requireSpecialChar
-                    requireNumber
-                    onBack={() => setStep('connect')}
-                  />
-                )}
-
-                {step === 'training' && (
-                  <TrainingModal
-                    visible={step === 'training'}
-                    progress={training.progress}
-                    eta={training.eta}
-                    onCancel={handleClose}
-                    onComplete={handleTrainingComplete}
-                    modelKey="onairosTrainingModel"
-                    username={username}
-                    test={isTestMode}
-                  />
-                )}
-
-                {step === 'dataRequest' && (
-                  <DataRequestScreen
-                    onAccept={handleDataRequestAccept}
-                    onDecline={handleDataRequestDecline}
-                    requestData={requestData || {}}
-                    AppName={AppName}
-                    appIcon={appIcon}
-                  />
-                )}
-                
-                {step === 'oauth' && oauthUrl && (
-                  <OAuthWebView
-                    url={oauthUrl}
-                    platform={currentPlatform}
-                    onClose={() => {
-                      setStep('connect');
-                      setOauthUrl('');
-                    }}
-                    onSuccess={handleOAuthSuccess}
-                    onComplete={() => setStep('connect')}
-                  />
-                )}
-                
-
-
-              </SafeAreaView>
-            </Animated.View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-      
-
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  bottomSheet: {
-    backgroundColor: '#fff',
-    width: width,
-    height: height * 0.8,
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: 'hidden',
-  },
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  handleContainer: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 12,
-    paddingBottom: 8,
-  },
-  handle: {
-    width: 40,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: '#E0E0E0',
-  },
-  header: {
-    padding: 24,
-    alignItems: 'center',
-  },
-  headerContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  appIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  appIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  appIconImage: {
-    width: 32,
-    height: 32,
-  },
-  arrow: {
-    marginHorizontal: 16,
-  },
-  onairosIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  onairosIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  onairosLogo: {
-    width: 32,
-    height: 32,
-  },
-  titleContainer: {
-    marginBottom: 20,
-  },
-  mainTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  privacyMessage: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 24,
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingBottom: 20,
-  },
-  platformsContainer: {
-    marginTop: 16,
-  },
-  platformItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 12,
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    marginBottom: 8,
-    borderWidth: 1,
-    borderColor: '#eee',
-  },
-  platformInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  platformIcon: {
-    width: 24,
-    height: 24,
-    marginRight: 12,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 24,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-    backgroundColor: '#fff',
-  },
-  footerButtonCancel: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  footerButtonConfirm: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 16,
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#000',
-  },
-  footerButtonDisabled: {
-    opacity: 0.5,
-  },
-  footerButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  footerButtonTextConfirm: {
-    color: '#000',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-
-  successContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  successContent: {
-    backgroundColor: '#fff',
-    padding: 24,
-    borderRadius: 16,
-    alignItems: 'center',
-  },
-  successIcon: {
-    backgroundColor: '#4CAF50',
-    borderRadius: 24,
-    padding: 12,
-    marginBottom: 16,
-  },
-  successTitle: {
-    fontSize: 22,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  successSubtitle: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  successMessage: {
-    backgroundColor: '#f0f0f0',
-    padding: 16,
-    borderRadius: 8,
-    marginBottom: 16,
-  },
-  successMessageText: {
-    fontSize: 14,
-    color: '#666',
-  },
-  platformToggle: {
-    width: 50,
-    height: 28,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    backgroundColor: '#f0f0f0',
-    justifyContent: 'center',
-    paddingHorizontal: 2,
-  },
-  platformToggleActive: {
-    borderColor: '#4CAF50',
-    backgroundColor: '#4CAF50',
-  },
-  platformToggleThumb: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  platformToggleThumbActive: {
-    alignSelf: 'flex-end',
-  },
-  // Dark mode styles
-  darkPlatformItem: {
-    backgroundColor: '#333',
-    borderColor: '#555',
-  },
-  darkText: {
-    color: '#fff',
-  },
-  darkSubText: {
-    color: '#ccc',
-  },
-  progressIndicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 16,
-  },
-  progressText: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-    marginLeft: 8,
-  },
-  // Email input styles
-  emailInputContainer: {
-    flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    padding: 24,
-    paddingTop: 60,
-  },
-  emailHeader: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  emailTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  emailSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-  },
-  emailInputSection: {
-    width: '100%',
-    maxWidth: 320,
-  },
-  emailInput: {
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 12,
-    padding: 16,
-    fontSize: 16,
-    marginBottom: 16,
-    backgroundColor: '#fff',
-  },
-  emailSubmitButton: {
-    backgroundColor: '#4CAF50',
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 12,
-    alignItems: 'center',
-  },
-  emailSubmitButtonDisabled: {
-    opacity: 0.5,
-  },
-  emailSubmitButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  // Verification code styles
-  developmentNote: {
-    fontSize: 14,
-    color: '#FF9800',
-    textAlign: 'center',
-    marginTop: 8,
-    backgroundColor: '#FFF3E0',
-    padding: 8,
-    borderRadius: 4,
-  },
-  codeInputContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 24,
-    paddingHorizontal: 20,
-  },
-  codeDigit: {
-    width: 45,
-    height: 55,
-    borderWidth: 2,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    backgroundColor: '#fff',
-  },
-  codeDigitActive: {
-    borderColor: '#4CAF50',
-  },
-  backButton: {
-    paddingVertical: 12,
-    alignItems: 'center',
-  },
-  backButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  // Expand button styles
-  expandButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#f8f9fa',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#e9ecef',
-    marginTop: 8,
-  },
-  expandButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: COLORS.primary,
-    marginLeft: 8,
-  },
-  // Test mode styles
-  testModeContainer: {
-    marginTop: 16,
-    paddingHorizontal: 16,
-    backgroundColor: '#f8f9fa',
-    borderRadius: 12,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#e9ecef',
-  },
-  testModeTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#495057',
-    marginBottom: 12,
-    textAlign: 'center',
-  },
-  testDataRequestButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#fff3cd',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#ffeaa7',
-    marginBottom: 8,
-  },
-  testDataRequestButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#856404',
-    marginLeft: 8,
-  },
-  testExistingUserButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#d4edda',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#c3e6cb',
-    marginBottom: 8,
-  },
-  testExistingUserButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#155724',
-    marginLeft: 8,
-  },
-  testSkipToTrainingButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#d1ecf1',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#bee5eb',
-  },
-  testSkipToTrainingButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#0c5460',
-    marginLeft: 8,
-  },
-});