import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useTheme } from 'react-native-paper';

// Импортируем существующие экраны
import { ConversationsScreen } from '../screens/ConversationsScreen';
import { ChatScreen } from '../screens/ChatScreen';

// Заглушки для новых экранов (создадим позже)
import { ContactsScreen } from '../screens/ContactsScreen';
import { ProfileScreen } from '../screens/ProfileScreen';

const Tab = createBottomTabNavigator();
const ChatsStack = createNativeStackNavigator();
const ContactsStack = createNativeStackNavigator();
const ProfileStack = createNativeStackNavigator();

// Стек навигации для чатов
function ChatsStackNavigator() {
  return (
    <ChatsStack.Navigator>
      <ChatsStack.Screen 
        name="ConversationsList" 
        component={ConversationsScreen}
        options={{ 
          title: 'Чаты',
          headerLargeTitle: true,
        }}
      />
      <ChatsStack.Screen 
        name="Chat" 
        component={ChatScreen}
        options={({ route }) => ({ 
          title: route.params?.title || 'Чат',
        })}
      />
    </ChatsStack.Navigator>
  );
}

// Стек навигации для контактов
function ContactsStackNavigator() {
  return (
    <ContactsStack.Navigator>
      <ContactsStack.Screen 
        name="ContactsList" 
        component={ContactsScreen}
        options={{ 
          title: 'Контакты',
          headerLargeTitle: true,
        }}
      />
    </ContactsStack.Navigator>
  );
}

// Стек навигации для профиля
function ProfileStackNavigator() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen 
        name="ProfileMain" 
        component={ProfileScreen}
        options={{ 
          title: 'Профиль',
          headerLargeTitle: true,
        }}
      />
    </ProfileStack.Navigator>
  );
}

export function MainNavigator() {
  const theme = useTheme();
  
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: string;

          if (route.name === 'Chats') {
            iconName = focused ? 'message' : 'message-outline';
          } else if (route.name === 'Contacts') {
            iconName = focused ? 'account-group' : 'account-group-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'account-circle' : 'account-circle-outline';
          } else {
            iconName = 'help';
          }

          return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: 'gray',
        headerShown: false,
        tabBarStyle: {
          backgroundColor: theme.colors.surface,
          borderTopColor: theme.colors.outlineVariant,
          borderTopWidth: 1,
        },
      })}
    >
      <Tab.Screen 
        name="Chats" 
        component={ChatsStackNavigator}
        options={{ 
          tabBarLabel: 'Чаты',
          tabBarBadge: undefined, // Здесь можно показывать количество непрочитанных
        }}
      />
      <Tab.Screen 
        name="Contacts" 
        component={ContactsStackNavigator}
        options={{ 
          tabBarLabel: 'Контакты',
        }}
      />
      <Tab.Screen 
        name="Profile" 
        component={ProfileStackNavigator}
        options={{ 
          tabBarLabel: 'Профиль',
        }}
      />
    </Tab.Navigator>
  );
}