import Logo from '@/assets/images/logo.png';
import { useTheme } from '@/components/ThemeContext';
import { RefreshProvider } from '@/components/ui/RefreshContext';
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Tabs } from 'expo-router';
import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
import { useTranslation } from 'react-i18next';
import { Platform, StyleSheet, Text, View } 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 }}>
      <BottomSheetModalProvider>
        <RefreshProvider>
          <Tabs
            screenOptions={{
              headerShown: false,
              headerStyle: {
                backgroundColor: isDark ? '#0f172a' : '#ffffff',
                borderBottomWidth: 0.5,
                borderBottomColor: isDark ? '#334155' : '#e2e8f0',
              },
              headerTitleStyle: {
                fontSize: 24,
                fontWeight: '700',
                color: isDark ? '#f1f5f9' : '#0f172a',
              },
              headerShadowVisible: false,
              tabBarStyle: {
                position: 'absolute',
                left: 16,
                right: 16,
                bottom: 4,
                height: 70,
                paddingTop: 8,
                paddingBottom: 12,
                borderTopLeftRadius: 24,
                borderTopRightRadius: 24,
                backgroundColor: isDark ? 'rgba(15, 23, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)', // #0f172a mos fon
                borderWidth: 0.5,
                borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(226, 232, 240, 0.8)', // quyuq fon uchun yengil oq
                ...Platform.select({
                  ios: {
                    shadowColor: isDark ? '#0f172a' : '#0f172a', // shadow qora emas #0f172a bilan uyg‘un
                    shadowOffset: { width: 0, height: 8 },
                    shadowOpacity: isDark ? 0.5 : 0.15,
                    shadowRadius: 24,
                  },
                  android: {
                    elevation: 10,
                  },
                }),
                overflow: 'visible',
              },
              tabBarActiveTintColor: isDark ? '#3b82f6' : '#3b82f6', // active ko‘k
              tabBarInactiveTintColor: isDark ? '#94a3b8' : '#64748b', // inactive ochiq kulrang
              tabBarItemStyle: {
                flex: 1,
                paddingVertical: 4,
              },
              tabBarLabelPosition: 'below-icon',
            }}
          >
            <Tabs.Screen
              name="index"
              options={{
                title: 'Bosh sahifa',
                tabBarLabel: ({ color, focused }) => (
                  <Text
                    numberOfLines={1}
                    style={[
                      styles.tabLabel,
                      {
                        marginLeft: 10,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t('Bosh sahifa')}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      {
                        marginLeft: 10,
                      },
                    ]}
                  >
                    <Home color={color} size={30} strokeWidth={2} />
                  </View>
                ),
              }}
            />

            <Tabs.Screen
              name="create-announcements"
              options={{
                title: "Qo'shish",
                tabBarLabel: ({ color, focused }) => (
                  <Text
                    numberOfLines={1}
                    style={[
                      styles.tabLabel,
                      {
                        marginRight: 10,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t("Qo'shish")}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      {
                        marginRight: 10,
                      },
                    ]}
                  >
                    <PlusCircle color={color} size={30} strokeWidth={2} />
                  </View>
                ),
              }}
            />

            <Tabs.Screen
              name="e-services"
              options={{
                title: 'Davlat xizmatlari',
                tabBarLabel: () => null,
                tabBarItemStyle: {
                  flex: 1.2,
                  top: -10,
                },
                tabBarIcon: ({ focused }) => (
                  <View style={styles.centerTabContainer}>
                    <LinearGradient
                      colors={focused ? ['#3b82f6', '#2563eb'] : ['#1e40af', '#1e3a8a']} // dark mod uchun quyuq ko‘k
                      start={{ x: 0, y: 0 }}
                      end={{ x: 1, y: 1 }}
                      style={styles.centerTabGradient}
                    >
                      <View style={styles.centerTabInner}>
                        <Image source={Logo} style={{ width: 60, height: 60 }} />
                      </View>
                    </LinearGradient>
                    <Text
                      numberOfLines={1} // 1 qatorda
                      adjustsFontSizeToFit
                      minimumFontScale={0.85}
                      style={[
                        styles.centerTabLabel,
                        {
                          color: focused ? '#3b82f6' : isDark ? '#94a3b8' : '#64748b',
                          fontWeight: focused ? '700' : '600',
                          fontSize: 13, // kattalashtirildi
                          width: 100, // kenglik oshirildi
                          textAlign: 'center',
                        },
                      ]}
                    >
                      {t('Davlat xizmatlari')}
                    </Text>
                  </View>
                ),
              }}
            />

            <Tabs.Screen
              name="announcements"
              options={{
                title: "E'lonlar",
                tabBarLabel: ({ color, focused }) => (
                  <Text
                    numberOfLines={1}
                    style={[
                      styles.tabLabel,
                      {
                        marginLeft: 20,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t("E'lonlar")}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      {
                        marginLeft: 20,
                      },
                    ]}
                  >
                    <Megaphone color={color} size={30} strokeWidth={2} />
                  </View>
                ),
              }}
            />

            <Tabs.Screen
              name="profile"
              options={{
                title: 'Profil',
                tabBarLabel: ({ color, focused }) => (
                  <Text
                    numberOfLines={1}
                    style={[
                      styles.tabLabel,
                      {
                        marginRight: 20,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t('Profil')}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      { marginRight: 20 },
                    ]}
                  >
                    <User color={color} size={30} strokeWidth={2} />
                  </View>
                ),
              }}
            />
          </Tabs>
        </RefreshProvider>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  tabLabel: {
    fontSize: 11,
    textAlign: 'center',
    marginTop: 4,
  },
  iconContainer: {
    paddingVertical: 4,
  },
  iconContainerActive: {
    transform: [{ scale: 1.05 }],
  },
  centerTabContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  centerTabGradient: {
    width: 72,
    height: 72,
    borderRadius: 36,
    justifyContent: 'center',
    alignItems: 'center',
    ...Platform.select({
      ios: {
        shadowColor: '#3b82f6',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.4,
        shadowRadius: 12,
      },
      android: {
        elevation: 12,
      },
    }),
  },
  centerTabInner: {
    width: 68,
    height: 68,
    borderRadius: 34,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  centerTabLabel: {
    marginTop: 8,
    fontSize: 11,
    textAlign: 'center',
    maxWidth: 110,
  },
});