import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { Colors } from './src/constants/colors';
import HomeScreen from './src/screens/HomeScreen';
import LoginScreen from './src/screens/LoginScreen';
import QuizScreen from './src/screens/QuizScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import StatisticsScreen from './src/screens/StatisticsScreen';
import { apiService } from './src/utils/api';

const Stack = createStackNavigator();

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [user, setUser] = useState<any>(null);

  useEffect(() => {
    checkAuthStatus();
  }, []);

  const checkAuthStatus = async () => {
    try {
      const token = apiService.getToken();
      if (token) {
        console.log('Checking auth status with token:', token);
        const profileResponse = await apiService.getProfile();
        console.log('Full profile response:', profileResponse);
        const userData = profileResponse; // Die API gibt direkt die User-Daten zurück
        console.log('Profile response user data:', userData);
        setUser(userData);
        setIsAuthenticated(true);
      }
    } catch (error) {
      console.log('User not authenticated:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleLogin = (userData: any) => {
    console.log('Login - Setting user data:', userData);
    setUser(userData);
    setIsAuthenticated(true);
  };

  const handleLogout = () => {
    apiService.logout();
    setUser(null);
    setIsAuthenticated(false);
  };

  if (isLoading) {
    return null; // oder Lade-Screen
  }

  return (
    <NavigationContainer>
      <StatusBar style="light" backgroundColor={Colors.background} />
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        {isAuthenticated ? (
          <>
            <Stack.Screen name="Home">
              {(props) => (
                <HomeScreen 
                  {...props} 
                  user={user} 
                  onLogout={handleLogout} 
                />
              )}
            </Stack.Screen>
            <Stack.Screen name="Quiz">
              {(props) => (
                <QuizScreen 
                  {...props} 
                  user={user} 
                />
              )}
            </Stack.Screen>
            <Stack.Screen name="Statistics">
              {(props) => (
                <StatisticsScreen 
                  {...props} 
                />
              )}
            </Stack.Screen>
            <Stack.Screen name="Profile">
              {(props) => (
                <ProfileScreen 
                  {...props} 
                  user={user} 
                  onLogout={handleLogout} 
                />
              )}
            </Stack.Screen>
          </>
        ) : (
          <>
            <Stack.Screen name="Login">
              {(props) => (
                <LoginScreen 
                  {...props} 
                  onLogin={handleLogin} 
                />
              )}
            </Stack.Screen>
            <Stack.Screen name="Register">
              {(props) => (
                <RegisterScreen 
                  {...props} 
                  onLogin={handleLogin} 
                />
              )}
            </Stack.Screen>
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}