"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { hasAllFeatures } from "@open-mercato/shared/security/features";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { IconButton } from "../../primitives/icon-button.js";
import { mergeMenuItems } from "../injection/mergeMenuItems.js";
import { useInjectedMenuItems } from "../injection/useInjectedMenuItems.js";
import { resolveInjectedIcon } from "../injection/resolveInjectedIcon.js";
const DefaultIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
  /* @__PURE__ */ jsx("path", { d: "M8 6h13M8 12h13M8 18h13" }),
  /* @__PURE__ */ jsx("path", { d: "M3 6h.01M3 12h.01M3 18h.01" })
] });
function SectionNav({
  title,
  titleKey,
  sections,
  activePath,
  userFeatures,
  collapsed,
  onToggleCollapse,
  menuSurfaceId
}) {
  const t = useT();
  const { items: injectedMenuItems } = useInjectedMenuItems(menuSurfaceId ?? "menu:sidebar:settings");
  const grantedFeatureList = React.useMemo(() => userFeatures ? Array.from(userFeatures) : [], [userFeatures]);
  const hasRequiredFeatures = (item) => {
    if (!item.requireFeatures || item.requireFeatures.length === 0) return true;
    if (!userFeatures) return true;
    return hasAllFeatures(grantedFeatureList, item.requireFeatures);
  };
  const resolvedTitle = titleKey ? t(titleKey, title) : title;
  const renderItem = (item) => {
    const isActive = activePath === item.href || activePath.startsWith(item.href + "/");
    const label = item.labelKey ? t(item.labelKey, item.label) : item.label;
    const base = collapsed ? "w-10 h-10 justify-center" : "w-full py-2 gap-2";
    const spacingStyle = !collapsed ? { paddingLeft: "12px", paddingRight: "12px" } : void 0;
    return /* @__PURE__ */ jsxs(
      Link,
      {
        href: item.href,
        className: `relative text-sm font-medium rounded-lg inline-flex items-center transition-colors ${base} ${isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted"}`,
        style: spacingStyle,
        title: collapsed ? label : void 0,
        children: [
          isActive && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `absolute ${collapsed ? "left-[-20px]" : "left-[-12px]"} top-2 w-1 h-5 rounded-r bg-foreground` }),
          /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: item.icon ?? DefaultIcon }),
          !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
        ]
      },
      item.id
    );
  };
  const renderSection = (section) => {
    const sectionInjected = injectedMenuItems.filter((item) => (item.groupId ?? section.id) === section.id);
    const mergedItems = mergeMenuItems(
      section.items.map((item) => ({ id: item.id, item })),
      sectionInjected
    ).flatMap((item) => {
      if (item.source === "built-in") {
        const original = section.items.find((entry) => entry.id === item.id);
        return original ? [original] : [];
      }
      if (!item.href) return [];
      return [{
        id: item.id,
        label: item.labelKey ? t(item.labelKey, item.label ?? item.id) : item.label ?? item.id,
        href: item.href,
        icon: resolveInjectedIcon(item.icon) ?? void 0
      }];
    });
    const visibleItems = mergedItems.filter(hasRequiredFeatures);
    if (visibleItems.length === 0) return null;
    const sortedItems = [...visibleItems].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
    const sectionLabel = section.labelKey ? t(section.labelKey, section.label) : section.label;
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
      !collapsed && /* @__PURE__ */ jsx("div", { className: "w-full px-1 py-1 text-xs font-medium uppercase tracking-wider text-muted-foreground/70", children: sectionLabel }),
      /* @__PURE__ */ jsx("div", { className: `flex flex-col ${collapsed ? "items-center" : ""} gap-1`, children: sortedItems.map(renderItem) })
    ] }, section.id);
  };
  const sortedSections = [...sections].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
  return /* @__PURE__ */ jsxs("nav", { className: `flex flex-col gap-3 ${collapsed ? "items-center" : ""}`, children: [
    /* @__PURE__ */ jsxs("div", { className: `flex items-center ${collapsed ? "justify-center" : "justify-between"} gap-2`, children: [
      !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: resolvedTitle }),
      /* @__PURE__ */ jsx(
        IconButton,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          onClick: onToggleCollapse,
          title: collapsed ? t("common.expand", "Expand") : t("common.collapse", "Collapse"),
          "aria-label": collapsed ? t("common.expand", "Expand") : t("common.collapse", "Collapse"),
          children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
        }
      )
    ] }),
    /* @__PURE__ */ jsx("div", { className: `flex flex-col gap-2 ${collapsed ? "items-center" : ""}`, children: sortedSections.map(renderSection) })
  ] });
}
export {
  SectionNav
};
//# sourceMappingURL=SectionNav.js.map
