import { useState as S, useRef as N, useCallback as b, useEffect as W } from "react";
import { jsxs as g, jsx as n } from "react/jsx-runtime";
import d from "@mui/material/Box";
import E from "@mui/material/Typography";
import A from "@mui/material/IconButton";
import H from "@mui/material/Collapse";
import { LuChevronRight as M, LuChevronDown as T, LuX as j } from "react-icons/lu";
import B from "@mui/material/Stack";
import R from "@mui/material/Divider";
function X(e, o) {
  try {
    const r = localStorage.getItem(e);
    return r ? Number(r) : o;
  } catch {
    return o;
  }
}
function w(e, o) {
  try {
    localStorage.setItem(e, String(o));
  } catch {
  }
}
function J({
  direction: e,
  defaultSize: o,
  minSize: r = 0,
  maxSize: i = 1 / 0,
  onResize: s,
  storageKey: t
}) {
  const [l, u] = S(
    () => t ? X(t, o) : o
  ), [p, c] = S(!1), a = N({ pos: 0, size: 0 }), f = b(
    (h) => Math.max(r, Math.min(i, h)),
    [r, i]
  ), v = b(
    (h) => {
      h.preventDefault();
      const m = e === "horizontal" ? h.clientX : h.clientY;
      a.current = { pos: m, size: l }, c(!0);
    },
    [e, l]
  );
  W(() => {
    if (!p) return;
    const h = (y) => {
      const L = (e === "horizontal" ? y.clientX : y.clientY) - a.current.pos, k = f(a.current.size + L);
      u(k), s?.(k);
    }, m = () => {
      c(!1), t && w(t, l);
    };
    return document.addEventListener("mousemove", h), document.addEventListener("mouseup", m), () => {
      document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", m);
    };
  }, [p, e, f, s, t, l]);
  const D = b(() => {
    const m = f(l === r ? o : r);
    u(m), s?.(m), t && w(t, m);
  }, [l, r, o, f, s, t]), z = b(() => {
    u(o), s?.(o), t && w(t, o);
  }, [o, s, t]);
  return {
    size: l,
    isDragging: p,
    handleProps: {
      onMouseDown: v,
      onDoubleClick: D
    },
    reset: z
  };
}
function I({
  direction: e = "horizontal",
  defaultSize: o = 300,
  minSize: r = 100,
  maxSize: i,
  onResize: s,
  children: t,
  handleSize: l = 4,
  id: u,
  sx: p
}) {
  const { size: c, isDragging: a, handleProps: f } = J({
    direction: e,
    defaultSize: o,
    minSize: r,
    maxSize: i,
    onResize: s,
    storageKey: u ? `ov-split-${u}` : void 0
  }), v = e === "horizontal";
  return /* @__PURE__ */ g(
    d,
    {
      sx: {
        display: "flex",
        flexDirection: v ? "row" : "column",
        height: "100%",
        width: "100%",
        overflow: "hidden",
        userSelect: a ? "none" : void 0,
        ...p
      },
      children: [
        /* @__PURE__ */ n(
          d,
          {
            sx: {
              [v ? "width" : "height"]: c,
              flexShrink: 0,
              overflow: "auto"
            },
            children: t[0]
          }
        ),
        /* @__PURE__ */ n(
          d,
          {
            ...f,
            sx: {
              [v ? "width" : "height"]: l,
              flexShrink: 0,
              cursor: v ? "col-resize" : "row-resize",
              bgcolor: a ? "var(--ov-accent)" : "transparent",
              transition: a ? "none" : "background-color 0.15s",
              "&:hover": {
                bgcolor: "var(--ov-border-default)"
              }
            }
          }
        ),
        /* @__PURE__ */ n(d, { sx: { flex: 1, overflow: "auto", minWidth: 0, minHeight: 0 }, children: t[1] })
      ]
    }
  );
}
I.displayName = "ResizableSplitPane";
function P({
  header: e,
  sidebar: o,
  footer: r,
  children: i,
  sidebarWidth: s = 240,
  sidebarCollapsed: t = !1,
  headerHeight: l = 48,
  footerHeight: u = 32,
  sx: p
}) {
  const c = t ? 0 : s, a = e ? l : 0, f = r ? u : 0;
  return /* @__PURE__ */ g(
    d,
    {
      sx: {
        display: "grid",
        gridTemplateAreas: `
          "header header"
          "sidebar main"
          "footer footer"
        `,
        gridTemplateColumns: o ? `${typeof c == "number" ? `${c}px` : c} 1fr` : "1fr",
        gridTemplateRows: `${typeof a == "number" ? `${a}px` : a} 1fr ${typeof f == "number" ? `${f}px` : f}`,
        height: "100vh",
        width: "100vw",
        overflow: "hidden",
        "--ov-shell-sidebar-width": typeof c == "number" ? `${c}px` : c,
        "--ov-shell-header-height": typeof a == "number" ? `${a}px` : a,
        "--ov-shell-footer-height": typeof f == "number" ? `${f}px` : f,
        ...p
      },
      children: [
        e && /* @__PURE__ */ n(d, { sx: { gridArea: "header", overflow: "hidden" }, children: e }),
        o && /* @__PURE__ */ n(
          d,
          {
            sx: {
              gridArea: "sidebar",
              overflow: "auto",
              transition: "width 0.2s ease"
            },
            children: o
          }
        ),
        /* @__PURE__ */ n(d, { sx: { gridArea: "main", overflow: "auto" }, children: i }),
        r && /* @__PURE__ */ n(d, { sx: { gridArea: "footer", overflow: "hidden" }, children: r })
      ]
    }
  );
}
P.displayName = "AppShell";
const Y = {
  flat: "none",
  raised: "0 1px 3px rgba(0,0,0,0.12)",
  overlay: "0 4px 12px rgba(0,0,0,0.2)"
};
function U({
  title: e,
  icon: o,
  toolbar: r,
  children: i,
  collapsible: s = !1,
  onClose: t,
  elevation: l = "flat",
  sx: u
}) {
  const [p, c] = S(!1);
  return /* @__PURE__ */ g(
    d,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        border: "1px solid var(--ov-border-default)",
        borderRadius: "6px",
        bgcolor: "var(--ov-bg-surface)",
        boxShadow: Y[l],
        overflow: "hidden",
        ...u
      },
      children: [
        (e || r || t) && /* @__PURE__ */ g(
          d,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              gap: 1,
              px: 1.5,
              py: 0.75,
              borderBottom: p ? "none" : "1px solid var(--ov-border-muted)",
              bgcolor: "var(--ov-bg-subtle)",
              minHeight: 36
            },
            children: [
              s && /* @__PURE__ */ n(
                A,
                {
                  size: "small",
                  onClick: () => c((a) => !a),
                  sx: { p: 0.25 },
                  children: p ? /* @__PURE__ */ n(M, { size: 14 }) : /* @__PURE__ */ n(T, { size: 14 })
                }
              ),
              o && /* @__PURE__ */ n(d, { sx: { display: "flex", color: "var(--ov-fg-muted)" }, children: o }),
              e && /* @__PURE__ */ n(
                E,
                {
                  variant: "body2",
                  sx: {
                    fontWeight: 600,
                    fontSize: "0.8125rem",
                    color: "var(--ov-fg-base)",
                    flex: 1
                  },
                  children: e
                }
              ),
              r && /* @__PURE__ */ n(d, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: r }),
              t && /* @__PURE__ */ n(A, { size: "small", onClick: t, sx: { p: 0.25, ml: "auto" }, children: /* @__PURE__ */ n(j, { size: 14 }) })
            ]
          }
        ),
        /* @__PURE__ */ n(H, { in: !p, children: /* @__PURE__ */ n(d, { sx: { flex: 1, overflow: "auto" }, children: i }) })
      ]
    }
  );
}
U.displayName = "Panel";
function $({
  direction: e = "column",
  gap: o,
  spacing: r,
  align: i,
  alignItems: s,
  justify: t,
  justifyContent: l,
  wrap: u,
  flexWrap: p,
  divider: c = !1,
  children: a,
  sx: f,
  ...v
}) {
  return /* @__PURE__ */ n(
    B,
    {
      direction: e,
      spacing: r ?? o ?? 1,
      alignItems: s ?? i,
      justifyContent: l ?? t,
      flexWrap: p ?? (u ? "wrap" : void 0),
      divider: typeof c == "boolean" ? c ? /* @__PURE__ */ n(R, { orientation: e === "row" ? "vertical" : "horizontal", flexItem: !0 }) : void 0 : c,
      sx: f,
      ...v,
      children: a
    }
  );
}
$.displayName = "Stack";
function q({
  gap: e = 1,
  align: o = "center",
  justify: r,
  divider: i = !1,
  children: s,
  sx: t
}) {
  return /* @__PURE__ */ n(
    $,
    {
      direction: "row",
      gap: e,
      align: o,
      justify: r,
      wrap: !0,
      divider: i,
      sx: t,
      children: s
    }
  );
}
q.displayName = "Inline";
function F({ sx: e }) {
  return /* @__PURE__ */ n(d, { sx: { flex: 1, ...e } });
}
F.displayName = "Spacer";
function x(e, o) {
  if (e.type === "leaf")
    return /* @__PURE__ */ n(d, { sx: { flex: 1, minWidth: 0, minHeight: 0, overflow: "auto" }, children: o(e.id) });
  const r = e.type === "horizontal" ? "horizontal" : "vertical", i = e.children;
  return i.length === 0 ? null : i.length === 1 ? x(i[0], o) : C(i, r, e.sizes, o);
}
function C(e, o, r, i) {
  if (e.length === 1) return x(e[0], i);
  const s = r?.[0] ?? 50, t = e[0], l = e.slice(1), u = r?.slice(1), p = t.type === "leaf" ? t.minSize ?? 100 : 100;
  return /* @__PURE__ */ g(
    I,
    {
      direction: o,
      defaultSize: s,
      minSize: p,
      children: [
        x(t, i),
        l.length === 1 ? x(l[0], i) : C(l, o, u, i)
      ]
    }
  );
}
function G({
  layout: e,
  renderPanel: o,
  sx: r
}) {
  return /* @__PURE__ */ n(
    d,
    {
      sx: {
        display: "flex",
        flex: 1,
        minWidth: 0,
        minHeight: 0,
        overflow: "hidden",
        ...typeof r == "object" && !Array.isArray(r) ? r : {}
      },
      children: x(e, o)
    }
  );
}
G.displayName = "DockLayout";
export {
  P as AppShell,
  G as DockLayout,
  q as Inline,
  U as Panel,
  I as ResizableSplitPane,
  F as Spacer,
  $ as Stack,
  J as useResizablePanel
};
