import React, { useEffect, useState } from "react";
import { FaUserCircle } from "react-icons/fa";
import { NavLink, useNavigate } from "react-router-dom"; 
import axios from "axios";
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const Navbar = () => {
  const navigate = useNavigate();
  const [user, setUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    axios.get("http://localhost:8080/api/user/profile", { withCredentials: true })
      .then((response) => {
        const userData = response.data.user;
        setUser(userData);
        setIsAdmin(userData.isAdmin);
      })
      .catch((error) => {
        console.error("Error fetching user data:", error);
      });
  }, []);

  const NavlinkStyle = {
    color: "white",
    textDecoration: "none",
    fontSize: "16px",
    transition: "0.3s",
    padding: "10px 15px",
    borderRadius: "5px"
  }

  const handleLogout = async () => {
    try {
      await axios.get("http://localhost:8080/auth/logout", { withCredentials: true });
      localStorage.clear();
      navigate("/");
    } catch (error) {
      console.error("Error during logout:", error);
      toast.error("Failed to log out. Please try again.");
    }
  };

  return (
    <header style={{
      backgroundColor: "#800000",
      color: "white",
      padding: "15px 0",
      width: "100vw",
      boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
      position: "sticky",
      top: "0",
      zIndex: "1000"
    }} >
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        width: "95%",
        margin: "0 auto"
      }}>
        {/* <ToastContainer /> */}

        <NavLink to="/Welcome">
          <img src="logo_.png" alt="Logo" style={{
            height: "50px",
            cursor: "pointer"
          }} />
        </NavLink>


        <div style={{ display: "flex", gap: "30px" }}>
          <NavLink to="/consolidated" style={NavlinkStyle}
            onMouseEnter={(e) => e.target.style.backgroundColor = "#660000"}
            onMouseLeave={(e) => e.target.style.backgroundColor = "transparent"}>
            Faculty Consolidated
          </NavLink>
          <NavLink to="/courseConsolidated" style={NavlinkStyle}
            onMouseEnter={(e) => e.target.style.backgroundColor = "#660000"}
            onMouseLeave={(e) => e.target.style.backgroundColor = "transparent"}>
            Course Consolidated
          </NavLink>
          <NavLink to="/departmentConsolidated" style={NavlinkStyle}
            onMouseEnter={(e) => e.target.style.backgroundColor = "#660000"}
            onMouseLeave={(e) => e.target.style.backgroundColor = "transparent"}>
            Department Consolidated
          </NavLink>
          <NavLink to="/panelConsolidated" style={NavlinkStyle}
            onMouseEnter={(e) => e.target.style.backgroundColor = "#660000"}
            onMouseLeave={(e) => e.target.style.backgroundColor = "transparent"}>
            Panel
          </NavLink>
          {isAdmin && (
            <NavLink to="/AdminFacultyPage" style={NavlinkStyle}
              onMouseEnter={(e) => e.target.style.backgroundColor = "#660000"}
              onMouseLeave={(e) => e.target.style.backgroundColor = "transparent"}>
              Faculty
            </NavLink>
          )}
          {isAdmin && (
            <NavLink to="/AdminCoursePage" style={NavlinkStyle}
            onMouseEnter={(e) => e.target.style.backgroundColor = "#660000"}
            onMouseLeave={(e) => e.target.style.backgroundColor = "transparent"}>
            Courses
          </NavLink>
          )}
        </div>
        <div>
          <button className="logout-button" onClick={handleLogout} style={{
            backgroundColor: "#660000",
            color: "white",
            border: "none",
            padding: "10px 20px",
            borderRadius: "5px",
            cursor: "pointer",
            transition: "0.3s"
          }}
          >
            Logout
          </button>
        </div>

        {/* User icon at the right */}
        <NavLink to="/accounts" className="user-icon-link">
          {user && user.profilePicture ? (
            <img
              src={user.profilePicture}
              alt="Profile"
              style={{
                width: "40px",
                height: "40px",
                borderRadius: "50%",
                border: "2px solid #800000",
                objectFit: "cover"
              }}
            />
          ) : (
            <FaUserCircle style={{
              color: "white",
              fontSize: "35px"
            }} />
          )}
        </NavLink>
      </div>
    </header >
  );
};

export default Navbar;
