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 { router, Tabs } from 'expo-router';
import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
import { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Animated, Easing, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function TabsLayout() {
  const { isDark } = useTheme();
  const { t } = useTranslation();
  const rotateAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(rotateAnim, {
        toValue: 1,
        duration: 4000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
  }, []);

  const rotate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  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: 0,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t('Bosh sahifa')}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      {
                        marginLeft: 0,
                      },
                    ]}
                  >
                    <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,
                        marginLeft: 0,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t("Qo'shish")}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      {
                        // marginRight: 10,
                        marginLeft: 0,
                      },
                    ]}
                  >
                    <PlusCircle color={color} size={30} strokeWidth={2} />
                  </View>
                ),
              }}
            />

            <Tabs.Screen
              key="e-service-tab"
              name="e-service"
              options={{
                title: '',
                tabBarLabel: () => null,
                tabBarItemStyle: {
                  flex: 1.2,
                  top: 8,
                },
                tabBarIcon: () => (
                  <TouchableOpacity
                    style={styles.centerTabContainer}
                    onPress={() => router.push('/(dashboard)/e-service/e-services')}
                  >
                    <View
                      style={[
                        styles.centerTabInner,
                        {
                          backgroundColor: isDark
                            ? 'rgba(255, 255, 255, 0.1)'
                            : 'rgba(15, 23, 42, 0.1)',
                        },
                      ]}
                    >
                      <Animated.Image
                        source={Logo}
                        style={{
                          width: 55,
                          height: 55,
                          transform: [{ rotate }],
                        }}
                      />
                    </View>
                    {/* <Text
                      numberOfLines={1}
                      adjustsFontSizeToFit
                      minimumFontScale={0.85}
                      style={[
                        styles.centerTabLabel,
                        {
                          color: focused ? '#3b82f6' : isDark ? '#94a3b8' : '#64748b',
                          fontWeight: focused ? '700' : '600',
                          fontSize: 13,
                          width: 100,
                          textAlign: 'center',
                        },
                      ]}
                    >
                      {t('Davlat xizmatlari')}
                    </Text> */}
                  </TouchableOpacity>
                ),
              }}
            />

            <Tabs.Screen
              name="announcements"
              options={{
                title: "E'lonlar",
                tabBarLabel: ({ color, focused }) => (
                  <Text
                    numberOfLines={1}
                    style={[
                      styles.tabLabel,
                      {
                        // marginLeft: 10,
                        marginRight: 0,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t("E'lonlar")}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      {
                        // marginLeft: 10,
                        marginRight: 0,
                      },
                    ]}
                  >
                    <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: 0,
                        color,
                        fontWeight: focused ? '700' : '600',
                      },
                    ]}
                  >
                    {t('Profil')}
                  </Text>
                ),
                tabBarIcon: ({ color, focused }) => (
                  <View
                    style={[
                      styles.iconContainer,
                      focused && styles.iconContainerActive,
                      { marginRight: 0 },
                    ]}
                  >
                    <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',
  },
  centerTabInner: {
    width: 65,
    height: 65,
    borderRadius: 34,
    justifyContent: 'center',
    alignItems: 'center',
  },
  centerTabLabel: {
    marginTop: 8,
    fontSize: 11,
    textAlign: 'center',
    maxWidth: 110,
  },
});