import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState, useEffect, useCallback } from "react";
import { useLocation, useNavigate } from "react-router";
import { S as StChevronLeft } from "../../StChevronLeft-D60BtMQy.js";
import { S as StChevronRight } from "../../StChevronRight-BuahImu8.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
import { NavLink } from "../link/link.js";
import { Popover, PopoverTrigger, PopoverContent } from "../popover/popover.js";
import { Avatar, AvatarFallback } from "../avatar/avatar.js";
import { Tooltip, TooltipTrigger, TooltipContent } from "../tooltip/tooltip.js";
const StUser = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsxs("svg", { id: "icon_StUser", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: [
  /* @__PURE__ */ jsx("circle", { cx: 12, cy: 6, r: 3, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke" }),
  /* @__PURE__ */ jsx("path", { d: "M20 21V19C20 15.134 16.866 12 13 12H11C7.13401 12 4 15.134 4 19V21", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinejoin: "round" })
] });
StUser.displayName = "StUser";
const StSettings = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsxs("svg", { id: "icon_StSettings", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: [
  /* @__PURE__ */ jsx("path", { d: "M14.1802 3.80099C14.0779 2.77859 13.2176 2 12.1901 2H11.81C10.7825 2 9.9222 2.77859 9.81996 3.80099L9.78619 4.13861C9.70915 4.90906 9.16461 5.55126 8.49472 5.93956C7.8246 6.32799 7.00615 6.47125 6.30016 6.15264L5.98958 6.01247C5.05303 5.58982 3.94859 5.94559 3.43484 6.83543L3.24481 7.16457C2.73106 8.05441 2.97517 9.18877 3.80948 9.78852L4.0869 9.98794C4.71492 10.4394 5.00145 11.2136 5.00006 11.9871C5.00005 11.9914 5.00004 11.9957 5.00004 12C5.00004 12.0043 5.00005 12.0086 5.00006 12.0129C5.00145 12.7864 4.71492 13.5606 4.0869 14.0121L3.80948 14.2115C2.97517 14.8112 2.73106 15.9456 3.24481 16.8354L3.43484 17.1646C3.94859 18.0544 5.05303 18.4102 5.98958 17.9875L6.30016 17.8474C7.00615 17.5288 7.8246 17.672 8.49472 18.0604C9.16461 18.4487 9.70915 19.0909 9.78619 19.8614L9.81996 20.199C9.9222 21.2214 10.7825 22 11.81 22H12.1901C13.2176 22 14.0779 21.2214 14.1802 20.199L14.2139 19.8614C14.291 19.0909 14.8355 18.4487 15.5054 18.0604C16.1755 17.672 16.994 17.5287 17.7 17.8473L18.0106 17.9875C18.9471 18.4102 20.0516 18.0544 20.5653 17.1646L20.7553 16.8354C21.2691 15.9456 21.025 14.8112 20.1907 14.2115L19.9132 14.012C19.2852 13.5606 18.9986 12.7863 19 12.0129C19 12.0086 19 12.0043 19 12C19 11.9957 19 11.9914 19 11.9871C18.9986 11.2137 19.2852 10.4394 19.9132 9.988L20.1907 9.78852C21.025 9.18877 21.2691 8.05441 20.7553 7.16457L20.5653 6.83543C20.0516 5.94559 18.9471 5.58982 18.0106 6.01248L17.7 6.15266C16.994 6.47127 16.1755 6.328 15.5054 5.93957C14.8355 5.55127 14.291 4.90908 14.2139 4.13863L14.1802 3.80099Z", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinejoin: "round" }),
  /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 3, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke" })
] });
StSettings.displayName = "StSettings";
const StArrowLeft = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsx("svg", { id: "icon_StArrowLeft", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: /* @__PURE__ */ jsx("path", { d: "M10 5L3 12M3 12L10 19M3 12L20 12", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinejoin: "round" }) });
StArrowLeft.displayName = "StArrowLeft";
const ProfileMenu = () => /* @__PURE__ */ jsxs(Fragment, { children: [
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-2.5 py-2", children: [
    /* @__PURE__ */ jsx(Avatar, { className: "size-9", children: /* @__PURE__ */ jsx(AvatarFallback, { color: "accent", children: "JD" }) }),
    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
        /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-primary truncate", children: "John Doe" }),
        /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 text-xs font-medium bg-muted text-secondary rounded-md", children: "Admin" })
      ] }),
      /* @__PURE__ */ jsx("p", { className: "text-xs text-secondary truncate", children: "john@glideandvibe.com" })
    ] })
  ] }),
  /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
    /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => {
        },
        className: "flex gap-2.5 items-center px-2.5 py-1.5 w-full text-base text-left transition-colors rounded-lg text-primary hover:bg-muted cursor-pointer",
        children: [
          /* @__PURE__ */ jsx(StUser, { className: "w-4 h-4 text-secondary flex-shrink-0" }),
          /* @__PURE__ */ jsx("span", { children: "My Profile" })
        ]
      }
    ),
    /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => {
        },
        className: "flex gap-2.5 items-center px-2.5 py-1.5 w-full text-base text-left transition-colors rounded-lg text-primary hover:bg-muted cursor-pointer",
        children: [
          /* @__PURE__ */ jsx(StSettings, { className: "w-4 h-4 text-secondary flex-shrink-0" }),
          /* @__PURE__ */ jsx("span", { children: "Settings" })
        ]
      }
    ),
    /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => {
        },
        className: "flex gap-2.5 items-center px-2.5 py-1.5 w-full text-base text-left transition-colors rounded-lg text-primary hover:bg-muted cursor-pointer",
        children: [
          /* @__PURE__ */ jsx(
            "svg",
            {
              className: "w-4 h-4 text-secondary flex-shrink-0",
              fill: "none",
              stroke: "currentColor",
              viewBox: "0 0 24 24",
              children: /* @__PURE__ */ jsx(
                "path",
                {
                  strokeLinecap: "round",
                  strokeLinejoin: "round",
                  strokeWidth: 2,
                  d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                }
              )
            }
          ),
          /* @__PURE__ */ jsx("span", { children: "About" })
        ]
      }
    ),
    /* @__PURE__ */ jsx("div", { className: "h-px my-1 bg-border" }),
    /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => {
        },
        className: "flex gap-2.5 items-center px-2.5 py-1.5 w-full text-base text-left transition-colors rounded-lg text-primary hover:bg-muted cursor-pointer",
        children: [
          /* @__PURE__ */ jsx(
            "svg",
            {
              className: "w-4 h-4 text-secondary flex-shrink-0",
              fill: "none",
              stroke: "currentColor",
              viewBox: "0 0 24 24",
              children: /* @__PURE__ */ jsx(
                "path",
                {
                  strokeLinecap: "round",
                  strokeLinejoin: "round",
                  strokeWidth: 2,
                  d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                }
              )
            }
          ),
          /* @__PURE__ */ jsx("span", { children: "Log out" })
        ]
      }
    )
  ] })
] });
const Nav = ({
  title,
  items,
  logo,
  className,
  variant = "sidebar",
  collapsed: collapsedProp = false,
  onProfileClick,
  onItemClick,
  onToggleCollapse
}) => {
  const location = useLocation();
  const navigate = useNavigate();
  const [internalCollapsed, setInternalCollapsed] = useState(collapsedProp);
  const isControlled = onToggleCollapse !== void 0;
  useEffect(() => {
    if (!isControlled) {
      setInternalCollapsed(collapsedProp);
    }
  }, [collapsedProp, isControlled]);
  const collapsed = isControlled ? collapsedProp : internalCollapsed;
  const handleToggleCollapse = useCallback(() => {
    if (onToggleCollapse) {
      onToggleCollapse();
    } else {
      setInternalCollapsed((prev) => !prev);
    }
  }, [onToggleCollapse]);
  useEffect(() => {
    if (variant !== "sidebar") return;
    const handleKeyDown = (event) => {
      if ((event.ctrlKey || event.metaKey) && event.key === "\\") {
        event.preventDefault();
        handleToggleCollapse();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [variant, handleToggleCollapse]);
  const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
  const shortcutKey = isMac ? "⌘" : "Ctrl";
  if (variant === "sidebar") {
    return /* @__PURE__ */ jsx(
      "nav",
      {
        className: cn(
          "main-nav",
          // Prevent transitions
          "group",
          // Add group for hover detection
          // Sidebar positioning and sizing - relative instead of fixed
          "relative h-screen flex-shrink-0",
          // Width handling
          collapsed ? "w-16" : "w-64",
          // Visual styling
          "bg-muted/50 border-r border-border",
          // Mobile responsiveness - hide on mobile, show on large screens
          "hidden lg:block",
          "transition-all duration-200 ease-in-out",
          className
        ),
        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
          /* @__PURE__ */ jsxs("div", { "data-sidebar-header": true, className: "p-4 relative", children: [
            /* @__PURE__ */ jsxs(
              NavLink,
              {
                href: "/",
                className: "flex items-center justify-start gap-3 text-lg font-semibold text-primary",
                children: [
                  logo,
                  /* @__PURE__ */ jsx(
                    "span",
                    {
                      className: cn(
                        "overflow-hidden transition-all duration-200 leading-tight max-h-8 line-clamp-2",
                        collapsed ? "w-0 opacity-0" : "w-auto opacity-100 delay-75"
                      ),
                      children: title
                    }
                  )
                ]
              }
            ),
            /* @__PURE__ */ jsxs(Tooltip, { children: [
              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                "button",
                {
                  onClick: handleToggleCollapse,
                  className: "absolute -right-2.5 top-1/2 -translate-y-1/2 z-10 px-0.5 py-1 bg-background border border-border rounded-md hover:bg-muted transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer",
                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
                  children: collapsed ? /* @__PURE__ */ jsx(StChevronRight, { className: "w-3.5 h-3.5 text-secondary" }) : /* @__PURE__ */ jsx(StChevronLeft, { className: "w-3.5 h-3.5 text-secondary" })
                }
              ) }),
              /* @__PURE__ */ jsxs(TooltipContent, { side: "right", children: [
                collapsed ? "Expand" : "Collapse",
                " ",
                shortcutKey,
                " \\"
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-2", children: /* @__PURE__ */ jsx("div", { "data-nav-items": true, className: "flex flex-col gap-1 px-3", children: items.map((item, i) => /* @__PURE__ */ jsx(
            NavLink,
            {
              href: item.href,
              onClick: () => onItemClick?.(item),
              className: ({ isActive }) => cn(
                // Base styles - matching topbar nav
                "flex items-center justify-start gap-3 py-1.5 font-medium rounded-lg transition-all duration-200",
                collapsed ? "px-2" : "px-3",
                // Active state
                isActive && "bg-muted text-primary",
                // Inactive state
                !isActive && "text-secondary hover:bg-muted/50 hover:text-primary"
              ),
              children: ({ isActive }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                item.icon && /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: cn(
                      "flex-shrink-0 w-5 h-5",
                      isActive ? "text-primary" : "text-secondary"
                    ),
                    children: item.icon
                  }
                ),
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    "data-nav-label": true,
                    className: cn(
                      "overflow-hidden transition-all duration-200 whitespace-nowrap",
                      collapsed ? "w-0 opacity-0" : "w-auto opacity-100 delay-75"
                    ),
                    children: item.label
                  }
                )
              ] })
            },
            item.href ?? i
          )) }) }),
          /* @__PURE__ */ jsx("div", { className: "mt-auto p-4", children: /* @__PURE__ */ jsx("div", { "data-profile-section": true, children: /* @__PURE__ */ jsxs(Popover, { children: [
            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
              "button",
              {
                onClick: onProfileClick,
                className: cn(
                  "flex items-center gap-3 w-full p-2 rounded-lg transition-all duration-200",
                  collapsed ? "justify-center" : "justify-start",
                  !collapsed && "hover:bg-muted"
                ),
                children: [
                  /* @__PURE__ */ jsx(Avatar, { className: "size-8", children: /* @__PURE__ */ jsx(AvatarFallback, { color: "accent", children: "JD" }) }),
                  /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: cn(
                        "flex-1 text-left overflow-hidden transition-all duration-200",
                        collapsed ? "w-0 opacity-0" : "w-auto opacity-100 delay-75"
                      ),
                      children: /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-primary whitespace-nowrap", children: "John Doe" })
                    }
                  )
                ]
              }
            ) }),
            /* @__PURE__ */ jsx(
              PopoverContent,
              {
                side: "top",
                align: "start",
                className: "w-64 p-1.5 rounded-xl mb-2",
                children: /* @__PURE__ */ jsx(ProfileMenu, {})
              }
            )
          ] }) }) })
        ] })
      }
    );
  }
  const pathSegments = location.pathname.split("/").filter(Boolean);
  const showBackButton = pathSegments.length >= 2;
  const handleBackClick = () => {
    document.documentElement.classList.remove("push", "pop");
    document.documentElement.classList.add("pop");
    navigate(-1);
  };
  return /* @__PURE__ */ jsx(
    "nav",
    {
      className: cn(
        "main-nav",
        // Prevent transitions
        // Visible on all screen sizes, sticky positioning
        "sticky top-0 z-50",
        // Visual styling - border only on desktop
        "text-base md:border-b backdrop-blur bg-navigation border-border supports-[backdrop-filter]:bg-navigation/90",
        className
      ),
      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto_1fr] items-center mx-auto max-w-7xl min-h-[4rem] px-4 md:px-6", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
          showBackButton ? /* @__PURE__ */ jsx(
            "button",
            {
              onClick: handleBackClick,
              className: "p-2 -ml-2 md:hidden hover:bg-muted rounded-lg transition-colors",
              "aria-label": "Go back",
              children: /* @__PURE__ */ jsx(
                StArrowLeft,
                {
                  className: "h-5 w-5 text-secondary",
                  "aria-hidden": "true"
                }
              )
            }
          ) : /* @__PURE__ */ jsx("button", { "aria-label": "menu", className: "p-2 -ml-2 md:hidden", children: /* @__PURE__ */ jsx(
            "svg",
            {
              className: "w-5 h-5 text-secondary hover:text-primary transition-colors",
              fill: "none",
              stroke: "currentColor",
              viewBox: "0 0 24 24",
              children: /* @__PURE__ */ jsx(
                "path",
                {
                  strokeLinecap: "round",
                  strokeLinejoin: "round",
                  strokeWidth: 2,
                  d: "M4 6h16M4 12h16M4 18h16"
                }
              )
            }
          ) }),
          /* @__PURE__ */ jsxs(
            NavLink,
            {
              href: "/",
              className: "hidden md:flex items-center gap-2 text-lg font-semibold text-primary hover:text-secondary",
              children: [
                logo,
                /* @__PURE__ */ jsx("span", { children: title })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: "hidden gap-2 items-center md:flex", children: items.map((item, i) => /* @__PURE__ */ jsx(
          NavLink,
          {
            href: item.href,
            onClick: () => onItemClick?.(item),
            className: ({ isActive }) => cn(
              // Base styles
              "px-3 py-1.5 font-medium rounded-lg transition-colors",
              // Active state
              isActive && "bg-muted text-primary",
              // Inactive state
              !isActive && "text-secondary hover:bg-muted/50 hover:text-primary"
            ),
            children: item.label
          },
          item.href ?? i
        )) }),
        /* @__PURE__ */ jsx("div", { className: "hidden md:flex justify-end", children: /* @__PURE__ */ jsxs(Popover, { children: [
          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
            "button",
            {
              onClick: onProfileClick,
              className: "relative group cursor-pointer",
              children: /* @__PURE__ */ jsx(Avatar, { className: "size-8 transition-all group-hover:ring-2 group-hover:ring-accent/20 group-hover:ring-offset-2 group-hover:ring-offset-background", children: /* @__PURE__ */ jsx(AvatarFallback, { color: "accent", children: "JD" }) })
            }
          ) }),
          /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-64 p-1.5 rounded-xl", children: /* @__PURE__ */ jsx(ProfileMenu, {}) })
        ] }) })
      ] })
    }
  );
};
export {
  Nav
};
