import { Tabs, Redirect, router } from 'expo-router';

import React, { useEffect } from 'react';

import { View, ActivityIndicator } from 'react-native';

import { HapticTab } from '@/components/misc/haptic-tab';

import { IconSymbol } from '@/components/ui/icon-symbol';

import { Colors } from '@/constants/theme';

import { useColorScheme } from '@/hooks/use-color-scheme';

import { useAuth } from '@/context/AuthContext';

export default function TabLayout() {

  const colorScheme = useColorScheme();

  const { isAuthenticated, isLoading } = useAuth();

  useEffect(() => {

    if (!isLoading && !isAuthenticated) {

      router.replace('/auth/login');

    }

  }, [isAuthenticated, isLoading]);

  if (isLoading) {

    return (

      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

        <ActivityIndicator size="large" />

      </View>

    );

  }

  if (!isAuthenticated) {

    return <Redirect href="/auth/login" />;

  }

  return (

    <Tabs

      screenOptions={{

        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,

        headerShown: false,

        tabBarButton: HapticTab,

      }}>

      <Tabs.Screen

        name="index"

        options={{

          title: 'Home',

          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,

        }}

      />

      <Tabs.Screen

        name="explore"

        options={{

          title: 'Explore',

          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,

        }}

      />

    </Tabs>

  );

}