import { useRouterContext } from './chunk-Q7DJKLEN.js';
import { UnstyledButton, Box, Group, ThemeIcon, Stack, Text } from '@mantine/core';
import { IconSearch, IconChartBar, IconTrendingUp } from '@tabler/icons-react';
import { jsx, jsxs } from 'react/jsx-runtime';

// src/components/layout/constants.ts
var sidebarWidth = 240;
var sidebarCollapsedWidth = 72;
var sidebarTransitionDuration = 200;
var sidebarHoverDelay = 100;
var topbarHeight = 54;
var sidebarBottomSectionHeight = 71;
var sidebarBottomSectionCollapsedHeight = 59;
var sidebarItemHeight = 42;
var sidebarItemPadding = 10;
var sidebarItemGap = 4;
var sidebarSectionPadding = "var(--mantine-spacing-sm)";
var sidebarSubLinkIndent = 44;
var sidebarIconSize = 24;
var sidebarIconStroke = 1.6;
var sidebarIconInnerSize = 20;
var sidebarToggleIconSize = 20;
var sidebarSubLinkPaddingY = 6;
var sidebarSubLinkPaddingX = 10;
var sidebarGroupChevronSize = 14;
var subshellNavItemIconSize = 14;
var activeColor = "var(--color-primary)";
var defaultColor = "var(--color-text-subtle)";
var hoverColor = "var(--color-text)";
var activeBg = `color-mix(in srgb, ${activeColor} 10%, transparent)`;
var SubshellNavItem = ({
  icon: Icon,
  label,
  isActive = false,
  onClick,
  description,
  badge,
  disabled = false,
  href
}) => {
  const handleAnchorClick = disabled ? void 0 : (event) => {
    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
      return;
    }
    event.preventDefault();
    onClick();
  };
  const sharedStyle = {
    width: "100%",
    padding: "var(--mantine-spacing-xs)",
    backgroundColor: isActive ? activeBg : "transparent",
    borderRadius: "var(--mantine-radius-default)",
    transition: `all var(--duration-fast) var(--easing)`,
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.5 : 1,
    color: "inherit",
    textDecoration: "none",
    display: "block"
  };
  const handleMouseEnter = (e) => {
    if (!isActive && !disabled) {
      e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
      const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
      textElements.forEach((el) => {
        el.style.color = hoverColor;
      });
    }
  };
  const handleMouseLeave = (e) => {
    if (!isActive && !disabled) {
      e.currentTarget.style.backgroundColor = "transparent";
      const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
      textElements.forEach((el) => {
        el.style.color = defaultColor;
      });
    }
  };
  const inner = /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
      /* @__PURE__ */ jsx(
        Icon,
        {
          size: subshellNavItemIconSize,
          style: {
            flexShrink: 0,
            opacity: isActive ? 1 : 0.6,
            color: isActive ? activeColor : defaultColor
          }
        }
      ),
      /* @__PURE__ */ jsx(
        Text,
        {
          size: "sm",
          fw: isActive ? 600 : 400,
          style: {
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
            flex: 1,
            fontFamily: "var(--elevasis-font-family-subtitle)",
            color: isActive ? activeColor : defaultColor,
            transition: `color var(--duration-fast) var(--easing)`
          },
          "data-text-element": true,
          children: label
        }
      ),
      badge && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: badge })
    ] }),
    description && /* @__PURE__ */ jsx(
      Text,
      {
        size: "xs",
        c: "dimmed",
        style: {
          paddingLeft: "22px",
          lineHeight: 1.2,
          color: isActive ? activeColor : defaultColor,
          opacity: isActive ? 0.8 : 0.6,
          transition: `all var(--duration-fast) var(--easing)`,
          display: "-webkit-box",
          WebkitLineClamp: 2,
          WebkitBoxOrient: "vertical",
          overflow: "hidden",
          textOverflow: "ellipsis"
        },
        "data-text-element": true,
        children: description
      }
    )
  ] });
  if (href) {
    return /* @__PURE__ */ jsx(
      UnstyledButton,
      {
        component: "a",
        href,
        onClick: handleAnchorClick,
        style: sharedStyle,
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        children: inner
      }
    );
  }
  return /* @__PURE__ */ jsx(
    UnstyledButton,
    {
      onClick: disabled ? void 0 : onClick,
      disabled,
      style: sharedStyle,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      children: inner
    }
  );
};
var SubshellSidebarSection = ({
  icon: Icon,
  label,
  rightSection,
  withTopBorder = false
}) => {
  return /* @__PURE__ */ jsx(
    Box,
    {
      p: "sm",
      style: {
        borderTop: withTopBorder ? "1px solid var(--color-border)" : void 0,
        borderBottom: "1px solid var(--color-border)"
      },
      children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
        /* @__PURE__ */ jsx(
          ThemeIcon,
          {
            variant: "light",
            size: sidebarIconSize,
            style: {
              backgroundColor: "var(--color-surface)",
              color: "var(--color-primary)",
              flexShrink: 0
            },
            children: /* @__PURE__ */ jsx(Icon, { size: sidebarIconInnerSize, stroke: sidebarIconStroke })
          }
        ),
        /* @__PURE__ */ jsx(
          Box,
          {
            c: "var(--color-text)",
            style: {
              fontFamily: "var(--elevasis-font-family-subtitle)",
              flex: 1,
              fontSize: "var(--mantine-font-size-md)",
              fontWeight: 500,
              lineHeight: 1.2
            },
            children: label
          }
        ),
        rightSection
      ] })
    }
  );
};
var SEOSidebarTop = () => {
  return /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconSearch, label: "SEO" });
};
var NAV_ITEMS = [
  { label: "SEO Pages", to: "/seo", icon: IconChartBar, exact: true },
  { label: "Metrics", to: "/seo/metrics", icon: IconTrendingUp, exact: false }
];
var SEOSidebarMiddle = () => {
  const { currentPath, navigate } = useRouterContext();
  return /* @__PURE__ */ jsx(Stack, { gap: "xs", p: "sm", style: { flex: 1, overflowY: "auto" }, children: NAV_ITEMS.map((item) => {
    const isActive = item.exact ? currentPath === item.to || currentPath === `${item.to}/` : currentPath.startsWith(item.to);
    return /* @__PURE__ */ jsx(
      SubshellNavItem,
      {
        icon: item.icon,
        label: item.label,
        isActive,
        href: item.to,
        onClick: () => navigate(item.to)
      },
      item.to
    );
  }) });
};
var SEOSidebar = () => {
  return /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
    /* @__PURE__ */ jsx(SEOSidebarTop, {}),
    /* @__PURE__ */ jsx(SEOSidebarMiddle, {})
  ] });
};

// src/features/seo/manifest.ts
var seoManifest = {
  key: "seo",
  systemId: "seo",
  sidebar: SEOSidebar
};

export { SEOSidebar, SEOSidebarMiddle, SEOSidebarTop, SubshellNavItem, SubshellSidebarSection, seoManifest, sidebarBottomSectionCollapsedHeight, sidebarBottomSectionHeight, sidebarCollapsedWidth, sidebarGroupChevronSize, sidebarHoverDelay, sidebarIconInnerSize, sidebarIconSize, sidebarIconStroke, sidebarItemGap, sidebarItemHeight, sidebarItemPadding, sidebarSectionPadding, sidebarSubLinkIndent, sidebarSubLinkPaddingX, sidebarSubLinkPaddingY, sidebarToggleIconSize, sidebarTransitionDuration, sidebarWidth, subshellNavItemIconSize, topbarHeight };
