import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { Text, ActivityIndicator, View } from "react-native";
import { useAuth } from "../contexts/AuthContext";

import LoginScreen    from "../screens/LoginScreen";
import DashboardScreen from "../screens/DashboardScreen";
import AccountsScreen  from "../screens/AccountsScreen";
import OperationsScreen from "../screens/OperationsScreen";
import BudgetsScreen   from "../screens/BudgetsScreen";
import CalendarScreen  from "../screens/CalendarScreen";

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

const THEME = {
  primary:  "#3b82f6",
  surface:  "#ffffff",
  bg:       "#f4f6fa",
  text:     "#1e293b",
  muted:    "#64748b",
};

function TabNavigator() {
  const tabIcon = (emoji: string) => ({ focused }: any) => (
    <Text style={{ fontSize: focused ? 22 : 18 }}>{emoji}</Text>
  );
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: THEME.primary,
        tabBarInactiveTintColor: THEME.muted,
        tabBarStyle: { backgroundColor: THEME.surface, borderTopColor: "#e2e8f0", paddingBottom: 4 },
        tabBarLabelStyle: { fontSize: 11, fontWeight: "600" },
      }}
    >
      <Tab.Screen name="Дашборд"   component={DashboardScreen}   options={{ tabBarIcon: tabIcon("📊") }} />
      <Tab.Screen name="Счета"     component={AccountsScreen}    options={{ tabBarIcon: tabIcon("🏦") }} />
      <Tab.Screen name="Операции"  component={OperationsScreen}  options={{ tabBarIcon: tabIcon("💸") }} />
      <Tab.Screen name="Бюджеты"   component={BudgetsScreen}     options={{ tabBarIcon: tabIcon("🎯") }} />
      <Tab.Screen name="Календарь" component={CalendarScreen}    options={{ tabBarIcon: tabIcon("📅") }} />
    </Tab.Navigator>
  );
}

export default function AppNavigator() {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: THEME.bg }}>
        <ActivityIndicator size="large" color={THEME.primary} />
      </View>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {user
          ? <Stack.Screen name="Main" component={TabNavigator} />
          : <Stack.Screen name="Login" component={LoginScreen} />
        }
      </Stack.Navigator>
    </NavigationContainer>
  );
}