import React, { Suspense } from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import { store } from './store/store';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Text } from 'react-native';

const LoginScreen = React.lazy(() => import('./screens/LoginScreen'));
const ProjectsScreen = React.lazy(() => import('./screens/ProjectsScreen'));
const ProjectDetailsScreen = React.lazy(() => import('./screens/ProjectDetailsScreen'));

const Stack = createStackNavigator();

const DarkTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff00ff',
    background: '#000000',
    card: '#1a1a1a',
    text: '#ffffff',
    border: '#333333',
  },
};

function LoadingScreen() {
  return <Text style={{ color: '#ffffff' }}>Betöltés...</Text>;
}

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Provider store={store}>
        <NavigationContainer theme={DarkTheme}>
          <Suspense fallback={<LoadingScreen />}>
            <Stack.Navigator>
              <Stack.Screen name="Login" component={LoginScreen} options={{ title: 'Bejelentkezés' }} />
              <Stack.Screen name="Projects" component={ProjectsScreen} options={{ title: 'Projektek' }} />
              <Stack.Screen name="Details" component={ProjectDetailsScreen} options={{ title: 'Részletek' }} />
            </Stack.Navigator>
          </Suspense>
        </NavigationContainer>
      </Provider>
    </GestureHandlerRootView>
  );
}