import { Tabs } from 'expo-router';
import { Image, Platform, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { colors } from '@/assets/styles/colors';

export default function TabsLayout() {
  const insets = useSafeAreaInsets();

  return (
    <Tabs
      screenOptions={{
        headerShown: true,
        headerTitleAlign: 'center',
        headerShadowVisible: false,
        headerStyle: {
          backgroundColor: colors.background_1,
        },
        headerTitle: () => (
          <Image source={require('@/assets/icons/logotipo-azul.png')} style={styles.logo} resizeMode="contain" />
        ),
        tabBarStyle: [
          styles.tabBar,
          {
            height: (Platform.OS === 'ios' ? 54 : 64) + insets.bottom,
            paddingBottom: 8 + insets.bottom,
          },
        ],
        tabBarItemStyle: styles.tabItem,
        tabBarActiveTintColor: colors.vermelho,
        tabBarInactiveTintColor: colors.azul,
        tabBarLabelStyle: {
          fontSize: 14,
          fontWeight: '600',
        },
        tabBarHideOnKeyboard: true,
      }}>
      <Tabs.Screen
        name="perfil/index"
        options={{
          title: 'Perfil',
          tabBarIcon: ({ focused }) => (
            <View style={focused ? styles.iconActiveContainer : styles.iconContainer}>
              <Image
                source={
                  focused
                    ? require('@/assets/icons/perfil-selecionado.png')
                    : require('@/assets/icons/perfil.png')
                }
                style={focused ? styles.iconActive : styles.icon}
                resizeMode="contain"
              />
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="home/index"
        options={{
          title: 'Inicio',
          tabBarIcon: ({ focused }) => (
            <View style={focused ? styles.iconActiveContainer : styles.iconContainer}>
              <Image
                source={
                  focused
                    ? require('@/assets/icons/home-selecionado.png')
                    : require('@/assets/icons/home.png')
                }
                style={focused ? styles.iconActive : styles.icon}
                resizeMode="contain"
              />
            </View>
          ),
        }}
      />
      <Tabs.Screen
        name="contactos/index"
        options={{
          title: 'Contactos',
          tabBarIcon: ({ focused }) => (
            <View style={focused ? styles.iconActiveContainer : styles.iconContainer}>
              <Image
                source={
                  focused
                    ? require('@/assets/icons/contactos-fill.png')
                    : require('@/assets/icons/contactos.png')
                }
                style={focused ? styles.iconActive : styles.icon}
                resizeMode="contain"
              />
            </View>
          ),
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    position: 'absolute',
    paddingHorizontal: 50,
    paddingTop: 16,
    backgroundColor: colors.branco,
    borderTopWidth: 0,
    borderTopLeftRadius: 60,
    borderTopRightRadius: 60,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 10,
    shadowOffset: { width: 0, height: -2 },
    elevation: 10,
  },
  tabItem: {
    paddingVertical: 1,
  },
  iconContainer: {
    width: 34,
    height: 34,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
  },
  iconActiveContainer: {
    width: 40,
    height: 40,
    borderRadius: 24,
    backgroundColor: colors.vermelho,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
  },
  icon: {
    width: 26,
    height: 26,
  },
  iconActive: {
    width: 26,
    height: 26,
    tintColor: colors.branco,
  },
  logo: {
    width: 180,
    height: 60,
  },
});