import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const Navbar = () => {
  const [auth, setAuth] = useState(null); // Change initial state to null
  const [loading, setLoading] = useState(true); // Add loading state
  const navigate = useNavigate();

  useEffect(() => {
    axios.get('http://localhost:8801/', { withCredentials: true })
      .then(res => {
        if (res.data.Status === "Success") {
          setAuth(true);
        } else {
          setAuth(false);
        }
        setLoading(false); 
      })
      .catch(err => {
        console.error('Error fetching auth status:', err);
        setAuth(false);
        setLoading(false); // Update loading state after fetching auth status
      });
  }, []); // Remove auth from dependency array to prevent infinite loop

  const handleLogout = () => {
    axios.get('http://localhost:8801/logout', { withCredentials: true })
      .then(res => {
        if (res.data.Status === "Success") {
          setAuth(false);
          navigate('/signin');
          window.alert('You have logged out. Please sign in to continue.');
        } else {
          console.error('Logout failed:', res.data.Error || 'Unknown error');
        }
      })
      .catch(err => {
        console.error('Error logging out:', err);
      });
  };

  if (loading || !auth) {
    return null;
  }

  return (
    {Navbar implemented here had to delete due to text limit}

  );
};

export default Navbar;