import 'react-native-gesture-handler'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { StatusBar } from 'expo-status-bar'
import { Text, View } from 'react-native'

import { AuthProvider, useAuth } from './src/context/AuthContext.jsx'
import HomeScreen from './src/screens/HomeScreen.jsx'
import InventoryScreen from './src/screens/InventoryScreen.jsx'
import SearchScreen from './src/screens/SearchScreen.jsx'
import BarcodeScreen from './src/screens/BarcodeScreen.jsx'
import ProfileScreen from './src/screens/ProfileScreen.jsx'
import ShoppingListsScreen from './src/screens/ShoppingListsScreen.jsx'
import MealPlannersScreen from './src/screens/MealPlannersScreen.jsx'
import AdminScreen from './src/screens/AdminScreen.jsx'
import UsersScreen from './src/screens/UsersScreen.jsx'
import { colors } from './src/theme.js'

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

function TabIcon({ name, focused }) {
  const icons = {
    Home: '🏠', Inventory: '📦', Search: '🔍', Barcode: '📷',
    Shopping: '🛒', Meals: '🍽️', Profile: '👤', Admin: '⚙️', Users: '👥',
  }
  return (
    <Text style={{ fontSize: 18, opacity: focused ? 1 : 0.5 }}>{icons[name] || '•'}</Text>
  )
}

function MainTabs() {
  const { isSiteAdmin } = useAuth()

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => <TabIcon name={route.name} focused={focused} />,
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textMuted,
        tabBarStyle: { backgroundColor: colors.surface, borderTopColor: colors.border },
        headerStyle: { backgroundColor: colors.surface },
        headerTintColor: colors.text,
        headerTitleStyle: { fontWeight: '700' },
        tabBarLabelStyle: { fontSize: 10 },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} />
      <Tab.Screen name="Inventory" component={InventoryScreen} options={{ title: 'Inventory' }} />
      <Tab.Screen name="Search" component={SearchScreen} options={{ title: 'Search' }} />
      <Tab.Screen name="Barcode" component={BarcodeScreen} options={{ title: 'Barcode' }} />
      <Tab.Screen name="Shopping" component={ShoppingListsScreen} options={{ title: 'Shopping' }} />
      <Tab.Screen name="Meals" component={MealPlannersScreen} options={{ title: 'Meals' }} />
      <Tab.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile' }} />
      {isSiteAdmin && <Tab.Screen name="Admin" component={AdminScreen} options={{ title: 'Admin' }} />}
      {isSiteAdmin && <Tab.Screen name="Users" component={UsersScreen} options={{ title: 'Users' }} />}
    </Tab.Navigator>
  )
}

export default function App() {
  return (
    <SafeAreaProvider>
      <AuthProvider>
        <NavigationContainer>
          <MainTabs />
        </NavigationContainer>
        <StatusBar style="auto" />
      </AuthProvider>
    </SafeAreaProvider>
  )
}