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';
import { ScannerScreen } from './src/screens/ScannerScreen';

type Screen = 'login' | 'register' | 'home' | 'scanner';
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);
  const [scannedCodes, setScannedCodes] = useState<any[]>([]);

  // 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 handleScanResult = (result: any) => {
    console.log('Scan result:', result);
    setScannedCodes(prev => [
      {
        code: result.code,
        format: result.format,
        timestamp: new Date().toLocaleTimeString(),
      },
      ...prev,
    ]);
    Alert.alert(
      '✓ Scanned Successfully',
      `Code: ${result.code}\nFormat: ${result.format}`,
      [
        {
          text: 'Close',
          onPress: () => setCurrentScreen('home'),
        },
      ]
    );
  };

  const openScanner = () => {
    setCurrentScreen('scanner');
  } 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 'scanner':
      return (
        <ScannerScreen
          presignedUrl="https://your-backend-presigned-url.com"
          onScan={handleScanResult}
        />
      );
    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.scannerButton}
              onPress={openScanner}
            >
              <Text style={styles.buttonText}>
                📱 Scan QR/Barcode
              </Text>
            </TouchableOpacity>

            <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>

          {scannedCodes.length > 0 && (
            <View style={styles.scannedContainer}>
              <Text style={styles.scannedTitle}>
                Scanned Codes ({scannedCodes.length})
              </Text>
              {scannedCodes.slice(0, 5).map((item, index) => (
                <View key={index} style={styles.scannedItem}>
                  <Text style={styles.scannedCode}>{item.code}</Text>
                  <View style={styles.scannedFooter}>
                    <Text style={styles.scannedFormat}>{item.format}</Text>
                    <Text style={styles.scannedTime}>{item.timestamp}</Text>
                  </View>
                </View>
              ))}
            </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%',
  },
  scannerButton: {
    backgroundColor: '#9333ea',
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderRadius: 25,
    alignItems: 'center',
  },
  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,
  },
  scannedContainer: {
    width: '100%',
    marginBottom: 20,
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  scannedTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
    marginBottom: 12,
  },
  scannedItem: {
    backgroundColor: '#f5f5f5',
    borderLeftWidth: 4,
    borderLeftColor: '#9333ea',
    paddingHorizontal: 12,
    paddingVertical: 10,
    marginBottom: 8,
    borderRadius: 4,
  },
  scannedCode: {
    fontSize: 13,
    fontWeight: '600',
    color: '#000',
    marginBottom: 4,
  },
  scannedFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  scannedFormat: {
    fontSize: 11,
    color: '#666',
    fontWeight: '500',
  },
  scannedTime: {
    fontSize: 11,
    color: '#999',
  },
  infoText: {
    fontSize: 14,
    color: '#888',
    textAlign: 'center',
    fontStyle: 'italic',
  },
});

export default App;
