@onairos/react-native 3.1.16 → 3.1.18

package/src/components/TrainingModal.tsx

@@ -1,1047 +1,1047 @@
-import React, { useState, useEffect, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  TouchableOpacity,
-  ActivityIndicator,
-  Dimensions,
-  TextInput,
-  Keyboard,
-  Alert,
-  Animated,
-  Easing,
-  Platform,
-  KeyboardAvoidingView,
-  Modal,
-  TouchableWithoutFeedback
-} from 'react-native';
-import { io, Socket } from 'socket.io-client';
-import { getAuthToken, getUserProfile, saveEnochToken, getOnairosUsername } from '../services/authService';
-import LinearGradient from 'react-native-linear-gradient';
-import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-import { getEncryptedPinForAPI } from '../services/pinEncryptionService';
-import { clearTemporaryPin } from '../services/pinStorageUtils';
-// import EmailVerification from '../../../components/EmailVerification'; // Commented out - file doesn't exist
-// import { sendEmailVerificationCode } from '../../../services/api'; // Commented out - use local API instead
-import { startEnochTrainingWithYouTubeCheck } from '../services/mobileTrainingService';
-import { ExistingUserDataConfirmation } from './ExistingUserDataConfirmation';
-
-const { width, height } = Dimensions.get('window');
-
-export interface TrainingModalProps {
-  visible: boolean;
-  progress?: number;
-  eta?: string;
-  onCancel: () => void;
-  onComplete?: (emailOrToken: string) => void;
-  modelKey?: string;
-  username?: string;
-  isPrimaryAuth?: boolean;
-  autoFocusEmailInput?: boolean; // Add new prop
-  navigation?: any;
-}
-
-export const TrainingModal: React.FC<TrainingModalProps> = ({
-  visible,
-  onCancel,
-  onComplete,
-  modelKey,
-  username,
-  isPrimaryAuth = false,
-  autoFocusEmailInput = false, // Add default value
-  navigation,
-}) => {
-  const [progress, setProgress] = useState(0);
-  const [email, setEmail] = useState('');
-  const [emailError, setEmailError] = useState('');
-  const [isTrainingComplete, setIsTrainingComplete] = useState(false);
-  const [isSubmittingEmail, setIsSubmittingEmail] = useState(false);
-  const [socketConnected, setSocketConnected] = useState(false);
-  const [trainingStatus, setTrainingStatus] = useState('Initializing...');
-  const [hasError, setHasError] = useState(false);
-  const [userTraits, setUserTraits] = useState(null);
-  const [inferenceResults, setInferenceResults] = useState(null);
-  const socketRef = useRef<Socket | null>(null);
-  const emailInputRef = useRef<TextInput>(null); // Add email input ref
-  const [userToken, setUserToken] = useState<string | null>(null);
-  const [userInfo, setUserInfo] = useState<any>(null);
-  const [matchStep, setMatchStep] = useState<'email' | 'verification' | 'searching' | 'found' | 'existing_user'>('email');
-  const [matchCount, setMatchCount] = useState(0);
-  const [isContinueLoading, setIsContinueLoading] = useState(false);
-  const [existingUserAccountInfo, setExistingUserAccountInfo] = useState<any>(null);
-
-  // --- Modal slide animation ---
-  const modalTranslateY = useRef(new Animated.Value(height)).current;
-  const animationDuration = 300; // Increased duration for smoother animation
-
-  // Reset state when modal becomes invisible
-  useEffect(() => {
-    if (!visible) {
-      // Reset all state
-      setEmail('');
-      setEmailError('');
-      setIsSubmittingEmail(false);
-      setMatchStep('email');
-      setMatchCount(0);
-      setIsContinueLoading(false);
-      setProgress(0);
-      setIsTrainingComplete(false);
-      setHasError(false);
-      setTrainingStatus('Initializing...');
-      setUserTraits(null);
-      setInferenceResults(null);
-      setUserToken(null);
-      setUserInfo(null);
-      
-      // Reset animation value
-      modalTranslateY.setValue(height);
-    }
-  }, [visible]);
-
-  // Handle animation
-  useEffect(() => {
-    if (visible) {
-      // Ensure we start from the bottom
-      modalTranslateY.setValue(height);
-      // Animate up
-      Animated.spring(modalTranslateY, {
-        toValue: 0,
-        useNativeDriver: true,
-        damping: 20,
-        mass: 1,
-        stiffness: 200,
-      }).start();
-    }
-  }, [visible]);
-
-  // Handle modal close
-  const handleModalClose = () => {
-    Animated.spring(modalTranslateY, {
-      toValue: height,
-      useNativeDriver: true,
-      damping: 20,
-      mass: 1,
-      stiffness: 200,
-    }).start(() => {
-      onCancel();
-    });
-  };
-
-  // Get auth token and user info on mount
-  useEffect(() => {
-    const loadUserData = async () => {
-      try {
-        const token = await getAuthToken();
-        setUserToken(token);
-
-        if (token) {
-          // Use provided username instead of making API call to avoid 404 error
-          // The backend JWT contains username but /api/user/profile endpoint doesn't exist
-          const fallbackUsername = username || 'mobile_user';
-
-          console.log('🔍 Using provided username for training:', fallbackUsername);
-          setUserInfo({
-            username: fallbackUsername,
-            email: null,
-            id: null // Will be filled by backend during training
-          });
-        }
-      } catch (error) {
-        console.error('Error loading user data:', error);
-        // Fallback user info
-        setUserInfo({
-          username: username || 'mobile_user',
-          email: null,
-          id: null
-        });
-      }
-    };
-
-    if (visible) {
-      loadUserData();
-    }
-  }, [visible, username]);
-
-  // Start Enoch training via API
-  const startEnochTraining = async (socketId: string) => {
-    try {
-      setTrainingStatus('Starting training...');
-      setProgress(10);
-
-      if (!userToken) {
-        throw new Error('No authentication token available');
-      }
-
-      console.log('🚀 Starting Enoch training with socketId:', socketId);
-
-      // 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, // This will be used as fallback in backend
-        email: userInfo?.email || null, // Backend will use this if available
-        modelKey: modelKey || null,
-        connectedPlatforms: platformsList, // Include connected platforms
-        // Include encrypted PIN if available
-        ...(encryptedPin && { 
-          encryptedPin: encryptedPin,
-          hasPinData: true 
-        })
-      };
-
-      console.log('📤 Starting training with YouTube migration check:', trainingData);
-      console.log('🔑 Using stored username:', storedUsername);
-      console.log('🔑 Final username for training:', finalUsername);
-      console.log('🔗 Connected platforms:', platformsList);
-      console.log('🔐 PIN included in training:', !!encryptedPin);
-
-      // Use the new training function that includes YouTube migration check
-      const result = await startEnochTrainingWithYouTubeCheck(trainingData);
-
-      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);
-        }
-        
-        setTrainingStatus('Training model...');
-        setProgress(20);
-      } else {
-        console.error('Training start failed:', result.error);
-        setTrainingStatus(`Error: ${result.error}`);
-        setHasError(true);
-      }
-    } catch (error) {
-      console.error('Training start error:', error);
-      setTrainingStatus(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
-      setHasError(true);
-    }
-  };
-
-  // Setup socket connection and training
-  useEffect(() => {
-    if (!visible || !userToken || !userInfo) return;
-
-    console.log('Setting up socket connection for training...');
-    console.log('🧑‍💻 User info available:', userInfo);
-
-    // Initialize socket connection
-    socketRef.current = io('https://api2.onairos.uk', {
-      transports: ['websocket'],
-      autoConnect: false
-    });
-
-    // Socket event listeners
-    socketRef.current.on('connect', () => {
-      console.log('✅ Socket connected for training');
-      setSocketConnected(true);
-      const socketId = socketRef.current?.id;
-      if (socketId) {
-        // ❌ DISABLED: This was causing training to start too early (when modal opens)
-        // Training should only start when transitioning from connectors to PIN screen
-        // startEnochTraining(socketId);
-        console.log('🔌 Socket ready, but training will start only when user transitions to PIN screen');
-      }
-    });
-
-    socketRef.current.on('disconnect', () => {
-      console.log('❌ Socket disconnected');
-      setSocketConnected(false);
-    });
-
-    socketRef.current.on('trainingCompleted', (data) => {
-      console.log('✅ Training Complete:', data);
-      setTrainingStatus('Running test inference...');
-      setProgress(60);
-    });
-
-    socketRef.current.on('inferenceCompleted', (data) => {
-      console.log('🧠 Inference Complete:', data);
-      setTrainingStatus('Uploading to S3...');
-      setProgress(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');
-        }
-      }
-      
-      setIsTrainingComplete(true);
-      setTrainingStatus('Complete!');
-      setProgress(100);
-      
-      // Clear temporary PIN after training is complete
-      clearTemporaryPin();
-      
-      // Show continue button for primary auth when training is complete
-      if (isPrimaryAuth) {
-        setMatchStep('found');
-        setMatchCount(Math.floor(Math.random() * 10) + 5);
-      }
-    });
-
-    socketRef.current.on('trainingUpdate', (data) => {
-      if (data.error) {
-        console.error('Training update error:', data.error);
-        setTrainingStatus(`Error: ${data.error}`);
-        setHasError(true);
-      } else if (data.progress) {
-        setProgress(data.progress);
-        setTrainingStatus(data.status || 'Training in progress...');
-      }
-    });
-
-    // Connect to socket
-    socketRef.current.connect();
-
-    // Cleanup function
-    return () => {
-      if (socketRef.current) {
-        console.log('🔌 Disconnecting training socket...');
-        socketRef.current.disconnect();
-        socketRef.current = null;
-      }
-    };
-  }, [visible, userToken, userInfo]);
-
-  // When modal becomes visible and autoFocus is requested, focus the email input
-  useEffect(() => {
-    if (visible && autoFocusEmailInput && matchStep === 'email' && emailInputRef.current) {
-      const timer = setTimeout(() => {
-        emailInputRef.current?.focus();
-      }, 150); // Small delay to sync with modal animation
-      return () => clearTimeout(timer);
-    } else if (!visible && emailInputRef.current) {
-      // Optional: Blur input when modal is not visible
-      // emailInputRef.current?.blur(); 
-    }
-  }, [visible, autoFocusEmailInput, matchStep]);
-
-  // Validate email format
-  const validateEmail = (email: string) => {
-    // Check for reviewer bypass first
-    if (email.toLowerCase().trim() === 'reviewer') {
-      return true; // Valid for reviewer bypass
-    }
-    
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
-
-  const handleEmailSubmit = async () => {
-    // Check for reviewer bypass
-    if (email.toLowerCase().trim() === 'reviewer') {
-      console.log('🔍 Reviewer bypass detected');
-      setEmail('reviewer@bypass.com'); // Set a valid email for the flow
-      if (onComplete) {
-        onComplete('reviewer@bypass.com');
-      }
-      return;
-    }
-
-    // Regular email validation and submission
-    if (!validateEmail(email)) {
-      setEmailError('Please enter a valid email address');
-      return;
-    }
-
-    setIsSubmittingEmail(true);
-    setEmailError('');
-
-    try {
-      console.log('📧 Sending verification code to:', email);
-      
-      // Send verification code using the new API
-      // const result = await sendEmailVerificationCode(email); // Function not available
-      const result = { success: true, message: 'Email verification not implemented' };
-      
-      if (result.success) {
-        console.log('✅ Verification code sent successfully');
-        setMatchStep('verification'); // Move to verification step
-      } else {
-        console.log('❌ Failed to send verification code:', result.message);
-        setEmailError(result.message || 'Failed to send verification code. Please try again.');
-      }
-    } catch (error) {
-      console.error('❌ Error sending verification code:', error);
-      setEmailError('Network error. Please check your connection and try again.');
-    } finally {
-      setIsSubmittingEmail(false);
-    }
-  };
-
-  const handleVerificationComplete = async (verifiedEmail: string, isVerified: boolean, accountInfo?: any) => {
-    if (isVerified) {
-      console.log('✅ Email verification completed for:', verifiedEmail);
-      console.log('🔍 AccountInfo received:', accountInfo);
-      console.log('🔍 ExistingUser flag:', accountInfo?.existingUser);
-      
-      // Check if this is an existing user - must have accountInfo AND explicitly marked as existing
-      if (accountInfo && accountInfo.existingUser === true) {
-        console.log('🔍 Existing user detected:', accountInfo);
-        
-        // CRITICAL FIX: Ensure we have a valid JWT token before proceeding
-        if (accountInfo.token && typeof accountInfo.token === 'string' && accountInfo.token.length > 50) {
-          console.log('✅ Valid JWT token found for existing user');
-          
-          // Store the token immediately for existing users
-          await AsyncStorage.setItem('onairos_jwt_token', accountInfo.token);
-          await AsyncStorage.setItem('enoch_token', accountInfo.token);
-          await AsyncStorage.setItem('auth_token', accountInfo.token);
-          await AsyncStorage.setItem('user_email', verifiedEmail);
-          await AsyncStorage.setItem('auth_method', 'onairos');
-          
-          console.log('✅ Existing user tokens stored successfully');
-          
-          // NEW: Show existing user confirmation modal instead of immediately completing
-          setExistingUserAccountInfo(accountInfo);
-          setMatchStep('existing_user');
-          return;
-        } else {
-          console.error('❌ No valid JWT token for existing user - token:', accountInfo.token);
-          console.error('❌ Cannot proceed without valid authentication token');
-          
-          // Don't fall back to email - throw error instead
-          throw new Error('No valid authentication token received from server');
-        }
-        return;
-      }
-      
-      console.log('🔍 New user detected - proceeding with account creation flow');
-      
-      // New user - proceed with account creation and continue to platform connectors
-      try {
-        console.log('📧 Creating Onairos account for verified email:', verifiedEmail);
-        
-        const username = verifiedEmail.split('@')[0];
-        
-        const onairosSignupResponse = await fetch('https://api2.onairos.uk/register/enoch', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            email: verifiedEmail,
-            username: username,
-            name: username,
-            emailVerified: true // Mark as verified
-          })
-        });
-        
-        const onairosResponseData = await onairosSignupResponse.json();
-        console.log('🔗 Onairos account creation response:', onairosResponseData);
-        
-        if (onairosResponseData.token) {
-          // Store tokens
-          await AsyncStorage.setItem('onairos_jwt_token', onairosResponseData.token);
-          await AsyncStorage.setItem('auth_token', onairosResponseData.token);
-          await AsyncStorage.setItem('enoch_token', onairosResponseData.token);
-          await AsyncStorage.setItem('onairos_username', onairosResponseData.username);
-          await AsyncStorage.setItem('user_email', verifiedEmail);
-          
-          console.log('✅ Account created and tokens stored');
-          console.log('🔗 Proceeding to UniversalOnboarding platform connectors');
-          
-          // Close the TrainingModal and proceed to UniversalOnboarding platform connectors
-          if (onComplete) {
-            // This is the account creation path for new users
-            // Always proceed to platform connectors for new users, regardless of backend response
-            console.log('📧 TrainingModal: New user account created - proceeding to platform connectors:', verifiedEmail);
-            onComplete(verifiedEmail);
-          }
-        } else {
-          // No token returned, continue with email to platform connectors
-          console.log('🔗 No token returned, proceeding to platform connectors with email');
-          // CRITICAL FIX: Store email even when account creation fails
-          await AsyncStorage.setItem('user_email', verifiedEmail);
-          console.log('✅ Email stored despite no token for admin check compatibility');
-          if (onComplete) {
-            onComplete(verifiedEmail);
-          }
-        }
-      } catch (error) {
-        console.error('❌ Error creating account after verification:', error);
-        // Continue anyway to platform connectors
-        console.log('🔗 Error occurred, but proceeding to platform connectors');
-        // CRITICAL FIX: Store email even when account creation throws an error
-        await AsyncStorage.setItem('user_email', verifiedEmail);
-        console.log('✅ Email stored despite error for admin check compatibility');
-        if (onComplete) {
-          onComplete(verifiedEmail);
-        }
-      }
-    }
-  };
-
-  const handleVerificationBack = () => {
-    setMatchStep('email');
-    setEmailError('');
-  };
-
-  // Handle existing user confirmation
-  const handleExistingUserConfirm = async () => {
-    console.log('✅ Existing user confirmed data sharing');
-    
-    if (existingUserAccountInfo && existingUserAccountInfo.token) {
-      if (onComplete) {
-        onComplete(existingUserAccountInfo.token);
-      }
-    } else {
-      console.error('❌ No token available for existing user');
-      setEmailError('Authentication error. Please try again.');
-      setMatchStep('email');
-    }
-  };
-
-  const handleExistingUserCancel = () => {
-    console.log('❌ Existing user cancelled data sharing');
-    setMatchStep('email');
-    setExistingUserAccountInfo(null);
-    setEmailError('');
-  };
-
-  const handleExistingUserAddMoreData = () => {
-    console.log('🔗 Existing user wants to add more data');
-    
-    // Store the existing user info for later use
-    if (existingUserAccountInfo && existingUserAccountInfo.token) {
-      AsyncStorage.setItem('existing_user_token', existingUserAccountInfo.token);
-      AsyncStorage.setItem('existing_user_info', JSON.stringify(existingUserAccountInfo));
-    }
-    
-    // Continue to new user flow (UniversalOnboarding) but with existing user context
-    setMatchStep('email');
-    setExistingUserAccountInfo(null);
-    
-    // Call onComplete with email to trigger UniversalOnboarding
-    if (onComplete) {
-      onComplete(email);
-    }
-  };
-
-  // Ensure cancel button always works
-  const handleCancelPress = () => {
-    // Clear temporary PIN when cancelling
-    clearTemporaryPin();
-    onCancel();
-  };
-  const handleContinue = () => {
-    // Trigger haptic feedback when button is pressed
-    ReactNativeHapticFeedback.trigger('impactMedium', {
-      enableVibrateFallback: true,
-      ignoreAndroidSystemSettings: false
-    });
-    
-    console.log('handleContinue called. Current email state:', email);
-    console.log('Continue button pressed, completing onboarding with email:', email);
-    
-    // Make sure we have a valid email
-    if (!validateEmail(email)) {
-      console.log('Email validation failed, cannot continue');
-      return;
-    }
-    
-    // Show loading state
-    setIsContinueLoading(true);
-    
-    // Call onComplete immediately to prevent splash screen flash
-    // The loading state will still be visible during the transition
-    if (onComplete) {
-      console.log('Calling onComplete with email:', email);
-      onComplete(email);
-      // Note: We don't reset isContinueLoading because the component will unmount
-    }
-  };
-
-  // Calculate user-friendly message based on progress
-  const getUserFriendlyMessage = () => {
-    if (hasError) return 'Something went wrong. Please try again.';
-    if (isTrainingComplete) return 'Your persona is ready! 🎉';
-
-    if (progress < 20) {
-      return 'Keeping your data private...';
-    } else if (progress < 40) {
-      return 'Trying to understand your mind...';
-    } else if (progress < 60) {
-      return 'You\'re more interesting than I expected...';
-    } else if (progress < 80) {
-      return 'Finalizing your unique persona...';
-    } else if (progress < 95) {
-      return 'Almost done...';
-    } else {
-      return 'Just a few more seconds...';
-    }
-  };
-
-  // Calculate remaining time estimate
-  const getTimeEstimate = () => {
-    if (hasError) return 'Please try again';
-    if (isTrainingComplete) return 'Complete!';
-
-    // Rough time estimates based on progress
-    const remainingProgress = 100 - progress;
-    const estimatedSeconds = Math.ceil((remainingProgress / 100) * 120); // Assume 2 minutes total
-
-    if (estimatedSeconds > 60) {
-      return `About ${Math.ceil(estimatedSeconds / 60)} minute${Math.ceil(estimatedSeconds / 60) > 1 ? 's' : ''} remaining`;
-    } else if (estimatedSeconds > 0) {
-      return `About ${estimatedSeconds} seconds remaining`;
-    } else {
-      return 'Almost there...';
-    }
-  };
-
-  // Grabber bar
-  const Grabber = () => (
-    <View style={styles.grabberContainer}>
-      <View style={styles.grabberBar} />
-    </View>
-  );
-
-  if (!visible) return null;
-
-  const progressPercentage = Math.min(Math.max(progress, 0), 100);
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none" // Changed to none since we're handling animation
-      onRequestClose={handleModalClose}
-    >
-      <TouchableWithoutFeedback onPress={handleModalClose}>
-        <View style={styles.modalOverlay}>
-          <KeyboardAvoidingView
-            behavior={Platform.OS === "ios" ? "padding" : "height"}
-            keyboardVerticalOffset={0}
-            style={styles.keyboardAvoidingView}
-          >
-            <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-              <Animated.View 
-                style={[
-                  styles.modalContent,
-                  {
-                    transform: [{ translateY: modalTranslateY }],
-                  }
-                ]}
-              >
-                <Grabber />
-
-                {/* START: Add X Close Button */}
-                <TouchableOpacity style={styles.closeButton} onPress={onCancel}>
-                  <Text style={styles.closeButtonText}>✕</Text>
-                </TouchableOpacity>
-                {/* END: Add X Close Button */}
-
-                {matchStep === 'email' && (
-                  <View style={[styles.primaryAuthHeader, { marginTop: 40 }]}>
-                    <Text style={styles.primaryAuthTitle}>Sign in with Onairos</Text>
-                    <Text style={styles.primaryAuthSubtitle}>
-                    </Text>
-                  </View>
-                )}
-
-
-
-                {/* Email Entry Step */}
-                {isPrimaryAuth && matchStep === 'email' && (
-                  <View style={styles.emailSection}>
-                    <Text style={styles.emailLabel}>Enter your email to sign in / create an account</Text>
-                    <TextInput
-                      ref={emailInputRef}
-                      style={[styles.emailInput, emailError ? styles.emailInputError : null]}
-                      value={email}
-                      onChangeText={(text) => {
-                        setEmail(text);
-                        if (emailError) setEmailError('');
-                      }}
-                      placeholder="your.email@example.com"
-                      keyboardType="email-address"
-                      autoCapitalize="none"
-                      autoCorrect={false}
-                      returnKeyType="done"
-                      onSubmitEditing={() => Keyboard.dismiss()}
-                    />
-                    {emailError ? <Text style={styles.errorText}>{emailError}</Text> : null}
-                    <TouchableOpacity
-                      style={[
-                        styles.continueButton, 
-                        (isSubmittingEmail || (!email.includes('@') && email.toLowerCase().trim() !== 'reviewer')) && styles.disabledButton, 
-                        { marginTop: 24 }
-                      ]}
-                      onPress={handleEmailSubmit}
-                      disabled={isSubmittingEmail || (!email.includes('@') && email.toLowerCase().trim() !== 'reviewer')}
-                      activeOpacity={0.8}
-                    >
-                      {isSubmittingEmail ? (
-                        <ActivityIndicator size="small" color="#FFFFFF" />
-                      ) : (
-                        <Text style={styles.continueButtonText}>Continue</Text>
-                      )}
-                    </TouchableOpacity>
-                  </View>
-                )}
-
-                {/* Email Verification Step */}
-                {isPrimaryAuth && matchStep === 'verification' && (
-                  <View>
-                    {/* EmailVerification component not available - placeholder */}
-                    <Text>Email verification step (not implemented)</Text>
-                  </View>
-                )}
-
-                {/* Existing User Data Confirmation Step */}
-                {isPrimaryAuth && matchStep === 'existing_user' && existingUserAccountInfo && (
-                  <ExistingUserDataConfirmation
-                    visible={true}
-                    onConfirm={handleExistingUserConfirm}
-                    onCancel={handleExistingUserCancel}
-                    onAddMoreData={handleExistingUserAddMoreData}
-                    accountInfo={existingUserAccountInfo}
-                    userEmail={email}
-                  />
-                )}
-
-                {/* Existing steps remain the same */}
-                {isPrimaryAuth && matchStep === 'searching' && (
-                  <View style={styles.matchContainer}>
-                    <Text style={styles.matchTitle}></Text>
-                    <ActivityIndicator size="large" color="#E9C46A" style={styles.matchLoader} />
-                    <Text style={styles.matchMessage}>
-                      Searching for potential connections based on your email...
-                    </Text>
-                  </View>
-                )}
-
-                {isPrimaryAuth && matchStep === 'found' && progress >= 100 && (
-                  <View style={styles.matchContainer}>
-                    <Text style={styles.matchTitle}>Connections Found</Text>
-                    <View style={styles.matchCircle}>
-                      <Text style={styles.matchCount}>{matchCount}</Text>
-                    </View>
-                    <Text style={styles.matchMessage}>
-                      We found {matchCount} potential connections for you!
-                    </Text>
-                    <Text style={styles.matchSubMessage}>
-                      Complete your profile to see your personalized matches
-                    </Text>
-                    <TouchableOpacity
-                      style={[
-                        styles.continueButton,
-                        isContinueLoading && styles.disabledButton
-                      ]}
-                      onPress={handleContinue}
-                      disabled={isContinueLoading}
-                    >
-                      {isContinueLoading ? (
-                        <ActivityIndicator size="small" color="#FFFFFF" />
-                      ) : (
-                        <Text style={styles.continueButtonText}>continue to setup</Text>
-                      )}
-                    </TouchableOpacity>
-                  </View>
-                )}
-              </Animated.View>
-            </TouchableWithoutFeedback>
-          </KeyboardAvoidingView>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    padding: 24,
-  },
-  scrollContentContainer: {
-    flexGrow: 1,
-    justifyContent: 'flex-start',
-    paddingBottom: 0,
-    marginBottom: 0,
-  },
-  actualContentWrapper: {
-    width: '100%',
-    alignItems: 'center', // Center content like headers if they are not full width
-  },
-  content: {
-    // This style might be unused or redefined if still needed for specific children
-    // flex: 1, // Original content style, likely not needed for the wrapper anymore
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 24,
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 32,
-    textAlign: 'center',
-  },
-  progressContainer: {
-    marginBottom: 24,
-  },
-  progressBar: {
-    height: 8,
-    backgroundColor: '#F5F5F5',
-    borderRadius: 4,
-    overflow: 'hidden',
-    marginBottom: 8,
-  },
-  progressFill: {
-    height: '100%',
-    backgroundColor: '#1BA9D4',
-    borderRadius: 4,
-  },
-  progressText: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'right',
-  },
-  infoContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  etaText: {
-    fontSize: 14,
-    color: '#666',
-    marginLeft: 8,
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  detailText: {
-    fontSize: 14,
-    color: '#666',
-    lineHeight: 20,
-  },
-  emailSection: {
-    marginTop: 24,
-    marginBottom: 16,
-    width: '100%',
-  },
-  emailSectionPrimary: {
-    marginTop: 40,
-    marginBottom: 40,
-  },
-  emailLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#333',
-    marginBottom: 12,
-    textAlign: 'center',
-  },
-  emailInput: {
-    height: 48,
-    borderWidth: 1,
-    borderColor: '#E0E0E0',
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    fontSize: 16,
-    marginBottom: 8,
-  },
-  emailInputError: {
-    borderColor: '#FF3B30',
-  },
-  errorText: {
-    color: '#FF3B30',
-    fontSize: 14,
-    marginBottom: 16,
-  },
-  footer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 24,
-    paddingTop: 16,
-  },
-  completeButton: {
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    backgroundColor: '#1BA9D4',
-    borderRadius: 8,
-  },
-  disabledButton: {
-    backgroundColor: '#CCCCCC',
-    opacity: 0.7,
-  },
-  completeButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  statusText: {
-    fontSize: 14,
-    color: '#666',
-    marginLeft: 8,
-  },
-  progressError: {
-    backgroundColor: '#FF3B30',
-  },
-  primaryAuthHeader: {
-    alignItems: 'center',
-    marginBottom: 24,
-    paddingHorizontal: 16,
-  },
-  primaryAuthTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  primaryAuthSubtitle: {
-    fontSize: 16,
-    color: '#555',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  matchContainer: {
-    alignItems: 'center',
-    padding: 20,
-  },
-  matchTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 16,
-    textAlign: 'center',
-  },
-  matchLoader: {
-    marginVertical: 20,
-  },
-  matchMessage: {
-    fontSize: 16,
-    color: '#555',
-    textAlign: 'center',
-    marginVertical: 12,
-  },
-  matchSubMessage: {
-    fontSize: 14,
-    color: '#777',
-    textAlign: 'center',
-    marginTop: 8,
-  },
-  matchCircle: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: '#E9C46A',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: 16,
-  },
-  matchCount: {
-    fontSize: 32,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-  },
-  continueButton: {
-    marginTop: 40,
-    width: '85%',
-    height: 50,
-    backgroundColor: '#000000',
-    borderRadius: 8,
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'center',
-  },
-  continueButtonText: {
-    color: '#FFFFFF',
-    fontSize: 18,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-  },
-  keyboardAvoidingView: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'stretch',
-    margin: 0,
-    padding: 0,
-  },
-  modalContent: {
-    backgroundColor: '#fff',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    padding: 24,
-    paddingTop: 12,
-    minHeight: height * 0.4,
-    maxHeight: height * 0.9,
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 15, // Adjust as needed for visual balance with grabber and padding
-    right: 20, // Adjust as needed
-    padding: 5, // Make it easier to tap
-    zIndex: 10, // Ensure it's above other content
-  },
-  closeButtonText: {
-    fontSize: 24, // Make it a bit larger
-    color: '#888', // Subtle color
-    fontWeight: '300',
-  },
-  grabberContainer: {
-    alignItems: 'center',
-  },
-  grabberBar: {
-    width: 48,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: '#E0E0E0',
-  },
-});
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  Dimensions,
+  TextInput,
+  Keyboard,
+  Alert,
+  Animated,
+  Easing,
+  Platform,
+  KeyboardAvoidingView,
+  Modal,
+  TouchableWithoutFeedback
+} from 'react-native';
+import { io, Socket } from 'socket.io-client';
+import { getAuthToken, getUserProfile, saveEnochToken, getOnairosUsername } from '../services/authService';
+import LinearGradient from 'react-native-linear-gradient';
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+import { getEncryptedPinForAPI } from '../services/pinEncryptionService';
+import { clearTemporaryPin } from '../services/pinStorageUtils';
+// import EmailVerification from '../../../components/EmailVerification'; // Commented out - file doesn't exist
+// import { sendEmailVerificationCode } from '../../../services/api'; // Commented out - use local API instead
+import { startEnochTrainingWithYouTubeCheck } from '../services/mobileTrainingService';
+import { ExistingUserDataConfirmation } from './ExistingUserDataConfirmation';
+
+const { width, height } = Dimensions.get('window');
+
+export interface TrainingModalProps {
+  visible: boolean;
+  progress?: number;
+  eta?: string;
+  onCancel: () => void;
+  onComplete?: (emailOrToken: string) => void;
+  modelKey?: string;
+  username?: string;
+  isPrimaryAuth?: boolean;
+  autoFocusEmailInput?: boolean; // Add new prop
+  navigation?: any;
+}
+
+export const TrainingModal: React.FC<TrainingModalProps> = ({
+  visible,
+  onCancel,
+  onComplete,
+  modelKey,
+  username,
+  isPrimaryAuth = false,
+  autoFocusEmailInput = false, // Add default value
+  navigation,
+}) => {
+  const [progress, setProgress] = useState(0);
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState('');
+  const [isTrainingComplete, setIsTrainingComplete] = useState(false);
+  const [isSubmittingEmail, setIsSubmittingEmail] = useState(false);
+  const [socketConnected, setSocketConnected] = useState(false);
+  const [trainingStatus, setTrainingStatus] = useState('Initializing...');
+  const [hasError, setHasError] = useState(false);
+  const [userTraits, setUserTraits] = useState(null);
+  const [inferenceResults, setInferenceResults] = useState(null);
+  const socketRef = useRef<Socket | null>(null);
+  const emailInputRef = useRef<TextInput>(null); // Add email input ref
+  const [userToken, setUserToken] = useState<string | null>(null);
+  const [userInfo, setUserInfo] = useState<any>(null);
+  const [matchStep, setMatchStep] = useState<'email' | 'verification' | 'searching' | 'found' | 'existing_user'>('email');
+  const [matchCount, setMatchCount] = useState(0);
+  const [isContinueLoading, setIsContinueLoading] = useState(false);
+  const [existingUserAccountInfo, setExistingUserAccountInfo] = useState<any>(null);
+
+  // --- Modal slide animation ---
+  const modalTranslateY = useRef(new Animated.Value(height)).current;
+  const animationDuration = 300; // Increased duration for smoother animation
+
+  // Reset state when modal becomes invisible
+  useEffect(() => {
+    if (!visible) {
+      // Reset all state
+      setEmail('');
+      setEmailError('');
+      setIsSubmittingEmail(false);
+      setMatchStep('email');
+      setMatchCount(0);
+      setIsContinueLoading(false);
+      setProgress(0);
+      setIsTrainingComplete(false);
+      setHasError(false);
+      setTrainingStatus('Initializing...');
+      setUserTraits(null);
+      setInferenceResults(null);
+      setUserToken(null);
+      setUserInfo(null);
+      
+      // Reset animation value
+      modalTranslateY.setValue(height);
+    }
+  }, [visible]);
+
+  // Handle animation
+  useEffect(() => {
+    if (visible) {
+      // Ensure we start from the bottom
+      modalTranslateY.setValue(height);
+      // Animate up
+      Animated.spring(modalTranslateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 20,
+        mass: 1,
+        stiffness: 200,
+      }).start();
+    }
+  }, [visible]);
+
+  // Handle modal close
+  const handleModalClose = () => {
+    Animated.spring(modalTranslateY, {
+      toValue: height,
+      useNativeDriver: true,
+      damping: 20,
+      mass: 1,
+      stiffness: 200,
+    }).start(() => {
+      onCancel();
+    });
+  };
+
+  // Get auth token and user info on mount
+  useEffect(() => {
+    const loadUserData = async () => {
+      try {
+        const token = await getAuthToken();
+        setUserToken(token);
+
+        if (token) {
+          // Use provided username instead of making API call to avoid 404 error
+          // The backend JWT contains username but /api/user/profile endpoint doesn't exist
+          const fallbackUsername = username || 'mobile_user';
+
+          console.log('🔍 Using provided username for training:', fallbackUsername);
+          setUserInfo({
+            username: fallbackUsername,
+            email: null,
+            id: null // Will be filled by backend during training
+          });
+        }
+      } catch (error) {
+        console.error('Error loading user data:', error);
+        // Fallback user info
+        setUserInfo({
+          username: username || 'mobile_user',
+          email: null,
+          id: null
+        });
+      }
+    };
+
+    if (visible) {
+      loadUserData();
+    }
+  }, [visible, username]);
+
+  // Start Enoch training via API
+  const startEnochTraining = async (socketId: string) => {
+    try {
+      setTrainingStatus('Starting training...');
+      setProgress(10);
+
+      if (!userToken) {
+        throw new Error('No authentication token available');
+      }
+
+      console.log('🚀 Starting Enoch training with socketId:', socketId);
+
+      // 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, // This will be used as fallback in backend
+        email: userInfo?.email || null, // Backend will use this if available
+        modelKey: modelKey || null,
+        connectedPlatforms: platformsList, // Include connected platforms
+        // Include encrypted PIN if available
+        ...(encryptedPin && { 
+          encryptedPin: encryptedPin,
+          hasPinData: true 
+        })
+      };
+
+      console.log('📤 Starting training with YouTube migration check:', trainingData);
+      console.log('🔑 Using stored username:', storedUsername);
+      console.log('🔑 Final username for training:', finalUsername);
+      console.log('🔗 Connected platforms:', platformsList);
+      console.log('🔐 PIN included in training:', !!encryptedPin);
+
+      // Use the new training function that includes YouTube migration check
+      const result = await startEnochTrainingWithYouTubeCheck(trainingData);
+
+      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);
+        }
+        
+        setTrainingStatus('Training model...');
+        setProgress(20);
+      } else {
+        console.error('Training start failed:', result.error);
+        setTrainingStatus(`Error: ${result.error}`);
+        setHasError(true);
+      }
+    } catch (error) {
+      console.error('Training start error:', error);
+      setTrainingStatus(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      setHasError(true);
+    }
+  };
+
+  // Setup socket connection and training
+  useEffect(() => {
+    if (!visible || !userToken || !userInfo) return;
+
+    console.log('Setting up socket connection for training...');
+    console.log('🧑‍💻 User info available:', userInfo);
+
+    // Initialize socket connection
+    socketRef.current = io('https://api2.onairos.uk', {
+      transports: ['websocket'],
+      autoConnect: false
+    });
+
+    // Socket event listeners
+    socketRef.current.on('connect', () => {
+      console.log('✅ Socket connected for training');
+      setSocketConnected(true);
+      const socketId = socketRef.current?.id;
+      if (socketId) {
+        // ❌ DISABLED: This was causing training to start too early (when modal opens)
+        // Training should only start when transitioning from connectors to PIN screen
+        // startEnochTraining(socketId);
+        console.log('🔌 Socket ready, but training will start only when user transitions to PIN screen');
+      }
+    });
+
+    socketRef.current.on('disconnect', () => {
+      console.log('❌ Socket disconnected');
+      setSocketConnected(false);
+    });
+
+    socketRef.current.on('trainingCompleted', (data) => {
+      console.log('✅ Training Complete:', data);
+      setTrainingStatus('Running test inference...');
+      setProgress(60);
+    });
+
+    socketRef.current.on('inferenceCompleted', (data) => {
+      console.log('🧠 Inference Complete:', data);
+      setTrainingStatus('Uploading to S3...');
+      setProgress(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');
+        }
+      }
+      
+      setIsTrainingComplete(true);
+      setTrainingStatus('Complete!');
+      setProgress(100);
+      
+      // Clear temporary PIN after training is complete
+      clearTemporaryPin();
+      
+      // Show continue button for primary auth when training is complete
+      if (isPrimaryAuth) {
+        setMatchStep('found');
+        setMatchCount(Math.floor(Math.random() * 10) + 5);
+      }
+    });
+
+    socketRef.current.on('trainingUpdate', (data) => {
+      if (data.error) {
+        console.error('Training update error:', data.error);
+        setTrainingStatus(`Error: ${data.error}`);
+        setHasError(true);
+      } else if (data.progress) {
+        setProgress(data.progress);
+        setTrainingStatus(data.status || 'Training in progress...');
+      }
+    });
+
+    // Connect to socket
+    socketRef.current.connect();
+
+    // Cleanup function
+    return () => {
+      if (socketRef.current) {
+        console.log('🔌 Disconnecting training socket...');
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+    };
+  }, [visible, userToken, userInfo]);
+
+  // When modal becomes visible and autoFocus is requested, focus the email input
+  useEffect(() => {
+    if (visible && autoFocusEmailInput && matchStep === 'email' && emailInputRef.current) {
+      const timer = setTimeout(() => {
+        emailInputRef.current?.focus();
+      }, 150); // Small delay to sync with modal animation
+      return () => clearTimeout(timer);
+    } else if (!visible && emailInputRef.current) {
+      // Optional: Blur input when modal is not visible
+      // emailInputRef.current?.blur(); 
+    }
+  }, [visible, autoFocusEmailInput, matchStep]);
+
+  // Validate email format
+  const validateEmail = (email: string) => {
+    // Check for reviewer bypass first
+    if (email.toLowerCase().trim() === 'reviewer') {
+      return true; // Valid for reviewer bypass
+    }
+    
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleEmailSubmit = async () => {
+    // Check for reviewer bypass
+    if (email.toLowerCase().trim() === 'reviewer') {
+      console.log('🔍 Reviewer bypass detected');
+      setEmail('reviewer@bypass.com'); // Set a valid email for the flow
+      if (onComplete) {
+        onComplete('reviewer@bypass.com');
+      }
+      return;
+    }
+
+    // Regular email validation and submission
+    if (!validateEmail(email)) {
+      setEmailError('Please enter a valid email address');
+      return;
+    }
+
+    setIsSubmittingEmail(true);
+    setEmailError('');
+
+    try {
+      console.log('📧 Sending verification code to:', email);
+      
+      // Send verification code using the new API
+      // const result = await sendEmailVerificationCode(email); // Function not available
+      const result = { success: true, message: 'Email verification not implemented' };
+      
+      if (result.success) {
+        console.log('✅ Verification code sent successfully');
+        setMatchStep('verification'); // Move to verification step
+      } else {
+        console.log('❌ Failed to send verification code:', result.message);
+        setEmailError(result.message || 'Failed to send verification code. Please try again.');
+      }
+    } catch (error) {
+      console.error('❌ Error sending verification code:', error);
+      setEmailError('Network error. Please check your connection and try again.');
+    } finally {
+      setIsSubmittingEmail(false);
+    }
+  };
+
+  const handleVerificationComplete = async (verifiedEmail: string, isVerified: boolean, accountInfo?: any) => {
+    if (isVerified) {
+      console.log('✅ Email verification completed for:', verifiedEmail);
+      console.log('🔍 AccountInfo received:', accountInfo);
+      console.log('🔍 ExistingUser flag:', accountInfo?.existingUser);
+      
+      // Check if this is an existing user - must have accountInfo AND explicitly marked as existing
+      if (accountInfo && accountInfo.existingUser === true) {
+        console.log('🔍 Existing user detected:', accountInfo);
+        
+        // CRITICAL FIX: Ensure we have a valid JWT token before proceeding
+        if (accountInfo.token && typeof accountInfo.token === 'string' && accountInfo.token.length > 50) {
+          console.log('✅ Valid JWT token found for existing user');
+          
+          // Store the token immediately for existing users
+          await AsyncStorage.setItem('onairos_jwt_token', accountInfo.token);
+          await AsyncStorage.setItem('enoch_token', accountInfo.token);
+          await AsyncStorage.setItem('auth_token', accountInfo.token);
+          await AsyncStorage.setItem('user_email', verifiedEmail);
+          await AsyncStorage.setItem('auth_method', 'onairos');
+          
+          console.log('✅ Existing user tokens stored successfully');
+          
+          // NEW: Show existing user confirmation modal instead of immediately completing
+          setExistingUserAccountInfo(accountInfo);
+          setMatchStep('existing_user');
+          return;
+        } else {
+          console.error('❌ No valid JWT token for existing user - token:', accountInfo.token);
+          console.error('❌ Cannot proceed without valid authentication token');
+          
+          // Don't fall back to email - throw error instead
+          throw new Error('No valid authentication token received from server');
+        }
+        return;
+      }
+      
+      console.log('🔍 New user detected - proceeding with account creation flow');
+      
+      // New user - proceed with account creation and continue to platform connectors
+      try {
+        console.log('📧 Creating Onairos account for verified email:', verifiedEmail);
+        
+        const username = verifiedEmail.split('@')[0];
+        
+        const onairosSignupResponse = await fetch('https://api2.onairos.uk/register/enoch', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            email: verifiedEmail,
+            username: username,
+            name: username,
+            emailVerified: true // Mark as verified
+          })
+        });
+        
+        const onairosResponseData = await onairosSignupResponse.json();
+        console.log('🔗 Onairos account creation response:', onairosResponseData);
+        
+        if (onairosResponseData.token) {
+          // Store tokens
+          await AsyncStorage.setItem('onairos_jwt_token', onairosResponseData.token);
+          await AsyncStorage.setItem('auth_token', onairosResponseData.token);
+          await AsyncStorage.setItem('enoch_token', onairosResponseData.token);
+          await AsyncStorage.setItem('onairos_username', onairosResponseData.username);
+          await AsyncStorage.setItem('user_email', verifiedEmail);
+          
+          console.log('✅ Account created and tokens stored');
+          console.log('🔗 Proceeding to UniversalOnboarding platform connectors');
+          
+          // Close the TrainingModal and proceed to UniversalOnboarding platform connectors
+          if (onComplete) {
+            // This is the account creation path for new users
+            // Always proceed to platform connectors for new users, regardless of backend response
+            console.log('📧 TrainingModal: New user account created - proceeding to platform connectors:', verifiedEmail);
+            onComplete(verifiedEmail);
+          }
+        } else {
+          // No token returned, continue with email to platform connectors
+          console.log('🔗 No token returned, proceeding to platform connectors with email');
+          // CRITICAL FIX: Store email even when account creation fails
+          await AsyncStorage.setItem('user_email', verifiedEmail);
+          console.log('✅ Email stored despite no token for admin check compatibility');
+          if (onComplete) {
+            onComplete(verifiedEmail);
+          }
+        }
+      } catch (error) {
+        console.error('❌ Error creating account after verification:', error);
+        // Continue anyway to platform connectors
+        console.log('🔗 Error occurred, but proceeding to platform connectors');
+        // CRITICAL FIX: Store email even when account creation throws an error
+        await AsyncStorage.setItem('user_email', verifiedEmail);
+        console.log('✅ Email stored despite error for admin check compatibility');
+        if (onComplete) {
+          onComplete(verifiedEmail);
+        }
+      }
+    }
+  };
+
+  const handleVerificationBack = () => {
+    setMatchStep('email');
+    setEmailError('');
+  };
+
+  // Handle existing user confirmation
+  const handleExistingUserConfirm = async () => {
+    console.log('✅ Existing user confirmed data sharing');
+    
+    if (existingUserAccountInfo && existingUserAccountInfo.token) {
+      if (onComplete) {
+        onComplete(existingUserAccountInfo.token);
+      }
+    } else {
+      console.error('❌ No token available for existing user');
+      setEmailError('Authentication error. Please try again.');
+      setMatchStep('email');
+    }
+  };
+
+  const handleExistingUserCancel = () => {
+    console.log('❌ Existing user cancelled data sharing');
+    setMatchStep('email');
+    setExistingUserAccountInfo(null);
+    setEmailError('');
+  };
+
+  const handleExistingUserAddMoreData = () => {
+    console.log('🔗 Existing user wants to add more data');
+    
+    // Store the existing user info for later use
+    if (existingUserAccountInfo && existingUserAccountInfo.token) {
+      AsyncStorage.setItem('existing_user_token', existingUserAccountInfo.token);
+      AsyncStorage.setItem('existing_user_info', JSON.stringify(existingUserAccountInfo));
+    }
+    
+    // Continue to new user flow (UniversalOnboarding) but with existing user context
+    setMatchStep('email');
+    setExistingUserAccountInfo(null);
+    
+    // Call onComplete with email to trigger UniversalOnboarding
+    if (onComplete) {
+      onComplete(email);
+    }
+  };
+
+  // Ensure cancel button always works
+  const handleCancelPress = () => {
+    // Clear temporary PIN when cancelling
+    clearTemporaryPin();
+    onCancel();
+  };
+  const handleContinue = () => {
+    // Trigger haptic feedback when button is pressed
+    ReactNativeHapticFeedback.trigger('impactMedium', {
+      enableVibrateFallback: true,
+      ignoreAndroidSystemSettings: false
+    });
+    
+    console.log('handleContinue called. Current email state:', email);
+    console.log('Continue button pressed, completing onboarding with email:', email);
+    
+    // Make sure we have a valid email
+    if (!validateEmail(email)) {
+      console.log('Email validation failed, cannot continue');
+      return;
+    }
+    
+    // Show loading state
+    setIsContinueLoading(true);
+    
+    // Call onComplete immediately to prevent splash screen flash
+    // The loading state will still be visible during the transition
+    if (onComplete) {
+      console.log('Calling onComplete with email:', email);
+      onComplete(email);
+      // Note: We don't reset isContinueLoading because the component will unmount
+    }
+  };
+
+  // Calculate user-friendly message based on progress
+  const getUserFriendlyMessage = () => {
+    if (hasError) return 'Something went wrong. Please try again.';
+    if (isTrainingComplete) return 'Your persona is ready! 🎉';
+
+    if (progress < 20) {
+      return 'Keeping your data private...';
+    } else if (progress < 40) {
+      return 'Trying to understand your mind...';
+    } else if (progress < 60) {
+      return 'You\'re more interesting than I expected...';
+    } else if (progress < 80) {
+      return 'Finalizing your unique persona...';
+    } else if (progress < 95) {
+      return 'Almost done...';
+    } else {
+      return 'Just a few more seconds...';
+    }
+  };
+
+  // Calculate remaining time estimate
+  const getTimeEstimate = () => {
+    if (hasError) return 'Please try again';
+    if (isTrainingComplete) return 'Complete!';
+
+    // Rough time estimates based on progress
+    const remainingProgress = 100 - progress;
+    const estimatedSeconds = Math.ceil((remainingProgress / 100) * 120); // Assume 2 minutes total
+
+    if (estimatedSeconds > 60) {
+      return `About ${Math.ceil(estimatedSeconds / 60)} minute${Math.ceil(estimatedSeconds / 60) > 1 ? 's' : ''} remaining`;
+    } else if (estimatedSeconds > 0) {
+      return `About ${estimatedSeconds} seconds remaining`;
+    } else {
+      return 'Almost there...';
+    }
+  };
+
+  // Grabber bar
+  const Grabber = () => (
+    <View style={styles.grabberContainer}>
+      <View style={styles.grabberBar} />
+    </View>
+  );
+
+  if (!visible) return null;
+
+  const progressPercentage = Math.min(Math.max(progress, 0), 100);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none" // Changed to none since we're handling animation
+      onRequestClose={handleModalClose}
+    >
+      <TouchableWithoutFeedback onPress={handleModalClose}>
+        <View style={styles.modalOverlay}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            keyboardVerticalOffset={0}
+            style={styles.keyboardAvoidingView}
+          >
+            <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+              <Animated.View 
+                style={[
+                  styles.modalContent,
+                  {
+                    transform: [{ translateY: modalTranslateY }],
+                  }
+                ]}
+              >
+                <Grabber />
+
+                {/* START: Add X Close Button */}
+                <TouchableOpacity style={styles.closeButton} onPress={onCancel}>
+                  <Text style={styles.closeButtonText}>✕</Text>
+                </TouchableOpacity>
+                {/* END: Add X Close Button */}
+
+                {matchStep === 'email' && (
+                  <View style={[styles.primaryAuthHeader, { marginTop: 40 }]}>
+                    <Text style={styles.primaryAuthTitle}>Sign in with Onairos</Text>
+                    <Text style={styles.primaryAuthSubtitle}>
+                    </Text>
+                  </View>
+                )}
+
+
+
+                {/* Email Entry Step */}
+                {isPrimaryAuth && matchStep === 'email' && (
+                  <View style={styles.emailSection}>
+                    <Text style={styles.emailLabel}>Enter your email to sign in / create an account</Text>
+                    <TextInput
+                      ref={emailInputRef}
+                      style={[styles.emailInput, emailError ? styles.emailInputError : null]}
+                      value={email}
+                      onChangeText={(text) => {
+                        setEmail(text);
+                        if (emailError) setEmailError('');
+                      }}
+                      placeholder="your.email@example.com"
+                      keyboardType="email-address"
+                      autoCapitalize="none"
+                      autoCorrect={false}
+                      returnKeyType="done"
+                      onSubmitEditing={() => Keyboard.dismiss()}
+                    />
+                    {emailError ? <Text style={styles.errorText}>{emailError}</Text> : null}
+                    <TouchableOpacity
+                      style={[
+                        styles.continueButton, 
+                        (isSubmittingEmail || (!email.includes('@') && email.toLowerCase().trim() !== 'reviewer')) && styles.disabledButton, 
+                        { marginTop: 24 }
+                      ]}
+                      onPress={handleEmailSubmit}
+                      disabled={isSubmittingEmail || (!email.includes('@') && email.toLowerCase().trim() !== 'reviewer')}
+                      activeOpacity={0.8}
+                    >
+                      {isSubmittingEmail ? (
+                        <ActivityIndicator size="small" color="#FFFFFF" />
+                      ) : (
+                        <Text style={styles.continueButtonText}>Continue</Text>
+                      )}
+                    </TouchableOpacity>
+                  </View>
+                )}
+
+                {/* Email Verification Step */}
+                {isPrimaryAuth && matchStep === 'verification' && (
+                  <View>
+                    {/* EmailVerification component not available - placeholder */}
+                    <Text>Email verification step (not implemented)</Text>
+                  </View>
+                )}
+
+                {/* Existing User Data Confirmation Step */}
+                {isPrimaryAuth && matchStep === 'existing_user' && existingUserAccountInfo && (
+                  <ExistingUserDataConfirmation
+                    visible={true}
+                    onConfirm={handleExistingUserConfirm}
+                    onCancel={handleExistingUserCancel}
+                    onAddMoreData={handleExistingUserAddMoreData}
+                    accountInfo={existingUserAccountInfo}
+                    userEmail={email}
+                  />
+                )}
+
+                {/* Existing steps remain the same */}
+                {isPrimaryAuth && matchStep === 'searching' && (
+                  <View style={styles.matchContainer}>
+                    <Text style={styles.matchTitle}></Text>
+                    <ActivityIndicator size="large" color="#E9C46A" style={styles.matchLoader} />
+                    <Text style={styles.matchMessage}>
+                      Searching for potential connections based on your email...
+                    </Text>
+                  </View>
+                )}
+
+                {isPrimaryAuth && matchStep === 'found' && progress >= 100 && (
+                  <View style={styles.matchContainer}>
+                    <Text style={styles.matchTitle}>Connections Found</Text>
+                    <View style={styles.matchCircle}>
+                      <Text style={styles.matchCount}>{matchCount}</Text>
+                    </View>
+                    <Text style={styles.matchMessage}>
+                      We found {matchCount} potential connections for you!
+                    </Text>
+                    <Text style={styles.matchSubMessage}>
+                      Complete your profile to see your personalized matches
+                    </Text>
+                    <TouchableOpacity
+                      style={[
+                        styles.continueButton,
+                        isContinueLoading && styles.disabledButton
+                      ]}
+                      onPress={handleContinue}
+                      disabled={isContinueLoading}
+                    >
+                      {isContinueLoading ? (
+                        <ActivityIndicator size="small" color="#FFFFFF" />
+                      ) : (
+                        <Text style={styles.continueButtonText}>continue to setup</Text>
+                      )}
+                    </TouchableOpacity>
+                  </View>
+                )}
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </KeyboardAvoidingView>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    padding: 24,
+  },
+  scrollContentContainer: {
+    flexGrow: 1,
+    justifyContent: 'flex-start',
+    paddingBottom: 0,
+    marginBottom: 0,
+  },
+  actualContentWrapper: {
+    width: '100%',
+    alignItems: 'center', // Center content like headers if they are not full width
+  },
+  content: {
+    // This style might be unused or redefined if still needed for specific children
+    // flex: 1, // Original content style, likely not needed for the wrapper anymore
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 24,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 32,
+    textAlign: 'center',
+  },
+  progressContainer: {
+    marginBottom: 24,
+  },
+  progressBar: {
+    height: 8,
+    backgroundColor: '#F5F5F5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#1BA9D4',
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'right',
+  },
+  infoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  etaText: {
+    fontSize: 14,
+    color: '#666',
+    marginLeft: 8,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  detailText: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+  },
+  emailSection: {
+    marginTop: 24,
+    marginBottom: 16,
+    width: '100%',
+  },
+  emailSectionPrimary: {
+    marginTop: 40,
+    marginBottom: 40,
+  },
+  emailLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  emailInput: {
+    height: 48,
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    marginBottom: 8,
+  },
+  emailInputError: {
+    borderColor: '#FF3B30',
+  },
+  errorText: {
+    color: '#FF3B30',
+    fontSize: 14,
+    marginBottom: 16,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 24,
+    paddingTop: 16,
+  },
+  completeButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    backgroundColor: '#1BA9D4',
+    borderRadius: 8,
+  },
+  disabledButton: {
+    backgroundColor: '#CCCCCC',
+    opacity: 0.7,
+  },
+  completeButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  statusText: {
+    fontSize: 14,
+    color: '#666',
+    marginLeft: 8,
+  },
+  progressError: {
+    backgroundColor: '#FF3B30',
+  },
+  primaryAuthHeader: {
+    alignItems: 'center',
+    marginBottom: 24,
+    paddingHorizontal: 16,
+  },
+  primaryAuthTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  primaryAuthSubtitle: {
+    fontSize: 16,
+    color: '#555',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  matchContainer: {
+    alignItems: 'center',
+    padding: 20,
+  },
+  matchTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  matchLoader: {
+    marginVertical: 20,
+  },
+  matchMessage: {
+    fontSize: 16,
+    color: '#555',
+    textAlign: 'center',
+    marginVertical: 12,
+  },
+  matchSubMessage: {
+    fontSize: 14,
+    color: '#777',
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  matchCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#E9C46A',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 16,
+  },
+  matchCount: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  continueButton: {
+    marginTop: 40,
+    width: '85%',
+    height: 50,
+    backgroundColor: '#000000',
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  continueButtonText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'stretch',
+    margin: 0,
+    padding: 0,
+  },
+  modalContent: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 24,
+    paddingTop: 12,
+    minHeight: height * 0.4,
+    maxHeight: height * 0.9,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 15, // Adjust as needed for visual balance with grabber and padding
+    right: 20, // Adjust as needed
+    padding: 5, // Make it easier to tap
+    zIndex: 10, // Ensure it's above other content
+  },
+  closeButtonText: {
+    fontSize: 24, // Make it a bit larger
+    color: '#888', // Subtle color
+    fontWeight: '300',
+  },
+  grabberContainer: {
+    alignItems: 'center',
+  },
+  grabberBar: {
+    width: 48,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#E0E0E0',
+  },
+});