
import getGreetingMessage from "../../utils/greetingHandler";
import {
  cacheData,
  clearAllCache,
  getCachedData,
} from "../../slices/apiDataManager";
import AuthRepository from "../../repositories/AuthRepository";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster, setProjectId } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster";
import { useProfile } from "../../hooks/useProfile";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import Avatar from "../../components/common/Avatar";
import { useChangePassword } from "../Context/ChangePasswordContext";
import { useProjects } from "../../hooks/useProjects";
import { useCallback, useEffect, useState } from "react";
import { useProjectName } from "../../hooks/useProjects";
import eventBus from "../../services/eventBus";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants";

const Header = () => {
  const { profile } = useProfile();
  const location = useLocation();
  const dispatch = useDispatch();
  const { data, loading } = useMaster();
  const navigate = useNavigate();
  const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);

    const isDirectoryPath = /^\/directory$/.test(location.pathname);
    const isDashboard = /^\/dashboard$/.test(location.pathname);
  const getRole = (roles, joRoleId) => {
    if (!Array.isArray(roles)) return "User";
    let role = roles.find((role) => role.id === joRoleId);
    return role ? role.name : "User";
  };

  const handleLogout = (e) => {
    e.preventDefault(); 
    logout();
  };

  const logout = async () => {
    try {
      let data = {
        refreshToken: localStorage.getItem("refreshToken"),
      };

      AuthRepository.logout(data)
        .then((response) => {
          localStorage.removeItem("jwtToken");
          localStorage.removeItem("refreshToken");
          localStorage.removeItem("user");
          localStorage.clear();
          clearAllCache();
          window.location.href = "/auth/login";
        })
        .catch((error) => {
          // Even if logout API fails, clear local storage and redirect
          localStorage.removeItem("jwtToken");
          localStorage.removeItem("refreshToken");
          localStorage.removeItem("user");
          clearAllCache();
          window.location.href = "/auth/login";
        });
    } catch (error) {
      console.error(
        "Error during logout:",
        error?.response?.data || error.message
      );
    }
  };

  const handleProfilePage = () => {
    navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
  };

  const { projectNames, loading: projectLoading, fetchData } = useProjectName();

  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );

  // Determine the display text for the project dropdown
  let displayText = "All Projects";
  if (selectedProject === null) {
    displayText = "All Projects";
  } else if (selectedProject) {
    const selectedProjectObj = projectNames?.find(
      (p) => p?.id === selectedProject
    );
    // Fallback to selectedProject ID if name not found during loading or mismatch
    displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
  } else if (projectLoading) {
    displayText = "Loading...";
  }

  const { openChangePassword } = useChangePassword();

  useEffect(() => {
    if (
      projectNames &&
      projectNames.length > 0 &&
      selectedProject === undefined &&
      !getCachedData("hasReceived")
    ) {
      if(isDashboard){
        dispatch(setProjectId(null));
      }else{
         dispatch(setProjectId(projectNames[0]?.id));
      }
    }
  }, [projectNames, selectedProject, dispatch]);


  /** Check if current page is project details page or directory page */
  // const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);


  const handler = useCallback(
    async (data) => {
      if (!HasManageProjectPermission) {
        await fetchData();
        const projectExist = data.projectIds.some(
          (item) => item === selectedProject
        );
        if (projectExist) {
          cacheData("hasReceived", false);
        }
      }
    },
    [fetchData, selectedProject, HasManageProjectPermission]
  );

  const newProjectHandler = useCallback(
    async (msg) => {
      if (HasManageProjectPermission && msg.keyword === "Create_Project") {
        await fetchData();
      } else if (projectNames?.some((item) => item.id === msg.response.id)) {
        await fetchData();
      }
      cacheData("hasReceived", false);
    },
    [HasManageProjectPermission, projectNames, fetchData]
  );

  useEffect(() => {
    dispatch(changeMaster("Job Role"));
  }, [dispatch]);

  useEffect(() => {
    eventBus.on("assign_project_one", handler);
    eventBus.on("project", newProjectHandler);

    return () => {
      eventBus.off("assign_project_one", handler);
      eventBus.off("project", newProjectHandler);
    };
  }, [handler, newProjectHandler]);

  return (
    <nav
      className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
      id="layout-navbar"
    >
      <div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
        <a
          aria-label="toggle for sidebar"
          className="nav-item nav-link px-0 me-xl-4"
        >
          <i className="bx bx-menu bx-sm"></i>
        </a>
      </div>
      <div
        className="navbar-nav-right d-flex align-items-center justify-content-between"
        id="navbar-collapse"
      >
        {projectNames && !isDirectoryPath && (
          <div className="align-items-center">
            <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
            <div className="btn-group">
              <button
                className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
                  } px-1`}
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                {displayText}
              </button>

              {projectNames.length > 0 && (
                <ul
                  className="dropdown-menu"
                  style={{ overflow: "auto", maxHeight: "300px" }}
                >
            
                  {isDashboard && (
                    <li>
                      <button
                        className="dropdown-item"
                        onClick={() => dispatch(setProjectId(null))}
                      >
                        All Projects
                      </button>
                    </li>
                  )}
                  {[...projectNames]
                    .sort((a, b) => a?.name?.localeCompare(b.name))
                    .map((project) => (
                      <li key={project?.id}>
                        <button
                          className="dropdown-item"
                          onClick={() => dispatch(setProjectId(project?.id))}
                        >
                          {project?.name}
                          {project?.shortName && (
                            <span className="text-primary fw-semibold ms-1">
                              ({project?.shortName})
                            </span>
                          )}
                        </button>
                      </li>
                    ))}
                </ul>
              )}
            </div>
          </div>
        )}


        <ul className="navbar-nav flex-row align-items-center ms-md-auto">
          <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
            <a
              className="nav-link dropdown-toggle hide-arrow"
              data-bs-toggle="dropdown"
              data-bs-auto-close="true"
              aria-expanded="false"
            >
              <i className="icon-base bx bx-grid-alt icon-md"></i>
            </a>
            <div className="dropdown-menu dropdown-menu-end p-0">
              <div className="dropdown-menu-header border-bottom">
                <div className="dropdown-header d-flex align-items-center py-3">
                  <h6 className="mb-0 me-auto">Shortcuts</h6>
                  <a
                    className="dropdown-shortcuts-add py-2 cusror-pointer"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    aria-label="Add shortcuts"
                    data-bs-original-title="Add shortcuts"
                  >
                    <i className="icon-base bx bx-plus-circle text-heading"></i>
                  </a>
                </div>
              </div>
              <div className="dropdown-shortcuts-list scrollable-container ps">
                <div className="row row-bordered overflow-visible g-0">
                  <div className="dropdown-shortcuts-item col">
                    <a
                      onClick={() => navigate(`/dashboard`)}
                      className="text-heading text-truncate cursor-pointer"
                    >
                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                        <i className="icon-base bx bx-home icon-26px text-heading"></i>
                      </span>
                      Dashboard
                    </a>
                    <small>User Dashboard</small>
                  </div>
                  <div className="dropdown-shortcuts-item col">
                    <a
                      onClick={() => navigate(`/projects`)}
                      className="text-heading text-truncate cursor-pointer"
                    >
                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                        <i className="icon-base bx bx-building-house icon-26px text-heading"></i>
                      </span>
                      Projects
                    </a>
                    <small>Projects List</small>
                  </div>
                </div>
                <div className="row row-bordered overflow-visible g-0">
                  <div className="dropdown-shortcuts-item col">
                    <a
                      onClick={() => navigate(`/employees`)}
                      className="text-heading text-truncate cursor-pointer"
                    >
                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                        <i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
                      </span>
                      Employees
                    </a>
                    <small>Manage Employees</small>
                  </div>
                  <div className="dropdown-shortcuts-item col">
                    <a
                      onClick={() => navigate(`/activities/attendance`)}
                      className="text-heading text-truncate cursor-pointer"
                    >
                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                        <i className="icon-base bx bx-user-check icon-26px text-heading"></i>
                      </span>
                      Attendance
                    </a>
                    <small>Manage Attendance</small>
                  </div>
                </div>
                <div className="row row-bordered overflow-visible g-0">
                  <div className="dropdown-shortcuts-item col">
                    <a
                      onClick={() => navigate(`/activities/task`)}
                      className="text-heading text-truncate cursor-pointer"
                    >
                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                        <i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
                      </span>
                      Allocate Work
                    </a>
                    <small>Work Allocations</small>
                  </div>
                  <div className="dropdown-shortcuts-item col">
                    <a
                      onClick={() => navigate(`/activities/records`)}
                      className="text-heading text-truncate cursor-pointer"
                    >
                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                        <i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
                      </span>
                      Daily Work Log
                    </a>
                    <small>Daily Work Allocations</small>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li className="nav-item navbar-dropdown dropdown-user dropdown">
            <a
              aria-label="dropdown profile avatar"
              className="nav-link dropdown-toggle hide-arrow"
              href="#"
              data-bs-toggle="dropdown"
            >
              <div className="avatar avatar-online">
                <Avatar
                  firstName={`${profile?.employeeInfo?.firstName}`}
                  lastName={`${profile?.employeeInfo?.lastName}`}
                />
              </div>
            </a>
            <ul className="dropdown-menu dropdown-menu-end">
              <li onClick={handleProfilePage}>
                <a aria-label="go to profile" className="dropdown-item">
                  <div className="d-flex">
                    <div className="flex-shrink-0 me-3">
                      <div className="avatar avatar-online">
                        <Avatar
                          firstName={`${profile?.employeeInfo?.firstName}`}
                          lastName={`${profile?.employeeInfo?.lastName}`}
                        />
                      </div>
                    </div>
                    <div className="flex-grow-1">
                      <span className="fw-medium d-block">
                        {profile?.employeeInfo?.firstName}
                      </span>
                      <small className="text-muted">
                        {getRole(data, profile?.employeeInfo?.joRoleId)}
                      </small>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <div className="dropdown-divider"></div>
              </li>
              <li onClick={handleProfilePage}>
                <a
                  aria-label="go to profile"
                  className="dropdown-item cusor-pointer"
                >
                  <i className="bx bx-user me-2"></i>
                  <span className="align-middle">My Profile</span>
                </a>
              </li>
              <li onClick={handleProfilePage}>
                <a
                  aria-label="go to setting "
                  className="dropdown-item cusor-pointer"
                >
                  <i className="bx bx-cog me-2"></i>
                  <span className="align-middle">Settings</span>
                </a>
              </li>
              <li onClick={openChangePassword}>
                {" "}
                <a
                  aria-label="go to profile"
                  className="dropdown-item cusor-pointer"
                >
                  <i className="bx bx-lock-alt me-2"></i>
                  <span className="align-middle">Change Password</span>
                </a>
              </li>
              <li>
                <div className="dropdown-divider"></div>
              </li>
              <li>
                <a
                  aria-label="click to log out"
                  className="dropdown-item cusor-pointer"
                  href="/logout"
                  onClick={handleLogout}
                >
                  <i className="bx bx-power-off me-2"></i>
                  <span className="align-middle">Log Out</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  );
};
export default Header;