import { useTheme } from '@/components/ThemeContext';
import { RefreshProvider } from '@/components/ui/RefreshContext';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { Tabs } from 'expo-router';
import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
import { useTranslation } from 'react-i18next';
import { Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function TabsLayout() {
  const { isDark } = useTheme();
  const { t } = useTranslation();

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <RefreshProvider>
        <BottomSheetModalProvider>
          <Tabs
            screenOptions={{
              headerShown: false,
              tabBarStyle: {
                position: 'absolute',
                left: 16,
                right: 16,
                bottom: 0,
                height: 70,
                borderTopLeftRadius: 16,
                borderTopRightRadius: 16,
                backgroundColor: isDark ? '#0f172a' : '#fff',
                borderWidth: 1,
                borderColor: isDark ? '#334155' : '#e2e8f0',
                shadowColor: '#000',
                shadowOpacity: isDark ? 0.5 : 0.1,
                shadowOffset: { width: 0, height: -3 },
                shadowRadius: isDark ? 12 : 10,
                elevation: 8,
                overflow: 'hidden',
              },
              tabBarActiveTintColor: '#3b82f6',
              tabBarInactiveTintColor: isDark ? '#64748b' : '#94a3b8',
              tabBarLabelStyle: { fontSize: 12, fontWeight: '600' },
              tabBarItemStyle: {
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'flex-start',
                alignContent: 'center',
              },
              tabBarLabelPosition: 'below-icon',
            }}
          >
            <Tabs.Screen
              name="index"
              options={{
                tabBarLabel: ({ color }) => (
                  <Text
                    style={{
                      color: color,
                      fontSize: 12,
                      fontWeight: '600',
                      textAlign: 'center',
                      flexWrap: 'wrap',
                      width: 80, // yetarli joy berish
                    }}
                    numberOfLines={2} // 2 qatorga sig‘adi
                  >
                    {t('Bosh sahifa')}
                  </Text>
                ),
                tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
              }}
            />

            <Tabs.Screen
              name="create-announcements"
              options={{
                tabBarLabel: ({ focused, color }) => (
                  <Text
                    style={{
                      color: color,
                      fontSize: 12,
                      fontWeight: '600',
                      textAlign: 'center',
                      flexWrap: 'wrap',
                      width: 80, // yetarli joy berish
                    }}
                    numberOfLines={2} // 2 qatorga sig‘adi
                  >
                    {t("E'lon joylashtirish")}
                  </Text>
                ),
                tabBarIcon: ({ color, size }) => <PlusCircle color={color} size={size} />,
              }}
            />

            <Tabs.Screen
              name="announcements"
              options={{
                tabBarLabel: ({ focused, color }) => (
                  <Text
                    style={{
                      color: color,
                      fontSize: 12,
                      fontWeight: '600',
                      textAlign: 'center',
                      flexWrap: 'wrap',
                      width: 80, // yetarli joy berish
                    }}
                    numberOfLines={2} // 2 qatorga sig‘adi
                  >
                    {t("E'lonlar")}
                  </Text>
                ),
                tabBarIcon: ({ color, size }) => <Megaphone color={color} size={size} />,
              }}
            />

            <Tabs.Screen
              name="profile"
              options={{
                tabBarLabel: ({ focused, color }) => (
                  <Text
                    style={{
                      color: color,
                      fontSize: 12,
                      fontWeight: '600',
                      textAlign: 'center',
                      flexWrap: 'wrap',
                      width: 80, // yetarli joy berish
                    }}
                    numberOfLines={2} // 2 qatorga sig‘adi
                  >
                    {t('Profil')}
                  </Text>
                ),
                tabBarIcon: ({ color, size }) => <User color={color} size={size} />,
              }}
            />
          </Tabs>
        </BottomSheetModalProvider>
      </RefreshProvider>
    </GestureHandlerRootView>
  );
}