/**
 * Copyright (c) 2023-present Pi Dash Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

// components
import { observer } from "mobx-react";
import { useParams, usePathname } from "next/navigation";
import { useTranslation } from "@pi-dash/i18n";
import { cn } from "@pi-dash/utils";
import { TopNavPowerK } from "@/components/navigation";
import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
import { HelpMenuRoot } from "@/components/workspace/sidebar/help-section/root";
import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";
import { WorkspaceMenuRoot } from "@/components/workspace/sidebar/workspace-menu-root";
import { useAppTheme } from "@/hooks/store/use-app-theme";
import { useAppRailPreferences } from "@/hooks/use-navigation-preferences";
import { Tooltip } from "@pi-dash/propel/tooltip";
import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
import { InboxIcon } from "@pi-dash/propel/icons";
import useSWR from "swr";
import { useWorkspaceNotifications } from "@/hooks/store/notifications";
// local imports
import { StarUsOnGitHubLink } from "@/app/(all)/[workspaceSlug]/(projects)/star-us-link";

export const TopNavigationRoot = observer(function TopNavigationRoot() {
  // router
  const { workspaceSlug } = useParams();
  const pathname = usePathname();

  // store hooks
  const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();
  const { preferences } = useAppRailPreferences();
  const { sidebarCollapsed } = useAppTheme();
  const { t } = useTranslation();

  const showLabel = preferences.displayMode === "icon_with_label";
  const workspaceSlugString = workspaceSlug?.toString();
  const sidebarMounted =
    !!workspaceSlugString &&
    !pathname?.startsWith(`/${workspaceSlugString}/settings`) &&
    !pathname?.startsWith(`/${workspaceSlugString}/notifications`);
  const sidebarToggleTooltip = sidebarCollapsed
    ? t("Expand sidebar")
    : t("Collapse sidebar");

  // Fetch notification count
  useSWR(
    workspaceSlug ? "WORKSPACE_UNREAD_NOTIFICATION_COUNT" : null,
    workspaceSlug ? () => getUnreadNotificationsCount(workspaceSlug.toString()) : null
  );

  // Calculate notification count
  const isMentionsEnabled = unreadNotificationsCount.mention_unread_notifications_count > 0;
  const totalNotifications = isMentionsEnabled
    ? unreadNotificationsCount.mention_unread_notifications_count
    : unreadNotificationsCount.total_unread_notifications_count;

  return (
    <div
      className={cn("z-[27] flex min-h-10 w-full items-center bg-canvas px-3.5 transition-all duration-300", {
        "px-2": !showLabel,
      })}
    >
      {/* Workspace Menu */}
      <div className="flex flex-1 shrink-0 items-center gap-1">
        <WorkspaceMenuRoot variant="top-navigation" />
        {sidebarMounted && (
          <Tooltip tooltipContent={sidebarToggleTooltip} position="bottom">
            <AppSidebarToggleButton />
          </Tooltip>
        )}
      </div>
      {/* Power K Search */}
      <div className="shrink-0">
        <TopNavPowerK />
      </div>
      {/* Additional Actions */}
      <div className="flex flex-1 shrink-0 items-center justify-end gap-1">
        <Tooltip tooltipContent="Inbox" position="bottom">
          <AppSidebarItem
            variant="link"
            item={{
              href: `/${workspaceSlug?.toString()}/notifications/`,
              icon: (
                <div className="relative">
                  <InboxIcon className="size-5" />
                  {totalNotifications > 0 && (
                    <span className="absolute top-0 right-0 size-2 rounded-full bg-danger-primary" />
                  )}
                </div>
              ),
              isActive: pathname?.includes("/notifications/"),
            }}
          />
        </Tooltip>
        <HelpMenuRoot />
        <StarUsOnGitHubLink />
        {/* Fallback user menu — only when the sidebar (which hosts the canonical bottom user menu)
            is not mounted or is collapsed. Keeps Settings/Sign-out reachable on /notifications,
            /settings, and when the sidebar is collapsed. */}
        {(!sidebarMounted || sidebarCollapsed) && (
          <div className="flex size-8 items-center justify-center rounded-md hover:bg-layer-1-hover">
            <UserMenuRoot />
          </div>
        )}
      </div>
    </div>
  );
});
