@onairos/react-native 3.1.18 → 3.2.0

package/src/components/PlatformConnectorsStep.tsx

@@ -1,892 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ScrollView,
-  KeyboardAvoidingView,
-  Platform,
-  Vibration,
-  TouchableOpacity,
-} from 'react-native';
-import { COLORS, SPACING } from '../theme';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-import PlatformToggle from './PlatformToggle';
-import PersonaImage from './PersonaImage';
-import PrimaryButton from './PrimaryButton';
-import PersonalizationConsentScreen from './PersonalizationConsentScreen';
-import PinCreationScreen from './PinCreationScreen';
-import PersonaLoadingScreen from './PersonaLoadingScreen';
-import { useConnections } from '../hooks/useConnections';
-import { getPlatformIcon } from '../services/connectedAccountsService';
-import { initiateOAuth, initiateNativeAuth, hasNativeSDK } from '../services/platformAuthService';
-import { OAuthWebView } from './onboarding/OAuthWebView';
-import { useAuth } from '../context/AuthContext';
-import { startEnochTrainingWithYouTubeCheck } from '../services/mobileTrainingService';
-import { getOnairosUsername } from '../services/authService';
-import { getEncryptedPinForAPI } from '../services/pinEncryptionService';
-import { setTemporaryPin } from '../services/pinStorageUtils';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { io, Socket } from 'socket.io-client';
-
-interface PlatformConnectorsStepProps {
-  onUpdate: (connectedPlatforms: string[]) => void;
-  onSkip: () => void;
-  loading?: boolean;
-  onPinComplete?: (pin: string) => void;
-  onReviewerBypass?: () => void;
-}
-
-const PlatformConnectorsStep: React.FC<PlatformConnectorsStepProps> = ({
-  onUpdate,
-  onSkip,
-  loading = false,
-  onPinComplete,
-  onReviewerBypass,
-}) => {
-  const [connectedPlatforms, setConnectedPlatforms] = useState<Set<string>>(new Set());
-  const [showConsentScreen, setShowConsentScreen] = useState(false);
-  const [showPinScreen, setShowPinScreen] = useState(false);
-  const [showLoadingScreen, setShowLoadingScreen] = useState(false);
-  const [createdPin, setCreatedPin] = useState<string>('');
-  const [connectionStatuses, setConnectionStatuses] = useState<Record<string, string>>({});
-  const [showOAuthWebView, setShowOAuthWebView] = useState(false);
-  const [oauthUrl, setOauthUrl] = useState<string>('');
-  const [currentPlatform, setCurrentPlatform] = useState<string>('');
-  const [longPressTimer, setLongPressTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
-  
-  // EXACT same training state variables as UniversalOnboarding
-  const [username, setUsername] = useState<string>('');
-  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 socketRef = useRef<Socket | null>(null);
-  
-  // EXACT same background training state as UniversalOnboarding
-  const [isBackgroundTrainingStarted, setIsBackgroundTrainingStarted] = useState(false);
-  const [backgroundTrainingProgress, setBackgroundTrainingProgress] = useState('');
-  const [backgroundSocketId, setBackgroundSocketId] = useState<string | null>(null);
-
-  // Use the real platform connection hook
-  const { connectPlatform, disconnectPlatform, isConnecting } = useConnections();
-  
-  // Get the authenticated user from auth context
-  const { user } = useAuth();
-  
-  // Initialize username on mount
-  useEffect(() => {
-    const initializeUsername = async () => {
-      try {
-        // First try to get stored username
-        const storedUsername = await AsyncStorage.getItem('onairos_username');
-        if (storedUsername && !username) {
-          console.log('📝 [USERNAME] Using stored username:', storedUsername);
-          setUsername(storedUsername);
-          return;
-        }
-
-        // If no stored username, generate from user data
-        if (user && !username) {
-          const initialUsername = user?.email?.split('@')[0] || user?.name || `user_${Math.floor(Math.random() * 10000)}`;
-          console.log('📝 [USERNAME] Generated username from user data:', initialUsername);
-          setUsername(initialUsername);
-          // Store it for future use
-          await AsyncStorage.setItem('onairos_username', initialUsername);
-          return;
-        }
-
-        // If no user data and no stored username, create a fallback
-        if (!username) {
-          const fallbackUsername = `mobile_user_${Math.floor(Math.random() * 10000)}`;
-          console.log('📝 [USERNAME] Using fallback username:', fallbackUsername);
-          setUsername(fallbackUsername);
-          await AsyncStorage.setItem('onairos_username', fallbackUsername);
-        }
-      } catch (error) {
-        console.error('❌ [USERNAME] Error initializing username:', error);
-        // Fallback to simple username
-        const fallbackUsername = `user_${Math.floor(Math.random() * 10000)}`;
-        setUsername(fallbackUsername);
-      }
-    };
-
-    initializeUsername();
-  }, [user, username]);
-
-  // EXACT same ensureAuthToken function from UniversalOnboarding
-  const ensureAuthToken = async () => {
-    try {
-      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)}...`);
-        return existingToken;
-      }
-
-      console.log('🔐 Creating Enoch authentication token...');
-      console.log('🔍 [ENSURE AUTH] Current username state:', username);
-      console.log('🔍 [ENSURE AUTH] Current user state:', user);
-      
-      const fallbackEmail = user?.email || `${username || 'user'}@onairos.temp`;
-      const fallbackUsername = username || user?.name?.split('@')[0] || 'mobile_user';
-      
-      console.log('🔍 [ENSURE AUTH] Using fallback email:', fallbackEmail);
-      console.log('🔍 [ENSURE AUTH] Using fallback username:', fallbackUsername);
-      
-      // Create Enoch user
-      try {
-        await fetch('https://api2.onairos.uk/enoch/users/register', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            email: fallbackEmail,
-            name: fallbackUsername,
-            photoUrl: ''
-          })
-        });
-      } catch (enochError) {
-        console.warn('⚠️ Enoch user creation failed (continuing):', enochError);
-      }
-      
-      // Create Onairos account to get JWT token
-      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
-        })
-      });
-      
-      if (!onairosSignupResponse.ok) {
-        const errorText = await onairosSignupResponse.text();
-        throw new Error(`Onairos signup failed: ${onairosSignupResponse.status} ${errorText}`);
-      }
-      
-      const onairosResponseData = await onairosSignupResponse.json();
-      let authToken = onairosResponseData.token || onairosResponseData.data?.token || onairosResponseData.jwt;
-      
-      if (!authToken) {
-        throw new Error('No authentication token returned from server');
-      }
-      
-      // Store the token
-      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');
-      return authToken;
-      
-    } catch (error) {
-      console.error('❌ Error ensuring authentication token:', error);
-      throw error;
-    }
-  };
-
-  // EXACT same background training function from UniversalOnboarding
-  const startBackgroundTraining = useCallback(async (): Promise<void> => {
-    try {
-      console.log('🚀 [BACKGROUND] Starting background training optimization...');
-      setBackgroundTrainingProgress('Connecting...');
-      
-      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);
-      
-      // 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);
-      }
-      
-      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
-      });
-      
-      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: any) => {
-        console.log('🔥 [SOCKET] Received trainingUpdate event:', data);
-        if (data.progress) {
-          setBackgroundTrainingProgress(data.status || 'Processing...');
-          setPersonaProgress(data.progress);
-          setPersonaStatus(data.status || 'Training in progress');
-          console.log('📊 [BACKGROUND] Training progress:', data.progress, '%');
-        } else {
-          console.log('⚠️ [SOCKET] trainingUpdate event has no progress data:', data);
-        }
-      });
-      
-      backgroundSocket.on('disconnect', () => {
-        console.log('❌ [BACKGROUND] Socket disconnected');
-      });
-
-      backgroundSocket.on('trainingCompleted', (data: any) => {
-        console.log('🔥 [SOCKET] Received trainingCompleted event:', data);
-        console.log('✅ [BACKGROUND] Training Complete:', data);
-        setPersonaStatus('Running test inference');
-        setPersonaProgress(60);
-      });
-
-      backgroundSocket.on('inferenceCompleted', (data: any) => {
-        console.log('🔥 [SOCKET] Received inferenceCompleted event:', data);
-        console.log('🧠 [BACKGROUND] Inference Complete:', data);
-        setPersonaStatus('Uploading to S3');
-        setPersonaProgress(80);
-      });
-
-      backgroundSocket.on('modelStandby', (data: any) => {
-        console.log('🔥 [SOCKET] Received modelStandby event:', data);
-        console.log('🎉 [BACKGROUND] All Complete:', data);
-        setIsPersonaComplete(true);
-        setPersonaStatus('Complete!');
-        setPersonaProgress(100);
-      });
-
-      backgroundSocket.on('connect_error', (error: any) => {
-        console.error('❌ [BACKGROUND] Socket connection error:', error);
-        setBackgroundTrainingProgress('Connection failed');
-        setPersonaStatus('Connection error');
-        setPersonaProgress(0);
-      });
-      
-      // 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] Error starting background training:', error);
-      setBackgroundTrainingProgress('Failed to start training');
-      setPersonaStatus('Training failed');
-      setPersonaProgress(0);
-    }
-  }, [userInfo, username, user, connectedPlatforms]);
-
-  // EXACT same background training API call from UniversalOnboarding
-  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 - EXACT same as UniversalOnboarding
-      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');
-        setPersonaStatus('Connections required');
-        setHasError(true);
-        setBackgroundTrainingProgress('');
-        return;
-      }
-      
-      if (backgroundResult.success) {
-        console.log('✅ [BACKGROUND] Training started successfully');
-        console.log('🔍 [BACKGROUND] Setting isBackgroundTrainingStarted to true');
-        setIsBackgroundTrainingStarted(true);
-        setBackgroundTrainingProgress('Training model...');
-        setPersonaStatus('Training model...');
-        setPersonaProgress(25);
-        console.log('🔍 [BACKGROUND] Background training state updated:', {
-          isBackgroundTrainingStarted: true,
-          backgroundSocketId: socketId
-        });
-      } else {
-        console.error('❌ Background training start failed:', backgroundResult.error);
-        setPersonaStatus(`Error: ${backgroundResult.error || 'Background training failed to start'}`);
-        setHasError(true);
-        setBackgroundTrainingProgress('');
-        throw new Error(backgroundResult.error || 'Background training failed to start');
-      }
-    } catch (error) {
-      console.error('❌ [BACKGROUND] Background training error:', error);
-      setPersonaStatus('Training failed to start');
-      setHasError(true);
-      setBackgroundTrainingProgress('');
-      throw error;
-    }
-  };
-
-  // EXACT same continue training function from UniversalOnboarding
-  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)}...`);
-      
-      if (!backgroundSocketId) {
-        throw new Error('No background training socket available');
-      }
-      
-      const encryptedPin = await getEncryptedPinForAPI().catch(() => null);
-      
-      if (!encryptedPin) {
-        console.warn('⚠️ No encrypted PIN available, continuing without PIN validation');
-      }
-      
-      console.log('📤 [BACKGROUND] Sending PIN validation to continue training...');
-      setPersonaStatus('Validating PIN and continuing training');
-      setPersonaProgress(30);
-      
-      // Check socket connection status after PIN submission
-      console.log('🔍 [SOCKET] Socket connection status after PIN:', {
-        socketId: backgroundSocketId,
-        isConnected: socketRef.current?.connected,
-        socketExists: !!socketRef.current,
-        socketId_current: socketRef.current?.id
-      });
-      
-    } catch (error) {
-      console.error('❌ [BACKGROUND] Failed to continue training with PIN:', error);
-      throw error;
-    }
-  };
-
-  // Cleanup socket on unmount
-  useEffect(() => {
-    return () => {
-      if (socketRef.current) {
-        socketRef.current.disconnect();
-      }
-    };
-  }, []);
-
-  // Real platforms that can be connected (from UniversalOnboarding)
-  const platforms = [
-    {
-      id: 'pinterest',
-      name: 'Pinterest',
-      icon: getPlatformIcon('pinterest'),
-      description: 'We analyze your pins, boards, and interests to understand your style and preferences.',
-    },
-    {
-      id: 'youtube',
-      name: 'YouTube',
-      icon: getPlatformIcon('youtube'),
-      description: 'We analyze your watch history, likes, and subscriptions to understand your interests.',
-    },
-    {
-      id: 'linkedin',
-      name: 'LinkedIn',
-      icon: getPlatformIcon('linkedin'),
-      description: 'We analyze your professional network and career interests.',
-    },
-    {
-      id: 'reddit',
-      name: 'Reddit', 
-      icon: getPlatformIcon('reddit'),
-      description: 'We analyze your posts and comments to understand your interests.',
-    },
-    {
-      id: 'gmail',
-      name: 'Gmail',
-      icon: getPlatformIcon('gmail'),
-      description: 'We analyze your email patterns to understand your communication style.',
-    },
-  ];
-
-  const handlePlatformToggle = async (platformId: string, enabled: boolean) => {
-    console.log(`🔄 [PLATFORM TOGGLE] ${platformId} - enabled: ${enabled}, username: "${username}", user:`, user);
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    
-    try {
-      if (enabled) {
-        // Ensure we have a valid username before proceeding
-        let validUsername = username;
-        if (!validUsername || validUsername.trim() === '') {
-          console.log('⚠️ [PLATFORM TOGGLE] No username available, generating one...');
-          
-          // Try to get stored username first
-          const storedUsername = await AsyncStorage.getItem('onairos_username');
-          if (storedUsername) {
-            validUsername = storedUsername;
-            setUsername(validUsername);
-          } else {
-            // Generate username from user data or fallback
-            validUsername = user?.email?.split('@')[0] || user?.name || `mobile_user_${Math.floor(Math.random() * 10000)}`;
-            setUsername(validUsername);
-            await AsyncStorage.setItem('onairos_username', validUsername);
-          }
-          
-          console.log(`📝 [PLATFORM TOGGLE] Using username: "${validUsername}"`);
-        }
-
-        // Check if the platform has a native SDK
-        if (hasNativeSDK(platformId)) {
-          console.log(`🔧 [PLATFORM TOGGLE] ${platformId} has native SDK`);
-          // Use native SDK authentication (YouTube)
-          setCurrentPlatform(platformId);
-          setConnectionStatuses(prev => ({ ...prev, [platformId]: 'connecting' }));
-          const success = await initiateNativeAuth(platformId, validUsername);
-          
-          if (success) {
-            const newConnected = new Set(connectedPlatforms);
-            newConnected.add(platformId);
-            setConnectedPlatforms(newConnected);
-            setConnectionStatuses(prev => ({ ...prev, [platformId]: 'connected' }));
-            triggerHaptic(HapticType.SUCCESS);
-          } else {
-            setConnectionStatuses(prev => ({ ...prev, [platformId]: 'error' }));
-            triggerHaptic(HapticType.ERROR);
-          }
-        } else {
-          console.log(`🌐 [PLATFORM TOGGLE] ${platformId} using OAuth WebView with username: "${validUsername}"`);
-          // For platforms like Pinterest, use OAuth WebView
-          setCurrentPlatform(platformId);
-          setConnectionStatuses(prev => ({ ...prev, [platformId]: 'connecting' }));
-          
-          console.log(`🚀 [PLATFORM TOGGLE] Calling initiateOAuth for ${platformId}...`);
-          const oauthUrl = await initiateOAuth(platformId, validUsername);
-          console.log(`📡 [PLATFORM TOGGLE] OAuth URL received for ${platformId}:`, oauthUrl);
-          
-          if (oauthUrl) {
-            console.log(`✅ [PLATFORM TOGGLE] Setting OAuth URL and showing WebView for ${platformId}`);
-            setOauthUrl(oauthUrl);
-            setShowOAuthWebView(true);
-          } else {
-            console.log(`❌ [PLATFORM TOGGLE] No OAuth URL received for ${platformId}`);
-            setConnectionStatuses(prev => ({ ...prev, [platformId]: 'error' }));
-            triggerHaptic(HapticType.ERROR);
-          }
-        }
-      } else {
-        // Disconnect the platform
-        await disconnectPlatform(platformId);
-        const newConnected = new Set(connectedPlatforms);
-        newConnected.delete(platformId);
-        setConnectedPlatforms(newConnected);
-        setConnectionStatuses(prev => ({ ...prev, [platformId]: 'disconnected' }));
-        triggerHaptic(HapticType.BUTTON_PRESS);
-      }
-    } catch (error) {
-      console.error(`Error toggling platform ${platformId}:`, error);
-      setConnectionStatuses(prev => ({ ...prev, [platformId]: 'error' }));
-      triggerHaptic(HapticType.ERROR);
-    }
-  };
-
-  const handleUpdate = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    
-    // EXACT same logic as UniversalOnboarding handleProceed
-    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
-    });
-    
-    setShowPinScreen(true);
-  };
-
-  const handleConsentAccept = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    if (onPinComplete) {
-      onPinComplete(createdPin);
-    } else {
-      onUpdate(Array.from(connectedPlatforms));
-    }
-  };
-
-  const handleConsentDecline = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setShowConsentScreen(false);
-  };
-
-  const handleSkip = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    onSkip();
-  };
-
-  const handlePinComplete = async (pin: string) => {
-    setCreatedPin(pin);
-    
-    // Store PIN temporarily for training component access (EXACT same as UniversalOnboarding)
-    setTemporaryPin(pin);
-    
-    console.log('🔐 [PIN SUBMIT] PIN submitted, checking for background training...');
-    console.log('🔍 [PIN SUBMIT] Background training state:', {
-      isBackgroundTrainingStarted,
-      backgroundSocketId,
-      hasBackgroundSocket: !!backgroundSocketId,
-      userToken: !!userToken,
-      userInfo: !!userInfo
-    });
-    
-    // EXACT same logic as UniversalOnboarding handlePinSubmit
-    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(pin);
-        setShowPinScreen(false);
-        setShowLoadingScreen(true); // Move to loading screen to show training progress
-      } catch (error) {
-        console.error('❌ [PIN SUBMIT] Failed to continue background training:', error);
-        setPersonaStatus('Error: Failed to continue training');
-        setHasError(true);
-        setShowPinScreen(false);
-        setShowLoadingScreen(true);
-      }
-    } else {
-      console.log('ℹ️ [PIN SUBMIT] No background training detected');
-      setPersonaStatus('No training in progress. Please restart the flow.');
-      setHasError(true);
-      setShowPinScreen(false);
-      setShowLoadingScreen(true);
-    }
-    
-    console.log('🔐 [PIN SUBMIT] PIN stored securely, moved to loading screen');
-  };
-
-  const handleLoadingComplete = () => {
-    setShowLoadingScreen(false);
-    setShowConsentScreen(true);
-  };
-
-  const handleOAuthSuccess = (code: string) => {
-    console.log(`OAuth success for ${currentPlatform} with code:`, code);
-    
-    if (currentPlatform) {
-      // Update connected platforms
-      const newConnected = new Set(connectedPlatforms);
-      newConnected.add(currentPlatform);
-      setConnectedPlatforms(newConnected);
-      setConnectionStatuses(prev => ({ ...prev, [currentPlatform]: 'connected' }));
-      triggerHaptic(HapticType.SUCCESS);
-    }
-    
-    // Close the OAuth window
-    setShowOAuthWebView(false);
-    setOauthUrl('');
-    setCurrentPlatform('');
-  };
-
-  const handleOAuthClose = () => {
-    setShowOAuthWebView(false);
-    setOauthUrl('');
-    if (currentPlatform) {
-      setConnectionStatuses(prev => ({ ...prev, [currentPlatform]: 'disconnected' }));
-    }
-    setCurrentPlatform('');
-  };
-
-  const handlePinBack = () => {
-    setShowPinScreen(false);
-  };
-
-  const handleReviewerBypass = () => {
-    console.log('🔍 Reviewer bypass activated in new UI');
-    if (onReviewerBypass) {
-      onReviewerBypass();
-    }
-  };
-
-  const handleSkipLongPress = () => {
-    console.log('🔍 Skip button long press detected, starting reviewer bypass timer');
-    
-    // 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);
-  };
-
-  const handleSkipPressOut = () => {
-    console.log('🔍 Skip button press released, clearing reviewer bypass timer');
-    
-    // Clear the timer if the press is released before 4 seconds
-    if (longPressTimer) {
-      clearTimeout(longPressTimer);
-      setLongPressTimer(null);
-    }
-  };
-
-  // Calculate persona level based on connected platforms (1-5)
-  const personaLevel = Math.min(5, Math.max(1, connectedPlatforms.size + 1));
-
-  // Show PIN screen if triggered
-  if (showPinScreen) {
-    return (
-      <PinCreationScreen
-        visible={showPinScreen}
-        onComplete={handlePinComplete}
-        onBack={handlePinBack}
-      />
-    );
-  }
-
-  // Show loading screen if triggered
-  if (showLoadingScreen) {
-    return (
-      <PersonaLoadingScreen
-        visible={showLoadingScreen}
-        onComplete={handleLoadingComplete}
-        progress={personaProgress}
-        status={personaStatus}
-      />
-    );
-  }
-
-  // Show OAuth WebView if triggered
-  if (showOAuthWebView && oauthUrl) {
-    return (
-      <OAuthWebView
-        url={oauthUrl}
-        platform={currentPlatform}
-        onClose={handleOAuthClose}
-        onSuccess={handleOAuthSuccess}
-        onComplete={handleOAuthClose}
-      />
-    );
-  }
-
-  // Show consent screen if triggered
-  if (showConsentScreen) {
-    return (
-      <PersonalizationConsentScreen
-        visible={showConsentScreen}
-        onAccept={handleConsentAccept}
-        onDecline={handleConsentDecline}
-      />
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* Fixed Header and Persona Section */}
-      <View style={styles.fixedHeaderSection}>
-        {/* Heading */}
-        <View style={styles.headingContainer}>
-          <Text style={styles.title}>Connect platforms</Text>
-          <Text style={styles.subtitle}>More connections, smarter personalization.</Text>
-        </View>
-
-        {/* Persona Image */}
-        <View style={styles.personaContainer}>
-          <PersonaImage level={personaLevel} style={styles.largePersona} />
-        </View>
-      </View>
-
-      {/* Scrollable Platform Section */}
-      <KeyboardAvoidingView 
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.scrollableSection}
-      >
-        <ScrollView 
-          style={styles.scrollView} 
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={styles.scrollContent}
-        >
-          <View style={styles.platformsContainer}>
-            {platforms.map((platform, index) => (
-              <PlatformToggle
-                key={platform.id}
-                platform={platform}
-                isEnabled={connectedPlatforms.has(platform.id)}
-                onToggle={handlePlatformToggle}
-                fullWidth={true}
-                isLast={index === platforms.length - 1}
-                customIconSize={platform.id === 'youtube' ? 36 : undefined}
-              />
-            ))}
-          </View>
-        </ScrollView>
-      </KeyboardAvoidingView>
-
-      {/* Fixed Bottom Buttons */}
-      <View style={styles.bottomContainer}>
-        <View style={styles.buttonContainer}>
-          <PrimaryButton
-            label="Continue"
-            onPress={handleUpdate}
-            disabled={loading || connectedPlatforms.size === 0 || isConnecting}
-            loading={loading || isConnecting}
-          />
-        </View>
-        
-        <View style={styles.skipContainer}>
-          <TouchableOpacity
-            onPress={handleSkip}
-            onLongPress={handleSkipLongPress}
-            onPressOut={handleSkipPressOut}
-            activeOpacity={0.7}
-          >
-            <Text style={styles.skipButton}>
-              Skip
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: COLORS.surface,
-  },
-  
-  fixedHeaderSection: {
-    paddingTop: 8,
-    paddingHorizontal: 0,
-    backgroundColor: COLORS.surface,
-    maxHeight: '50%',  // Limit fixed section to 50% of screen
-    overflow: 'hidden', // Hide any overflow
-  },
-  
-  scrollableSection: {
-    flex: 1,
-  },
-  
-  scrollView: {
-    flex: 1,
-  },
-  
-  scrollContent: {
-    paddingTop: 0, // Ensure scroll starts at the top
-  },
-  
-  headingContainer: {
-    width: '100%',
-    marginBottom: 0,  // Remove margin to make persona very close
-    paddingHorizontal: 0,
-  },
-  
-  title: {
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700',
-    fontSize: 24,
-    lineHeight: 32,
-    color: COLORS.grey800,
-    textAlign: 'left',
-    marginBottom: 2,
-  },
-  
-  subtitle: {
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    fontSize: 16,
-    lineHeight: 24,
-    color: COLORS.grey600,
-    textAlign: 'left',
-    marginBottom: 0,  // Remove bottom margin to bring persona closer
-  },
-  
-  personaContainer: {
-    alignItems: 'center',
-    marginTop: -110,    // Negative margin to pull persona up into header space
-    marginBottom: 0,   // Remove bottom margin
-  },
-  
-  largePersona: {
-    width: 650,  // Make it bigger than default 200x200
-    height: 650,
-    marginTop: -20,    // Additional negative margin to override internal spacing
-    marginBottom: -20, // Pull content below up as well
-  },
-  
-  platformsContainer: {
-    paddingHorizontal: 0,
-    paddingTop: 8,   // Reduced from 20 to minimize space at top of scroll area
-    paddingBottom: 120, // More space to account for fixed buttons at bottom
-  },
-  
-  bottomContainer: {
-    position: 'absolute',
-    bottom: -40,  // Position 40px from bottom of screen
-    left: 0,
-    right: 0,
-    paddingHorizontal: 0,
-    paddingBottom: SPACING.xl,
-    backgroundColor: COLORS.surface,
-  },
-  
-  buttonContainer: {
-    marginBottom: 16,
-  },
-  
-  skipContainer: {
-    alignItems: 'center',
-  },
-  
-  skipButton: {
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '500',
-    color: COLORS.grey600,
-    textAlign: 'center',
-  },
-});
-
-export default PlatformConnectorsStep;