import getGreetingMessage from "../../utils/greetingHandler";
import { clearAllCache } from "../../slices/apiDataManager";
import AuthRepository from "../../repositories/AuthRepository";
import { useDispatch } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster";
import { useProfile } from "../../hooks/useProfile";
import { useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar";
const Header = () => {
  const { profile } = useProfile();
  const dispatch = useDispatch(changeMaster("Job Role"));
  const { data, loading } = useMaster();
  const navigate = useNavigate();
  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(); // Prevent default anchor behavior (e.g., page reload)
    logout();
  };

  const logout = async () => {
    try {
      // Notify server about the logout (optional)
      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) => {
          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=account`);
  };
  return (
    <nav
      className="layout-navbar container-xxl 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"
      >
        {/* Search */}
        <div className="navbar-nav align-items-center">
          <div className="nav-item navbar-search-wrapper mb-0">
            <a className="nav-item nav-link search-toggler px-0" href="#">
              <span
                className="d-inline-block text-body-secondary fw-normal"
                id="autocomplete"
              >
                <div
                  className="aa-Autocomplete"
                  role="combobox"
                  aria-expanded="false"
                  aria-haspopup="listbox"
                  aria-labelledby="autocomplete-0-label"
                >
                  <button
                    type="button"
                    className="aa-DetachedSearchButton"
                    title="Search"
                    id="autocomplete-0-label"
                  >
                    <div className="aa-DetachedSearchButtonIcon"></div>
                    <div className="aa-DetachedSearchButtonPlaceholder">
                      Search -{" "}
                      <span className="font-italic">Coming Soon...</span>
                    </div>
                    <div className="aa-DetachedSearchButtonQuery"></div>
                  </button>
                </div>
              </span>
            </a>
          </div>
        </div>

        {/* marquee */}
        {/* <marquee>
          {" "}
          {getGreetingMessage(profile?.employeeInfo?.firstName)}
        </marquee> */}

        {/* icon list */}
        <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"
              href="#;"
              data-bs-toggle="dropdown"
              data-bs-auto-close="outside"
              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">
                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                      <i className="icon-base bx bx-home icon-26px text-heading"></i>
                    </span>
                    <a href="/dashboard" className="stretched-link">
                      Dashboard
                    </a>
                    <small>User Dashboard</small>
                  </div>
                  <div className="dropdown-shortcuts-item col">
                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                      <i className="icon-base bx bx-building-house icon-26px text-heading"></i>
                    </span>
                    <a href="/projects" className="stretched-link">
                      Projects
                    </a>
                    <small>Projects List</small>
                  </div>
                </div>
                <div className="row row-bordered overflow-visible g-0">
                  <div className="dropdown-shortcuts-item col">
                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                      <i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
                    </span>
                    <a href="/employees" className="stretched-link">
                      Employees
                    </a>
                    <small>Manage Employees</small>
                  </div>
                  <div className="dropdown-shortcuts-item col">
                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                      <i className="icon-base bx bx-user-check icon-26px text-heading"></i>
                    </span>
                    <a href="/activities/attendance" className="stretched-link">
                      Attendance
                    </a>
                    <small>Manage Attendance</small>
                  </div>
                </div>
                <div className="row row-bordered overflow-visible g-0">
                  <div className="dropdown-shortcuts-item col">
                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                      <i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
                    </span>
                    <a href="/activities/task" className="stretched-link">
                      Allocate Work
                    </a>
                    <small>Work Allocations</small>
                  </div>
                  <div className="dropdown-shortcuts-item col">
                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
                      <i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
                    </span>
                    <a href="/activities/records" className="stretched-link">
                      Daily Work Log
                    </a>
                    <small>Daily Work Allocations</small>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li className="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
            <a
              className="nav-link dropdown-toggle hide-arrow cursor-pointer"
              data-bs-toggle="dropdown"
              data-bs-auto-close="outside"
              aria-expanded="false"
            >
              <span className="position-relative">
                <i className="icon-base bx bx-bell icon-lg"></i>
                <span className="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
              </span>
            </a>
            <ul className="dropdown-menu dropdown-menu-end p-0">
              <li className="dropdown-menu-header border-bottom">
                <div className="dropdown-header d-flex align-items-center py-3">
                  <h6 className="mb-0 me-auto">Notification</h6>
                  <div className="d-flex align-items-center h6 mb-0">
                    <span className="badge bg-label-primary me-2">8 New</span>
                    <a
                      href="#"
                      className="dropdown-notifications-all p-2"
                      data-bs-toggle="tooltip"
                      data-bs-placement="top"
                      aria-label="Mark all as read"
                      data-bs-original-title="Mark all as read"
                    >
                      <i className="icon-base bx bx-envelope-open text-heading"></i>
                    </a>
                  </div>
                </div>
              </li>
              <li className="dropdown-notifications-list scrollable-container ps">
                <ul className="list-group list-group-flush">
                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <img
                            src="../../assets/img/avatars/1.png"
                            alt=""
                            className="rounded-circle"
                          ></img>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">Congratulation Lettie 🎉</h6>
                        <small className="mb-1 d-block text-body">
                          Won the monthly best seller gold badge
                        </small>
                        <small className="text-body-secondary">1h ago</small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <span className="avatar-initial rounded-circle bg-label-danger">
                            CF
                          </span>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">Charles Franklin</h6>
                        <small className="mb-1 d-block text-body">
                          Accepted your connection
                        </small>
                        <small className="text-body-secondary">12hr ago</small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <img
                            src="../../assets/img/avatars/2.png"
                            alt=""
                            className="rounded-circle"
                          ></img>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">New Message ✉️</h6>
                        <small className="mb-1 d-block text-body">
                          You have new message from Natalie
                        </small>
                        <small className="text-body-secondary">1h ago</small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <span className="avatar-initial rounded-circle bg-label-success">
                            <i className="icon-base bx bx-cart"></i>
                          </span>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">
                          Whoo! You have new order 🛒
                        </h6>
                        <small className="mb-1 d-block text-body">
                          ACME Inc. made new order $1,154
                        </small>
                        <small className="text-body-secondary">1 day ago</small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <img
                            src="../../assets/img/avatars/9.png"
                            alt=""
                            className="rounded-circle"
                          ></img>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">
                          Application has been approved 🚀
                        </h6>
                        <small className="mb-1 d-block text-body">
                          Your ABC project application has been approved.
                        </small>
                        <small className="text-body-secondary">
                          2 days ago
                        </small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <span className="avatar-initial rounded-circle bg-label-success">
                            <i className="icon-base bx bx-pie-chart-alt"></i>
                          </span>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">
                          Monthly report is generated
                        </h6>
                        <small className="mb-1 d-block text-body">
                          July monthly financial report is generated{" "}
                        </small>
                        <small className="text-body-secondary">
                          3 days ago
                        </small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <img
                            src="../../assets/img/avatars/5.png"
                            alt=""
                            className="rounded-circle"
                          ></img>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">Send connection request</h6>
                        <small className="mb-1 d-block text-body">
                          Peter sent you connection request
                        </small>
                        <small className="text-body-secondary">
                          4 days ago
                        </small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <img
                            src="../../assets/img/avatars/6.png"
                            alt=""
                            className="rounded-circle"
                          ></img>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">New message from Jane</h6>
                        <small className="mb-1 d-block text-body">
                          Your have new message from Jane
                        </small>
                        <small className="text-body-secondary">
                          5 days ago
                        </small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                    <div className="d-flex">
                      <div className="flex-shrink-0 me-3">
                        <div className="avatar">
                          <span className="avatar-initial rounded-circle bg-label-warning">
                            <i className="icon-base bx bx-error"></i>
                          </span>
                        </div>
                      </div>
                      <div className="flex-grow-1">
                        <h6 className="small mb-0">CPU is running high</h6>
                        <small className="mb-1 d-block text-body">
                          CPU Utilization Percent is currently at 88.63%,
                        </small>
                        <small className="text-body-secondary">
                          5 days ago
                        </small>
                      </div>
                      <div className="flex-shrink-0 dropdown-notifications-actions">
                        <a href="#" className="dropdown-notifications-read">
                          <span className="badge badge-dot"></span>
                        </a>
                        <a href="#" className="dropdown-notifications-archive">
                          <span className="icon-base bx bx-x"></span>
                        </a>
                      </div>
                    </div>
                  </li>
                </ul>
                {/* <div className="ps__rail-x" style="left: 0px; bottom: 0px;">
                  <div
                    className="ps__thumb-x"
                    tabindex="0"
                    style="left: 0px; width: 0px;"
                  ></div>
                </div>
                <div className="ps__rail-y" style="top: 0px; right: 0px;">
                  <div
                    className="ps__thumb-y"
                    tabindex="0"
                    style="top: 0px; height: 0px;"
                  ></div>
                </div> */}
              </li>
              <li className="border-top">
                <div className="d-grid p-4">
                  <a className="btn btn-primary btn-sm d-flex" href="#;">
                    <small className="align-middle">
                      View all notifications
                    </small>
                  </a>
                </div>
              </li>
            </ul>
          </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>
                <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>
                <a
                  aria-label="go to billing "
                  className="dropdown-item cusor-pointer"
                >
                  <span className="d-flex align-items-center align-middle">
                    <i className="flex-shrink-0 bx bx-credit-card me-2"></i>
                    <span className="flex-grow-1 align-middle ms-1">
                      Billing
                    </span>
                    <span className="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">
                      4
                    </span>
                  </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" // Optional: Add this for accessibility, but it won't actually redirect
                  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;
