App.js

import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { BlurView } from 'expo-blur';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import { ExpenseProvider, useExpenseContext } from './src/contexts/ExpenseContext';
import { AuthProvider, useAuth } from './src/contexts/AuthContext';
import Login from './src/components/Auth/Login';
import ExpenseDetailScreen from './src/screens/ExpenseDetailScreen';
import Dashboard from './src/components/Dashboard/Dashboard';
import Records from './src/components/Records/Records';
import Categories from './src/components/Categories/Categories';
import Budget from './src/components/Budget/Budget';
import SettingsScreen from './src/components/Settings/Settings';
import { BarChart3, Calendar, CreditCard, Tag, Settings } from 'lucide-react-native';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function TabNavigator() {
  const { state } = useExpenseContext();
  const isDark = state.theme === 'dark';
  const insets = useSafeAreaInsets();
  
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let IconComponent;

          if (route.name === 'Dashboard') {
            IconComponent = BarChart3;
          } else if (route.name === 'Records') {
            IconComponent = Calendar;
          } else if (route.name === 'Budget') {
            IconComponent = CreditCard;
          } else if (route.name === 'Categories') {
            IconComponent = Tag;
          } else if (route.name === 'Settings') {
            IconComponent = Settings;
          }

          return <IconComponent size={size} color={color} />;
        },
        tabBarActiveTintColor: '#007bff',
        tabBarInactiveTintColor: isDark ? '#999' : '#666',
        tabBarBackground: () => (
          <BlurView
            intensity={80}
            tint={isDark ? 'dark' : 'light'}
            style={{
              position: 'absolute',
              left: 0,
              right: 0,
              bottom: 0,
              height: 60 + (insets.bottom > 0 ? insets.bottom : 0),
            }}
          />
        ),
        tabBarStyle: {
          backgroundColor: 'transparent',
          borderTopWidth: 0,
          paddingBottom: insets.bottom > 0 ? insets.bottom : 5,
          paddingTop: 5,
          height: 60 + (insets.bottom > 0 ? insets.bottom : 0),
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          elevation: 0,
          shadowOpacity: 0,
          borderTopColor: 'transparent',
        },
        headerShown: false,
      })}
    >
      <Tab.Screen 
        name="Dashboard" 
        component={Dashboard} 
        options={{ title: 'Dashboard' }}
      />
      <Tab.Screen 
        name="Records" 
        component={Records} 
        options={{ title: 'Records' }}
      />
      <Tab.Screen 
        name="Budget" 
        component={Budget} 
        options={{ title: 'Budget' }}
      />
      <Tab.Screen 
        name="Categories" 
        component={Categories} 
        options={{ title: 'Categories' }}
      />
      <Tab.Screen 
        name="Settings" 
        component={SettingsScreen} 
        options={{ title: 'Settings' }}
      />
    </Tab.Navigator>
  );
}

function AppContent() {
  const { user } = useAuth();

  // Show login if user is not authenticated
  if (!user) {
    return <Login />;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Main" component={TabNavigator} />
        <Stack.Screen 
          name="ExpenseDetail" 
          component={ExpenseDetailScreen}
          options={{
            headerShown: false,
            presentation: 'modal'
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function App() {
  return (
    <SafeAreaProvider>
      <AuthProvider>
        <ExpenseProvider>
          <AppContent />
        </ExpenseProvider>
      </AuthProvider>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
});

export default App;