"use client";
import { jsx, jsxs } from "react/jsx-runtime";
var _a;
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useMemo } from "react";
import { cn } from "../../../lib/utils/index.js";
import { useTranslations } from "next-intl";
import { sel } from "../../../lib/test/index.js";
import { Home, Camera } from "lucide-react";
import * as Icons from "lucide-react";
import { THEME_REGISTRY } from "@nextsparkjs/registries/theme-registry";
import { usePermission } from "../../../lib/permissions/hooks.js";
const activeTheme = process.env.NEXT_PUBLIC_ACTIVE_THEME || "default";
const themeConfig = THEME_REGISTRY[activeTheme];
const customSidebarSections = ((_a = themeConfig == null ? void 0 : themeConfig.appConfig) == null ? void 0 : _a.customSidebarSections) || [];
const coreItems = [
  {
    name: "dashboard",
    href: "/dashboard",
    icon: Home,
    descriptionKey: "dashboard"
  },
  {
    name: "media",
    href: "/dashboard/media",
    icon: Camera,
    descriptionKey: "media"
  }
];
const labelMappings = {
  "navigation.learn": "Learn",
  "navigation.teach": "Teach",
  "navigation.myCourses": "My Courses",
  "navigation.catalog": "Catalog",
  "navigation.courses": "Courses",
  "navigation.lessons": "Lessons",
  "navigation.analytics": "Analytics"
};
function NavItemWithPermission({
  item,
  sectionId,
  pathname,
  isMobile,
  isCollapsed,
  onItemClick,
  normalizeKey,
  t
}) {
  const permissionToCheck = item.requiresPermission || "teams.read";
  const hasPermission = usePermission(permissionToCheck);
  if (item.requiresPermission && !hasPermission) {
    return null;
  }
  const ItemIcon = Icons[item.icon] || Icons.Circle;
  const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
  const normalizedItemKey = normalizeKey(item.labelKey);
  const itemLabel = t(normalizedItemKey) || labelMappings[item.labelKey] || item.id;
  return /* @__PURE__ */ jsxs(
    Link,
    {
      href: item.href,
      onClick: onItemClick,
      className: cn(
        "flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors",
        isCollapsed ? "justify-center" : "gap-3",
        isActive ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
        isMobile && "w-full"
      ),
      "aria-current": isActive ? "page" : void 0,
      title: isCollapsed ? itemLabel : void 0,
      "data-cy": sel("dashboard.navigation.sectionItem", { sectionId, itemId: item.id }),
      children: [
        /* @__PURE__ */ jsx(ItemIcon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
        !isCollapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children: itemLabel })
      ]
    }
  );
}
function SectionWithPermission({
  section,
  pathname,
  isMobile,
  isCollapsed = false,
  onItemClick,
  t
}) {
  const permissionToCheck = section.requiresPermission || "teams.read";
  const hasPermission = usePermission(permissionToCheck);
  if (section.requiresPermission && !hasPermission) {
    return null;
  }
  const SectionIcon = Icons[section.icon] || Icons.Folder;
  const normalizeKey = (key) => key.startsWith("common.") ? key.slice(7) : key;
  const normalizedSectionKey = normalizeKey(section.labelKey);
  const sectionLabel = t(normalizedSectionKey) || labelMappings[section.labelKey] || section.id;
  return /* @__PURE__ */ jsxs("div", { className: "mb-4", "data-cy": sel("dashboard.navigation.section", { id: section.id }), children: [
    !isCollapsed && /* @__PURE__ */ jsxs(
      "div",
      {
        className: "px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2",
        "data-cy": sel("dashboard.navigation.sectionLabel", { id: section.id }),
        children: [
          /* @__PURE__ */ jsx(SectionIcon, { className: "h-3 w-3" }),
          /* @__PURE__ */ jsx("span", { children: sectionLabel })
        ]
      }
    ),
    isCollapsed && /* @__PURE__ */ jsx("div", { className: "my-2 mx-3 border-t border-border", "aria-hidden": "true" }),
    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx(
      NavItemWithPermission,
      {
        item,
        sectionId: section.id,
        pathname,
        isMobile,
        isCollapsed,
        onItemClick,
        normalizeKey,
        t
      },
      item.id
    )) })
  ] });
}
function DynamicNavigation({
  className,
  isMobile = false,
  isCollapsed = false,
  onItemClick,
  entities
}) {
  const pathname = usePathname();
  const t = useTranslations("navigation");
  const hasCustomSections = customSidebarSections.length > 0;
  const enabledEntities = useMemo(
    () => entities.filter((entity) => {
      var _a2, _b;
      return (entity == null ? void 0 : entity.enabled) && ((_b = (_a2 = entity == null ? void 0 : entity.ui) == null ? void 0 : _a2.dashboard) == null ? void 0 : _b.showInMenu);
    }),
    [entities]
  );
  const entityItems = useMemo(
    () => enabledEntities.map((entity) => {
      var _a2;
      const icon = Icons[entity.iconName] || Icons.Box;
      return {
        name: ((_a2 = entity.names) == null ? void 0 : _a2.plural) || entity.slug,
        href: `/dashboard/${entity.slug}`,
        icon
      };
    }),
    [enabledEntities]
  );
  const sortedSections = useMemo(
    () => [...customSidebarSections].sort((a, b) => a.order - b.order),
    []
  );
  if (hasCustomSections) {
    return /* @__PURE__ */ jsxs("nav", { className: cn("space-y-1", className), "data-cy": sel("dashboard.navigation.container"), children: [
      /* @__PURE__ */ jsxs(
        Link,
        {
          href: "/dashboard",
          onClick: onItemClick,
          className: cn(
            "flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors mb-4",
            isCollapsed ? "justify-center" : "gap-3",
            pathname === "/dashboard" ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
            isMobile && "w-full"
          ),
          "aria-current": pathname === "/dashboard" ? "page" : void 0,
          title: isCollapsed ? t("navigation.dashboard") : void 0,
          "data-cy": sel("dashboard.navigation.dashboardLink"),
          children: [
            /* @__PURE__ */ jsx(Home, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
            !isCollapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children: t("navigation.dashboard") })
          ]
        }
      ),
      sortedSections.map((section) => /* @__PURE__ */ jsx(
        SectionWithPermission,
        {
          section,
          pathname,
          isMobile,
          isCollapsed,
          onItemClick,
          t
        },
        section.id
      ))
    ] });
  }
  const navigationItems = [...coreItems, ...entityItems];
  return /* @__PURE__ */ jsx("nav", { className: cn("space-y-1", className), "data-cy": sel("dashboard.navigation.container"), children: navigationItems.map((item) => /* @__PURE__ */ jsx(
    NavigationLink,
    {
      item,
      pathname,
      t,
      isMobile,
      isCollapsed,
      onItemClick
    },
    item.name
  )) });
}
function NavigationLink({
  item,
  pathname,
  t,
  isMobile = false,
  isCollapsed = false,
  onItemClick
}) {
  const Icon = item.icon;
  const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
  const label = item.descriptionKey ? t(item.descriptionKey, { defaultValue: item.name }) : item.name;
  const cySlug = item.name.toLowerCase().replace(/\s+/g, "-");
  const dataCyId = cySlug === "dashboard" ? sel("dashboard.navigation.dashboardLink") : sel("dashboard.navigation.entityLink", { slug: cySlug });
  return /* @__PURE__ */ jsxs(
    Link,
    {
      href: item.href,
      onClick: onItemClick,
      className: cn(
        "flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors",
        isCollapsed ? "justify-center" : "gap-3",
        isActive ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
        isMobile && "w-full"
      ),
      "aria-current": isActive ? "page" : void 0,
      title: isCollapsed ? label : void 0,
      "data-cy": dataCyId,
      children: [
        /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
        !isCollapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
      ]
    }
  );
}
var DynamicNavigation_default = DynamicNavigation;
export {
  DynamicNavigation,
  DynamicNavigation_default as default
};
