import React from 'react';
import { Tabs, Slot, useRouter } from 'expo-router';
import { Anchor, Button, useTheme, XStack, YStack } from 'tamagui';
import { PersonStanding, MessageCircle, LogOut, ArrowLeft, ArrowLeftFromLine } 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 redirect = true
  const router = useRouter()

  const goback = () => {
    router.replace("/")
  }

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

  const navigateToSignup = () => {
    router.replace("/signup")
  }
  const handleLogout = () => {
    logout();
  };

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        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="login"
        options={{
          title: "Login",
          headerShown: true,
          headerLeft: () => <XStack><Button icon={ArrowLeftFromLine} onPress={goback}></Button></XStack>,
          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>)

            //<Button onPress={handleLogout} mr="$4" bg="$purple8" color="$purple12">
             // Logout
            //</Button>
          ),
        }}
      />
      <Tabs.Screen
      name="signup"
      options= {{
        title:"signup",
        headerShown:true,
        headerLeft: () => <XStack><Button icon={ArrowLeftFromLine} onPress={goback}></Button></XStack>,
          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>)

            //<Button onPress={handleLogout} mr="$4" bg="$purple8" color="$purple12">
             // Logout
            //</Button>
          ),
        
      }}>

      </Tabs.Screen>

      {/* Conditional Rendering for Messages Tab */}
      {isLoggedIn ? (
        <Tabs.Screen
          name="messages"
          options={{
            title: 'Messages',
            tabBarIcon: ({ color }) => <MessageCircle color={color} />,
          }}
        />
      ) : (
        <Tabs.Screen
          name="messages"
          redirect={true}
          options={{
            title: 'Messages',
            tabBarIcon: ({ color }) => <MessageCircle color={color} />,
          }}
        />
      )}
    </Tabs>
  );
}