@onairos/react-native 3.1.18 → 3.2.1

package/src/components/UniversalOnboarding.tsx

@@ -1,2888 +1,1839 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  Image,
-  StyleSheet,
-  Dimensions,
-  TouchableOpacity,
-  ActivityIndicator,
-  Platform,
-  Modal,
-  Animated,
-  SafeAreaView,
-  ScrollView,
-  Switch,
-  Linking,
-  KeyboardAvoidingView,
-  Vibration,
-  Easing,
-  Alert,
-} from 'react-native';
-// Removed navigation dependencies for SDK compatibility
-import AsyncStorage from '@react-native-async-storage/async-storage';
-// Import components and hooks
-import { PinInput } from './PinInput';
-import { OAuthWebView } from './onboarding/OAuthWebView';
-// import { useConnections } from '../../hooks/useConnections'; // Commented out - file path issue
-// import { useAuth } from '../../context/AuthContext'; // Commented out - file path issue
-import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback } from '../services/platformAuthService';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-import { getOnairosUsername } from '../services/authService';
-import { io, Socket } from 'socket.io-client';
-import { setTemporaryPin, clearTemporaryPin } from '../services/pinStorageUtils';
-import { getEncryptedPinForAPI } from '../services/pinEncryptionService';
-import { startEnochTrainingWithYouTubeCheck } from '../services/mobileTrainingService';
-
-// Import types
-// import type { ConnectionStatus } from '../../hooks/useConnections'; // Commented out - file path issue
-// Removed App-specific navigation types
-
-const { height, width } = Dimensions.get('window');
-
-export interface UniversalOnboardingProps {
-  visible: boolean;
-  onClose: () => void;
-  AppName: string;
-  requestData?: any;
-  returnLink?: string;
-  onComplete?: (apiUrl: string, token: string, userData: any) => void;
-  embedd?: boolean;
-  debug?: boolean;
-  test?: boolean;
-  testMode?: boolean;
-  preferredPlatform?: string;
-  primaryAuthOnly?: boolean;
-}
-
-// ConnectionStatus interface is now imported from hooks/useConnections
-
-export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
-  visible,
-  onClose,
-  AppName,
-  requestData,
-  returnLink,
-  onComplete,
-  embedd = false,
-  debug = false,
-  test = false,
-  preferredPlatform,
-  primaryAuthOnly = false,
-}) => {
-  const [step, setStep] = useState<'connect' | 'pin' | 'persona' | 'oauth' | 'privacy' | 'connections'>(primaryAuthOnly ? 'persona' : 'connect');
-  const [connections, setConnections] = useState<any>({});
-  const [pin, setPin] = useState<string>('');
-  const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
-  // Training state is now handled by TrainingModal
-  const [slideAnim] = useState(new Animated.Value(height * 0.5));
-  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
-  const [oauthUrl, setOauthUrl] = useState<string>('');
-  const [currentPlatform, setCurrentPlatform] = useState<string>('');
-  const [email, setEmail] = useState<string>('');
-  const [longPressTimer, setLongPressTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
-  const [modalVisible, setModalVisible] = useState(visible);
-  
-  // Debug logging for modal visibility
-  useEffect(() => {
-    console.log('🔍 UniversalOnboarding: visible prop changed to:', visible);
-    console.log('🔍 UniversalOnboarding: modalVisible state is:', modalVisible);
-    console.log('🔍 UniversalOnboarding: current step is:', step);
-    console.log('🔍 UniversalOnboarding: primaryAuthOnly is:', primaryAuthOnly);
-  }, [visible, modalVisible, step, primaryAuthOnly]);
-  const isCompletingRef = useRef(false);
-  const [connectionsCount, setConnectionsCount] = useState<number>(5); // Simulated connections count
-  
-  // Add state for showing additional platforms
-  const [showAdditionalPlatforms, setShowAdditionalPlatforms] = useState<boolean>(false);
-  const [additionalPlatformsOpacity] = useState(new Animated.Value(0));
-  
-  // Add ref for ScrollView to control scroll position
-  const scrollViewRef = useRef<ScrollView>(null);
-  // Get the authenticated user from auth context
-  // const { user } = useAuth(); // Hook not available
-  const user = null;
-  
-  // State for storing the correct username
-  const [username, setUsername] = useState<string>('');
-
-  // Real training state variables (replacing fake persona state)
-  const [personaProgress, setPersonaProgress] = useState(0);
-  const [personaStatus, setPersonaStatus] = useState('Initializing...');
-  const [isPersonaComplete, setIsPersonaComplete] = useState(false);
-  const [socketConnected, setSocketConnected] = useState(false);
-  const [hasError, setHasError] = useState(false);
-  const [userTraits, setUserTraits] = useState<any>(null);
-  const [inferenceResults, setInferenceResults] = useState<any>(null);
-  const [userToken, setUserToken] = useState<string | null>(null);
-  const [userInfo, setUserInfo] = useState<any>(null);
-  const [animatedDots, setAnimatedDots] = useState('');
-  const socketRef = useRef<Socket | null>(null);
-  const dotsAnimationRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  // Existing user state
-  const [isExistingUser, setIsExistingUser] = useState(false);
-  const [existingUserToken, setExistingUserToken] = useState<string | null>(null);
-  const [existingUserInfo, setExistingUserInfo] = useState<any>(null);
-
-  // Data scenario states
-  const [dataScenario, setDataScenario] = useState<'SUFFICIENT' | 'LIMITED_DATA' | 'NO_DATA' | 'CONNECTIONS_REQUIRED' | null>(null);
-  const [dataDetails, setDataDetails] = useState<any>(null);
-  const [showDataWarning, setShowDataWarning] = useState(false);
-
-  // ✅ NEW: Background training state
-  const [isBackgroundTrainingStarted, setIsBackgroundTrainingStarted] = useState(false);
-  const [backgroundTrainingProgress, setBackgroundTrainingProgress] = useState('');
-  const [backgroundSocketId, setBackgroundSocketId] = useState<string | null>(null);
-
-  // Function to store connected platforms
-  const storeConnectedPlatform = async (platformId: string) => {
-    try {
-      const storedPlatforms = await AsyncStorage.getItem('connectedPlatforms');
-      let platforms: string[] = storedPlatforms ? JSON.parse(storedPlatforms) : [];
-      
-      // Add platform if not already in the list
-      if (!platforms.includes(platformId)) {
-        platforms.push(platformId);
-        await AsyncStorage.setItem('connectedPlatforms', JSON.stringify(platforms));
-        console.log('📱 Stored connected platform:', platformId, 'Total platforms:', platforms);
-      }
-    } catch (error) {
-      console.error('Error storing connected platform:', error);
-    }
-  };
-
-  // Function to remove connected platform from storage
-  const removeConnectedPlatform = async (platformId: string) => {
-    try {
-      const storedPlatforms = await AsyncStorage.getItem('connectedPlatforms');
-      let platforms: string[] = storedPlatforms ? JSON.parse(storedPlatforms) : [];
-      
-      // Remove platform from the list
-      platforms = platforms.filter(platform => platform !== platformId);
-      await AsyncStorage.setItem('connectedPlatforms', JSON.stringify(platforms));
-      console.log('📱 Removed connected platform:', platformId, 'Remaining platforms:', platforms);
-    } catch (error) {
-      console.error('Error removing connected platform:', error);
-    }
-  };
-
-  // Function to handle disconnect confirmation
-  const handleDisconnectPlatform = (platformId: string, platformName: string) => {
-    Alert.alert(
-      'Disconnect Platform',
-      `Are you sure you want to disconnect ${platformName}?`,
-      [
-        {
-          text: 'No',
-          style: 'cancel',
-        },
-        {
-          text: 'Yes',
-          style: 'destructive',
-          onPress: async () => {
-            try {
-              // Update local state to show disconnected
-              setConnectionStatuses(prev => ({
-                ...prev,
-                [platformId]: 'disconnected'
-              }));
-              
-              setConnections(prev => {
-                const newConnections = { ...prev };
-                delete newConnections[platformId];
-                return newConnections;
-              });
-
-              setPlatformToggles(prev => ({
-                ...prev,
-                [platformId]: false
-              }));
-
-              // Remove from storage
-              await removeConnectedPlatform(platformId);
-              
-              // Call the disconnect function from the hook
-              await disconnectPlatform();
-              
-              console.log('🔌 Disconnected platform:', platformId);
-            } catch (error) {
-              console.error('Error disconnecting platform:', error);
-            }
-          },
-        },
-      ]
-    );
-  };
-
-  // Function to start animated dots
-  const startDotsAnimation = () => {
-    if (dotsAnimationRef.current) {
-      clearInterval(dotsAnimationRef.current);
-    }
-    
-    let dotCount = 0;
-    dotsAnimationRef.current = setInterval(() => {
-      dotCount = (dotCount + 1) % 4; // 0, 1, 2, 3, then back to 0
-      if (dotCount === 0) {
-        setAnimatedDots('');
-      } else {
-        setAnimatedDots('.'.repeat(dotCount));
-      }
-    }, 500); // Change every 500ms
-  };
-
-  // Function to stop animated dots
-  const stopDotsAnimation = () => {
-    if (dotsAnimationRef.current) {
-      clearInterval(dotsAnimationRef.current);
-      dotsAnimationRef.current = null;
-    }
-    setAnimatedDots('');
-  };
-
-  // Split platforms into main and additional
-  const mainPlatforms = [
-    { id: 'pinterest', name: 'Pinterest', color: '#E60023' },
-    { id: 'youtube', name: 'YouTube', color: '#FFFFFF' },
-    { id: 'linkedin', name: 'LinkedIn', color: '#0077B5' },
-  ];
-
-  const additionalPlatforms = [
-    { id: 'reddit', name: 'Reddit', color: '#FFFFFF' },
-    { id: 'gmail', name: 'Gmail', color: '#EA4335' },
-  ];
-
-  // Keep the original platforms array for compatibility
-  const platforms = [...mainPlatforms, ...additionalPlatforms];
-
-  // const {
-  //   connectPlatform,
-  //   disconnectPlatform,
-  //   getConnectionStatus,
-  //   isConnecting,
-  // } = useConnections(); // Hook not available
-  const connectPlatform = async () => {};
-  const disconnectPlatform = async () => {};
-  const getConnectionStatus = () => 'disconnected';
-  const isConnecting = false;
-  const isConnected = () => false;
-  
-  // Track connection statuses and currently connecting platform
-  const [connectionStatuses, setConnectionStatuses] = useState<Record<string, string>>({});
-  const [connectingPlatform, setConnectingPlatform] = useState<string | null>(null);
-  
-  // Function to get the platform icon based on platform ID
-  const getPlatformIcon = (platformId: string) => {
-    switch (platformId) {
-      case 'instagram':
-        return require('../assets/icons/instagram.png');
-      case 'youtube':
-        return require('../assets/icons/YouTubeicon2.png');
-      case 'reddit':
-        return require('../assets/icons/Redditicon.png');
-      case 'pinterest':
-        return require('../assets/icons/pinterest.png');
-      case 'facebook':
-        return require('../assets/icons/Facebookicon.png');
-      case 'linkedin':
-        return require('../assets/icons/Linkedinicon.png');
-      case 'gmail':
-        return require('../assets/icons/Gmail.png');
-    }
-  };
-
-  // Track if the modal has ever been visible to prevent initial onClose call
-  const hasBeenVisibleRef = useRef(false);
-
-  useEffect(() => {
-    if (visible) {
-      hasBeenVisibleRef.current = true; // Mark that modal has been visible
-      isCompletingRef.current = false; // Reset flag when becoming visible
-      setModalVisible(true);
-      loadInitialStatus();
-      // Animate in
-      Animated.spring(slideAnim, {
-        toValue: 0,
-        friction: 8,
-        tension: 40,
-        useNativeDriver: true,
-      }).start();
-      
-      const subscription = Linking.addEventListener('url', handleUrl);
-      return () => {
-        subscription.remove();
-      };
-    } else if (hasBeenVisibleRef.current && !isCompletingRef.current) {
-      // Only animate out if NOT completing - prevents flicker during successful completion
-      Animated.timing(slideAnim, {
-        toValue: height,
-        useNativeDriver: true,
-        duration: 500, // Longer duration for a more elegant exit
-        easing: Easing.bezier(0.16, 1, 0.3, 1), // Custom bezier curve for a luxurious, smooth exit
-      }).start(() => {
-        // Use a timeout to prevent animation state updates during unmount
-        setTimeout(() => {
-          setModalVisible(false);
-          onClose(); // Call onClose from props
-        }, 16);
-      });
-    } else if (hasBeenVisibleRef.current && isCompletingRef.current) {
-      // If completing, hide modal immediately without any animation or delay
-      setModalVisible(false);
-      // Don't call onClose() when completing - let parent handle the navigation
-      isCompletingRef.current = false; // Reset for next time
-    }
-  }, [visible, onClose]); // Removed isCompleting from dependency array
-
-  // Cleanup socket connection and dots animation when component unmounts or becomes invisible
-  useEffect(() => {
-    return () => {
-      if (socketRef.current) {
-        console.log('🔌 Cleaning up socket connection...');
-        socketRef.current.disconnect();
-        socketRef.current = null;
-      }
-      stopDotsAnimation();
-    };
-  }, [visible]);
-  
-  // Set up deep link listener for OAuth callbacks
-  const handleUrl = useCallback(({url}: {url: string}) => {
-    if (isOAuthCallback(url)) {
-      handleOAuthCallback(url);
-    }
-  }, []);
-
-  // Load user data and authentication token when modal becomes visible
-  useEffect(() => {
-    const loadUserData = async () => {
-      try {
-        // Check for existing user info first
-        const existingToken = await AsyncStorage.getItem('existing_user_token');
-        const existingInfo = await AsyncStorage.getItem('existing_user_info');
-        
-        if (existingToken && existingInfo) {
-          console.log('🔍 Found existing user info - user wants to add more data');
-          setIsExistingUser(true);
-          setExistingUserToken(existingToken);
-          setExistingUserInfo(JSON.parse(existingInfo));
-          
-          // Clear the temporary storage
-          await AsyncStorage.removeItem('existing_user_token');
-          await AsyncStorage.removeItem('existing_user_info');
-        }
-
-        const token = await AsyncStorage.getItem('onairos_jwt_token') || await AsyncStorage.getItem('auth_token');
-        setUserToken(token);
-
-        if (token) {
-          // Use provided username or get stored username
-          const storedUsername = await getOnairosUsername();
-          const fallbackUsername = storedUsername || user?.email?.split('@')[0] || user?.name || 'mobile_user';
-
-          console.log('🔍 Using username for training:', fallbackUsername);
-          setUserInfo({
-            username: fallbackUsername,
-            email: user?.email || null,
-            id: null // Will be filled by backend during training
-          });
-          setUsername(fallbackUsername);
-        }
-      } catch (error) {
-        console.error('Error loading user data:', error);
-        // Fallback user info
-        const fallbackUsername = user?.email?.split('@')[0] || user?.name || 'mobile_user';
-        setUserInfo({
-          username: fallbackUsername,
-          email: user?.email || null,
-          id: null
-        });
-        setUsername(fallbackUsername);
-      }
-    };
-
-    if (visible) {
-      loadUserData();
-    }
-  }, [visible, user]);
-
-  const loadInitialStatus = async () => {
-    try {
-      // Get the stored Onairos username first
-      const storedUsername = await getOnairosUsername();
-      const fallbackUsername = user?.email || user?.name || `user_${Math.floor(Math.random() * 10000)}`;
-      const finalUsername = storedUsername || fallbackUsername;
-      
-      console.log('🔍 Loading username for data connections:', {
-        storedUsername,
-        fallbackUsername,
-        finalUsername
-      });
-      
-      setUsername(finalUsername);
-      
-      // Initialize connection statuses
-      const connectionStatus = await getConnectionStatus();
-      console.log('Initial connection status:', connectionStatus);
-      
-      // Update the main connections state
-      setConnections(connectionStatus);
-      
-      // Convert connections object to status strings
-      const statuses: Record<string, string> = {};
-      Object.keys(connectionStatus).forEach(platform => {
-        statuses[platform] = connectionStatus[platform]?.connected ? 'connected' : 'disconnected';
-      });
-      setConnectionStatuses(statuses);
-      
-      // Initialize platform toggles based on connection statuses
-      const toggles: {[key: string]: boolean} = {};
-      Object.keys(connectionStatus).forEach(platform => {
-        toggles[platform] = connectionStatus[platform]?.connected || false;
-      });
-      setPlatformToggles(toggles);
-      
-      console.log('Connection statuses set:', statuses);
-      console.log('Platform toggles set:', toggles);
-    } catch (error) {
-      console.error('Error loading initial connection status:', error);
-      // Set empty objects as fallback
-      setConnections({});
-      setConnectionStatuses({});
-      setPlatformToggles({});
-      
-      // Still set a fallback username even if other loading fails
-      const fallbackUsername = user?.email || user?.name || `user_${Math.floor(Math.random() * 10000)}`;
-      setUsername(fallbackUsername);
-    }
-  };
-
-  const handleClose = () => {
-    const currentlyCompleting = isCompletingRef.current; // Capture ref's current value
-
-    // Animate out with a luxurious, smooth motion
-    Animated.timing(slideAnim, {
-      toValue: height, // Full slide down
-      useNativeDriver: true,
-      duration: 500, // Longer duration for a more elegant exit
-      easing: Easing.bezier(0.16, 1, 0.3, 1), // Custom bezier curve for a luxurious, smooth exit
-    }).start(() => {
-      // Small delay before closing modal to ensure animation completes fully
-      setTimeout(() => {
-        setModalVisible(false);
-        if (!currentlyCompleting) { // Use the captured value
-          onClose();
-        }
-        // Do NOT reset isCompletingRef.current here. The useEffect watching props.visible is responsible for that.
-      }, 100);
-    });
-  };
-
-  const handleConnectPlatform = async (platformId: string) => {
-    // Trigger haptic feedback when connect button is pressed
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    
-    setConnectingPlatform(platformId);
-    
-    try {
-      // Check if the platform has a native SDK
-      if (hasNativeSDK(platformId)) {
-        // Use native SDK authentication
-        setCurrentPlatform(platformId);
-        const success = await initiateNativeAuth(platformId, username);
-        
-        if (success) {
-          // Update connections state
-          setConnections(prev => ({
-            ...prev,
-            [platformId]: { userName: username, connected: true }
-          }));
-          
-          // Update platform toggles
-          setPlatformToggles(prev => ({
-            ...prev,
-            [platformId]: true
-          }));
-          
-          // Update connection statuses
-          setConnectionStatuses(prev => ({
-            ...prev,
-            [platformId]: 'connected'
-          }));
-
-          // Store the connected platform
-          await storeConnectedPlatform(platformId);
-        }
-      } else {
-        // For other platforms, use the web OAuth flow
-        setCurrentPlatform(platformId);
-        const oauthUrl = await initiateOAuth(platformId, username);
-        
-        if (oauthUrl) {
-          setOauthUrl(oauthUrl);
-          setStep('oauth');
-        }
-      }
-    } catch (error) {
-      console.error(`Error connecting to ${platformId}:`, error);
-    } finally {
-      setConnectingPlatform(null);
-    }
-  };
-
-  const togglePlatform = useCallback(async (platformId: string) => {
-    // If toggling on, initiate the OAuth flow for the platform
-    if (!platformToggles[platformId]) {
-      try {
-        // Special case for Instagram which uses the existing flow
-        if (platformId === 'instagram') {
-          setPlatformToggles(prev => ({
-            ...prev,
-            [platformId]: !prev[platformId]
-          }));
-          setConnections(prev => ({
-            ...prev,
-            [platformId]: { userName: `${platformId}_user`, connected: true }
-          }));
-          // Store the connected platform
-          await storeConnectedPlatform(platformId);
-          return;
-        }
-        
-        // Check if the platform has a native SDK
-        if (hasNativeSDK(platformId)) {
-          // Use native SDK authentication
-          setCurrentPlatform(platformId);
-          const success = await initiateNativeAuth(platformId, username);
-          
-          if (success) {
-            // Update connections state
-            setConnections(prev => ({
-              ...prev,
-              [platformId]: { userName: username, connected: true }
-            }));
-            
-            // Update platform toggles
-            setPlatformToggles(prev => ({
-              ...prev,
-              [platformId]: true
-            }));
-
-            // Store the connected platform
-            await storeConnectedPlatform(platformId);
-          }
-          return;
-        }
-        
-        // For other platforms, use the web OAuth flow
-        setCurrentPlatform(platformId);
-        const oauthUrl = await initiateOAuth(platformId, username);
-        
-        // If oauthUrl is null, it means we should use native SDK (which should have been caught above)
-        if (oauthUrl) {
-          setOauthUrl(oauthUrl);
-          setStep('oauth');
-        }
-      } catch (error) {
-        console.error(`Error initiating OAuth for ${platformId}:`, error);
-        // If there's an error, don't toggle the platform
-        return;
-      }
-    } else {
-      // If toggling off, just update the state
-      setPlatformToggles(prev => ({
-        ...prev,
-        [platformId]: !prev[platformId]
-      }));
-      
-      // Remove connection
-      setConnections(prev => {
-        const newConnections = { ...prev };
-        delete newConnections[platformId];
-        return newConnections;
-      });
-    }
-  }, [platformToggles, username]);
-
-  /**
-   * Handles OAuth callback URLs
-   */
-  const handleOAuthCallback = useCallback((url: string) => {
-    try {
-      // Extract the authorization code from the URL
-      const parsedUrl = new URL(url);
-      const code = parsedUrl.searchParams.get('code');
-      const platform = parsedUrl.searchParams.get('platform') || currentPlatform;
-      
-      if (code && platform) {
-        // Update connections state
-        setConnections(prev => ({
-          ...prev,
-          [platform]: { userName: username, connected: true }
-        }));
-        
-        // Update platform toggles
-        setPlatformToggles(prev => ({
-          ...prev,
-          [platform]: true
-        }));
-        
-        // Return to the connect step
-        setStep('connect');
-      }
-    } catch (error) {
-      console.error('Error handling OAuth callback:', error);
-    }
-  }, [currentPlatform, username]);
-
-  /**
-   * Handles successful OAuth authentication from the OAuthWebView
-   */
-  const handleOAuthSuccess = useCallback(async (code: string) => {
-    console.log(`🎉 OAuth success for ${currentPlatform} - backend callback completed`);
-    console.log(`📝 Received result:`, code);
-    
-    if (currentPlatform) {
-      console.log(`✅ Updating connection state for ${currentPlatform}`);
-      
-      // Update connections state
-      setConnections(prev => ({
-        ...prev,
-        [currentPlatform]: { userName: username, connected: true }
-      }));
-      
-      // Update platform toggles
-      setPlatformToggles(prev => ({
-        ...prev,
-        [currentPlatform]: true
-      }));
-      
-      // Update connection statuses
-      setConnectionStatuses(prev => ({
-        ...prev,
-        [currentPlatform]: 'connected'
-      }));
-
-      // Store the connected platform
-      await storeConnectedPlatform(currentPlatform);
-      
-      console.log(`💾 ${currentPlatform} connection stored successfully`);
-    }
-    
-    // Close the OAuth window by returning to the connect step
-    console.log('🔄 Returning to connect step');
-    setOauthUrl('');
-    setStep('connect');
-  }, [currentPlatform, username, storeConnectedPlatform]);
-
-  const handlePinSubmit = useCallback(async (userPin: string) => {
-    setPin(userPin);
-    
-    // Store PIN temporarily for training component access
-    setTemporaryPin(userPin);
-    
-    console.log('🔐 [PIN SUBMIT] PIN submitted, checking for background training...');
-    
-    // ✅ NEW: Check if background training is already running
-    if (isBackgroundTrainingStarted && backgroundSocketId) {
-      console.log('✅ [PIN SUBMIT] Background training detected, continuing with PIN validation...');
-      
-      // Continue with existing training by sending PIN validation
-      try {
-        await continueBackgroundTrainingWithPin(userPin);
-        setStep('persona'); // Move to persona step to show training progress
-      } catch (error) {
-        console.error('❌ [PIN SUBMIT] Failed to continue background training:', error);
-        // ❌ DISABLED: Don't start new training when PIN is submitted
-        // Just show persona step with error state
-        setStep('persona');
-        setPersonaStatus('Error: Failed to continue training');
-        setHasError(true);
-      }
-    } else {
-      console.log('ℹ️ [PIN SUBMIT] No background training detected');
-      // ❌ DISABLED: Don't start training when PIN is submitted
-      // Training should only start during connector→PIN transition
-      setStep('persona');
-      setPersonaStatus('No training in progress. Please restart the flow.');
-      setHasError(true);
-    }
-    
-    console.log('🔐 [PIN SUBMIT] PIN stored securely, moved to persona step');
-  }, [isBackgroundTrainingStarted, backgroundSocketId]);
-
-  // Start real Enoch training via API (restored for backwards compatibility)
-  const startEnochTraining = async (socketId: string, authToken?: string) => {
-    try {
-      setPersonaStatus('Starting training...');
-      setPersonaProgress(15);
-
-      // Use provided token or get from AsyncStorage to avoid state timing issues
-      const token = authToken || await AsyncStorage.getItem('onairos_jwt_token') || await AsyncStorage.getItem('auth_token');
-
-      if (!token) {
-        console.error('❌ No authentication token available');
-        throw new Error('No authentication token available');
-      }
-
-      console.log('🚀 Starting Enoch training with socketId:', socketId);
-      console.log('🔑 Using auth token:', token ? `${token.substring(0, 20)}...` : 'None');
-
-      // Get stored Onairos username for API calls
-      const storedUsername = await getOnairosUsername();
-      const finalUsername = storedUsername || userInfo?.username || userInfo?.name || username || 'mobile_user';
-      
-      // Get connected platforms information
-      const connectedPlatforms = await AsyncStorage.getItem('connectedPlatforms');
-      const platformsList = connectedPlatforms ? JSON.parse(connectedPlatforms) : [];
-      
-      console.log('📱 Connected platforms for training:', platformsList);
-      
-      // Get encrypted PIN for training (if available)
-      const encryptedPin = await getEncryptedPinForAPI().catch(error => {
-        console.warn('⚠️ Could not get encrypted PIN for training:', error);
-        return null;
-      });
-
-      // Prepare user data for training - match backend expected format
-      const trainingData = {
-        socketId,
-        username: finalUsername,
-        email: userInfo?.email || null,
-        modelKey: null,
-        connectedPlatforms: platformsList,
-        platformConnections: connections,
-        ...(encryptedPin && { 
-          encryptedPin: encryptedPin,
-          hasPinData: true 
-        })
-      };
-
-      console.log('📤 Sending training data to /mobile-training/enoch:', trainingData);
-
-      // Use the new training function that includes YouTube migration check
-      const result = await startEnochTrainingWithYouTubeCheck(trainingData);
-      console.log('📡 Training API response:', result);
-
-      // Handle CONNECTIONS_REQUIRED scenario (pre-training validation)
-      if (result.requiresConnections || result.code === 'CONNECTIONS_REQUIRED') {
-        console.log('🔗 Connections required detected from HTTP response');
-        setDataScenario('CONNECTIONS_REQUIRED');
-        setDataDetails(result);
-        setShowDataWarning(true);
-        setPersonaStatus('Connections required');
-        setHasError(true);
-        stopDotsAnimation();
-        return;
-      }
-
-      if (result.success) {
-        console.log('🚀 Training Started:', result.message);
-        console.log('🎯 Training Features:', result.features);
-        
-        // Log the new features from the spec
-        if (result.features) {
-          console.log('✅ Inference enabled:', result.features.inference);
-          console.log('💾 Storage method:', result.features.storage);
-          console.log('🔒 Compression enabled:', result.features.compression);
-          console.log('🔐 Encryption enabled:', result.features.encryption);
-          console.log('📊 Training type:', result.features.type);
-          console.log('🗄️ Databases:', result.features.databases);
-          console.log('📈 Query scores enabled:', result.features.queryScores);
-        }
-        
-        setPersonaStatus('Training model...');
-        setPersonaProgress(25);
-      } else {
-        console.error('❌ Training start failed:', result.error);
-        setPersonaStatus(`Error: ${result.error || 'Training failed to start'}`);
-        setHasError(true);
-        stopDotsAnimation();
-      }
-    } catch (error) {
-      console.error('❌ Training start error:', error);
-      setPersonaStatus(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
-      setHasError(true);
-      stopDotsAnimation();
-    }
-  };
-
-  // ✅ NEW: Continue background training with PIN validation
-  const continueBackgroundTrainingWithPin = async (userPin: string) => {
-    try {
-      console.log('🔐 [BACKGROUND] Continuing existing background training with PIN validation');
-      console.log('🔑 Using auth token:', `${userToken?.substring(0, 20)}...`);
-      
-      // Check if we have a valid socket ID
-      if (!backgroundSocketId) {
-        throw new Error('No background socket ID available');
-      }
-      
-      // ❌ REMOVED: Don't send new training signal - training already started!
-      // We should just validate the PIN with the existing training, not start new training
-      
-      console.log('🔐 [BACKGROUND] PIN validation - continuing with existing training session');
-      console.log('🔌 [BACKGROUND] Using existing socket ID:', backgroundSocketId);
-      
-      // Just log that we're continuing - the existing training should handle PIN internally
-      console.log('✅ [BACKGROUND] PIN submitted for existing training session');
-      
-    } catch (error) {
-      console.error('❌ [BACKGROUND] Failed to continue background training:', error);
-      throw error;
-    }
-  };
-
-  // Replace fake persona creation with real training setup
-  const startPersonaCreation = async () => {
-    setPersonaProgress(0);
-    setPersonaStatus('Initializing');
-    setIsPersonaComplete(false);
-    setHasError(false);
-    
-    // Start the dots animation
-    startDotsAnimation();
-
-    try {
-      console.log('🚀 Starting persona creation...');
-      
-      // Ensure we have a valid authentication token before starting
-      console.log('🔐 Step 1: Ensuring authentication token...');
-      const authToken = await ensureAuthToken();
-      
-      if (!authToken) {
-        throw new Error('Failed to create or retrieve authentication token');
-      }
-      
-      // Set the token in state
-      setUserToken(authToken);
-      console.log('✅ Authentication token set in state:', `${authToken.substring(0, 20)}...`);
-      console.log('🔍 Token length:', authToken.length);
-      
-      // Also verify it was stored properly
-      const storedToken = await AsyncStorage.getItem('onairos_jwt_token');
-      console.log('🔑 Token stored verification:', storedToken ? `${storedToken.substring(0, 20)}...` : 'Not stored');
-      
-      // If userInfo is not set, try to reload it
-      if (!userInfo) {
-        console.log('🔄 UserInfo not available, attempting to reload...');
-        const storedUsername = await getOnairosUsername();
-        const fallbackUsername = storedUsername || user?.email?.split('@')[0] || user?.name || 'mobile_user';
-        
-        const newUserInfo = {
-          username: fallbackUsername,
-          email: user?.email || null,
-          id: null
-        };
-        
-        setUserInfo(newUserInfo);
-        setUsername(fallbackUsername);
-        
-        console.log('🧑‍💻 Set user info:', newUserInfo);
-        
-        // Give a moment for state to update
-        await new Promise<void>(resolve => setTimeout(() => resolve(), 200));
-      }
-      
-      // Check again after potential reload
-      const currentUserInfo = userInfo || {
-        username: username || user?.email?.split('@')[0] || user?.name || 'mobile_user',
-        email: user?.email || null,
-        id: null
-      };
-      
-      if (!authToken) {
-        console.error('❌ No authentication token available after ensureAuthToken');
-        throw new Error('No authentication token available');
-      }
-
-      console.log('🔧 Setting up socket connection for real training...');
-      console.log('🧑‍💻 User info available:', currentUserInfo);
-      console.log('🔑 Token available:', !!authToken);
-      console.log('🌐 Attempting to connect to: https://api2.onairos.uk');
-      console.log('📱 Device platform:', Platform.OS);
-      console.log('🔗 Network connectivity check starting...');
-
-      setPersonaStatus('Connecting');
-      setPersonaProgress(5);
-
-      // Initialize socket connection with enhanced configuration
-      socketRef.current = io('https://api2.onairos.uk', {
-        transports: ['websocket', 'polling'], // Add polling as fallback
-        autoConnect: false,
-        timeout: 15000, // Increase timeout to 15 seconds
-        reconnection: true, // Enable reconnection with limits
-        reconnectionAttempts: 3,
-        reconnectionDelay: 1000,
-        forceNew: true // Force a new connection
-      });
-      
-      console.log('🔌 Socket instance created:', {
-        connected: socketRef.current.connected,
-        id: socketRef.current.id,
-        disconnected: socketRef.current.disconnected
-      });
-
-      // Socket event listeners with enhanced error handling
-      socketRef.current.on('connect', () => {
-        console.log('✅ Socket connected for training');
-        console.log('🔌 Socket connection details:', {
-          id: socketRef.current?.id,
-          connected: socketRef.current?.connected,
-          transport: socketRef.current?.io?.engine?.transport?.name
-        });
-        
-        setSocketConnected(true);
-        setPersonaStatus('Starting training');
-        setPersonaProgress(10);
-        
-        const socketId = socketRef.current?.id;
-        console.log('🔌 Socket ID for training:', socketId);
-        
-        if (socketId) {
-          // Add a small delay to ensure socket is fully ready and registered on backend
-          console.log('🔄 Socket ready for persona display with token:', authToken ? `${authToken.substring(0, 20)}...` : 'None');
-          console.log('⏰ Socket registered but training will not start from persona screen...');
-          // ❌ DISABLED: Don't start training from persona screen
-          // Training should only start during connector→PIN transition
-          // setTimeout(() => {
-          //   console.log('🚀 Now starting training with socket ID:', socketId);
-          //   startEnochTraining(socketId, authToken);
-          // }, 2000);
-          
-          // Just show the persona screen without starting training
-          setPersonaStatus('Waiting for training to start from connector→PIN transition');
-        } else {
-          console.error('❌ No socket ID available after connection');
-          setPersonaStatus('Connection error. Please try again.');
-          setHasError(true);
-          stopDotsAnimation();
-        }
-      });
-
-      socketRef.current.on('disconnect', (reason) => {
-        console.log('❌ Socket disconnected, reason:', reason);
-        console.log('🔍 Disconnect details:', {
-          reason: reason,
-          wasConnected: socketConnected,
-          socketId: socketRef.current?.id
-        });
-        setSocketConnected(false);
-      });
-      
-      socketRef.current.on('reconnect', (attemptNumber) => {
-        console.log('🔄 Socket reconnected after', attemptNumber, 'attempts');
-        setSocketConnected(true);
-      });
-      
-      socketRef.current.on('reconnect_attempt', (attemptNumber) => {
-        console.log('🔄 Socket reconnection attempt:', attemptNumber);
-        setPersonaStatus(`Reconnecting... (${attemptNumber}/3)`);
-      });
-      
-      socketRef.current.on('reconnect_error', (error) => {
-        console.error('❌ Socket reconnection error:', error);
-      });
-      
-      socketRef.current.on('reconnect_failed', () => {
-        console.error('❌ Socket reconnection failed after all attempts');
-        setPersonaStatus('Connection failed. Please try again.');
-        setHasError(true);
-        stopDotsAnimation();
-      });
-
-      socketRef.current.on('connect_error', (error) => {
-        console.error('❌ Socket connection error:', error);
-        console.error('❌ Socket error details:', {
-          message: error.message,
-          name: error.name,
-          stack: error.stack,
-          errorObject: error
-        });
-        setPersonaStatus('Connection error. Please try again.');
-        setHasError(true);
-        stopDotsAnimation();
-      });
-
-      socketRef.current.on('trainingCompleted', (data) => {
-        console.log('✅ Training Complete:', data);
-        setPersonaStatus('Running test inference');
-        setPersonaProgress(60);
-      });
-
-      socketRef.current.on('inferenceCompleted', (data) => {
-        console.log('🧠 Inference Complete:', data);
-        setPersonaStatus('Uploading to S3');
-        setPersonaProgress(80);
-        setUserTraits(data.traits);
-        setInferenceResults(data.inferenceResults);
-      });
-
-      socketRef.current.on('modelStandby', (data) => {
-        console.log('🎉 All Complete:', data);
-        
-        // Log completion details based on new spec
-        if (data.completed) {
-          console.log('✅ Training completed:', data.message);
-          console.log('💾 Storage method:', data.storage);
-          console.log('🔐 Encryption enabled:', data.encryption);
-          console.log('🧠 Inference enabled:', data.inference);
-          
-          // Log database info for Enoch mode
-          if (data.databases && Array.isArray(data.databases)) {
-            console.log('🗄️ Databases used:', data.databases.join(', '));
-          }
-          
-          // Log testing mode
-          if (data.testing) {
-            console.log('🧪 Testing mode enabled');
-          }
-        }
-        
-        setIsPersonaComplete(true);
-        setPersonaStatus('Complete!');
-        setPersonaProgress(100);
-        stopDotsAnimation();
-      });
-
-      socketRef.current.on('trainingUpdate', (data) => {
-        console.log('📊 Training update:', data);
-        
-        // Handle YouTube token expiry
-        if (data.error && data.error.includes('YouTube access token has expired')) {
-          console.log('🔄 YouTube token expired, triggering reconnection...');
-          setDataScenario(null);
-          setShowDataWarning(false);
-          setPersonaStatus('YouTube token expired - reconnecting...');
-          
-          // Try to refresh tokens first before full reconnection
-          setTimeout(async () => {
-            try {
-              // Import the refresh function
-              const { refreshYouTubeTokens } = await import('../services/platformAuthService');
-              
-              console.log('🔄 Attempting to refresh YouTube tokens...');
-              const refreshSuccess = await refreshYouTubeTokens();
-              
-              if (refreshSuccess) {
-                console.log('✅ YouTube tokens refreshed, but training restart disabled');
-                setPersonaStatus('YouTube tokens refreshed - but training only starts from connector→PIN');
-                
-                // ❌ DISABLED: Don't restart training from persona screen
-                // Training should only start during connector→PIN transition
-                // if (socketRef.current?.id) {
-                //   startEnochTraining(socketRef.current.id, userToken ?? undefined);
-                // }
-                
-                setHasError(true); // Show error so user can restart flow properly
-              } else {
-                console.log('❌ Token refresh failed, attempting full reconnection...');
-                setPersonaStatus('Token refresh failed - please restart from connector screen');
-                
-                // ❌ DISABLED: Don't restart training from persona screen
-                // Fall back to full reconnection
-                try {
-                  await handleConnectPlatform('youtube');
-                  console.log('✅ YouTube reconnected, but training restart disabled');
-                  setPersonaStatus('YouTube reconnected - please restart from connector screen');
-                  
-                  // ❌ DISABLED: Don't restart training from persona screen
-                  // Training should only start during connector→PIN transition
-                  // if (socketRef.current?.id) {
-                  //   startEnochTraining(socketRef.current.id, userToken ?? undefined);
-                  // }
-                  
-                  setHasError(true); // Show error so user can restart flow properly
-                } catch (reconnectError) {
-                  console.error('❌ YouTube reconnection failed:', reconnectError);
-                  setPersonaStatus('YouTube reconnection failed. Please restart from connector screen.');
-                  setHasError(true);
-                  stopDotsAnimation();
-                }
-              }
-            } catch (error) {
-              console.error('❌ YouTube token refresh/reconnection error:', error);
-              setPersonaStatus('YouTube connection failed. Please try again.');
-              setHasError(true);
-              stopDotsAnimation();
-            }
-          }, 1000);
-          return;
-        }
-        
-        // Handle connections required scenario (pre-training validation)
-        if (data.requiresConnections || data.code === 'CONNECTIONS_REQUIRED') {
-          console.log('🔗 Connections required detected from socket');
-          setDataScenario('CONNECTIONS_REQUIRED');
-          setDataDetails(data);
-          setShowDataWarning(true);
-          setPersonaStatus('Connections required');
-          setHasError(true);
-          stopDotsAnimation();
-          return;
-        }
-        
-        // Handle data scenario responses
-        if (data.code === 'NO_DATA') {
-          console.log('🚫 No data scenario detected');
-          setDataScenario('NO_DATA');
-          setDataDetails(data.details);
-          setShowDataWarning(true);
-          setPersonaStatus('No interaction data found');
-          setHasError(true);
-          stopDotsAnimation();
-          return;
-        }
-        
-        if (data.code === 'LIMITED_DATA') {
-          console.log('ℹ️ Limited data scenario detected');
-          setDataScenario('LIMITED_DATA');
-          setDataDetails(data.details);
-          setShowDataWarning(true);
-          setPersonaStatus('Creating your persona with available data');
-          // Don't set hasError - training continues
-          return;
-        }
-        
-        // Handle regular training updates
-        if (data.error) {
-          console.error('❌ Training update error:', data.error);
-          setPersonaStatus(`Error: ${data.error}`);
-          setHasError(true);
-          stopDotsAnimation();
-        } else if (data.progress) {
-          setPersonaProgress(data.progress);
-          setPersonaStatus(data.status || 'Training in progress');
-          // Clear data warning if training progresses normally
-          if (showDataWarning && data.progress > 30) {
-            setShowDataWarning(false);
-          }
-        }
-      });
-
-      // Connect to socket with timeout
-      console.log('🔌 Attempting to connect to socket...');
-      console.log('🔌 Socket config:', {
-        url: 'https://api2.onairos.uk',
-        transports: ['websocket'],
-        autoConnect: false,
-        timeout: 10000,
-        reconnection: false
-      });
-      socketRef.current.connect();
-      console.log('🔌 Socket connect() called - waiting for connection...');
-      
-      // Add immediate state check
-      setTimeout(() => {
-        console.log('🔍 Socket state after 1 second:', {
-          connected: socketRef.current?.connected,
-          disconnected: socketRef.current?.disconnected,
-          id: socketRef.current?.id,
-          engineConnected: socketRef.current?.io?.engine?.readyState
-        });
-      }, 1000);
-      
-      setTimeout(() => {
-        console.log('🔍 Socket state after 5 seconds:', {
-          connected: socketRef.current?.connected,
-          disconnected: socketRef.current?.disconnected,
-          id: socketRef.current?.id,
-          engineConnected: socketRef.current?.io?.engine?.readyState
-        });
-      }, 5000);
-      
-      // Set a timeout for socket connection with enhanced fallback
-      setTimeout(() => {
-        if (!socketConnected && socketRef.current && !socketRef.current.connected) {
-          console.error('❌ Socket connection timeout after 20 seconds');
-          console.error('🔍 Socket state:', {
-            connected: socketRef.current.connected,
-            disconnected: socketRef.current.disconnected,
-            id: socketRef.current.id
-          });
-          
-          setPersonaStatus('Connection timeout. Please check your internet and try again.');
-          setHasError(true);
-          stopDotsAnimation();
-          
-          // Cleanup socket
-          if (socketRef.current) {
-            socketRef.current.disconnect();
-            socketRef.current = null;
-          }
-        }
-      }, 20000); // Increased timeout to 20 seconds
-      
-    } catch (error) {
-      console.error('❌ Error in startPersonaCreation:', error);
-      setPersonaStatus('Failed to initialize training. Please try again.');
-      setHasError(true);
-      stopDotsAnimation();
-    }
-  };
-
-  // Get user-friendly status message based on progress (updated for real training)
-  const getPersonaStatusMessage = (progress: number) => {
-    if (hasError) return 'Something went wrong. Please try again.';
-    if (isPersonaComplete) return 'Your persona is ready! 🎉';
-
-    let baseMessage = '';
-    if (progress < 20) {
-      baseMessage = 'Keeping your data private';
-    } else if (progress < 40) {
-      baseMessage = 'Trying to understand your mind';
-    } else if (progress < 60) {
-      baseMessage = 'You\'re more interesting than I expected';
-    } else if (progress < 80) {
-      baseMessage = 'Finalizing your unique persona';
-    } else if (progress < 95) {
-      baseMessage = 'Almost done';
-    } else {
-      baseMessage = 'Just a few more seconds';
-    }
-
-    return baseMessage + animatedDots;
-  };
-
-  // Handle persona completion - now continues the onboarding flow instead of going to separate training
-  const handlePersonaComplete = async () => {
-    console.log('🎉 Real persona creation completed successfully');
-    // Cleanup socket connection
-    if (socketRef.current) {
-      console.log('🔌 Disconnecting training socket...');
-      socketRef.current.disconnect();
-      socketRef.current = null;
-    }
-    // Clear temporary PIN since training is complete
-    clearTemporaryPin();
-    // Set the completion flag BEFORE calling onComplete
-    isCompletingRef.current = true;
-    
-    // Get the real authentication token instead of using placeholder
-    try {
-      const realToken = await AsyncStorage.getItem('onairos_jwt_token') || 
-                       await AsyncStorage.getItem('enoch_token') || 
-                       await AsyncStorage.getItem('auth_token');
-      
-      if (realToken) {
-        console.log('✅ Using real authentication token for onComplete:', `${realToken.substring(0, 30)}...`);
-        // Call onComplete with the REAL token that was created during ensureAuthToken
-        onComplete?.('https://api2.onairos.uk', realToken, { email: userInfo?.email || '', ...userInfo });
-      } else {
-        console.error('❌ No real authentication token found after training completion');
-        // Fallback to placeholder token if no real token exists
-        onComplete?.('https://api2.onairos.uk', 'training-complete-token', { email: userInfo?.email || '', ...userInfo });
-      }
-    } catch (error) {
-      console.error('❌ Error retrieving real token for onComplete:', error);
-      // Fallback to placeholder token on error
-      onComplete?.('https://api2.onairos.uk', 'training-complete-token', { email: userInfo?.email || '', ...userInfo });
-    }
-  };
-
-  // Ensure authentication token exists before training
-  const ensureAuthToken = async () => {
-    try {
-      // Check if we already have an authentication token (prioritize Enoch-specific tokens)
-      let existingToken = await AsyncStorage.getItem('onairos_jwt_token') || 
-                          await AsyncStorage.getItem('enoch_token') || 
-                          await AsyncStorage.getItem('auth_token');
-      
-      if (existingToken && existingToken.trim().length > 20) {
-        console.log('✅ Authentication token already exists:', `${existingToken.substring(0, 20)}...`);
-        console.log('🔍 Token length:', existingToken.length);
-        console.log('🔍 Token format check:', existingToken.includes('.') ? 'Looks like JWT' : 'Not JWT format');
-        return existingToken;
-      }
-
-      console.log('🔐 Creating Enoch authentication token for universal onboarding...');
-      
-      // Create user accounts and get proper Enoch token
-      const fallbackEmail = user?.email || `${username || 'user'}@onairos.temp`;
-      const fallbackUsername = username || user?.name?.split('@')[0] || 'mobile_user';
-      
-      console.log('🔐 Using credentials:', { email: fallbackEmail, username: fallbackUsername });
-      
-      // Step 1: Create Enoch user first
-      console.log('🔐 Step 1: Creating Enoch user...');
-      try {
-        const enochRegisterResponse = await fetch('https://api2.onairos.uk/enoch/users/register', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            email: fallbackEmail,
-            name: fallbackUsername,
-            photoUrl: ''
-          })
-        });
-        
-        console.log('📡 Enoch register response status:', enochRegisterResponse.status);
-        const enochResponseData = await enochRegisterResponse.json();
-        console.log('🔗 Enoch user creation response:', enochResponseData);
-      } catch (enochError) {
-        console.warn('⚠️ Enoch user creation failed (continuing):', enochError);
-      }
-      
-      // Step 2: Create Onairos account to get JWT token (this is the critical step)
-      console.log('🔐 Step 2: Creating Onairos account...');
-      const onairosSignupResponse = await fetch('https://api2.onairos.uk/register/enoch', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          email: fallbackEmail,
-          username: fallbackUsername,
-          name: fallbackUsername
-        })
-      });
-      
-      console.log('📡 Onairos register response status:', onairosSignupResponse.status);
-      
-      if (!onairosSignupResponse.ok) {
-        const errorText = await onairosSignupResponse.text();
-        console.error('❌ Onairos signup failed:', errorText);
-        throw new Error(`Onairos signup failed: ${onairosSignupResponse.status} ${errorText}`);
-      }
-      
-      const onairosResponseData = await onairosSignupResponse.json();
-      console.log('🔗 Onairos account creation response:', onairosResponseData);
-      
-      // Extract the token from the response
-      let authToken = null;
-      if (onairosResponseData.token) {
-        authToken = onairosResponseData.token;
-      } else if (onairosResponseData.data?.token) {
-        authToken = onairosResponseData.data.token;
-      } else if (onairosResponseData.jwt) {
-        authToken = onairosResponseData.jwt;
-      }
-      
-      if (!authToken) {
-        console.error('❌ No token found in response:', onairosResponseData);
-        throw new Error('No authentication token returned from server');
-      }
-      
-      // Validate the token format
-      if (typeof authToken !== 'string' || authToken.length < 20) {
-        console.error('❌ Invalid token format:', authToken);
-        throw new Error('Invalid token format received');
-      }
-      
-      // Check if it looks like a JWT
-      const jwtParts = authToken.split('.');
-      if (jwtParts.length !== 3) {
-        console.warn('⚠️ Token does not appear to be a valid JWT:', `${authToken.substring(0, 20)}...`);
-      } else {
-        console.log('✅ Token appears to be a valid JWT format');
-      }
-      
-      // Store the token in multiple locations for maximum compatibility
-      await AsyncStorage.setItem('onairos_jwt_token', authToken);
-      await AsyncStorage.setItem('auth_token', authToken);
-      await AsyncStorage.setItem('enoch_token', authToken);
-      await AsyncStorage.setItem('onairos_username', onairosResponseData.username || fallbackUsername);
-      
-      console.log('✅ Successfully stored authentication tokens');
-      console.log('🔑 Token preview:', `${authToken.substring(0, 20)}...`);
-      console.log('🔑 Token length:', authToken.length);
-      console.log('👤 Username stored:', onairosResponseData.username || fallbackUsername);
-      
-      return authToken;
-      
-    } catch (error) {
-      console.error('❌ Error ensuring authentication token:', error);
-      throw error;
-    }
-  };
-
-  const canProceed = Object.values(platformToggles).some(value => value);
-
-  const handleProceed = () => {
-    if (canProceed) {
-      // Trigger haptic feedback when continue button is pressed
-      triggerHaptic(HapticType.BUTTON_PRESS);
-      
-      // ✅ NEW: Start background training when transitioning from connectors to PIN screen
-      console.log('🚀 [TRANSITION] Starting background training during connect → pin transition');
-      startBackgroundTraining().catch(error => {
-        console.error('❌ [TRANSITION] Background training failed during transition:', error);
-        // Continue to PIN screen even if training fails
-      });
-      
-      setStep('pin');
-    }
-  };
-
-  const handleReviewerBypass = () => {
-    console.log('Reviewer bypass activated');
-    
-    // Set the completion flag BEFORE calling onComplete
-    isCompletingRef.current = true;
-    
-    // Call onComplete with a special reviewer token that the parent can recognize
-    onComplete?.('https://api2.onairos.uk', 'reviewer-bypass-token', { email: 'reviewer@apple.com' });
-  };
-
-  // Removed navigation dependency for SDK compatibility
-
-  // Training is now handled by the TrainingModal component
-
-  // ✅ NEW: Background training function - starts when PIN screen appears
-  const startBackgroundTraining = useCallback(async (): Promise<void> => {
-    try {
-      console.log('🚀 [BACKGROUND] Starting background training optimization...');
-      setBackgroundTrainingProgress('Connecting...');
-      
-      // Step 1: Ensure authentication token exists
-      const authToken = await ensureAuthToken();
-      if (!authToken) {
-        throw new Error('Failed to create authentication token for background training');
-      }
-      
-      console.log('✅ [BACKGROUND] Auth token ready:', `${authToken.substring(0, 20)}...`);
-      setUserToken(authToken);
-      
-      // Step 2: Set up user info if not available
-      if (!userInfo) {
-        const storedUsername = await getOnairosUsername();
-        const fallbackUsername = storedUsername || user?.email?.split('@')[0] || user?.name || 'mobile_user';
-        
-        const newUserInfo = {
-          username: fallbackUsername,
-          email: user?.email || null,
-          id: null
-        };
-        
-        setUserInfo(newUserInfo);
-        setUsername(fallbackUsername);
-        console.log('🧑‍💻 [BACKGROUND] User info set:', newUserInfo);
-      }
-      
-      // Step 3: Initialize socket connection for background training
-      console.log('🔌 [BACKGROUND] Setting up socket for background training...');
-      setBackgroundTrainingProgress('Initializing data collection...');
-      
-      const backgroundSocket = io('https://api2.onairos.uk', {
-        transports: ['websocket', 'polling'],
-        autoConnect: false,
-        timeout: 15000,
-        reconnection: true,
-        reconnectionAttempts: 3,
-        reconnectionDelay: 1000,
-        forceNew: true
-      });
-      
-      // Set up socket event listeners for background training
-      backgroundSocket.on('connect', async () => {
-        console.log('✅ [BACKGROUND] Socket connected, starting background data collection...');
-        const socketId = backgroundSocket.id;
-        setBackgroundSocketId(socketId || null);
-        setBackgroundTrainingProgress('Collecting your data...');
-        
-        if (socketId) {
-          // Step 4: Start background training WITHOUT PIN (per backend instructions)
-          await startBackgroundEnochTraining(socketId, authToken);
-        }
-      });
-      
-      backgroundSocket.on('trainingUpdate', (data) => {
-        if (data.progress) {
-          setBackgroundTrainingProgress(data.status || 'Processing...');
-          console.log('📊 [BACKGROUND] Training progress:', data.progress, '%');
-        }
-      });
-      
-      backgroundSocket.on('disconnect', () => {
-        console.log('❌ [BACKGROUND] Socket disconnected');
-      });
-      
-      // Store socket reference for later use
-      socketRef.current = backgroundSocket;
-      
-      // Connect the socket to start background training
-      backgroundSocket.connect();
-      
-      console.log('✅ [BACKGROUND] Background training initiated successfully');
-      
-    } catch (error) {
-      console.error('❌ [BACKGROUND] Background training failed:', error);
-      setBackgroundTrainingProgress('');
-      throw error;
-    }
-  }, [userInfo, username, user]);
-
-  // ✅ NEW: Background training API call - starts data collection without PIN
-  const startBackgroundEnochTraining = async (socketId: string, authToken: string) => {
-    try {
-      console.log('🚀 [BACKGROUND] Starting background training with socketId:', socketId);
-      console.log('🔑 Using auth token:', `${authToken.substring(0, 20)}...`);
-      
-      // Prepare background training data
-      const backgroundData = {
-        socketId,
-        username: userInfo?.username || userInfo?.name || username || 'mobile_user',
-        email: userInfo?.email || null,
-        modelKey: null,
-        connectedPlatforms: [], // No connected platforms for background training
-        platformConnections: {}, // No platform connections for background training
-        // No encrypted PIN for background training
-      };
-      
-      console.log('📤 Sending background training data to /mobile-training/enoch:', backgroundData);
-      
-      // Use the new training function that includes YouTube migration check
-      const backgroundResult = await startEnochTrainingWithYouTubeCheck(backgroundData);
-      console.log('📡 Background training API response:', backgroundResult);
-      
-      // Handle CONNECTIONS_REQUIRED scenario (pre-training validation)
-      if (backgroundResult.requiresConnections || backgroundResult.code === 'CONNECTIONS_REQUIRED') {
-        console.log('🔗 Connections required detected from background training');
-        setDataScenario('CONNECTIONS_REQUIRED');
-        setDataDetails(backgroundResult);
-        setShowDataWarning(true);
-        setPersonaStatus('Connections required');
-        setHasError(true);
-        stopDotsAnimation();
-        return;
-      }
-      
-      if (backgroundResult.success) {
-        console.log('🚀 Background training started:', backgroundResult.message);
-        console.log('🎯 Background training Features:', backgroundResult.features);
-        
-        // ✅ CRITICAL: Set background training started flag
-        setIsBackgroundTrainingStarted(true);
-        
-        // Log the new features from the spec
-        if (backgroundResult.features) {
-          console.log('✅ Inference enabled:', backgroundResult.features.inference);
-          console.log('💾 Storage method:', backgroundResult.features.storage);
-          console.log('🔒 Compression enabled:', backgroundResult.features.compression);
-          console.log('🔐 Encryption enabled:', backgroundResult.features.encryption);
-          console.log('📊 Training type:', backgroundResult.features.type);
-          console.log('🗄️ Databases:', backgroundResult.features.databases);
-          console.log('📈 Query scores enabled:', backgroundResult.features.queryScores);
-        }
-        
-        setPersonaStatus('Background training model...');
-        setPersonaProgress(25);
-      } else {
-        console.error('❌ Background training start failed:', backgroundResult.error);
-        setPersonaStatus(`Error: ${backgroundResult.error || 'Background training failed to start'}`);
-        setHasError(true);
-        stopDotsAnimation();
-      }
-    } catch (error) {
-      console.error('❌ Background training start error:', error);
-      setPersonaStatus(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
-      setHasError(true);
-      stopDotsAnimation();
-    }
-  };
-
-  return (
-    <Modal
-      transparent={true}
-      visible={modalVisible}
-      animationType="none"
-      onRequestClose={handleClose}
-    >
-      <View style={styles.modalOverlay}>
-        <Animated.View
-          style={[
-            styles.bottomSheet,
-            { transform: [{ translateY: slideAnim }] },
-          ]}
-        >
-          <SafeAreaView style={styles.container}>
-            <View style={styles.handleContainer}>
-              <TouchableOpacity onPress={handleClose} style={styles.handleButton}>
-                <View style={styles.handle} />
-              </TouchableOpacity>
-            </View>
-            
-            {step === 'connect' && (
-              <View style={styles.connectContainer}>
-                <View style={styles.header}>
-                  <View style={styles.headerContent}>
-                    <View style={styles.appIcon}>
-                      <Text style={styles.appIconText}>O</Text>
-                    </View>
-                    <Text style={styles.arrow}>→</Text>
-                    <View style={styles.onairosIcon}>
-                      <Image 
-                        source={require('../assets/images/Enochicon1.png')} 
-                        style={styles.onairosIconImage} 
-                        resizeMode="contain"
-                      />
-                    </View>
-                  </View>
-                  <View style={styles.titleContainer}>
-                    <Text style={styles.mainTitle}>
-                      {isExistingUser ? 'Add More Data to Enoch' : 'Connect your platforms to Enoch via Onairos'}
-                    </Text>
-                    <Text style={styles.privacyMessage}>
-                      {isExistingUser 
-                        ? 'Connect additional accounts to enhance your digital personality. Your privacy is ensured.'
-                        : 'Connect one account to get started. Each additional connection improves your match quality. Your privacy is ensured.'
-                      }{' '}
-                      <Text 
-                        style={styles.privacyLink}
-                        onPress={() => setStep('privacy')}
-                      >
-                        How it's used →
-                      </Text>
-                    </Text>
-                    
-                    {/* Existing User Info Banner */}
-                    {isExistingUser && existingUserInfo && (
-                      <View style={styles.existingUserBanner}>
-                        <Text style={styles.existingUserText}>
-                          ✅ You already have {existingUserInfo.existingUserData?.summary?.connectionsCount || 0} connections
-                        </Text>
-                        <Text style={styles.existingUserSubtext}>
-                          Add more platforms to get even better insights
-                        </Text>
-                      </View>
-                    )}
-                    {connectionStatuses['linkedin'] === 'connected' && 
-                     Object.values(connectionStatuses).filter(status => status === 'connected').length === 1 && (
-                      <View style={styles.linkedinRequirementContainer}>
-                        <Text style={styles.linkedinRequirementText}>
-                          <Text style={styles.linkedinRequirementAsterisk}>*</Text>
-                          <Text style={styles.linkedinRequirementMessage}> LinkedIn requires pairing with an additional platform for optimal results</Text>
-                        </Text>
-                      </View>
-                    )}
-                  </View>
-                </View>
-                
-                <View
-                  style={{
-                    height: 1,
-                    backgroundColor: '#CCCCCC',
-                    width: '100%',
-                    marginVertical: 0,
-                  }}
-                />
-
-                <ScrollView 
-                  ref={scrollViewRef}
-                  style={styles.platformsScrollView}
-                  contentContainerStyle={styles.platformsScrollContent}
-                  showsVerticalScrollIndicator={true}
-                  bounces={true}
-                  alwaysBounceVertical={true}
-                  indicatorStyle="black"
-                  scrollEventThrottle={16}
-                  directionalLockEnabled={true}
-                  keyboardShouldPersistTaps="handled"
-                  decelerationRate="normal"
-                  contentOffset={{ x: 0, y: 60 }}
-                >
-                  <View style={styles.platformsContainer}>
-                    {primaryAuthOnly ? (
-                      // Only show email option when primaryAuthOnly is true
-                      <View style={styles.platformItem}>
-                        <View style={styles.platformInfo}>
-                          <View style={[styles.platformIcon, { backgroundColor: '#4285F4' }]}>
-                            <Text style={styles.platformIconText}>@</Text>
-                          </View>
-                          <Text style={styles.platformName}>Email</Text>
-                        </View>
-                        
-                        <TouchableOpacity 
-                          onPress={async () => {
-                            // Trigger haptic feedback when sign in button is pressed
-                            triggerHaptic(HapticType.BUTTON_PRESS);
-                            
-                            // Mark email as connected for primaryAuth flow
-                            setConnections(prev => ({
-                              ...prev,
-                              email: { userName: email || 'user@example.com', connected: true }
-                            }));
-                            setConnectionStatuses(prev => ({
-                              ...prev,
-                              email: 'connected'
-                            }));
-                            setPlatformToggles(prev => ({
-                              ...prev,
-                              email: true
-                            }));
-
-                            // Store the connected platform
-                            await storeConnectedPlatform('email');
-                            
-                            setStep('connections');
-                          }}
-                          style={[
-                            styles.footerButtonConfirm, 
-                            { paddingVertical: 8, paddingHorizontal: 16 }
-                          ]}
-                        >
-                          <Text style={styles.footerButtonTextConfirm}>
-                            Sign in
-                          </Text>
-                        </TouchableOpacity>
-                      </View>
-                    ) : (
-                      // Show main platforms first
-                      <>
-                        {mainPlatforms.map(platform => {
-                          const isConnected = connectionStatuses[platform.id] === 'connected';
-                          const isPlatformConnecting = connectingPlatform === platform.id;
-                          
-                          return (
-                            <View key={platform.id} style={styles.platformItem}>
-                              <View style={styles.platformInfo}>
-                                {platform.id === 'linkedin' ? (
-                                  // Use square container for LinkedIn
-                                  <View style={[styles.linkedinPlatformIcon, { backgroundColor: platform.color }]}>
-                                    <Image 
-                                      source={getPlatformIcon(platform.id)}
-                                      style={styles.platformIconImage}
-                                      resizeMode="contain"
-                                    />
-                                  </View>
-                                ) : platform.id === 'pinterest' ? (
-                                  // Use smaller circular container for Pinterest
-                                  <View style={[styles.pinterestPlatformIcon, { backgroundColor: platform.color }]}>
-                                    <Image 
-                                      source={getPlatformIcon(platform.id)}
-                                      style={styles.pinterestIconImage}
-                                      resizeMode="contain"
-                                    />
-                                  </View>
-                                ) : (
-                                  <View style={[styles.platformIcon, { backgroundColor: platform.color }]}>
-                                    <Image 
-                                      source={getPlatformIcon(platform.id)}
-                                      style={
-                                        platform.id === 'youtube' ? styles.youtubeIconImage : 
-                                        styles.platformIconImage
-                                      }
-                                      resizeMode="contain"
-                                    />
-                                  </View>
-                                )}
-                                <Text style={styles.platformName}>
-                                  {platform.name}
-                                  {platform.id === 'linkedin' && connectionStatuses['linkedin'] === 'connected' && 
-                                   Object.values(connectionStatuses).filter(status => status === 'connected').length === 1 && <Text style={styles.asterisk}>*</Text>}
-                                </Text>
-                              </View>
-                              
-                              <TouchableOpacity 
-                                onPress={() => {
-                                  if (isConnected) {
-                                    // Handle disconnect
-                                    handleDisconnectPlatform(platform.id, platform.name);
-                                  } else {
-                                    // Handle connect
-                                    handleConnectPlatform(platform.id);
-                                  }
-                                }}
-                                onLongPress={platform.id === 'youtube' ? () => {
-                                  // Start a timer for haptic feedback at 2 seconds
-                                  const hapticTimer = setTimeout(() => {
-                                    // Provide haptic feedback
-                                    Vibration.vibrate(100);
-                                  }, 2000);
-                                  
-                                  // Start a timer for 4 seconds for the bypass
-                                  const bypassTimer = setTimeout(() => {
-                                    handleReviewerBypass();
-                                  }, 4000);
-                                  
-                                  // Store the timer
-                                  setLongPressTimer(bypassTimer);
-                                } : undefined}
-                                onPressOut={platform.id === 'youtube' ? () => {
-                                  // Clear the timer if the press is released before 4 seconds
-                                  if (longPressTimer) {
-                                    clearTimeout(longPressTimer);
-                                    setLongPressTimer(null);
-                                  }
-                                } : undefined}
-                                style={[
-                                  isConnected ? styles.footerButtonConnected : styles.footerButtonConfirm, 
-                                  { paddingVertical: 8, paddingHorizontal: 16 }
-                                ]}
-                                disabled={isPlatformConnecting}
-                              >
-                                {isPlatformConnecting ? (
-                                  <ActivityIndicator size="small" color="#fff" />
-                                ) : (
-                                  <Text style={isConnected ? styles.footerButtonTextConnected : styles.footerButtonTextConfirm}>
-                                    {isConnected ? 'Connected' : 'Connect'}
-                                  </Text>
-                                )}
-                              </TouchableOpacity>
-                            </View>
-                          );
-                        })}
-
-                        {/* Add additional platforms toggle button */}
-                        <TouchableOpacity 
-                          style={styles.additionalPlatformsToggle}
-                          onPress={() => {
-                            triggerHaptic(HapticType.BUTTON_PRESS);
-                            const newShowState = !showAdditionalPlatforms;
-                            
-                            if (newShowState) {
-                              // Expanding - show platforms first, then animate in and scroll
-                              setShowAdditionalPlatforms(true);
-                              Animated.timing(additionalPlatformsOpacity, {
-                                toValue: 1,
-                                duration: 300,
-                                useNativeDriver: true,
-                              }).start();
-                              
-                              // Auto-scroll to reveal additional platforms when expanding
-                              setTimeout(() => {
-                                scrollViewRef.current?.scrollTo({
-                                  y: 220, // Scroll down to reveal additional platforms and hint at Gmail
-                                  animated: true,
-                                });
-                              }, 100);
-                            } else {
-                              // Collapsing - animate out first, then hide platforms and scroll back up
-                              Animated.timing(additionalPlatformsOpacity, {
-                                toValue: 0,
-                                duration: 300,
-                                useNativeDriver: true,
-                              }).start(() => {
-                                setShowAdditionalPlatforms(false);
-                              });
-                              
-                              // Scroll back up smoothly when collapsing
-                              setTimeout(() => {
-                                scrollViewRef.current?.scrollTo({
-                                  y: 0, // Scroll back to top
-                                  animated: true,
-                                });
-                              }, 100);
-                            }
-                          }}
-                        >
-                          <Text style={styles.additionalPlatformsText}>
-                            {showAdditionalPlatforms ? '− Hide additional platforms' : '+ Add additional platforms'}
-                          </Text>
-                        </TouchableOpacity>
-
-                        {/* Show additional platforms when expanded */}
-                        {showAdditionalPlatforms && (
-                          <Animated.View style={{ opacity: additionalPlatformsOpacity }}>
-                            {additionalPlatforms.map(platform => {
-                          const isConnected = connectionStatuses[platform.id] === 'connected';
-                          const isPlatformConnecting = connectingPlatform === platform.id;
-                          
-                          return (
-                            <View key={platform.id} style={styles.platformItem}>
-                              <View style={styles.platformInfo}>
-                                {platform.id === 'gmail' ? (
-                                  // Use the same wrapper for size/centering, but transparent background
-                                  <View style={[styles.platformIcon, { backgroundColor: 'transparent' }]}>
-                                    <Image
-                                      source={getPlatformIcon(platform.id)}
-                                      style={styles.gmailIconImage}
-                                      resizeMode="contain"
-                                    />
-                                  </View>
-                                ) : (
-                                  <View style={[styles.platformIcon, { backgroundColor: platform.color }]}>
-                                    <Image 
-                                      source={getPlatformIcon(platform.id)}
-                                      style={
-                                        platform.id === 'reddit' ? styles.redditIconImage : 
-                                        styles.platformIconImage
-                                      }
-                                      resizeMode="contain"
-                                    />
-                                  </View>
-                                )}
-                                <Text style={styles.platformName}>{platform.name}</Text>
-                              </View>
-                              
-                              <TouchableOpacity 
-                                onPress={() => {
-                                  if (isConnected) {
-                                    // Handle disconnect
-                                    handleDisconnectPlatform(platform.id, platform.name);
-                                  } else {
-                                    // Handle connect
-                                    handleConnectPlatform(platform.id);
-                                  }
-                                }}
-                                style={[
-                                  isConnected ? styles.footerButtonConnected : styles.footerButtonConfirm, 
-                                  { paddingVertical: 8, paddingHorizontal: 16 }
-                                ]}
-                                disabled={isPlatformConnecting}
-                              >
-                                {isPlatformConnecting ? (
-                                  <ActivityIndicator size="small" color="#fff" />
-                                ) : (
-                                  <Text style={isConnected ? styles.footerButtonTextConnected : styles.footerButtonTextConfirm}>
-                                    {isConnected ? 'Connected' : 'Connect'}
-                                  </Text>
-                                )}
-                              </TouchableOpacity>
-                            </View>
-                          );
-                        })}
-                          </Animated.View>
-                        )}
-                      </>
-                    )}
-                  </View>
-                </ScrollView>
-                
-                <View style={styles.footer}>
-                  <TouchableOpacity
-                    style={styles.footerButtonCancel}
-                    onPress={handleClose}
-                  >
-                    <Text style={styles.footerButtonText}>Cancel</Text>
-                  </TouchableOpacity>
-                  
-                  <TouchableOpacity
-                    style={[
-                      styles.footerButtonConfirm,
-                      !canProceed && styles.footerButtonDisabled,
-                    ]}
-                    onPress={handleProceed}
-                    disabled={!canProceed}
-                  >
-                    <Text style={styles.footerButtonTextConfirm}>Continue</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-            )}
-
-                            {step === 'pin' && (
-                  <PinInput
-                    onSubmit={handlePinSubmit}
-                    minLength={8}
-                    requireSpecialChar
-                    requireNumber
-                    onBack={() => setStep('connect')}
-                    enableBiometricStorage={true}
-                    // ✅ REMOVED: Background training now starts during transition, not on component mount
-                    // onBackgroundTrainingStart={startBackgroundTraining}
-                    showBackgroundProgress={true}
-                    backgroundProgressText={backgroundTrainingProgress || "Training is starting in the background..."}
-                  />
-                )}
-
-            {step === 'persona' && (
-              <View style={styles.personaContainer}>
-                <View style={styles.personaHeaderWithBack}>
-                  <TouchableOpacity 
-                    style={[
-                      styles.personaBackButton,
-                      // Highlight the back button when there's insufficient data
-                      (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') && styles.highlightedBackButton
-                    ]} 
-                    onPress={() => setStep('connect')} // Changed from 'pin' to 'connect' to go back to platform connections
-                  >
-                    <Text style={[
-                      { fontSize: 24 },
-                      // Make the arrow more prominent when insufficient data
-                      (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') && styles.highlightedBackArrow
-                    ]}>←</Text>
-                  </TouchableOpacity>
-                  <Text style={styles.personaTitle}>
-                    {isPersonaComplete ? 'Your persona is ready! 🎉' : 'Creating your persona'}
-                  </Text>
-                </View>
-                <Text style={styles.personaSubtitle}>
-                  {isPersonaComplete 
-                    ? 'We\'ve created a personalized experience just for you.'
-                    : 'This will only take a moment. We\'re personalizing your experience.'
-                  }
-                </Text>
-                
-                <View style={styles.personaProgressContainer}>
-                  <View style={styles.personaProgressBar}>
-                    <View 
-                      style={[
-                        styles.personaProgressFill, 
-                        { width: `${personaProgress}%` },
-                        hasError && styles.progressError
-                      ]} 
-                    />
-                </View>
-                  <Text style={styles.personaProgressText}>{Math.round(personaProgress)}%</Text>
-                  {!isPersonaComplete && (
-                    <Text style={styles.personaStatusText}>{getPersonaStatusMessage(personaProgress)}</Text>
-                  )}
-                </View>
-
-                {/* Data Warning Component */}
-                {showDataWarning && dataScenario && (
-                  <View style={[
-                    styles.dataWarningContainer,
-                    (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? styles.dataConnectionsRequired : styles.dataInfoContainer
-                  ]}>
-                    <View style={styles.dataWarningHeader}>
-                      <Text style={styles.dataWarningIcon}>
-                        {(dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? '‼️' : 'ℹ️'}
-                      </Text>
-                      <Text style={[
-                        styles.dataWarningTitle,
-                        { color: (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? '#000000' : '#0369A1' }
-                      ]}>
-                        {dataScenario === 'CONNECTIONS_REQUIRED'
-                          ? 'Not enough data to personalize your experience'
-                          : dataScenario === 'NO_DATA' 
-                            ? 'Not enough data to personalize your experience' 
-                            : 'Working with your available data'
-                        }
-                      </Text>
-                    </View>
-                    
-                    <Text style={[
-                      styles.dataWarningMessage,
-                      { color: (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? '#374151' : '#0C4A6E' }
-                    ]}>
-                      {dataScenario === 'CONNECTIONS_REQUIRED'
-                        ? 'To provide the best experience possible, please go back and add an additional platform.'
-                        : dataScenario === 'NO_DATA' 
-                          ? 'To provide the best experience possible, please go back and add an additional platform.'
-                          : 'We\'re building your persona with the information currently available.'
-                      }
-                    </Text>
-                    
-                    {/* Add back button call-to-action for NO_DATA and CONNECTIONS_REQUIRED scenarios */}
-                    {(dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') && (
-                      <TouchableOpacity 
-                        style={styles.goBackButton}
-                        onPress={() => setStep('connect')}
-                        activeOpacity={0.8}
-                      >
-                        <Text style={styles.goBackButtonText}>← Add another platform</Text>
-                      </TouchableOpacity>
-                    )}
-                    
-                    {dataDetails?.suggestions && dataScenario !== 'NO_DATA' && (
-                      <View style={[
-                        styles.dataWarningSuggestions,
-                        { borderTopColor: 'rgba(3, 105, 161, 0.2)' }
-                      ]}>
-                        <Text style={[
-                          styles.dataWarningSuggestionsTitle,
-                          { color: '#0369A1' }
-                        ]}>
-                          For higher model quality:
-                        </Text>
-                        {dataDetails.suggestions.slice(0, 2).map((suggestion: string, index: number) => {
-                          // Override specific suggestions with new text
-                          let displayText = suggestion;
-                          if (suggestion.toLowerCase().includes('better model quality') || 
-                              suggestion.toLowerCase().includes('interact with more content')) {
-                            displayText = 'Connect additional platforms';
-                          } else if (suggestion.toLowerCase().includes('like/dislike more videos') || 
-                                     suggestion.toLowerCase().includes('posts, or content')) {
-                            displayText = 'Interact and generate more content (like/dislike more videos, etc.)';
-                          }
-                          
-                          return (
-                            <Text key={index} style={[
-                              styles.dataWarningSuggestionItem,
-                              { color: '#0C4A6E' }
-                            ]}>
-                              • {displayText}
-                            </Text>
-                          );
-                        })}
-                      </View>
-                    )}
-                    
-                    {dataScenario === 'LIMITED_DATA' && (
-                      <Text style={[
-                        styles.dataWarningContinueNote,
-                        { color: '#0369A1' }
-                      ]}>
-                        
-                      </Text>
-                    )}
-                  </View>
-                )}
-
-                {/* YouTube Reconnection Indicator */}
-                {personaStatus.includes('YouTube token expired') && (
-                  <View style={[styles.dataWarningContainer, styles.dataInfoContainer]}>
-                    <View style={styles.dataWarningHeader}>
-                      <Text style={styles.dataWarningIcon}>🔄</Text>
-                      <Text style={[styles.dataWarningTitle, { color: '#0369A1' }]}>
-                        Refreshing YouTube connection
-                      </Text>
-                    </View>
-                    <Text style={[styles.dataWarningMessage, { color: '#0C4A6E' }]}>
-                      Your YouTube access expired. We're automatically reconnecting...
-                    </Text>
-                  </View>
-                )}
-
-                {isPersonaComplete && (
-                  <View style={styles.personaCompleteContainer}>
-                    <TouchableOpacity
-                      style={styles.personaContinueButton}
-                      onPress={() => {
-                        console.log('🎯 Continue button pressed - completing onboarding');
-                        handlePersonaComplete();
-                      }}
-                      activeOpacity={0.8}
-                    >
-                      <Text style={styles.personaContinueButtonText}>Continue</Text>
-                    </TouchableOpacity>
-                  </View>
-                )}
-
-                {hasError && !isPersonaComplete && !showDataWarning && (
-                  <View style={styles.personaCompleteContainer}>
-                    <Text style={styles.personaCompleteTitle}>Something went wrong</Text>
-                    <Text style={styles.personaCompleteSubtitle}>
-                      Please try again or contact support if the issue persists.
-                    </Text>
-                    <TouchableOpacity
-                      style={[styles.personaContinueButton, { backgroundColor: '#FF3B30' }]}
-                      onPress={() => {
-                        console.log('🔄 Retry button pressed - redirecting to connector screen');
-                        setHasError(false);
-                        // ❌ DISABLED: Don't start new training on retry
-                        // Training should only start during connector→PIN transition
-                        // startPersonaCreation();
-                        
-                        // Instead, go back to connector screen so user can restart proper flow
-                        setStep('connect');
-                        setPersonaStatus('Initializing');
-                        setPersonaProgress(0);
-                      }}
-                      activeOpacity={0.8}
-                    >
-                      <Text style={styles.personaContinueButtonText}>Restart</Text>
-                    </TouchableOpacity>
-                  </View>
-                )}
-              </View>
-            )}
-
-
-            
-            {step === 'oauth' && oauthUrl && (
-              <View style={{ marginTop: -17 }}>
-                <OAuthWebView
-                  url={oauthUrl}
-                  platform={currentPlatform}
-                  onClose={() => {
-                    setStep('connect');
-                    setOauthUrl('');
-                  }}
-                  onSuccess={handleOAuthSuccess}
-                  onComplete={() => setStep('connect')}
-                />
-              </View>
-            )}
-            
-            {step === 'privacy' && (
-              <View style={styles.modalContent}>
-                <View style={styles.privacyHeader}>
-                  <TouchableOpacity 
-                    style={styles.backButton} 
-                    onPress={() => setStep('connect')}
-                  >
-                    <Text style={styles.backButtonText}>←</Text>
-                  </TouchableOpacity>
-                  <Text style={styles.headerTitle}>How Enoch uses personal data</Text>
-                  <View style={styles.backButtonSpacer} />
-                </View>
-                
-                <View style={styles.privacyDetailsContainer}>
-                  <Text style={styles.privacyDetailsTitle}></Text>
-                  
-                  <View style={styles.privacyBulletPoint}>
-                    <Text style={styles.bulletPoint}>•</Text>
-                    <Text style={styles.privacyBulletText}>
-                      Enoch legally accesses your platform data with explicit permission for this event only - never stored post-session and auto-deleted.
-                    </Text>
-                  </View>
-                  
-                  <View style={styles.privacyBulletPoint}>
-                    <Text style={styles.bulletPoint}>•</Text>
-                    <Text style={styles.privacyBulletText}>
-                      Enoch NEVER sells your data. You are a user, not a commodity.
-                    </Text>
-                  </View>
-                  
-                  <View style={styles.privacyBulletPoint}>
-                    <Text style={styles.bulletPoint}>•</Text>
-                    <Text style={styles.privacyBulletText}>
-                      Data collected builds your Onairos persona, enabling personalized experiences across future products while prioritizing your data sovereignty.
-                    </Text>
-                  </View>
-                </View>
-                
-                <TouchableOpacity 
-                  style={styles.footerButtonConfirm}
-                  onPress={() => {
-                    triggerHaptic(HapticType.BUTTON_PRESS);
-                    setStep('connect');
-                  }}
-                >
-                  <Text style={styles.footerButtonTextConfirm}>Got it</Text>
-                </TouchableOpacity>
-              </View>
-            )}
-
-            {step === 'connections' && (
-              <View style={styles.modalContent}>
-                <View style={styles.privacyHeader}>
-                  <TouchableOpacity 
-                    style={styles.backButton} 
-                    onPress={() => setStep(primaryAuthOnly ? 'connections' : 'connect')}
-                  >
-                    <Text style={styles.backButtonText}>←</Text>
-                  </TouchableOpacity>
-                  <Text style={styles.headerTitle}>Connections Found</Text>
-                  <View style={styles.backButtonSpacer} />
-                </View>
-                
-                <View style={styles.privacyDetailsContainer}>
-                  <Text style={styles.connectionsCountText}>
-                    We found {connectionsCount} potential connections for you!
-                  </Text>
-                  
-                  <View style={styles.privacyBulletPoint}>
-                    <Text style={styles.bulletPoint}>•</Text>
-                    <Text style={styles.privacyBulletText}>
-                      Continue to see your personalized matches
-                    </Text>
-                  </View>
-                  
-                  <View style={styles.privacyBulletPoint}>
-                    <Text style={styles.bulletPoint}>•</Text>
-                    <Text style={styles.privacyBulletText}>
-                      Your privacy is protected - we only show compatible profiles
-                    </Text>
-                  </View>
-                  
-                  <View style={styles.privacyBulletPoint}>
-                    <Text style={styles.bulletPoint}>•</Text>
-                    <Text style={styles.privacyBulletText}>
-                      Ready to start building meaningful connections?
-                    </Text>
-                  </View>
-                </View>
-                
-                <TouchableOpacity 
-                  style={styles.footerButtonConfirm}
-                  onPress={async () => {
-                    triggerHaptic(HapticType.BUTTON_PRESS);
-                    // Complete the onboarding flow
-                    isCompletingRef.current = true;
-                    
-                    // Check if this is an existing user adding more data
-                    if (isExistingUser && existingUserToken) {
-                      console.log('🔑 EXISTING USER: UniversalOnboarding complete, returning existing user token:', `${existingUserToken.substring(0, 20)}...`);
-                      onComplete?.('https://api2.onairos.uk', existingUserToken, { email: userInfo?.email || '', ...userInfo });
-                    } else {
-                      // For new users, retrieve the stored JWT token from TrainingModal
-                      const storedToken = await AsyncStorage.getItem('onairos_jwt_token') || 
-                                        await AsyncStorage.getItem('auth_token') || 
-                                        await AsyncStorage.getItem('enoch_token');
-                      
-                      const storedEmail = await AsyncStorage.getItem('user_email');
-                      
-                      if (storedToken) {
-                        console.log('🔑 NEW USER: UniversalOnboarding complete, returning stored JWT token:', `${storedToken.substring(0, 20)}...`);
-                        onComplete?.('https://api2.onairos.uk', storedToken, { email: storedEmail || userInfo?.email || '', ...userInfo });
-                      } else {
-                        console.warn('⚠️ NEW USER: No stored JWT token found, using fallback');
-                        onComplete?.('https://api2.onairos.uk', 'connections-complete-token', { email: userInfo?.email || '', ...userInfo });
-                      }
-                    }
-                  }}
-                >
-                  <Text style={styles.footerButtonTextConfirm}>Continue to Setup</Text>
-                </TouchableOpacity>
-              </View>
-            )}
-          </SafeAreaView>
-        </Animated.View>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  bottomSheet: {
-    backgroundColor: '#FFFFFF',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    paddingTop: 8,
-    paddingBottom: Platform.OS === 'ios' ? 20 : 0,
-    minHeight: height * .86,
-    width: '100%',
-  },
-  container: {
-    flex: 1,
-  },
-  handleContainer: {
-    alignItems: 'center',
-    paddingVertical: 8,
-  },
-  handleButton: {
-    padding: 10,
-    width: 60,
-  },
-  handle: {
-    width: 40,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: '#E0E0E0',
-  },
-  header: {
-    alignItems: 'center',
-    marginBottom: 20,
-    paddingHorizontal: 24,
-  },
-  headerContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 24,
-  },
-  appIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  appIconText: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-  },
-  arrow: {
-    marginHorizontal: 16,
-    fontSize: 24,
-    color: '#666',
-  },
-  onairosIcon: {
-    width: 54,
-    height: 54,
-    borderRadius: 32,
-    backgroundColor: 'transparent',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  onairosIconText: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#fff',
-  },
-  onairosIconImage: {
-    width: 54,
-    height: 54,
-  },
-  titleContainer: {
-    alignItems: 'center',
-  },
-  mainTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#333',
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  privacyMessage: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 20,
-  },
-  privacyLink: {
-    color: '#000000',
-    fontWeight: '600',
-    textDecorationLine: 'underline',
-  },
-  boldText: {
-    fontWeight: 'bold',
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 24,
-  },
-  platformsScrollView: {
-    flex: 1,
-    width: '100%',
-  },
-  platformsScrollContent: {
-    paddingBottom: 0,
-    paddingHorizontal: 24,
-  },
-  platformsContainer: {
-    marginTop: 16,
-  },
-  platformItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    paddingHorizontal: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5',
-  },
-  platformInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  platformIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  platformIconText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#333',
-    textAlign: 'center',
-    textAlignVertical: 'center',
-  },
-  platformIconImage: {
-    width: 24,
-    height: 24,
-  },
-  youtubeIconImage: {
-    width: 58,
-    height: 58,
-  },
-  redditIconImage: {
-    width: 34,
-    height: 34,
-  },
-  pinterestIconImage: {
-    width: 48,
-    height: 48,
-  },
-  gmailIconImage: {
-    width: 32,
-    height: 32,
-  },
-  linkedinPlatformIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 8,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  pinterestPlatformIcon: {
-    width: 34,
-    height: 34,
-    borderRadius: 17,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  platformName: {
-    fontSize: 16,
-    color: '#333',
-    textAlignVertical: 'center',
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 24,
-    borderTopWidth: 1,
-    borderTopColor: '#E5E5E5',
-  },
-  footerButtonCancel: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  footerButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  footerButtonConfirm: {
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    backgroundColor: '#000000',
-    borderRadius: 8,
-    marginTop: 20,
-  },
-  footerButtonConnected: {
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    backgroundColor: '#E9C46A',
-    borderRadius: 8,
-  },
-  footerButtonDisabled: {
-    backgroundColor: '#E5E5E5',
-  },
-  footerButtonTextConfirm: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  footerButtonTextConnected: {
-    color: '#000',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  connectContainer: {
-    flex: 1,
-  },
-  modalContent: {
-    flex: 1,
-    backgroundColor: '#FFFFFF',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    padding: 24,
-  },
-  backButton: {
-    padding: 8,
-    width: 40,
-  },
-  backButtonText: {
-    fontSize: 24,
-    color: '#000000',
-  },
-  backButtonSpacer: {
-    width: 40,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-    textAlign: 'center',
-  },
-  privacyHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 20,
-    backgroundColor: '#FFFFFF',
-    borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
-  },
-  privacyDetailsContainer: {
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    flex: 1,
-    marginTop: 20,
-  },
-  privacyDetailsTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 0,
-  },
-  privacyBulletPoint: {
-    flexDirection: 'row',
-    marginBottom: 16,
-    alignItems: 'flex-start',
-  },
-  bulletPoint: {
-    fontSize: 18,
-    marginRight: 8,
-    color: '#333',
-  },
-  privacyBulletText: {
-    fontSize: 16,
-    color: '#333',
-    flex: 1,
-    lineHeight: 24,
-  },
-  connectionsCountText: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 24,
-  },
-  personaContainer: {
-    flex: 1,
-    padding: 16,
-    backgroundColor: '#fff',
-    justifyContent: 'flex-start',
-  },
-  personaHeaderWithBack: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-    paddingVertical: 8,
-  },
-  personaBackButton: {
-    padding: 8,
-  },
-  personaHeader: {
-    alignItems: 'center',
-    marginBottom: 32,
-    paddingHorizontal: 24,
-  },
-  personaTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#333',
-    textAlign: 'center',
-    flex: 1,
-    marginBottom: 8,
-  },
-  personaSubtitle: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 24,
-    textAlign: 'center',
-  },
-  personaProgressContainer: {
-    marginBottom: 24,
-    paddingHorizontal: 0,
-  },
-  personaProgressBar: {
-    height: 8,
-    backgroundColor: '#F5F5F5',
-    borderRadius: 4,
-    overflow: 'hidden',
-    marginBottom: 12,
-  },
-  personaProgressFill: {
-    height: '100%',
-    backgroundColor: '#1BA9D4',
-    borderRadius: 4,
-  },
-  personaProgressText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#333',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  personaStatusText: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-  },
-  personaCompleteContainer: {
-    alignItems: 'center',
-    paddingHorizontal: 0,
-  },
-  personaCompleteTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  personaCompleteSubtitle: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 40,
-  },
-  personaContinueButton: {
-    backgroundColor: '#000000',
-    paddingVertical: 16,
-    paddingHorizontal: 48,
-    borderRadius: 16,
-    alignItems: 'center',
-    width: '100%',
-    marginTop: 32,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  personaContinueButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  progressError: {
-    backgroundColor: '#FF3B30',
-  },
-  dataWarningContainer: {
-    padding: 16,
-    borderRadius: 12,
-    marginTop: 16,
-    borderWidth: 1,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  dataWarningHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  dataWarningIcon: {
-    fontSize: 20,
-    marginRight: 8,
-  },
-  dataWarningTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    flex: 1,
-  },
-  dataWarningMessage: {
-    fontSize: 14,
-    marginBottom: 0,
-    lineHeight: 20,
-  },
-  dataWarningSuggestions: {
-    marginTop: 12,
-    paddingTop: 12,
-    borderTopWidth: 1,
-  },
-  dataWarningSuggestionsTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginBottom: 6,
-  },
-  dataWarningSuggestionItem: {
-    fontSize: 13,
-    marginBottom: 4,
-    lineHeight: 18,
-  },
-  dataWarningContinueNote: {
-    fontSize: 13,
-    fontWeight: '500',
-    marginTop: 12,
-    fontStyle: 'italic',
-  },
-  dataWarningError: {
-    backgroundColor: '#FFF5F5',
-    borderColor: '#FEB2B2',
-  },
-  dataInfoContainer: {
-    backgroundColor: '#F0F9FF',
-    borderColor: '#BAE6FD',
-  },
-  dataConnectionsRequired: {
-    backgroundColor: '#F5F5F5',
-    borderColor: '#D1D5DB',
-    shadowColor: '#6B7280',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-  },
-  highlightedBackButton: {
-    backgroundColor: '#F5F5F5',
-    borderRadius: 20,
-    borderWidth: 2,
-    borderColor: '#000000',
-    shadowColor: '#000000',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  highlightedBackArrow: {
-    color: '#000000',
-    fontWeight: 'bold',
-  },
-  goBackButton: {
-    backgroundColor: '#000000',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    marginTop: 12,
-    alignItems: 'center',
-    shadowColor: '#000000',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.3,
-    shadowRadius: 6,
-    elevation: 3,
-  },
-  goBackButtonText: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  additionalPlatformsToggle: {
-    paddingVertical: 16,
-    paddingHorizontal: 8,
-    alignItems: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5',
-  },
-  additionalPlatformsText: {
-    fontSize: 14,
-    color: '#666',
-    fontWeight: '500',
-  },
-  asterisk: {
-    color: '#FF6B6B',
-    fontSize: 16,
-    fontWeight: 'bold',
-    marginLeft: 2,
-  },
-
-  linkedinRequirementContainer: {
-    backgroundColor: '#F8F9FA',
-    borderWidth: 1,
-    borderColor: '#E5E7EB',
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    marginTop: 8,
-    marginHorizontal: 4,
-  },
-  linkedinRequirementText: {
-    fontSize: 12,
-    fontStyle: 'italic',
-    textAlign: 'center',
-  },
-  linkedinRequirementAsterisk: {
-    color: '#FF6B6B',
-    fontWeight: 'bold',
-  },
-  linkedinRequirementMessage: {
-    color: '#6B7280',
-  },
-  existingUserBanner: {
-    backgroundColor: '#F0F9FF',
-    borderWidth: 1,
-    borderColor: '#0EA5E9',
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    marginTop: 12,
-  },
-  existingUserText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#0369A1',
-    marginBottom: 4,
-  },
-  existingUserSubtext: {
-    fontSize: 12,
-    color: '#0C4A6E',
-    lineHeight: 16,
-  },
-});
+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,
+  },
+});