import React from 'react';
import { Tabs, useRouter } from 'expo-router';
import { Anchor, Button, useTheme, XStack, YStack, Paragraph } from 'tamagui';
import { PersonStanding, MessageCircle, LogOut } from '@tamagui/lucide-icons';
import { useAuth } from '../../contexts/authcontext'; // Adjust path as needed

export default function TabLayout() {
  const theme = useTheme();
  const { logout, isLoggedIn } = useAuth();
  const router = useRouter();

  const navigateToLogin = () => {
    router.replace("/login");
  };

  const addFriendsNav = () => {
    router.replace("/addfriend")
  }
  const seePendingNav = () => {
    router.replace("/friendrequests")
  }
  const navigateToSignup = () => {
    router.replace("/signup");
  };

  const handleLogout = () => {
    logout();
  };

  return (
    <Tabs
      screenOptions={{
        headerShown: true,
        tabBarActiveTintColor: theme.red10.val,
        tabBarStyle: {
          backgroundColor: theme.background.val,
          borderTopColor: theme.borderColor.val,
        },
        headerStyle: {
          backgroundColor: theme.background.val,
          borderBottomColor: theme.borderColor.val,
        },
        headerTintColor: theme.color.val,
      }}
    >
      {/* Home Tab */}
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <PersonStanding color={color} />,
          headerRight: () => (
            !isLoggedIn ? (
              <XStack gap="$3">
                <Button onPress={navigateToLogin}>Login</Button>
                <Button onPress={navigateToSignup}>Sign-Up</Button>
              </XStack>
            ) : (
              <Button onPress={handleLogout}>Logout</Button>
            )
          ),
        }}
      />

      {/* Conditional Rendering for Messages Tab */}
      {isLoggedIn ? (
        <Tabs.Screen
          name="messages"
          options={{
            title: 'Messages',
            tabBarIcon: ({ color }) => <MessageCircle color={color} />,
            headerRight: () => (
              <XStack>
                <Button onPress={addFriendsNav}><Paragraph>Add Friend</Paragraph></Button>
                <Button onPress={seePendingNav}><Paragraph>Friend Requests</Paragraph></Button>
              </XStack>
              )   
          }}
        />
      ) : (
        <Tabs.Screen
          name="messages"
          redirect={true}
          options={{
            title: 'Messages',
            tabBarIcon: ({ color }) => <MessageCircle color={color} />,
          }}
        />
      )}

      {/* Conditional Rendering for Contacts Tab */}
      {isLoggedIn ? (
        <Tabs.Screen
          name="contacts"  // This should refer to the contacts screen inside the chat folder
          options={{
            title: 'Contacts',
            tabBarIcon: ({ color }) => <PersonStanding color={color} />,
          }}
        />
      ) : (
        <Tabs.Screen
          name="contacts"  // Same path, redirect if not logged in
          redirect={true}
          options={{
            title: 'Contacts',
            tabBarIcon: ({ color }) => <MessageCircle color={color} />,
          }}
        />
      )}

    </Tabs>
  );
}