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 (
    <View style={{ flex: 1 }}>
      <View
        // Top status bar background
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: insets.top,
          backgroundColor: theme.colors.primary, // Or any custom color
          zIndex: 1000,
        }}
      />
      <View
        // Bottom navigation bar background
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          height: insets.bottom,
          backgroundColor: theme.colors.primary, // Or any custom color
          zIndex: 1,
        }}
      />

      <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>
    </View>
  );
}
