import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text } from 'react-native';
import {
  HomeScreen,
  SearchScreen,
  MyOrdersScreen,
  OffersScreen,
  AccountScreen,
} from '@features/screens';

export type AppStackParamList = {
  HomeScreen: undefined;
  SearchScreen: undefined;
  MyOrdersScreen: undefined;
  OffersScreen: undefined;
  AccountScreen: undefined;
};

const Tab = createBottomTabNavigator<AppStackParamList>();

const tabIcons: Record<string, string> = {
  HomeScreen: '🏠',
  SearchScreen: '🔍',
  MyOrdersScreen: '📦',
  OffersScreen: '🏷️',
  AccountScreen: '👤',
};

const renderTabIcon = (routeName: string, focused: boolean) => (
  <Text style={{ fontSize: 22, opacity: focused ? 1 : 0.5 }}>
    {tabIcons[routeName]}
  </Text>
);

export const AppStack: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarIcon: ({ focused }) => renderTabIcon(route.name, focused),
        tabBarActiveTintColor: '#05824C',
        tabBarInactiveTintColor: '#666666',
        tabBarStyle: {
          paddingBottom: 8,
          paddingTop: 8,
          height: 60,
        },
        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: '500',
        },
      })}
    >
      <Tab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="SearchScreen"
        component={SearchScreen}
        options={{ tabBarLabel: 'Search' }}
      />
      <Tab.Screen
        name="MyOrdersScreen"
        component={MyOrdersScreen}
        options={{ tabBarLabel: 'Orders' }}
      />
      <Tab.Screen
        name="OffersScreen"
        component={OffersScreen}
        options={{ tabBarLabel: 'Offers' }}
      />
      <Tab.Screen
        name="AccountScreen"
        component={AccountScreen}
        options={{ tabBarLabel: 'Account' }}
      />
    </Tab.Navigator>
  );
};