import { Tabs } from 'expo-router';
import React from 'react';
import { Platform, useColorScheme, View } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { lightTheme, darkTheme } from '@/constants/Colors';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { ThemedView } from '@/components/ThemedView';
import { IconButton } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { ThemedText } from '@/components/ThemedText';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();

  return (
    <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
      <ThemedView style={{ flex: 1 }}>
        <View style={{
          backgroundColor: theme.colors.onPrimary,
          position: 'absolute',
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          top: 20,
          left: 20,
          right: 20,
          borderRadius: 12,
          zIndex: 1000,
        }}>
          <IconButton icon="menu" size={24} onPress={() => {
            navigation.dispatch({ type: 'OPEN_DRAWER' });
          }} />
          <ThemedText
            style={{ fontSize: 15, color: theme.colors.primary, letterSpacing: 2, fontWeight: 'bold' }}
          >JOURNEY</ThemedText>
          <IconButton icon="magnify" size={24} onPress={() => {
            console.log('Search pressed');
          }} />
        </View>
        <Tabs
          screenOptions={{
            tabBarActiveTintColor: theme.colors.primary,
            headerShown: false,
            tabBarLabelPosition: 'below-icon',
            tabBarButton: HapticTab,
            tabBarStyle: Platform.select({
              ios: {
                // Use a transparent background on iOS to show the blur effect
                position: 'absolute',
              },
              default: {
              },
            }),
          }}>
          <Tabs.Screen
            name="index"
            options={{
              title: 'Journey',
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="book" color={color} />,
            }}
          />
          <Tabs.Screen
            name="calendar"
            options={{
              title: 'Calendar',
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar-today" color={color} />,
            }}
          />
          <Tabs.Screen
            name="media"
            options={{
              title: 'Media',
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="photo" color={color} />,
            }}
          />
          <Tabs.Screen
            name="atlas"
            options={{
              title: 'Atlas',
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="map" color={color} />,
            }}
          />
          <Tabs.Screen
            name="today"
            options={{
              title: 'Today',
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="inbox" color={color} />,
            }}
          />
        </Tabs>
      </ThemedView>
    </SafeAreaView>
  );
}