import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { useNavigate, useLocation } from "react-router-dom";
import { Button } from "@/shared/common/ui/button";
import { cn } from "@/shared/lib/utils";
import { FiBell, FiMenu } from "react-icons/fi";
import {
  Check,
  ChevronDown,
  ClipboardList,
  Clock,
  FileText,
  Languages,
  Key,
  LogOut,
  LucideIcon,
  Moon,
  Sun,
  User,
  UserPen,
  UsersRound,
} from "lucide-react";
import { DynamicBreadcrumb } from "@/shared/components/ui/DynamicBreadcrumb";
import { useAuthUser } from "@/shared/hooks/useAuthUser";
import NotificationList from "../NotificationList";
import ReminderList from "../ReminderList";
import { useNotifications } from "@/shared/hooks/useNotification";
import { useReminder } from "@/shared/hooks/useReminder";
import UserApprovalDropdown from "../PendingUsersList";
import { usePendingUsers } from "@/user-management/userManagement/hooks/usePendingUsersHook";
import { useUserDetail } from "../hooks/useUserDetail";
import { MeDto } from "@/shared/dto/user/meDto";
import { useDarkMode } from "@/shared/hooks/useDarkMode";
import {
  UI_LANGUAGE_OPTIONS,
  getUiLanguageLabel,
  getUiLanguageShortLabel,
  resolveUiLanguage,
} from "@/shared/i18n/uiLanguages";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/shared/common/ui/tooltip";
import {
  resolveModuleConfig,
  useTenantConfig,
} from "@/layout/components/TenantConfig";

interface HeaderProps {
  onToggleSidebar?: () => void;
  showRecordManagementShortcut?: boolean;
  showUserManagementShortcut?: boolean;
}

export interface INavTabs {
  icon: LucideIcon;
  isVissible?: boolean;
  label?: string;
  title?: string;
  href?: string;
  url?: string;
  isActive?: boolean;
  count?: boolean;
  isPrimary?: boolean;
  countBadge?: number;
}

const Top: React.FC<HeaderProps> = ({
  onToggleSidebar,
  showRecordManagementShortcut = false,
  showUserManagementShortcut = false,
}) => {
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const { userDetails, logout } = useAuthUser();
  const currentLanguage = resolveUiLanguage(
    i18n.resolvedLanguage || i18n.language,
  );

  const fullName =
    currentLanguage === "am"
      ? userDetails?.name?.am || userDetails?.name?.en || t("header.user")
      : userDetails?.name?.en || userDetails?.name?.am || t("header.user");

  const splittedName = fullName.trim().split(" ");
  const initials =
    splittedName.length === 1
      ? splittedName[0][0]
      : `${splittedName[0][0]}${splittedName[1][0]}`;

  const userRoles = userDetails?.roles?.map((role: any) => role.key) || [];
  const isSuperAdmin = userRoles.includes("super_admin");

  const activePositionName =
    currentLanguage === "am"
      ? userDetails?.employee?.[0]?.positions?.[0]?.name?.am ||
      userDetails?.employee?.[0]?.positions?.[0]?.name?.en
      : userDetails?.employee?.[0]?.positions?.[0]?.name?.en ||
      userDetails?.employee?.[0]?.positions?.[0]?.name?.am;

  const normalizedUserType = userDetails?.userType?.trim().toLowerCase() || "";
  const userTypeLabel =
    normalizedUserType === "individual"
      ? t("header.user")
      : normalizedUserType
        ? normalizedUserType
          .replace(/[_-]/g, " ")
          .replace(/\b\w/g, (char) => char.toUpperCase())
        : "";

  const roleLabel =
    activePositionName ||
    userTypeLabel ||
    (normalizedUserType
      ? userDetails?.roles?.[0]?.key
        ?.replace(/[:_]/g, " ")
        .replace(/\b\w/g, (char) => char.toUpperCase())
      : "");

  const { permissionKeys } = useUserDetail(userDetails as MeDto);
  const canActivateUsers = permissionKeys.includes("can:activateEmployee");

  const handleLogout = () => {
    logout();
  };

  const { isDarkMode, toggleDarkMode } = useDarkMode();
  const { pendingUsers } = usePendingUsers({ take: 5, skip: 0 });
  const pendingUsersCount = pendingUsers?.count || 0;

  const [openNotifications, setOpenNotifications] = useState(false);
  const [openReminders, setOpenReminders] = useState(false);
  const [openPendingUsers, setPendingUsers] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const remindersRef = useRef<HTMLDivElement>(null);
  const pendingUsersRef = useRef<HTMLDivElement>(null);
  const { pendingCount } = useReminder();
  const { config: tenantConfig } = useTenantConfig();
  const moduleConfig = resolveModuleConfig(tenantConfig);
  const isOrgAdmin =
    userRoles.includes("unit_admin") ||
    userRoles.includes("organization_admin");

  const modulesList = [
    {
      id: "homepage",
      label: t("nav.homePage", "Home Page"),
      path: "/homepage",
    },
    ...(moduleConfig.recordManagement
      ? [
        {
          id: "recordManagement",
          label: t("nav.Record Management", "Record Management"),
          path: "/record-management/dashboard",
        },
      ]
      : []),
    ...(moduleConfig.performance
      ? [
        {
          id: "performanceManagement",
          label: t("nav.PerformanceManagement", "Performance Management"),
          path: "/performance-management/plan-years",
        },
      ]
      : []),
    ...(moduleConfig.objective
      ? [
        {
          id: "objectiveManagement",
          label: t("nav.objectiveManagement", "Objective Management"),
          path: "/objective-management/plan-years",
        },
      ]
      : []),
    ...(moduleConfig.dms
      ? [
        {
          id: "documentManagement",
          label: t("nav.DocumentManagement", "Document Management"),
          path: "/dms/dashboard",
        },
      ]
      : []),
    ...(isOrgAdmin && moduleConfig.siteManagement
      ? [
        {
          id: "orgAdmin",
          label: t("nav.admin", "Admin"),
          path: "/user-management/user_management-dashboard",
        },
      ]
      : []),
    ...(isSuperAdmin
      ? [
        {
          id: "superAdmin",
          label: t("OrganizationAdmin", "Super Admin"),
          path: "/user-management/dashboard",
        },
      ]
      : []),
  ];

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement;
      const isDialogInteraction =
        target.closest("[role='dialog']") ||
        target.closest("[data-slot='dialog-content']") ||
        target.closest("[data-slot='dialog-overlay']") ||
        target.closest("[data-slot='dialog-close']");

      if (isDialogInteraction) {
        return;
      }

      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(target as Node)
      ) {
        setOpenNotifications(false);
      }

      if (
        pendingUsersRef.current &&
        !pendingUsersRef.current.contains(target as Node)
      ) {
        setPendingUsers(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const { unseenCount, refresh } = useNotifications({
    take: 100,
    skip: 0,
    orderBy: "createdAt:DESC",
  });

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <header className="sticky top-0 z-40 h-14 shrink-0 border-b border-primary-100/70 bg-white/90 shadow-sm backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90">
      <div className="flex h-full items-center justify-between px-2 sm:px-4 md:px-6">
        <div className="flex min-w-0 flex-1 items-center gap-2 md:gap-3">
          {onToggleSidebar ? (
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={onToggleSidebar}
                  className="h-9 w-9 flex-shrink-0 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40"
                  aria-label="Toggle sidebar"
                  title="Toggle sidebar"
                >
                  <FiMenu className="h-5 w-5" />
                </Button>
              </TooltipTrigger>
              <TooltipContent side="bottom" sideOffset={6}>
                Toggle sidebar
              </TooltipContent>
            </Tooltip>
          ) : (
            <DropdownMenu>
              <Tooltip>
                <TooltipTrigger asChild>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-9 w-9 flex-shrink-0 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40"
                      aria-label={t("nav.moduleNavigationHint")}
                      title={t("nav.moduleNavigationHint")}
                    >
                      <FiMenu className="h-5 w-5" />
                    </Button>
                  </DropdownMenuTrigger>
                </TooltipTrigger>
                <TooltipContent side="bottom" sideOffset={6}>
                  {t("nav.moduleNavigationHint")}
                </TooltipContent>
              </Tooltip>
              <DropdownMenuContent
                align="start"
                className="w-56 dark:bg-gray-900 dark:border-gray-800"
              >
                {modulesList
                  .filter((item) => {
                    const currentPath = location.pathname;
                    if (item.id === "homepage") {
                      return !currentPath.startsWith("/homepage");
                    }
                    if (item.id === "recordManagement") {
                      return !currentPath.startsWith("/record-management");
                    }
                    if (item.id === "performanceManagement") {
                      return !currentPath.startsWith("/performance-management");
                    }
                    if (item.id === "objectiveManagement") {
                      return !currentPath.startsWith("/objective-management");
                    }
                    if (item.id === "documentManagement") {
                      return !currentPath.startsWith("/dms");
                    }
                    if (item.id === "complaints") {
                      return !currentPath.startsWith("/complaints");
                    }
                    if (item.id === "orgAdmin" || item.id === "superAdmin") {
                      return !currentPath.startsWith("/user-management");
                    }
                    return true;
                  })
                  .map((item) => (
                    <DropdownMenuItem
                      key={item.id}
                      onClick={() => navigate(item.path)}
                      className="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 py-2.5"
                    >
                      <span>{item.label}</span>
                    </DropdownMenuItem>
                  ))}
              </DropdownMenuContent>
            </DropdownMenu>
          )}

          <div className="hidden min-w-0 flex-1 sm:block sm:max-w-[34vw] lg:max-w-[41vw] xl:max-w-[48vw]">
            <DynamicBreadcrumb />
          </div>

          {showUserManagementShortcut && (
            <Button
              variant="ghost"
              size="sm"
              className="flex h-9 w-9 sm:w-auto items-center justify-center sm:justify-start gap-1.5 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 px-0 sm:px-3"
              onClick={() => navigate("/user-management")}
            >
              <User className="h-4 w-4 shrink-0 text-primary-500" />
              <span className="hidden sm:inline text-xs font-semibold">
                {t("dashboard.userManagement", "User Management")}
              </span>
            </Button>
          )}
        </div>

        <div className="flex max-w-[56vw] flex-shrink-0 items-center space-x-1.5 sm:max-w-none sm:space-x-2.5">
          <Button
            variant="ghost"
            size="icon"
            className="h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 sm:h-10 sm:w-10"
            aria-label={isDarkMode ? "Light mode" : "Dark mode"}
            onClick={toggleDarkMode}
            title={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
          >
            {isDarkMode ? (
              <Sun className="h-4 w-4 text-yellow-500" />
            ) : (
              <Moon className="h-4 w-4 text-gray-700 dark:text-gray-300" />
            )}
          </Button>

          {canActivateUsers && (
            <div className="relative">
              <Button
                variant="ghost"
                size="icon"
                className="relative h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 sm:h-10 sm:w-10"
                aria-label={t("header.notifications")}
                onClick={() => setPendingUsers((prev) => !prev)}
              >
                <ClipboardList className="h-4 w-4" />
              </Button>

              {pendingUsersCount > 0 && (
                <span className="absolute -right-1.5 -top-1.5 rounded-full bg-yellow-500 px-1.5 py-0.5 text-[10px] font-bold text-white shadow">
                  {pendingUsersCount > 99 ? "99+" : pendingUsersCount}
                </span>
              )}

              {openPendingUsers && (
                <div
                  ref={pendingUsersRef}
                  className="fixed left-3 right-3 top-16 z-50 mt-2 max-h-[calc(100dvh-5rem)] overflow-y-auto rounded-2xl bg-white p-3 shadow-2xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10 sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:max-h-96 sm:w-80 sm:p-4"
                >
                  <UserApprovalDropdown />
                </div>
              )}
            </div>
          )}

          <div className="relative" ref={dropdownRef}>
            <Button
              variant="ghost"
              size="icon"
              className={cn(
                "relative h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 sm:h-10 sm:w-10",
                openNotifications &&
                "bg-primary-50 text-primary-700 ring-primary-300 dark:bg-primary-900/30 dark:text-primary-300 dark:ring-primary-700/60",
              )}
              aria-label={t("header.notifications")}
              onClick={() =>
                setOpenNotifications((prev) => {
                  const next = !prev;
                  if (next) refresh();
                  return next;
                })
              }
            >
              <FiBell
                className={cn(
                  "h-4 w-4 transition-colors",
                  openNotifications &&
                  "fill-primary-100 text-primary-700 dark:fill-primary-900/40 dark:text-primary-300",
                )}
              />
              {unseenCount > 0 && (
                <span className="absolute -right-1.5 -top-1.5 min-w-[18px] rounded-full bg-red-500 px-1.5 py-0.5 text-center text-[10px] font-bold text-white shadow">
                  {unseenCount > 99 ? "99+" : unseenCount}
                </span>
              )}
            </Button>

            {openNotifications && (
              <div className="fixed left-3 right-3 top-16 z-50 mt-2 max-h-[calc(100dvh-5rem)] overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10 sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:w-[24rem]">
                <NotificationList />
              </div>
            )}
          </div>

          {/* Reminders */}
          <div className="relative" ref={remindersRef}>
            <Button
              variant="ghost"
              size="icon"
              className="relative h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary/10 hover:text-primary hover:ring-primary/30 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary/20 dark:hover:text-primary-300 dark:hover:ring-primary/40 sm:h-10 sm:w-10"
              aria-label="Reminders"
              onClick={() => setOpenReminders((prev) => !prev)}
            >
              <Clock className="h-4 w-4" />
              {pendingCount > 0 && (
                <span className="absolute -right-1.5 -top-1.5 min-w-[18px] rounded-full bg-primary px-1.5 py-0.5 text-center text-[10px] font-bold text-primary-foreground shadow">
                  {pendingCount > 99 ? "99+" : pendingCount}
                </span>
              )}
            </Button>
            {openReminders && (
              <div className="fixed left-3 right-3 top-16 z-50 mt-2 max-h-[calc(100dvh-5rem)] overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10 sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:w-[24rem]">
                <ReminderList />
              </div>
            )}
          </div>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <Languages className="h-4 w-4 text-primary-500" />
                <span className="hidden sm:inline text-xs">
                  {getUiLanguageShortLabel(currentLanguage, t)}
                </span>
                <ChevronDown className="hidden h-3.5 w-3.5 text-gray-400 sm:block" />
              </Button>
            </DropdownMenuTrigger>

            <DropdownMenuContent
              className="w-52 rounded-xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10"
              align="end"
              forceMount
            >
              {UI_LANGUAGE_OPTIONS.map((lang) => (
                <DropdownMenuItem
                  key={lang.value}
                  onClick={() => changeLanguage(lang.value)}
                  className={cn(
                    "flex cursor-pointer items-center justify-between rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/30",
                    currentLanguage === lang.value &&
                    "bg-primary-100 text-primary-800 dark:bg-primary-800/50 dark:text-white",
                  )}
                >
                  <div className="flex items-center gap-2">
                    <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-[11px] font-bold text-gray-600 dark:bg-gray-700 dark:text-gray-200">
                      {getUiLanguageShortLabel(lang.value, t)}
                    </span>
                    <span>{getUiLanguageLabel(lang.value, t)}</span>
                  </div>
                  {currentLanguage === lang.value && (
                    <Check className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                  )}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                className="group h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-r from-white to-primary-50/80 p-0 text-gray-700 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:from-primary-50 hover:to-primary-100 hover:ring-primary-200 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 dark:ring-white/10 dark:hover:from-gray-800 dark:hover:to-primary-900/20 dark:hover:ring-primary-700/40 sm:h-10 sm:w-auto sm:max-w-[170px] sm:justify-start sm:gap-2 sm:rounded-2xl sm:px-1.5 sm:pr-2 md:max-w-[200px]"
                aria-label={t("header.userMenu")}
              >
                <div
                  className="
    flex h-8 w-8 sm:h-9 sm:w-9
    items-center justify-center
    rounded-full
    bg-gradient-to-br
    from-primary-500 via-primary-500 to-primary-600
    text-[11px] sm:text-sm
    font-semibold
    text-white
    shadow-sm
    ring-2 ring-white dark:ring-gray-900
    shrink-0
  "
                >
                  {initials.toUpperCase()}
                </div>
                <div className="hidden min-w-0 flex-col items-start text-left lg:flex">
                  <span className="max-w-[118px] truncate text-xs font-semibold leading-none">
                    {fullName}
                  </span>
                  <span className="max-w-[118px] truncate pt-1 text-[10px] font-medium leading-none text-gray-500 dark:text-gray-400">
                    {roleLabel}
                  </span>
                </div>
                <ChevronDown className="hidden h-4 w-4 text-gray-400 transition group-hover:text-primary-600 dark:group-hover:text-primary-300 sm:block" />
              </Button>
            </DropdownMenuTrigger>

            <DropdownMenuContent
              className="w-64 rounded-xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10"
              align="end"
            >
              <div className="mb-1 rounded-lg bg-gradient-to-r from-primary-500 to-primary-600 p-3 text-white">
                <p className="truncate text-sm font-semibold">{fullName}</p>
                <p className="truncate pt-1 text-xs text-white/90">
                  {roleLabel}
                </p>
              </div>

              <DropdownMenuItem
                className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
                onClick={() => navigate("/profile")}
              >
                <User className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
                <span>{t("header.viewProfile")}</span>
              </DropdownMenuItem>

              <DropdownMenuItem
                className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
                onClick={() => navigate("/update-profile")}
              >
                <UserPen className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
                <span>{t("header.editProfile")}</span>
              </DropdownMenuItem>

              <DropdownMenuItem
                className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
                onClick={() => navigate("/change-password")}
              >
                <Key className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
                <span>{t("header.changePassword")}</span>
              </DropdownMenuItem>

              {showRecordManagementShortcut && (
                <DropdownMenuItem
                  className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
                  onClick={() => navigate("/record-management/dashboard")}
                >
                  <FileText className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
                  <span>{t("nav.Record Management")}</span>
                </DropdownMenuItem>
              )}

              {showUserManagementShortcut && (
                <DropdownMenuItem
                  className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
                  onClick={() => navigate("/user-management")}
                >
                  <UsersRound className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
                  <span>
                    {t("dashboard.userManagement", "User Management")}
                  </span>
                </DropdownMenuItem>
              )}

              <DropdownMenuSeparator className="my-1 h-px bg-gray-200 dark:bg-gray-700" />

              <DropdownMenuItem
                className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-red-600 transition-colors hover:bg-red-50 dark:hover:bg-red-950/30"
                onClick={handleLogout}
              >
                <LogOut className="mr-2.5 h-4 w-4" />
                <span>{t("header.signOut")}</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
};

export default Top;
