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

import LoginScreen        from './src/screens/LoginScreen'
import DashboardScreen    from './src/screens/DashboardScreen'
import TimeEntryScreen    from './src/screens/TimeEntryScreen'
import ExpenseScreen      from './src/screens/ExpenseScreen'
import DocumentScanScreen from './src/screens/DocumentScanScreen'
import AiChatScreen       from './src/screens/AiChatScreen'

const Tab = createBottomTabNavigator()

const TEAL = '#0D9394'
const GREY = '#9CA3AF'

const TAB_ICONS: Record<string, string> = {
  Dashboard: '🏠', Time: '⏱', Expenses: '🧾', Documents: '📷', AI: '🤖',
}

function TabIcon({ name, focused }: { name: string; focused: boolean }) {
  return <Text style={{ fontSize: 20, opacity: focused ? 1 : 0.5 }}>{TAB_ICONS[name] ?? '•'}</Text>
}

export default function App() {
  const [user, setUser] = useState<{ name: string; token: string } | null>(null)

  if (!user) {
    return (
      <SafeAreaProvider>
        <StatusBar style='dark' />
        <LoginScreen onLogin={setUser} />
      </SafeAreaProvider>
    )
  }

  return (
    <SafeAreaProvider>
      <StatusBar style='dark' />
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused }) => <TabIcon name={route.name} focused={focused} />,
            tabBarActiveTintColor:   TEAL,
            tabBarInactiveTintColor: GREY,
            tabBarStyle: {
              backgroundColor: '#fff',
              borderTopColor:  '#E5E7EB',
              paddingBottom:   4,
              height:          60,
            },
            tabBarLabelStyle: { fontSize: 10, fontWeight: '600' },
            headerStyle:      { backgroundColor: '#fff', shadowColor: 'transparent', elevation: 0 },
            headerTintColor:  '#1A1A2E',
            headerTitleStyle: { fontWeight: '700' },
          })}
        >
          <Tab.Screen name='Dashboard' component={DashboardScreen} />
          <Tab.Screen name='Time'      component={TimeEntryScreen} options={{ title: 'Log Time' }} />
          <Tab.Screen name='Expenses'  component={ExpenseScreen} />
          <Tab.Screen name='Documents' component={DocumentScanScreen} options={{ title: 'Scan' }} />
          <Tab.Screen name='AI'        component={AiChatScreen} options={{ title: 'AI Chat' }} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}
