import { jsxs as y, jsx as r, Fragment as V } from "react/jsx-runtime";
import i from "@mui/material/Box";
import F from "@mui/material/Tooltip";
import { useState as C, useMemo as G, useRef as N, useCallback as A, useEffect as D } from "react";
import m from "@mui/material/Typography";
import j from "@mui/material/InputBase";
import { LuSearch as $, LuChevronDown as z, LuChevronRight as E } from "react-icons/lu";
import B from "@mui/material/Collapse";
import _ from "@mui/material/Chip";
import K from "@mui/material/Checkbox";
function Z({ count: e }) {
  return e ? e === !0 ? /* @__PURE__ */ r(
    i,
    {
      sx: {
        position: "absolute",
        top: 6,
        right: 6,
        width: 8,
        height: 8,
        borderRadius: "50%",
        bgcolor: "var(--ov-accent-fg)",
        border: "2px solid var(--ov-bg-surface)"
      }
    }
  ) : /* @__PURE__ */ r(
    i,
    {
      sx: {
        position: "absolute",
        top: 4,
        right: 4,
        minWidth: 16,
        height: 16,
        borderRadius: 8,
        bgcolor: "var(--ov-accent-fg)",
        color: "#fff",
        fontSize: 10,
        fontWeight: 600,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        px: 0.5,
        border: "2px solid var(--ov-bg-surface)"
      },
      children: e > 99 ? "99+" : e
    }
  ) : null;
}
function H({
  item: e,
  active: o,
  onClick: a,
  position: n
}) {
  return /* @__PURE__ */ r(F, { title: e.label, placement: n === "left" ? "right" : "left", children: /* @__PURE__ */ y(
    i,
    {
      onClick: a,
      sx: {
        position: "relative",
        width: "100%",
        aspectRatio: "1",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        cursor: "pointer",
        color: o ? "var(--ov-fg-base)" : "var(--ov-fg-muted)",
        opacity: o ? 1 : 0.7,
        "&:hover": { opacity: 1, color: "var(--ov-fg-base)" },
        "&::before": o ? {
          content: '""',
          position: "absolute",
          [n === "left" ? "left" : "right"]: 0,
          top: "25%",
          height: "50%",
          width: 2,
          borderRadius: 1,
          bgcolor: "var(--ov-accent-fg)"
        } : {},
        transition: "color 100ms ease, opacity 100ms ease",
        fontSize: 22
      },
      children: [
        e.icon,
        /* @__PURE__ */ r(Z, { count: e.badge })
      ]
    }
  ) });
}
function q({
  items: e,
  activeId: o,
  onChange: a,
  position: n = "left",
  bottomItems: t,
  width: l = 48,
  sx: s
}) {
  return /* @__PURE__ */ y(
    i,
    {
      sx: {
        width: l,
        minWidth: l,
        height: "100%",
        bgcolor: "var(--ov-bg-surface)",
        borderRight: n === "left" ? "1px solid var(--ov-border-default)" : void 0,
        borderLeft: n === "right" ? "1px solid var(--ov-border-default)" : void 0,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        py: 0.5,
        ...typeof s == "object" && !Array.isArray(s) ? s : {}
      },
      children: [
        /* @__PURE__ */ r(i, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%", flex: 1 }, children: e.map((c) => /* @__PURE__ */ r(
          H,
          {
            item: c,
            active: o === c.id,
            onClick: () => a?.(c.id),
            position: n
          },
          c.id
        )) }),
        t && t.length > 0 && /* @__PURE__ */ r(i, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: t.map((c) => /* @__PURE__ */ r(
          H,
          {
            item: c,
            active: o === c.id,
            onClick: () => a?.(c.id),
            position: n
          },
          c.id
        )) })
      ]
    }
  );
}
q.displayName = "ActivityBar";
function J({
  title: e,
  icon: o,
  toolbar: a,
  children: n,
  searchable: t = !1,
  onSearch: l,
  badge: s,
  width: c = 260,
  sx: f
}) {
  const [d, p] = C(""), u = (h) => {
    p(h), l?.(h);
  };
  return /* @__PURE__ */ y(
    i,
    {
      sx: {
        width: c,
        minWidth: c,
        height: "100%",
        display: "flex",
        flexDirection: "column",
        bgcolor: "var(--ov-bg-surface)",
        borderRight: "1px solid var(--ov-border-default)",
        overflow: "hidden",
        ...typeof f == "object" && !Array.isArray(f) ? f : {}
      },
      children: [
        /* @__PURE__ */ y(
          i,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              gap: 0.75,
              px: 1.5,
              py: 1,
              minHeight: 36,
              borderBottom: "1px solid var(--ov-border-muted)"
            },
            children: [
              o && /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", color: "var(--ov-fg-muted)", fontSize: 14 }, children: o }),
              /* @__PURE__ */ r(
                m,
                {
                  variant: "subtitle2",
                  sx: {
                    flex: 1,
                    fontSize: 11,
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.05em",
                    color: "var(--ov-fg-muted)"
                  },
                  noWrap: !0,
                  children: e
                }
              ),
              s,
              a
            ]
          }
        ),
        t && /* @__PURE__ */ r(i, { sx: { px: 1, py: 0.75, borderBottom: "1px solid var(--ov-border-muted)" }, children: /* @__PURE__ */ y(
          i,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              gap: 0.5,
              px: 1,
              py: 0.25,
              borderRadius: 1,
              bgcolor: "var(--ov-bg-base)",
              border: "1px solid var(--ov-border-default)"
            },
            children: [
              /* @__PURE__ */ r($, { size: 13, color: "var(--ov-fg-faint)" }),
              /* @__PURE__ */ r(
                j,
                {
                  value: d,
                  onChange: (h) => u(h.target.value),
                  placeholder: "Search...",
                  sx: {
                    flex: 1,
                    fontSize: 12,
                    "& input": { padding: 0 },
                    "& input::placeholder": { color: "var(--ov-fg-faint)", opacity: 1 }
                  }
                }
              )
            ]
          }
        ) }),
        /* @__PURE__ */ r(i, { sx: { flex: 1, overflow: "auto", py: 0.5 }, children: n })
      ]
    }
  );
}
J.displayName = "SidebarPanel";
function Q({
  title: e,
  count: o,
  defaultExpanded: a = !0,
  children: n,
  actions: t,
  sx: l
}) {
  const [s, c] = C(a);
  return /* @__PURE__ */ y(i, { sx: l, children: [
    /* @__PURE__ */ y(
      i,
      {
        onClick: () => c(!s),
        sx: {
          display: "flex",
          alignItems: "center",
          gap: 0.25,
          px: 1,
          py: 0.5,
          cursor: "pointer",
          userSelect: "none",
          "&:hover": { bgcolor: "var(--ov-state-hover)" },
          "&:hover .sidebar-group-actions": { opacity: 1 }
        },
        children: [
          /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", flexShrink: 0, color: "var(--ov-fg-faint)" }, children: s ? /* @__PURE__ */ r(z, { size: 12 }) : /* @__PURE__ */ r(E, { size: 12 }) }),
          /* @__PURE__ */ r(
            m,
            {
              variant: "caption",
              sx: {
                flex: 1,
                fontSize: 11,
                fontWeight: 600,
                textTransform: "uppercase",
                letterSpacing: "0.06em",
                color: "var(--ov-fg-muted)",
                lineHeight: 1.4
              },
              noWrap: !0,
              children: e
            }
          ),
          o != null && /* @__PURE__ */ r(
            _,
            {
              label: o,
              size: "small",
              sx: {
                height: 16,
                fontSize: 10,
                fontWeight: 600,
                bgcolor: "var(--ov-state-hover)",
                color: "var(--ov-fg-muted)",
                "& .MuiChip-label": { px: 0.75 }
              }
            }
          ),
          t && /* @__PURE__ */ r(
            i,
            {
              className: "sidebar-group-actions",
              onClick: (f) => f.stopPropagation(),
              sx: {
                display: "flex",
                alignItems: "center",
                gap: 0.25,
                opacity: 0,
                transition: "opacity 100ms ease"
              },
              children: t
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ r(B, { in: s, unmountOnExit: !0, children: n })
  ] });
}
Q.displayName = "SidebarGroup";
function U({
  label: e,
  icon: o,
  badge: a,
  actions: n,
  depth: t = 0,
  selected: l = !1,
  expanded: s = !1,
  hasChildren: c = !1,
  onClick: f,
  onToggle: d,
  onContextMenu: p,
  sx: u
}) {
  return /* @__PURE__ */ y(
    i,
    {
      onClick: f,
      onContextMenu: p,
      sx: {
        display: "flex",
        alignItems: "center",
        gap: 0.5,
        py: 0.25,
        pr: 1,
        pl: t * 1.5 + 1,
        cursor: "pointer",
        minHeight: 24,
        borderRadius: "4px",
        mx: 0.5,
        bgcolor: l ? "var(--ov-accent-subtle)" : "transparent",
        color: l ? "var(--ov-accent-fg)" : "var(--ov-fg-default)",
        "&:hover": {
          bgcolor: l ? "var(--ov-accent-subtle)" : "var(--ov-state-hover)"
        },
        "&:hover .tree-item-actions": { opacity: 1 },
        ...typeof u == "object" && !Array.isArray(u) ? u : {}
      },
      children: [
        c ? /* @__PURE__ */ r(
          i,
          {
            onClick: (h) => {
              h.stopPropagation(), d?.();
            },
            sx: {
              display: "flex",
              alignItems: "center",
              flexShrink: 0,
              color: "var(--ov-fg-faint)",
              "&:hover": { color: "var(--ov-fg-default)" }
            },
            children: s ? /* @__PURE__ */ r(z, { size: 14 }) : /* @__PURE__ */ r(E, { size: 14 })
          }
        ) : /* @__PURE__ */ r(i, { sx: { width: 14, flexShrink: 0 } }),
        o && /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", flexShrink: 0, fontSize: 14 }, children: o }),
        /* @__PURE__ */ r(
          m,
          {
            variant: "body2",
            sx: {
              flex: 1,
              fontSize: 12,
              color: "inherit",
              lineHeight: 1.4
            },
            noWrap: !0,
            children: e
          }
        ),
        a,
        n && /* @__PURE__ */ r(
          i,
          {
            className: "tree-item-actions",
            onClick: (h) => h.stopPropagation(),
            sx: {
              display: "flex",
              alignItems: "center",
              gap: 0.25,
              opacity: 0,
              transition: "opacity 100ms ease"
            },
            children: n
          }
        )
      ]
    }
  );
}
U.displayName = "SidebarTreeItem";
const X = {
  xs: "11px",
  sm: "12px",
  md: "12px",
  lg: "13px",
  xl: "14px"
}, Y = {
  xs: 22,
  sm: 24,
  md: 26,
  lg: 30,
  xl: 34
};
function w({
  item: e,
  size: o,
  editable: a,
  onEdit: n,
  striped: t
}) {
  const [l, s] = C(!1), [c, f] = C(""), d = X[o], p = Y[o], u = a || e.editable, h = () => {
    if (!u) return;
    const b = typeof e.value == "string" ? e.value : String(e.value ?? "");
    f(b), s(!0);
  }, I = () => {
    s(!1), n?.(e.key, c);
  }, W = () => l ? /* @__PURE__ */ r(
    j,
    {
      value: c,
      onChange: (b) => f(b.target.value),
      onBlur: I,
      onKeyDown: (b) => {
        b.key === "Enter" && I(), b.key === "Escape" && s(!1);
      },
      autoFocus: !0,
      sx: { fontSize: d, flex: 1, "& input": { py: 0, px: 0.5 } }
    }
  ) : e.type === "boolean" ? /* @__PURE__ */ r(
    K,
    {
      checked: e.value === !0 || e.value === "true",
      size: "small",
      disabled: !u,
      sx: { p: 0 }
    }
  ) : e.type === "color" && typeof e.value == "string" ? /* @__PURE__ */ y(i, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
    /* @__PURE__ */ r(
      i,
      {
        sx: {
          width: 12,
          height: 12,
          borderRadius: 0.5,
          bgcolor: e.value,
          border: "1px solid var(--ov-border-default)",
          flexShrink: 0
        }
      }
    ),
    /* @__PURE__ */ r(m, { variant: "body2", sx: { fontSize: d, color: "inherit", fontFamily: "var(--ov-font-mono)" }, noWrap: !0, children: e.value })
  ] }) : e.type === "code" ? /* @__PURE__ */ r(m, { variant: "body2", sx: { fontSize: d, color: "inherit", fontFamily: "var(--ov-font-mono)" }, noWrap: !0, children: e.value }) : e.type === "link" ? /* @__PURE__ */ r(
    m,
    {
      variant: "body2",
      sx: { fontSize: d, color: "var(--ov-accent-fg)", cursor: "pointer", "&:hover": { textDecoration: "underline" } },
      noWrap: !0,
      children: e.value
    }
  ) : /* @__PURE__ */ r(m, { variant: "body2", sx: { fontSize: d, color: "inherit" }, noWrap: !0, children: e.value });
  return /* @__PURE__ */ y(
    i,
    {
      onDoubleClick: h,
      sx: {
        display: "flex",
        alignItems: "center",
        minHeight: p,
        px: 1,
        gap: 1,
        bgcolor: t ? "var(--ov-state-hover)" : "transparent",
        "&:hover": { bgcolor: "var(--ov-state-hover)" }
      },
      children: [
        /* @__PURE__ */ r(
          m,
          {
            variant: "body2",
            sx: {
              width: "40%",
              minWidth: "40%",
              fontSize: d,
              color: "var(--ov-fg-muted)",
              fontWeight: 500
            },
            noWrap: !0,
            children: e.label
          }
        ),
        /* @__PURE__ */ r(i, { sx: { flex: 1, display: "flex", alignItems: "center", overflow: "hidden", color: "var(--ov-fg-default)" }, children: W() })
      ]
    }
  );
}
function ee({
  items: e,
  columns: o = 1,
  size: a = "md",
  editable: n = !1,
  onEdit: t,
  sx: l
}) {
  if (o === 2) {
    const s = Math.ceil(e.length / 2), c = e.slice(0, s), f = e.slice(s);
    return /* @__PURE__ */ y(i, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, ...typeof l == "object" && !Array.isArray(l) ? l : {} }, children: [
      /* @__PURE__ */ r(i, { children: c.map((d, p) => /* @__PURE__ */ r(w, { item: d, size: a, editable: n, onEdit: t, striped: p % 2 === 1 }, d.key)) }),
      /* @__PURE__ */ r(i, { children: f.map((d, p) => /* @__PURE__ */ r(w, { item: d, size: a, editable: n, onEdit: t, striped: p % 2 === 1 }, d.key)) })
    ] });
  }
  return /* @__PURE__ */ r(i, { sx: l, children: e.map((s, c) => /* @__PURE__ */ r(w, { item: s, size: a, editable: n, onEdit: t, striped: c % 2 === 1 }, s.key)) });
}
ee.displayName = "PropertyGrid";
const re = {
  xs: 11,
  sm: 12,
  md: 13,
  lg: 14,
  xl: 15
}, M = 12, T = 14, te = 10;
function oe(e) {
  const o = {};
  function a(n) {
    for (const t of n)
      t.children && t.children.length > 0 && (o[t.id] = !0), t.children && a(t.children);
  }
  for (const n of e) a(n.items);
  return o;
}
function ne(e) {
  const o = {};
  function a(n) {
    for (const t of n)
      t.defaultExpanded && (o[t.id] = !0), t.children && a(t.children);
  }
  for (const n of e) a(n.items);
  return o;
}
function ie(e, o) {
  const a = [];
  function n(t) {
    for (const l of t) {
      if (l.id === o) return !0;
      if (l.children && l.children.length > 0) {
        if (a.push(l.id), n(l.children)) return !0;
        a.pop();
      }
    }
    return !1;
  }
  for (const t of e) {
    if (n(t.items)) return [...a];
    a.length = 0;
  }
  return [];
}
function P({
  item: e,
  depth: o,
  selected: a,
  onSelect: n,
  fontSize: t,
  expandedState: l,
  onToggleExpanded: s,
  animate: c
}) {
  const f = l[e.id] ?? !1, d = a === e.id, p = e.children && e.children.length > 0, u = p && e.children && /* @__PURE__ */ r(V, { children: e.children.map((h) => /* @__PURE__ */ r(
    P,
    {
      item: h,
      depth: o + 1,
      selected: a,
      onSelect: n,
      fontSize: t,
      expandedState: l,
      onToggleExpanded: s,
      animate: c
    },
    h.id
  )) });
  return /* @__PURE__ */ y(i, { children: [
    /* @__PURE__ */ y(
      i,
      {
        onClick: () => {
          e.disabled || (p ? s(e.id) : n?.(e.id));
        },
        sx: {
          display: "flex",
          alignItems: "center",
          gap: "4px",
          pl: `${o * te + 4}px`,
          pr: "6px",
          py: "3px",
          cursor: e.disabled ? "default" : "pointer",
          opacity: e.disabled ? 0.5 : 1,
          borderRadius: "4px",
          mx: "4px",
          my: "1px",
          bgcolor: d ? "var(--ov-accent-subtle)" : "transparent",
          color: d ? "var(--ov-accent-fg)" : "var(--ov-fg-default)",
          fontWeight: d ? 600 : p ? 500 : 400,
          "&:hover": {
            bgcolor: d ? "var(--ov-accent-subtle)" : "var(--ov-state-hover)"
          }
        },
        children: [
          /* @__PURE__ */ r(
            i,
            {
              sx: {
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: T,
                minWidth: T,
                flexShrink: 0,
                color: "var(--ov-fg-faint)"
              },
              children: p && (f ? /* @__PURE__ */ r(z, { size: M }) : /* @__PURE__ */ r(E, { size: M }))
            }
          ),
          e.icon && /* @__PURE__ */ r(i, { sx: { display: "flex", alignItems: "center", flexShrink: 0, fontSize: t + 2 }, children: e.icon }),
          /* @__PURE__ */ r(
            m,
            {
              variant: "body2",
              sx: { flex: 1, fontSize: t, color: "inherit", fontWeight: "inherit" },
              noWrap: !0,
              children: e.label
            }
          ),
          e.badge
        ]
      }
    ),
    p && (c ? /* @__PURE__ */ r(B, { in: f, unmountOnExit: !0, children: u }) : f ? u : null)
  ] });
}
const ae = {
  overflow: "auto",
  maxHeight: "100%",
  flex: 1,
  minHeight: 0,
  scrollbarWidth: "none",
  "&::-webkit-scrollbar": { display: "none" }
};
function le({
  sections: e,
  selected: o,
  onSelect: a,
  size: n = "md",
  scrollable: t,
  defaultExpanded: l = !1,
  animate: s = !0,
  initialExpandedState: c,
  onExpandedChange: f,
  sx: d
}) {
  const p = re[n], u = G(
    () => l ? oe(e) : ne(e),
    [e, l]
  ), [h, I] = C(() => ({
    ...u,
    ...c ?? {}
  })), W = N(f);
  W.current = f;
  const b = A((g) => {
    I((v) => {
      const x = g(v);
      return x !== v && W.current?.(x), x;
    });
  }, []), R = N(e);
  D(() => {
    R.current !== e && (R.current = e, b((g) => {
      const v = u, x = { ...g };
      let k = !1;
      for (const S of Object.keys(v))
        S in x || (x[S] = v[S], k = !0);
      return k ? x : g;
    }));
  }, [e, u, b]), D(() => {
    if (!o) return;
    const g = ie(e, o);
    g.length > 0 && b((v) => {
      const x = { ...v };
      let k = !1;
      for (const S of g)
        x[S] || (x[S] = !0, k = !0);
      return k ? x : v;
    });
  }, [o, e, b]);
  const O = A((g) => {
    b((v) => ({ ...v, [g]: !v[g] }));
  }, [b]), L = t ? { ...ae, ...d } : d;
  return /* @__PURE__ */ r(i, { sx: L, children: e.map((g, v) => /* @__PURE__ */ y(i, { sx: { mb: 0.5, mt: v === 0 ? 0 : 0.25 }, children: [
    g.title && /* @__PURE__ */ r(
      m,
      {
        variant: "overline",
        sx: {
          display: "block",
          px: "12px",
          py: "4px",
          fontSize: 10,
          fontWeight: 600,
          letterSpacing: "0.08em",
          color: "var(--ov-fg-faint)",
          textTransform: "uppercase"
        },
        children: g.title
      }
    ),
    g.items.map((x) => /* @__PURE__ */ r(
      P,
      {
        item: x,
        depth: 0,
        selected: o,
        onSelect: a,
        fontSize: p,
        expandedState: h,
        onToggleExpanded: O,
        animate: s
      },
      x.id
    ))
  ] }, g.title || `section-${v}`)) });
}
le.displayName = "NavMenu";
export {
  q as ActivityBar,
  le as NavMenu,
  ee as PropertyGrid,
  Q as SidebarGroup,
  J as SidebarPanel,
  U as SidebarTreeItem
};
