demoapp/App.tsx

import {
  StatusBar,
  useColorScheme,
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
  Alert,
  NativeModules,
  Image,
  ScrollView,
} from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { useState, useEffect } from 'react';
import Login from './src/components/Login';
import Register from './src/components/Register';
import { authAPI } from './src/services/authAPI';
import { networkService } from './src/services/networkService';

type Screen = 'login' | 'register' | 'home';
const { MyNativeModule } = NativeModules;

function App() {
  const isDarkMode = useColorScheme() === 'dark';
  const [currentScreen, setCurrentScreen] = useState<Screen>('login');
  const [isInitialized, setIsInitialized] = useState(false);
  const [isOnline, setIsOnline] = useState(true);
  const [currentUser, setCurrentUser] = useState<any>(null);
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [isGeneratingQR, setIsGeneratingQR] = useState(false);

  // Initialize app
  useEffect(() => {
    initializeApp();
    console.log("MyNativeModule", MyNativeModule);
    MyNativeModule.greet("John").then((msg: any) => {
      console.log(msg);
    });

    // Listen for network changes
    const unsubscribe = networkService.addListener((networkState) => {
      setIsOnline(networkState.isConnected);
    });

    return unsubscribe;
  }, []);

  const initializeApp = async () => {
    try {
      console.log('Initializing app...');

      // Initialize authentication system
      await authAPI.initialize();

      // Check if user is already logged in
      const isLoggedIn = await authAPI.isLoggedIn();
      if (isLoggedIn) {
        const user = await authAPI.getCurrentUser();
        setCurrentUser(user);
        setCurrentScreen('home');
      }

      setIsInitialized(true);
      console.log('App initialized successfully');
    } catch (error) {
      console.error('App initialization error:', error);
      setIsInitialized(true); // Continue anyway
    }
  };

  const navigateToLogin = () => {
    setCurrentUser(null);
    setQrCode(null); // Clear QR code when navigating to login
    setCurrentScreen('login');
  };

  const navigateToRegister = () => setCurrentScreen('register');

  const navigateToHome = async () => {
    const user = await authAPI.getCurrentUser();
    setCurrentUser(user);
    setQrCode(null); // Clear old QR code when new user logs in
    setCurrentScreen('home');
  };

  const handleLogout = async () => {
    try {
      await authAPI.logout();
      setQrCode(null); // Clear QR code on logout
      navigateToLogin();
      Alert.alert('Success', 'Logged out successfully');
    } catch (error) {
      console.error('Logout error:', error);
      Alert.alert('Error', 'Failed to logout');
    }
  };

  const showAppStatus = async () => {
    try {
      const status = await authAPI.getAppStatus();
      const statusMessage = `
Network: ${status.network.isOnline ? 'Online' : 'Offline'}
Users: ${status.storage.totalUsers}
Current User: ${status.authentication.currentUser || 'None'}
Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}
      `.trim();

      Alert.alert('App Status', statusMessage);
    } catch (error) {
      Alert.alert('Error', 'Failed to get app status');
    }
  };

  const generateQRCode = async () => {
    if (!currentUser?.email) {
      Alert.alert('Error', 'No user email available');
      return;
    }

    setIsGeneratingQR(true);
    try {
      const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
      const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
      setQrCode(base64Image);
      Alert.alert('Success', 'QR Code generated successfully!');
    } catch (error) {
      console.error('QR Code generation error:', error);
      Alert.alert('Error', 'Failed to generate QR code');
    } finally {
      setIsGeneratingQR(false);
    }
  };

  const renderScreen = () => {
    switch (currentScreen) {
      case 'login':
        return (
          <Login
            onNavigateToRegister={navigateToRegister}
            onLoginSuccess={navigateToHome}
          />
        );
      case 'register':
        return (
          <Register
            onNavigateToLogin={navigateToLogin}
            onRegisterSuccess={navigateToHome}
          />
        );
      case 'home':
        return (
          <ScrollView style={styles.homeContainer} contentContainerStyle={styles.scrollContent}>
            <View style={styles.statusBar}>
              <Text style={styles.statusText}>
                {isOnline ? '🟢 Online' : '🔴 Offline'}
              </Text>
            </View>

            <Text style={styles.welcomeText}>
              Welcome, {currentUser?.fullName || 'User'}!
            </Text>

            <Text style={styles.emailText}>
              {currentUser?.email}
            </Text>

            {qrCode && (
              <View style={styles.qrContainer}>
                <Text style={styles.qrLabel}>Your QR Code:</Text>
                <Image
                  source={{ uri: qrCode }}
                  style={styles.qrImage}
                />
              </View>
            )}

            <View style={styles.buttonContainer}>
              <TouchableOpacity
                style={styles.qrButton}
                onPress={generateQRCode}
                disabled={isGeneratingQR}
              >
                <Text style={styles.buttonText}>
                  {isGeneratingQR ? 'Generating...' : 'Generate QR Code'}
                </Text>
              </TouchableOpacity>

              <TouchableOpacity style={styles.statusButton} onPress={showAppStatus}>
                <Text style={styles.buttonText}>App Status</Text>
              </TouchableOpacity>

              <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
                <Text style={styles.buttonText}>Logout</Text>
              </TouchableOpacity>
            </View>

            <Text style={styles.infoText}>
              {isOnline
                ? 'Your data is synced with the cloud'
                : 'Working offline - data saved locally'}
            </Text>
          </ScrollView>
        );
      default:
        return null;
    }
  };

  // Show loading screen while initializing
  if (!isInitialized) {
    return (
      <SafeAreaProvider>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>Initializing...</Text>
        </View>
      </SafeAreaProvider>
    );
  }

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      {renderScreen()}
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  loadingText: {
    fontSize: 18,
    color: '#3bb6d8',
    fontWeight: '600',
  },
  homeContainer: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  scrollContent: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingBottom: 50,
    minHeight: '100%',
  },
  statusBar: {
    position: 'absolute',
    top: 60,
    right: 20,
    backgroundColor: 'white',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    zIndex: 10,
  },
  statusText: {
    fontSize: 12,
    fontWeight: '600',
  },
  welcomeText: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
    textAlign: 'center',
    marginTop: 40,
  },
  emailText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
  },
  qrContainer: {
    alignItems: 'center',
    marginBottom: 30,
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  qrLabel: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
    marginBottom: 12,
  },
  qrImage: {
    width: 300,
    height: 300,
    borderRadius: 8,
  },
  buttonContainer: {
    flexDirection: 'column',
    gap: 12,
    marginBottom: 30,
    width: '100%',
  },
  qrButton: {
    backgroundColor: '#10b981',
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderRadius: 25,
    alignItems: 'center',
  },
  statusButton: {
    backgroundColor: '#3bb6d8',
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderRadius: 25,
    alignItems: 'center',
  },
  logoutButton: {
    backgroundColor: '#ff6b6b',
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderRadius: 25,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 16,
  },
  infoText: {
    fontSize: 14,
    color: '#888',
    textAlign: 'center',
    fontStyle: 'italic',
  },
});

export default App;