import React, { useState, useEffect, useLayoutEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { clearStoredAuth, redirectToHseLogin } from "hse-auth";
import { getRoleIdsFromToken, ROLE_SUPPORT_ID } from "../../utils/authUtils";
import { openMasterDashboard } from "../../utils/masterDashboardPortal";

const Sidebar = ({ collapsed, onToggleSidebar }) => {
  const navigate = useNavigate();
  const location = useLocation();
  // Support role id is 4 (sat.roles); restrict sidebar to Tickets only when user has only role 4
  const roleIds = getRoleIdsFromToken();
  const supportOnly = roleIds.length === 1 && roleIds.includes(ROLE_SUPPORT_ID);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [activityLogOpen, setActivityLogOpen] = useState(false);
  const [formsOpen, setFormsOpen] = useState(false);
  const [auditsOpen, setAuditsOpen] = useState(false);
  const [sitesWorkareasOpen, setSitesWorkareasOpen] = useState(false);
  const [ticketsOpen, setTicketsOpen] = useState(false);
  const [usersOpen, setUsersOpen] = useState(false);
  const [showLogoutModal, setShowLogoutModal] = useState(false);
  const [loggingOut, setLoggingOut] = useState(false);

  const closeOtherDropdowns = (except) => {
    if (except !== "settings") setSettingsOpen(false);
    if (except !== "activityLog") setActivityLogOpen(false);
    if (except !== "forms") setFormsOpen(false);
    if (except !== "audits") setAuditsOpen(false);
    if (except !== "sitesWorkareas") setSitesWorkareasOpen(false);
    if (except !== "tickets") setTicketsOpen(false);
    if (except !== "users") setUsersOpen(false);
  };

  const toggleDropdown = (e) => {
    e.preventDefault();
    if (!settingsOpen) closeOtherDropdowns("settings");
    setSettingsOpen(!settingsOpen);
  };

  const toggleActivityLogDropdown = (e) => {
    e.preventDefault();
    if (!activityLogOpen) closeOtherDropdowns("activityLog");
    setActivityLogOpen(!activityLogOpen);
  };

  const toggleFormsDropdown = (e) => {
    e.preventDefault();
    if (!formsOpen) closeOtherDropdowns("forms");
    setFormsOpen(!formsOpen);
  };

  const toggleAuditsDropdown = (e) => {
    e.preventDefault();
    if (!auditsOpen) closeOtherDropdowns("audits");
    setAuditsOpen(!auditsOpen);
  };

  const toggleSitesWorkareasDropdown = (e) => {
    e.preventDefault();
    if (!sitesWorkareasOpen) {
      closeOtherDropdowns("sitesWorkareas");
      setSettingsOpen(true);
    }
    setSitesWorkareasOpen(!sitesWorkareasOpen);
  };

  const toggleTicketsDropdown = (e) => {
    e.preventDefault();
    if (!ticketsOpen) closeOtherDropdowns("tickets");
    setTicketsOpen(!ticketsOpen);
  };

  const toggleUsersDropdown = (e) => {
    e.preventDefault();
    if (!usersOpen) closeOtherDropdowns("users");
    setUsersOpen(!usersOpen);
  };

  // Keep dropdown "open" state in sync with the URL in one pass (avoids a frame where
  // everything was closed before the matching section re-opens — fixes ticket submenu height).
  useLayoutEffect(() => {
    const path = location.pathname;
    const activityLog = [
      "/activity-log/user-logs",
      "/activity-log/forms-logs",
      "/activity-log/audit-logs",
    ].includes(path);
    const audits =
      [
        "/create-audit",
        "/update-audit",
        "/audit-status",
        "/my-audits",
        "/audit-schedule",
        "/user-wise-audits",
        "/submissions",
      ].includes(path) ||
      path.startsWith("/view-submission/") ||
      path.startsWith("/update-audit/") ||
      path.startsWith("/audit-schedule/date/");
    const users =
      ["/users", "/user-create"].includes(path) || path.startsWith("/user-profile/");
    const forms =
      ["/questions", "/create-forms", "/view-forms", "/update-forms"].includes(path) ||
      path.startsWith("/update-forms/") ||
      path.startsWith("/view-forms/") ||
      path.startsWith("/form-preview/");
    const tickets = [
      "/tickets",
      "/ticket-progress",
      "/raise-ticket",
      "/close-ticket",
      "/ticket-logs",
    ].includes(path);
    const sitesWorkareas = ["/add-site", "/add-workarea"].includes(path);
    const settings = ["/add-site", "/add-workarea", "/theme-management"].includes(path);

    setActivityLogOpen(activityLog);
    setAuditsOpen(audits);
    setUsersOpen(users);
    setFormsOpen(forms);
    setTicketsOpen(tickets);
    setSitesWorkareasOpen(sitesWorkareas);
    setSettingsOpen(settings);
  }, [location.pathname]);

  const anyDropdownOpen = settingsOpen || activityLogOpen || formsOpen || auditsOpen || sitesWorkareasOpen || ticketsOpen || usersOpen;
  /* Only lock body scroll when sidebar is collapsed (overlay mode). When expanded, dropdowns are in the sidebar column and main content should scroll. */
  useEffect(() => {
    if (anyDropdownOpen && collapsed) {
      document.body.classList.add("sidebar-dropdown-open");
    } else {
      document.body.classList.remove("sidebar-dropdown-open");
    }
    return () => document.body.classList.remove("sidebar-dropdown-open");
  }, [anyDropdownOpen, collapsed]);

  const handleLogoutConfirm = () => {
    setLoggingOut(true);
    localStorage.removeItem("masterDashboardHeroTipDismissed");
    clearStoredAuth();
    setShowLogoutModal(false);
    redirectToHseLogin();
  };

  const isActive = (path) => location.pathname === path;
  const isSettingsActive = [
    "/add-site",
    "/add-workarea",
    // "/notification-settings",
    "/theme-management",
  ].includes(location.pathname);

  const isActivityLogActive = ["/activity-log/user-logs", "/activity-log/forms-logs", "/activity-log/audit-logs"].includes(location.pathname);

  const isFormsActive = [
    "/questions",
    "/create-forms",
    "/view-forms",
  ].includes(location.pathname) || location.pathname.startsWith("/update-forms");

  const isAuditsActive = [
    "/create-audit",
    "/update-audit",
    "/audit-status",
    "/my-audits",
    "/audit-schedule",
    "/user-wise-audits",
    "/submissions",
    "/view-submission",
  ].includes(location.pathname) || location.pathname.startsWith("/view-submission/") || location.pathname.startsWith("/update-audit/") || location.pathname.startsWith("/audit-schedule/date/");

  const isTicketsActive = ['/tickets', '/ticket-progress', '/raise-ticket', '/close-ticket', '/ticket-logs'].includes(location.pathname);

  const isUsersActive = ["/users", "/user-create"].includes(location.pathname) || location.pathname.startsWith("/user-profile/");

  return (
    <>
      {showLogoutModal && (
        <div
          className="master-logout-modal-overlay"
          role="dialog"
          aria-modal="true"
          aria-labelledby="sidebar-logout-modal-title"
        >
          <div className="master-logout-modal">
            <h2 id="sidebar-logout-modal-title" className="master-logout-modal-title">
              Sign out
            </h2>
            <p className="master-logout-modal-text">
              Are you sure you want to sign out from the SAT Dashboard?
            </p>
            <div className="master-logout-modal-actions">
              <button
                type="button"
                className="master-logout-modal-btn master-logout-modal-btn--secondary"
                onClick={() => setShowLogoutModal(false)}
                disabled={loggingOut}
              >
                Cancel
              </button>
              <button
                type="button"
                className="master-logout-modal-btn master-logout-modal-btn--primary"
                onClick={handleLogoutConfirm}
                disabled={loggingOut}
              >
                {loggingOut ? "Signing out..." : "Sign out"}
              </button>
            </div>
          </div>
        </div>
      )}
      <aside className={`sidebar ${collapsed ? "collapsed" : ""}`} id="sidebar">
        <div className="sidebar-header">
          <h3>Navigation</h3>
          <button
            type="button"
            className="sidebar-close-btn"
            onClick={onToggleSidebar}
            aria-label="Close menu"
          >
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>
        <ul className="sidebar-menu">
          <li className="menu-item">
            <a
              href="#!"
              className="menu-link"
              onClick={(e) => {
                e.preventDefault();
                openMasterDashboard("/");
              }}
            >
              <span className="menu-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
              <span className="menu-text">Master Dashboard</span>
            </a>
          </li>
          {!supportOnly && (
          <li className="menu-item">
            <a
              href="#!"
              className="menu-link"
              onClick={(e) => {
                e.preventDefault();
                openMasterDashboard("/personalized-dashboard");
              }}
            >
              <span className="menu-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
              <span className="menu-text">Personalized Dashboard</span>
            </a>
          </li>
          )}
          {!supportOnly && (
          <li className={`menu-item ${isActive("/dashboard") ? "active" : ""}`}>
            <a
              href="#!"
              className="menu-link"
              onClick={(e) => {
                e.preventDefault();
                navigate("/dashboard");
              }}
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M9 22V12H15V22"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span>SAT Dashboard</span>
            </a>
          </li>
          )}
          {!supportOnly && (
          <li
            className={`menu-item menu-dropdown ${activityLogOpen ? "open" : ""} ${isActivityLogActive ? "active" : ""}`}
          >
            <a href="#!" className="menu-link" onClick={toggleActivityLogDropdown}>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M14 2V8H20"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M16 13H8"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M16 17H8"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M10 9H9H8"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span>Activity Log</span>
              <svg
                className="dropdown-arrow"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 9L12 15L18 9"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </a>
            <ul className="submenu">
              <li className={`submenu-item ${isActive("/activity-log/user-logs") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/activity-log/user-logs");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>User Logs</span>
                </a>
              </li>
              <li className={`submenu-item ${isActive("/activity-log/forms-logs") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/activity-log/forms-logs");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 12H15M9 16H15M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H12.5858C12.851 3 13.1054 3.10536 13.2929 3.29289L18.7071 8.70711C18.8946 8.89464 19 9.149 19 9.41421V19C19 20.1046 18.1046 21 17 21Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Form Logs</span>
                </a>
              </li>
              <li className={`submenu-item ${isActive("/activity-log/audit-logs") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/activity-log/audit-logs");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M14 2V8H20M16 13H8M16 17H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Audit Logs</span>
                </a>
              </li>
            </ul>
          </li>
          )}
          {!supportOnly && (
          <li
            className={`menu-item menu-dropdown ${formsOpen ? "open" : ""} ${isFormsActive ? "active" : ""
              }`}
          >
            <a href="#!" className="menu-link" onClick={toggleFormsDropdown}>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 12H15M9 16H15M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H12.5858C12.851 3 13.1054 3.10536 13.2929 3.29289L18.7071 8.70711C18.8946 8.89464 19 9.149 19 9.41421V19C19 20.1046 18.1046 21 17 21Z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span>Forms</span>
              <svg
                className="dropdown-arrow"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 9L12 15L18 9"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </a>
            <ul className="submenu">
              <li
                className={`submenu-item ${isActive("/questions") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/questions");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V5C15 6.10457 14.1046 7 13 7H11C9.89543 7 9 6.10457 9 5V5Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9 12H15M9 16H15"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <circle cx="9" cy="9" r="0.5" fill="currentColor" />
                  </svg>
                  <span>Questions</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/create-forms") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/create-forms");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13M18.5 2.50001C18.8978 2.10218 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10218 21.5 2.50001C21.8978 2.89783 22.1213 3.4374 22.1213 4.00001C22.1213 4.56261 21.8978 5.10218 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z"
                      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Create Form</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/update-forms") || location.pathname.startsWith("/update-forms/") ? "active" : ""}`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/update-forms");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M4 4V9H4.58152M19.9381 11C19.446 7.05369 16.0796 4 12 4C8.64262 4 5.76833 6.06817 4.58152 9M4.58152 9H9M20 20V15H19.4185M19.4185 15C18.2317 17.9318 15.3574 20 12 20C7.92038 20 4.55399 16.9463 4.06189 13M19.4185 15H15"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Update Form</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/view-forms") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/view-forms");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <circle
                      cx="12"
                      cy="12"
                      r="3"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>View Forms</span>
                </a>
              </li>
            </ul>
          </li>
          )}
          {!supportOnly && (
          <li
            className={`menu-item menu-dropdown ${auditsOpen ? "open" : ""} ${isAuditsActive ? "active" : ""
              }`}
          >
            <a href="#!" className="menu-link" onClick={toggleAuditsDropdown}>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9 12H15M9 16H15M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H12.5858C12.851 3 13.1054 3.10536 13.2929 3.29289L18.7071 8.70711C18.8946 8.89464 19 9.149 19 9.41421V19C19 20.1046 18.1046 21 17 21Z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M14 2V8H20"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span>Audits</span>
              <svg
                className="dropdown-arrow"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 9L12 15L18 9"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </a>
            <ul className="submenu">
              <li
                className={`submenu-item ${isActive("/my-audits") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/my-audits");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>My Audits</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/create-audit") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/create-audit");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V5C15 6.10457 14.1046 7 13 7H11C9.89543 7 9 6.10457 9 5V5Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M12 12H15M12 16H15M9 12H9.01M9 16H9.01"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Create Audit</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/audit-schedule") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/audit-schedule");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Audit Schedule</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/audit-status") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/audit-status");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9 12H15M9 16H15M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H12.5858C12.851 3 13.1054 3.10536 13.2929 3.29289L18.7071 8.70711C18.8946 8.89464 19 9.149 19 9.41421V19C19 20.1046 18.1046 21 17 21Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M13 17V7M9 13V7M17 17V7"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Audit Status</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/user-wise-audits") ? "active" : ""}`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/user-wise-audits");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9 11a4 4 0 108 0 4 4 0 00-8 0z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>User-wise Audit Details</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/update-audit") || location.pathname.startsWith("/update-audit/") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/update-audit");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M18.5 2.50001C18.8978 2.10218 19.4374 1.87869 20 1.87869C20.5626 1.87869 21.1022 2.10218 21.5 2.50001C21.8978 2.89783 22.1213 3.4374 22.1213 4.00001C22.1213 4.56261 21.8978 5.10218 21.5 5.50001L12 15L8 16L9 12L18.5 2.50001Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Update Audit</span>
                </a>
              </li>
              <li
                className={`submenu-item ${isActive("/submissions") || location.pathname.startsWith("/view-submission/") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/submissions");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9 12H15M9 16H15M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H12.5858C12.851 3 13.1054 3.10536 13.2929 3.29289L18.7071 8.70711C18.8946 8.89464 19 9.149 19 9.41421V19C19 20.1046 18.1046 21 17 21Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M13 3V9H19"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>View Submissions</span>
                </a>
              </li>
            </ul>
          </li>
          )}
          <li
            className={`menu-item menu-dropdown ${ticketsOpen ? "open" : ""} ${isTicketsActive ? "active" : ""}`}
          >
            <a href="#!" className="menu-link" onClick={toggleTicketsDropdown}>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 5H9C7.89543 5 7 5.89543 7 7V17C7 18.1046 7.89543 19 9 19H15C16.1046 19 17 18.1046 17 17V7C17 5.89543 16.1046 5 15 5Z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M13 9H11M13 13H11M17 9H15M17 13H15"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span>Tickets</span>
              <svg
                className="dropdown-arrow"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 9L12 15L18 9"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </a>
            <ul className="submenu">
              <li className={`submenu-item ${isActive("/tickets") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/tickets");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 12H15M9 16H15M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H12.5858C12.851 3 13.1054 3.10536 13.2929 3.29289L18.7071 8.70711C18.8946 8.89464 19 9.149 19 9.41421V19C19 20.1046 18.1046 21 17 21Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Ticket Progress</span>
                </a>
              </li>
              <li className={`submenu-item ${isActive("/ticket-logs") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/ticket-logs");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 12H15M9 16H15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Ticket Logs</span>
                </a>
              </li>
              <li className={`submenu-item ${isActive("/close-ticket") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/close-ticket");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Resolve Ticket</span>
                </a>
              </li>
              <li className={`submenu-item ${isActive("/raise-ticket") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/raise-ticket");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Raise Ticket</span>
                </a>
              </li>
            </ul>
          </li>
          {!supportOnly && (
          <li
            className={`menu-item menu-dropdown ${usersOpen ? "open" : ""} ${isUsersActive ? "active" : ""}`}
          >
            <a href="#!" className="menu-link" onClick={toggleUsersDropdown}>
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span>Users</span>
              <svg className="dropdown-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
            <ul className="submenu">
              <li className={`submenu-item ${isActive("/users") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/users");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>All users</span>
                </a>
              </li>
              <li className={`submenu-item ${isActive("/user-create") ? "active" : ""}`}>
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/user-create");
                  }}
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M8.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M20 8v6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M23 11h-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Create users</span>
                </a>
              </li>
            </ul>
          </li>
          )}
          {!supportOnly && (
          <li
            className={`menu-item menu-dropdown ${settingsOpen ? "open" : ""} ${isSettingsActive ? "active" : ""
              }`}
          >
            <a href="#!" className="menu-link" onClick={toggleDropdown}>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="3"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <span>Settings</span>
              <svg
                className="dropdown-arrow"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 9L12 15L18 9"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </a>
            <ul className="submenu">
              <li
                className={`submenu-item submenu-dropdown ${sitesWorkareasOpen ? "open" : ""} ${["/add-site", "/add-workarea"].includes(location.pathname) ? "active" : ""}`}
              >
                <a href="#!" className="submenu-link" onClick={toggleSitesWorkareasDropdown}>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <circle cx="12" cy="10" r="3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span>Sites &amp; Workareas</span>
                  <svg className="dropdown-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </a>
                <ul className="submenu submenu-nested">
                  <li className={`submenu-item ${isActive("/add-site") ? "active" : ""}`}>
                    <a href="#!" className="submenu-link" onClick={(e) => { e.preventDefault(); navigate("/add-site"); }}>
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                        <circle cx="12" cy="10" r="3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                      <span>Add Site</span>
                    </a>
                  </li>
                  <li className={`submenu-item ${isActive("/add-workarea") ? "active" : ""}`}>
                    <a href="#!" className="submenu-link" onClick={(e) => { e.preventDefault(); navigate("/add-workarea"); }}>
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="2" y="7" width="20" height="14" rx="2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                        <path d="M16 21V5C16 4.46957 15.7893 3.96086 15.4142 3.58579C15.0391 3.21071 14.5304 3 14 3H10C9.46957 3 8.96086 3.21071 8.58579 3.58579C8.21071 3.96086 8 4.46957 8 5V21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                      <span>Add Workarea</span>
                    </a>
                  </li>
                </ul>
              </li>
              {/* Notification Settings commented out
              <li
                className={`submenu-item ${isActive("/notification-settings") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/notification-settings");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Notification Settings</span>
                </a>
              </li>
              */}
              <li
                className={`submenu-item ${isActive("/theme-management") ? "active" : ""
                  }`}
              >
                <a
                  href="#!"
                  className="submenu-link"
                  onClick={(e) => {
                    e.preventDefault();
                    navigate("/theme-management");
                  }}
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span>Theme Management</span>
                </a>
              </li>
            </ul>
          </li>
          )}
        </ul>
        <div className="sidebar-footer">
          <button className="logout-btn" onClick={() => setShowLogoutModal(true)}>
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M16 17L21 12L16 7M21 12H9"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <span>Logout</span>
          </button>
        </div>
      </aside>
    </>
  );
};

export default Sidebar;
