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';

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

  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: 1000,
        }}
      />

      <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
        <ThemedView style={{ flex: 1 }}>
          <Tabs
            screenOptions={{
              tabBarActiveTintColor: theme.colors.primary,
              headerShown: false,
              tabBarLabelPosition: 'below-icon',
              tabBarButton: HapticTab,
              tabBarBackground: TabBarBackground,
              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>
  );
}