import { jsxs as s, jsx as e, Fragment as ie } from "react/jsx-runtime";
import ae, { useState as w, useMemo as J, useCallback as ce } from "react";
import de from "@mui/material/Card";
import se from "@mui/material/CardContent";
import ge from "@mui/material/ClickAwayListener";
import me from "@mui/material/Divider";
import pe from "@mui/material/IconButton";
import he from "@mui/material/Popper";
import O from "@mui/material/Stack";
import fe from "@mui/material/Switch";
import x from "@mui/material/Typography";
import { styled as ue } from "@mui/material/styles";
import { LuSettings2 as xe, LuColumns2 as ve } from "react-icons/lu";
import { useReactTable as K, getExpandedRowModel as Se, getFilteredRowModel as Q, getSortedRowModel as U, getCoreRowModel as X, flexRender as I } from "@tanstack/react-table";
import Y from "@mui/material/Table";
import Z from "@mui/material/TableHead";
import ee from "@mui/material/TableBody";
import f from "@mui/material/TableRow";
import u from "@mui/material/TableCell";
import _ from "@mui/material/Checkbox";
import d from "@mui/material/Box";
import oe from "@mui/material/TableSortLabel";
import { S as H } from "./Skeleton-BUYyXUiC.js";
import { S as be } from "./SearchInput-D3AsCI5H.js";
import ye from "@mui/material/InputBase";
import Ce from "@mui/icons-material/Search";
const we = ue("div")(({ theme: r }) => ({
  width: "max-content",
  borderRadius: "8px",
  border: `1px solid ${r.palette.divider}`,
  backgroundColor: r.palette.background.paper,
  boxShadow: r.palette.mode === "dark" ? "0px 4px 8px rgb(0 0 0 / 0.7)" : "0px 4px 8px rgb(0 0 0 / 0.1)",
  fontFamily: "var(--ov-font-ui)",
  fontSize: "0.875rem",
  zIndex: 1
})), Ie = ({ anchorEl: r, columns: p, onClose: c, onClick: a }) => {
  const g = !!r;
  return /* @__PURE__ */ s(ae.Fragment, { children: [
    /* @__PURE__ */ e(
      pe,
      {
        size: "small",
        onClick: a,
        sx: { border: "1px solid", borderColor: "divider" },
        children: /* @__PURE__ */ e(xe, { size: 20 })
      }
    ),
    /* @__PURE__ */ e(
      he,
      {
        style: { zIndex: 1e3 },
        id: "table-filter-menu",
        open: g,
        anchorEl: r,
        placement: "bottom-end",
        children: /* @__PURE__ */ e(
          ge,
          {
            onClickAway: () => {
              c();
            },
            children: /* @__PURE__ */ e(we, { children: /* @__PURE__ */ s(
              de,
              {
                variant: "outlined",
                sx: {
                  maxHeight: "max-content",
                  maxWidth: "100%",
                  minWidth: "300px",
                  p: 1.25,
                  gap: 1.25
                },
                children: [
                  /* @__PURE__ */ s(O, { direction: "row", spacing: 0.5, alignItems: "center", px: 1, pt: 0.5, children: [
                    /* @__PURE__ */ e(ve, { size: 14 }),
                    /* @__PURE__ */ e(x, { variant: "subtitle2", children: "Columns" })
                  ] }),
                  /* @__PURE__ */ e(me, {}),
                  /* @__PURE__ */ e(
                    se,
                    {
                      sx: {
                        display: "flex",
                        flexDirection: "column",
                        gap: 1.5
                      },
                      children: p.filter((i) => i.getCanHide()).map((i) => /* @__PURE__ */ s(
                        O,
                        {
                          direction: "row",
                          spacing: 1,
                          alignItems: "center",
                          component: "label",
                          sx: { cursor: "pointer" },
                          children: [
                            /* @__PURE__ */ e(
                              fe,
                              {
                                size: "small",
                                checked: i.getIsVisible(),
                                onChange: i.getToggleVisibilityHandler()
                              }
                            ),
                            /* @__PURE__ */ e(x, { variant: "caption", children: i.columnDef.header?.toString() })
                          ]
                        },
                        i.columnDef.id
                      ))
                    }
                  )
                ]
              }
            ) })
          }
        )
      }
    )
  ] });
};
Ie.displayName = "ColumnFilter";
const q = {
  compact: { rowHeight: 28, cellPy: 0.25, cellPx: 0.75 },
  comfortable: { rowHeight: 40, cellPy: 1, cellPx: 1.5 },
  spacious: { rowHeight: 56, cellPy: 2, cellPx: 2 }
};
function ze({
  columns: r,
  data: p,
  density: c = "comfortable",
  loading: a = !1,
  error: g,
  emptyState: i,
  onRowClick: h,
  selection: m = "none",
  stickyHeader: S = !1,
  rowActions: z,
  expandable: b = !1,
  renderDetail: M,
  sx: y
}) {
  const [v, D] = w([]), [$, W] = w({}), [B, R] = w({}), k = q[c] || q.comfortable, C = J(() => {
    const n = [];
    return m === "multi" && n.push({
      id: "__select",
      header: ({ table: t }) => /* @__PURE__ */ e(
        _,
        {
          size: "small",
          checked: t.getIsAllRowsSelected(),
          indeterminate: t.getIsSomeRowsSelected(),
          onChange: t.getToggleAllRowsSelectedHandler(),
          sx: { p: 0 }
        }
      ),
      cell: ({ row: t }) => /* @__PURE__ */ e(
        _,
        {
          size: "small",
          checked: t.getIsSelected(),
          onChange: t.getToggleSelectedHandler(),
          sx: { p: 0 }
        }
      ),
      size: 40
    }), n.push(...r), z && n.push({
      id: "__actions",
      header: "",
      cell: ({ row: t }) => z(t.original),
      size: 60
    }), n;
  }, [r, m, z]), T = K({
    data: p,
    columns: C,
    state: { sorting: v, rowSelection: $, expanded: B },
    onSortingChange: D,
    onRowSelectionChange: W,
    onExpandedChange: R,
    getCoreRowModel: X(),
    getSortedRowModel: U(),
    getFilteredRowModel: Q(),
    getExpandedRowModel: b ? Se() : void 0,
    enableRowSelection: m !== "none",
    enableMultiRowSelection: m === "multi"
  });
  return g ? /* @__PURE__ */ e(d, { sx: { p: 3 }, children: g }) : /* @__PURE__ */ e(d, { sx: { overflow: "auto", ...typeof y == "object" && !Array.isArray(y) ? y : {} }, children: /* @__PURE__ */ s(
    Y,
    {
      size: "small",
      stickyHeader: S,
      sx: { "& td, & th": { py: k.cellPy, px: k.cellPx } },
      children: [
        /* @__PURE__ */ e(Z, { children: T.getHeaderGroups().map((n) => /* @__PURE__ */ e(f, { children: n.headers.map((t) => /* @__PURE__ */ e(
          u,
          {
            sx: {
              fontWeight: 600,
              fontSize: "0.75rem",
              color: "var(--ov-fg-muted)",
              bgcolor: S ? "var(--ov-bg-surface)" : void 0,
              whiteSpace: "nowrap",
              width: t.getSize()
            },
            children: t.isPlaceholder ? null : t.column.getCanSort() ? /* @__PURE__ */ e(
              oe,
              {
                active: !!t.column.getIsSorted(),
                direction: t.column.getIsSorted() === "desc" ? "desc" : "asc",
                onClick: t.column.getToggleSortingHandler(),
                children: I(t.column.columnDef.header, t.getContext())
              }
            ) : I(t.column.columnDef.header, t.getContext())
          },
          t.id
        )) }, n.id)) }),
        /* @__PURE__ */ e(ee, { children: a ? Array.from({ length: 5 }).map((n, t) => /* @__PURE__ */ e(f, { children: C.map((j, F) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(H, { variant: "text", width: "80%" }) }, F)) }, `skeleton-${t}`)) : T.getRowModel().rows.length === 0 ? i ? /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { colSpan: C.length, sx: { textAlign: "center", py: 4 }, children: i }) }) : null : T.getRowModel().rows.map((n) => /* @__PURE__ */ s(ie, { children: [
          /* @__PURE__ */ e(
            f,
            {
              hover: !0,
              selected: n.getIsSelected(),
              onClick: () => {
                m === "single" && n.toggleSelected(!n.getIsSelected()), b && n.toggleExpanded(), h?.(n.original);
              },
              sx: {
                cursor: h || b || m === "single" ? "pointer" : void 0,
                height: k.rowHeight
              },
              children: n.getVisibleCells().map((t) => /* @__PURE__ */ e(
                u,
                {
                  sx: { fontSize: "0.8125rem", color: "var(--ov-fg-default)" },
                  children: I(t.column.columnDef.cell, t.getContext())
                },
                t.id
              ))
            },
            n.id
          ),
          b && n.getIsExpanded() && M && /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { colSpan: C.length, sx: { bgcolor: "var(--ov-bg-surface-inset)" }, children: M(n.original) }) }, `${n.id}-detail`)
        ] })) })
      ]
    }
  ) });
}
ze.displayName = "DataTable";
function Re({
  title: r,
  searchValue: p,
  onSearch: c,
  filters: a,
  actions: g,
  selectedCount: i,
  sx: h
}) {
  return /* @__PURE__ */ s(
    d,
    {
      sx: {
        display: "flex",
        alignItems: "center",
        gap: 1.5,
        px: 1.5,
        py: 1,
        borderBottom: "1px solid var(--ov-border-default)",
        ...typeof h == "object" && !Array.isArray(h) ? h : {}
      },
      children: [
        r && /* @__PURE__ */ e(x, { variant: "subtitle2", sx: { fontWeight: 600, color: "var(--ov-fg-base)", mr: 1 }, children: r }),
        i != null && i > 0 && /* @__PURE__ */ s(x, { variant: "body2", sx: { color: "var(--ov-accent-fg)", fontWeight: 500 }, children: [
          i,
          " selected"
        ] }),
        c && /* @__PURE__ */ e(
          be,
          {
            value: p ?? "",
            onChange: c,
            placeholder: "Search..."
          }
        ),
        a && /* @__PURE__ */ e(d, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: a }),
        /* @__PURE__ */ e(d, { sx: { flex: 1 } }),
        g && /* @__PURE__ */ e(d, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: g })
      ]
    }
  );
}
Re.displayName = "TableToolbar";
const ke = {
  compact: 0.25,
  comfortable: 1,
  spacious: 2
};
function Te({
  columns: r,
  rows: p = 5,
  density: c = "comfortable"
}) {
  const a = ke[c] ?? 1;
  return /* @__PURE__ */ s(Y, { size: "small", children: [
    /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(f, { children: Array.from({ length: r }).map((g, i) => /* @__PURE__ */ e(u, { sx: { py: a, fontWeight: 600 }, children: /* @__PURE__ */ e(H, { variant: "text", width: "60%" }) }, i)) }) }),
    /* @__PURE__ */ e(ee, { children: Array.from({ length: p }).map((g, i) => /* @__PURE__ */ e(f, { children: Array.from({ length: r }).map((h, m) => /* @__PURE__ */ e(u, { sx: { py: a }, children: /* @__PURE__ */ e(H, { variant: "text", width: `${50 + Math.random() * 40}%` }) }, m)) }, i)) })
  ] });
}
Te.displayName = "TableSkeleton";
function Me({
  icon: r,
  title: p,
  description: c,
  action: a,
  colSpan: g
}) {
  return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { colSpan: g, sx: { textAlign: "center", py: 6, border: 0 }, children: /* @__PURE__ */ s(d, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1.5 }, children: [
    r && /* @__PURE__ */ e(d, { sx: { color: "var(--ov-fg-faint)", fontSize: 40 }, children: r }),
    /* @__PURE__ */ e(x, { variant: "subtitle1", sx: { fontWeight: 600, color: "var(--ov-fg-base)" }, children: p }),
    c && /* @__PURE__ */ e(x, { variant: "body2", sx: { color: "var(--ov-fg-muted)", maxWidth: 360 }, children: c }),
    a && /* @__PURE__ */ e(d, { sx: { mt: 1 }, children: a })
  ] }) }) });
}
Me.displayName = "TableEmptyState";
function Ae({
  columns: r,
  data: p,
  rowHeight: c = 30,
  selection: a = !1,
  selectedRows: g,
  onSelectionChange: i,
  onRowClick: h,
  rowActions: m,
  searchable: S = !1,
  searchPlaceholder: z = "Search...",
  searchValue: b,
  onSearchChange: M,
  toolbar: y,
  countLabel: v,
  loading: D = !1,
  skeletonRows: $ = 8,
  emptyState: W,
  stickyHeader: B = !0,
  sx: R
}) {
  const [k, C] = w([]), [T, n] = w({}), [t, j] = w(""), F = g ?? T, te = i ?? n, L = b ?? t, G = M ?? j, E = J(() => {
    const l = [];
    return a && l.push({
      id: "__select",
      header: ({ table: o }) => /* @__PURE__ */ e(
        _,
        {
          size: "small",
          checked: o.getIsAllRowsSelected(),
          indeterminate: o.getIsSomeRowsSelected(),
          onChange: o.getToggleAllRowsSelectedHandler(),
          sx: { p: 0, color: "var(--ov-fg-faint)", "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: "var(--ov-accent-fg)" } }
        }
      ),
      cell: ({ row: o }) => /* @__PURE__ */ e(
        _,
        {
          size: "small",
          checked: o.getIsSelected(),
          onChange: o.getToggleSelectedHandler(),
          onClick: (P) => P.stopPropagation(),
          sx: { p: 0, color: "var(--ov-fg-faint)", "&.Mui-checked": { color: "var(--ov-accent-fg)" } }
        }
      ),
      size: 32,
      enableSorting: !1
    }), l.push(...r), m && l.push({
      id: "__actions",
      header: "",
      cell: ({ row: o }) => /* @__PURE__ */ e(d, { onClick: (P) => P.stopPropagation(), children: m(o.original) }),
      size: 36,
      enableSorting: !1
    }), l;
  }, [r, a, m]), A = K({
    data: p,
    columns: E,
    state: { sorting: k, rowSelection: F, globalFilter: L },
    onSortingChange: C,
    onRowSelectionChange: te,
    onGlobalFilterChange: G,
    getCoreRowModel: X(),
    getSortedRowModel: U(),
    getFilteredRowModel: Q(),
    enableRowSelection: a,
    enableMultiRowSelection: a
  }), le = ce((l) => {
    h?.(l);
  }, [h]), re = c + 2, N = "8px", V = "0px";
  return /* @__PURE__ */ s(
    d,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        flex: 1,
        minHeight: 0,
        bgcolor: "var(--ov-bg-base)",
        ...typeof R == "object" && !Array.isArray(R) ? R : {}
      },
      children: [
        (S || y || v) && /* @__PURE__ */ s(
          d,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              gap: 1,
              px: 1,
              py: 0.5,
              borderBottom: "1px solid var(--ov-border-default)",
              bgcolor: "var(--ov-bg-surface)",
              flexShrink: 0
            },
            children: [
              S && /* @__PURE__ */ s(
                d,
                {
                  sx: {
                    display: "flex",
                    alignItems: "center",
                    flex: 1,
                    maxWidth: 360,
                    height: 28,
                    border: "1px solid var(--ov-border-default)",
                    borderRadius: "4px",
                    bgcolor: "var(--ov-bg-base)",
                    px: 0.75,
                    "&:focus-within": { borderColor: "var(--ov-accent)" }
                  },
                  children: [
                    /* @__PURE__ */ e(Ce, { sx: { fontSize: 14, color: "var(--ov-fg-faint)", mr: 0.5 } }),
                    /* @__PURE__ */ e(
                      ye,
                      {
                        value: L,
                        onChange: (l) => G(l.target.value),
                        placeholder: v ? `Search ${v}...` : z,
                        sx: {
                          flex: 1,
                          fontSize: "0.75rem",
                          color: "var(--ov-fg-default)",
                          "& input": { py: 0, px: 0 },
                          "& input::placeholder": { color: "var(--ov-fg-faint)", opacity: 1 }
                        }
                      }
                    )
                  ]
                }
              ),
              !S && v && /* @__PURE__ */ e(x, { sx: { fontSize: "0.75rem", color: "var(--ov-fg-muted)", fontWeight: 500 }, children: v }),
              /* @__PURE__ */ e(d, { sx: { flex: 1 } }),
              y
            ]
          }
        ),
        /* @__PURE__ */ e(d, { sx: { flex: 1, overflow: "auto", minHeight: 0 }, children: /* @__PURE__ */ s(
          "table",
          {
            style: {
              width: "100%",
              borderCollapse: "collapse",
              fontFamily: "var(--ov-font-ui)",
              fontSize: "0.75rem",
              tableLayout: "fixed"
            },
            children: [
              /* @__PURE__ */ e("colgroup", { children: A.getAllColumns().map((l) => /* @__PURE__ */ e("col", { style: { width: l.getSize() !== 150 ? l.getSize() : void 0 } }, l.id)) }),
              /* @__PURE__ */ e("thead", { children: A.getHeaderGroups().map((l) => /* @__PURE__ */ e(
                "tr",
                {
                  style: {
                    height: re,
                    ...B ? { position: "sticky", top: 0, zIndex: 2 } : {}
                  },
                  children: l.headers.map((o) => /* @__PURE__ */ e(
                    "th",
                    {
                      style: {
                        padding: `${V} ${N}`,
                        textAlign: "left",
                        fontWeight: 600,
                        fontSize: "0.6875rem",
                        color: "var(--ov-fg-muted)",
                        backgroundColor: "var(--ov-bg-surface)",
                        borderBottom: "1px solid var(--ov-border-default)",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        userSelect: "none",
                        letterSpacing: "0.01em"
                      },
                      children: o.isPlaceholder ? null : o.column.getCanSort() ? /* @__PURE__ */ e(
                        oe,
                        {
                          active: !!o.column.getIsSorted(),
                          direction: o.column.getIsSorted() === "desc" ? "desc" : "asc",
                          onClick: o.column.getToggleSortingHandler(),
                          sx: {
                            fontSize: "inherit",
                            fontWeight: "inherit",
                            color: "inherit !important",
                            "& .MuiTableSortLabel-icon": { fontSize: 12, opacity: 0.5 }
                          },
                          children: I(o.column.columnDef.header, o.getContext())
                        }
                      ) : I(o.column.columnDef.header, o.getContext())
                    },
                    o.id
                  ))
                },
                l.id
              )) }),
              /* @__PURE__ */ e("tbody", { children: D ? Array.from({ length: $ }).map((l, o) => /* @__PURE__ */ e("tr", { style: { height: c }, children: E.map((P, ne) => /* @__PURE__ */ e(
                "td",
                {
                  style: {
                    padding: `${V} ${N}`,
                    borderBottom: "1px solid var(--ov-border-muted)"
                  },
                  children: /* @__PURE__ */ e(H, { variant: "text", width: "70%", sx: { fontSize: "0.75rem" } })
                },
                ne
              )) }, `skel-${o}`)) : A.getRowModel().rows.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
                "td",
                {
                  colSpan: E.length,
                  style: { textAlign: "center", padding: "32px 8px", color: "var(--ov-fg-faint)" },
                  children: W ?? /* @__PURE__ */ e(x, { sx: { fontSize: "0.75rem", color: "var(--ov-fg-faint)" }, children: "No items to display" })
                }
              ) }) : A.getRowModel().rows.map((l) => /* @__PURE__ */ e(
                "tr",
                {
                  onClick: () => le(l.original),
                  style: {
                    height: c,
                    cursor: h ? "pointer" : void 0,
                    backgroundColor: l.getIsSelected() ? "var(--ov-accent-subtle)" : void 0
                  },
                  onMouseEnter: (o) => {
                    l.getIsSelected() || (o.currentTarget.style.backgroundColor = "var(--ov-state-hover)");
                  },
                  onMouseLeave: (o) => {
                    o.currentTarget.style.backgroundColor = l.getIsSelected() ? "var(--ov-accent-subtle)" : "";
                  },
                  children: l.getVisibleCells().map((o) => /* @__PURE__ */ e(
                    "td",
                    {
                      style: {
                        padding: `${V} ${N}`,
                        fontSize: "0.75rem",
                        color: "var(--ov-fg-default)",
                        borderBottom: "1px solid var(--ov-border-muted)",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        lineHeight: `${c}px`
                      },
                      children: I(o.column.columnDef.cell, o.getContext())
                    },
                    o.id
                  ))
                },
                l.id
              )) })
            ]
          }
        ) })
      ]
    }
  );
}
Ae.displayName = "IDETable";
export {
  Ie as ColumnFilter,
  ze as DataTable,
  Ae as IDETable,
  Me as TableEmptyState,
  Te as TableSkeleton,
  Re as TableToolbar
};
