import { useMemo as P, useState as T, useRef as M, useEffect as de, useCallback as te } from "react";
import { useFormik as ke } from "formik";
import { k as pe, G as Ne, g as oe, a as ue, b as ie, v as se, H as ze, d as Te, V as we } from "./index-B-D9UuLO.js";
import { jsxs as t, Fragment as q, jsx as e } from "react/jsx-runtime";
import { Box as n, Collapse as Ie, Tooltip as D, Dialog as he, Typography as S, IconButton as Y, Stepper as Fe, Step as Oe, StepLabel as Re, Drawer as We, Chip as Ae, Divider as De } from "@mui/material";
import { MdCheck as G, MdClose as _, MdAdd as J, MdArrowBack as fe, MdEdit as Ee, MdDeleteOutline as Pe, MdSettings as be, MdArrowForward as Me } from "react-icons/md";
import { FaWpforms as _e } from "react-icons/fa6";
function sl({
  schema: l,
  initialValues: o,
  onSubmit: p,
  showErrorsImmediately: c = !1
}) {
  const a = l.fields ?? [], i = P(
    () => pe(a),
    [a]
  ), h = P(() => {
    if (c)
      return a.reduce((f, C) => {
        const g = Ne(C);
        return g && (f[g] = !0), f;
      }, {});
  }, [a, c]), [s, d] = T({}), [x, y] = T({}), N = M(o);
  de(() => {
    N.current !== o && (N.current = o, d({}), y({}));
  }, [o]);
  const u = ke({
    initialValues: o,
    validationSchema: i,
    initialTouched: h,
    validateOnMount: c,
    validateOnChange: !0,
    validateOnBlur: !0,
    enableReinitialize: !0,
    onSubmit: async (f) => {
      const C = oe({ values: f, conditionConfig: x });
      await p(f, C);
    }
  }), r = te(() => {
    u.submitForm();
  }, [u]), b = te((f) => {
    u.resetForm(f ? { values: f } : void 0), d({}), y({});
  }, [u]);
  return {
    values: u.values,
    errors: u.errors,
    isValid: u.isValid,
    isDirty: u.dirty,
    isSubmitting: u.isSubmitting,
    formulaConfig: s,
    conditionConfig: x,
    submit: r,
    reset: b,
    setFieldValue: u.setFieldValue,
    // Internals for DynamicFormRenderer
    _schema: l,
    _formik: u,
    _formulaConfig: s,
    _onFormulaConfigChange: d,
    _conditionConfig: x,
    _onConditionConfigChange: y
  };
}
const je = ue.getTypeOptions(), v = "form-control font-14", m = "text-14 text-dark fw-medium mb-1 align-items-center d-flex gap-1", R = {
  fontSize: 10,
  fontWeight: 700,
  color: "#94a3b8",
  textTransform: "uppercase",
  letterSpacing: 0.6,
  marginBottom: 8,
  display: "block"
}, Le = [
  { value: "text", label: "Text" },
  { value: "number", label: "Number" },
  { value: "email", label: "Email" },
  { value: "url", label: "URL" },
  { value: "password", label: "Password" },
  { value: "select", label: "Select" },
  { value: "object", label: "Object (sub-fields)" },
  { value: "array", label: "Array (nested)" }
], Ve = [
  { value: 3, label: "1/4" },
  { value: 4, label: "1/3" },
  { value: 6, label: "1/2" },
  { value: 8, label: "2/3" },
  { value: 12, label: "Full" }
];
function $e({ value: l, onChange: o }) {
  const p = l ?? 12;
  return /* @__PURE__ */ t(n, { children: [
    /* @__PURE__ */ e("span", { className: m, children: "Column width" }),
    /* @__PURE__ */ e(n, { sx: { display: "flex", gap: 0.5 }, children: Ve.map((c) => /* @__PURE__ */ e(D, { title: `colSpan: ${c.value}`, placement: "top", children: /* @__PURE__ */ e(
      n,
      {
        component: "button",
        onClick: () => o(c.value),
        sx: {
          flex: 1,
          border: "1px solid",
          borderColor: p === c.value ? "#6366f1" : "#dee2e6",
          borderRadius: "6px",
          cursor: "pointer",
          bgcolor: p === c.value ? "#eef2ff" : "#fff",
          color: p === c.value ? "#6366f1" : "#6c757d",
          fontSize: 11,
          fontWeight: 600,
          py: 0.6,
          px: 0,
          "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" }
        },
        children: c.label
      }
    ) }, c.value)) }),
    /* @__PURE__ */ e(n, { sx: { display: "flex", gap: "3px", mt: 0.75 }, children: Array.from({ length: 12 }).map((c, a) => /* @__PURE__ */ e(n, { sx: { flex: 1, height: 4, borderRadius: "2px", bgcolor: a < p ? "#6366f1" : "#e2e8f0", transition: "background 0.12s" } }, a)) })
  ] });
}
function me({ options: l = [], onChange: o }) {
  function p(c, a, i) {
    o(l.map((h, s) => s === c ? { ...h, [a]: i } : h));
  }
  return /* @__PURE__ */ t(n, { children: [
    /* @__PURE__ */ t("span", { className: m, children: [
      "Options ",
      /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
    ] }),
    /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.5, mb: 0.75 }, children: l.map((c, a) => /* @__PURE__ */ t(n, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: [
      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "Label", value: c.label, onChange: (i) => p(a, "label", i.target.value) }),
      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "Value", value: c.value, onChange: (i) => p(a, "value", i.target.value) }),
      /* @__PURE__ */ e(n, { component: "button", onClick: () => o(l.filter((i, h) => h !== a)), sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } }, children: /* @__PURE__ */ e(_, { size: 13 }) })
    ] }, a)) }),
    /* @__PURE__ */ t(n, { component: "button", onClick: () => o([...l, { label: "", value: "" }]), sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, px: 1, py: 0.5, borderRadius: "6px", color: "#6366f1", width: "100%", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } }, children: [
      /* @__PURE__ */ e(J, { size: 13 }),
      " Add option"
    ] })
  ] });
}
const xe = [
  { value: "operator", label: "Operator (predefined)" },
  { value: "select", label: "Select" },
  { value: "text", label: "Text" }
];
function Be({ col: l, onChange: o, onDelete: p }) {
  const c = l.type === "select", a = l.type === "operator";
  return /* @__PURE__ */ t(n, { sx: { border: "1px solid #e2e8f0", borderRadius: "7px", p: 1.25, bgcolor: "#fff", display: "flex", flexDirection: "column", gap: 1 }, children: [
    /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
      /* @__PURE__ */ e(n, { sx: { fontSize: 10, fontWeight: 700, px: 0.75, py: 0.2, borderRadius: "4px", bgcolor: a ? "#fef9c3" : "#eef2ff", color: a ? "#92400e" : "#6366f1", flexShrink: 0 }, children: a ? "OPERATOR" : l.type.toUpperCase() }),
      /* @__PURE__ */ e(n, { sx: { fontSize: 12, fontWeight: 600, color: "#0f172a", flex: 1 }, children: l.label || l.id || "Unnamed" }),
      /* @__PURE__ */ e(n, { component: "button", onClick: p, sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } }, children: /* @__PURE__ */ e(_, { size: 13 }) })
    ] }),
    /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
      /* @__PURE__ */ t(n, { children: [
        /* @__PURE__ */ e("label", { className: m, children: "Column type" }),
        /* @__PURE__ */ e("select", { value: l.type, onChange: (i) => o({ ...l, type: i.target.value, options: void 0 }), className: v, style: { cursor: "pointer" }, children: xe.map((i) => /* @__PURE__ */ e("option", { value: i.value, children: i.label }, i.value)) })
      ] }),
      /* @__PURE__ */ t(n, { children: [
        /* @__PURE__ */ t("label", { className: m, children: [
          "Column key ",
          /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
        ] }),
        /* @__PURE__ */ e("input", { className: `${v} ${l.id ? "" : "border-danger"}`, value: l.id, onChange: (i) => o({ ...l, id: i.target.value }), placeholder: "e.g. field, operator, value" }),
        !l.id && /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "#dc3545" }, children: "Required — used as data key" })
      ] })
    ] }),
    !a && /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
      /* @__PURE__ */ t(n, { children: [
        /* @__PURE__ */ e("label", { className: m, children: "Label" }),
        /* @__PURE__ */ e("input", { className: v, value: l.label ?? "", onChange: (i) => o({ ...l, label: i.target.value || void 0 }), placeholder: "Column label" })
      ] }),
      /* @__PURE__ */ t(n, { children: [
        /* @__PURE__ */ e("label", { className: m, children: "Placeholder" }),
        /* @__PURE__ */ e("input", { className: v, value: l.placeholder ?? "", onChange: (i) => o({ ...l, placeholder: i.target.value || void 0 }), placeholder: "Hint…" })
      ] })
    ] }),
    c && /* @__PURE__ */ e(me, { options: l.options ?? [], onChange: (i) => o({ ...l, options: i }) }),
    a && /* @__PURE__ */ e(n, { sx: { bgcolor: "#fefce8", border: "1px solid #fef08a", borderRadius: "6px", px: 1.25, py: 0.75 }, children: /* @__PURE__ */ e(n, { sx: { fontSize: 11, color: "#78350f" }, children: "Predefined: equals, not equals, contains, starts with, ends with, is present, is not present, greater than, less than…" }) }),
    !a && /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
      /* @__PURE__ */ e("input", { type: "checkbox", id: `formula-${l.id}`, checked: !!l.formula, onChange: (i) => o({ ...l, formula: i.target.checked || void 0 }), style: { cursor: "pointer", width: 14, height: 14 } }),
      /* @__PURE__ */ e("label", { htmlFor: `formula-${l.id}`, className: m, style: { margin: 0, cursor: "pointer" }, children: "Formula input (chip editor)" })
    ] })
  ] });
}
function He({ condition: l, onChange: o }) {
  const p = !!l;
  function c() {
    o(p ? void 0 : { fields: [] });
  }
  function a(s) {
    if (!l) return;
    const d = s === "operator" ? "operator" : l.fields.filter((x) => x.type !== "operator").length === 0 ? "field" : "value";
    o({ ...l, fields: [...l.fields, { id: d, type: s }] });
  }
  function i(s, d) {
    if (!l) return;
    const x = [...l.fields];
    x[s] = d, o({ ...l, fields: x });
  }
  function h(s) {
    l && o({ ...l, fields: l.fields.filter((d, x) => x !== s) });
  }
  return /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
    /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75, mb: p ? 1.25 : 0 }, children: [
      /* @__PURE__ */ e("input", { type: "checkbox", id: "enable-condition", checked: p, onChange: c, style: { cursor: "pointer", width: 14, height: 14 } }),
      /* @__PURE__ */ e("span", { style: { ...R, margin: 0, color: p ? "#6366f1" : "#94a3b8" }, children: "Condition row" })
    ] }),
    p && l && /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
      l.fields.map((s, d) => /* @__PURE__ */ e(Be, { col: s, onChange: (x) => i(d, x), onDelete: () => h(d) }, d)),
      /* @__PURE__ */ e(n, { sx: { display: "flex", gap: 0.5 }, children: xe.map((s) => /* @__PURE__ */ t(n, { component: "button", onClick: () => a(s.value), sx: { flex: 1, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, py: 0.5, borderRadius: "6px", color: s.value === "operator" ? "#92400e" : "#6366f1", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } }, children: [
        "+ ",
        s.value === "operator" ? "Operator" : s.label.split(" ")[0]
      ] }, s.value)) }),
      /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }, children: [
        /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
          /* @__PURE__ */ e("input", { type: "checkbox", id: "allow-groups", checked: !!l.allowGroups, onChange: (s) => o({ ...l, allowGroups: s.target.checked || void 0 }), style: { cursor: "pointer", width: 14, height: 14 } }),
          /* @__PURE__ */ e("label", { htmlFor: "allow-groups", className: m, style: { margin: 0, cursor: "pointer" }, children: "Allow nested groups" })
        ] }),
        l.allowGroups && /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
          /* @__PURE__ */ e("label", { className: m, style: { margin: 0 }, children: "Max depth" }),
          /* @__PURE__ */ e("input", { type: "number", min: 1, max: 5, className: v, style: { width: 60, textAlign: "center" }, value: l.maxGroupDepth ?? "", onChange: (s) => o({ ...l, maxGroupDepth: s.target.value ? Number(s.target.value) : void 0 }), placeholder: "∞" })
        ] })
      ] })
    ] })
  ] });
}
function E({ id: l, label: o, checked: p, onChange: c }) {
  return /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
    /* @__PURE__ */ e("input", { type: "checkbox", id: l, checked: p, onChange: (a) => c(a.target.checked), style: { cursor: "pointer", width: 14, height: 14, flexShrink: 0 } }),
    /* @__PURE__ */ e("label", { htmlFor: l, className: m, style: { margin: 0, cursor: "pointer" }, children: o })
  ] });
}
function Ue({ views: l = [], onChange: o }) {
  function p(a, i, h) {
    o(l.map((s, d) => d === a ? { ...s, [i]: h } : s));
  }
  function c() {
    const a = `tab${l.length + 1}`;
    o([...l, { id: a, label: `Tab ${l.length + 1}` }]);
  }
  return /* @__PURE__ */ t(n, { children: [
    /* @__PURE__ */ e("span", { className: m, children: "Views" }),
    /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.5, mb: 0.75 }, children: l.map((a, i) => /* @__PURE__ */ t(n, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: [
      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "Label", value: a.label, onChange: (h) => p(i, "label", h.target.value) }),
      /* @__PURE__ */ e("input", { className: v, style: { flex: 1 }, placeholder: "ID (no spaces)", value: a.id, onChange: (h) => p(i, "id", h.target.value.replace(/\s/g, "_")) }),
      /* @__PURE__ */ e(n, { component: "button", onClick: () => o(l.filter((h, s) => s !== i)), sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } }, children: /* @__PURE__ */ e(_, { size: 13 }) })
    ] }, i)) }),
    /* @__PURE__ */ t(n, { component: "button", onClick: c, sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, px: 1, py: 0.5, borderRadius: "6px", color: "#6366f1", width: "100%", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } }, children: [
      /* @__PURE__ */ e(J, { size: 13 }),
      " Add view"
    ] })
  ] });
}
function B({ label: l, value: o, options: p, onChange: c }) {
  return /* @__PURE__ */ t(n, { children: [
    /* @__PURE__ */ e("span", { className: m, children: l }),
    /* @__PURE__ */ e(n, { sx: { display: "flex", border: "1px solid #dee2e6", borderRadius: "7px", overflow: "hidden" }, children: p.map((a) => /* @__PURE__ */ e(
      n,
      {
        component: "button",
        onClick: () => c(a.value),
        sx: {
          flex: 1,
          border: "none",
          borderRight: "1px solid #dee2e6",
          cursor: "pointer",
          fontSize: 12,
          fontWeight: 600,
          py: 0.6,
          bgcolor: o === a.value ? "#eef2ff" : "#fff",
          color: o === a.value ? "#6366f1" : "#6c757d",
          "&:last-child": { borderRight: "none" },
          "&:hover": { bgcolor: "#f5f3ff" }
        },
        children: a.label
      },
      a.value
    )) })
  ] });
}
function ge({ field: l, onChange: o, onSave: p, onCancel: c, noFooter: a }) {
  const [i, h] = T(!1), s = l.id ?? l.name ?? "", d = l, x = l.type === "select" || l.type === "descriptive-select" || l.type === "radio-group", y = ue.get(l.type), N = y == null ? void 0 : y.configSchema;
  function u(r, b) {
    o({ ...l, [r]: b });
  }
  return /* @__PURE__ */ t(q, { children: [
    /* @__PURE__ */ t(n, { sx: { flex: 1, overflowY: "auto", px: 2.5, py: 2, display: "flex", flexDirection: "column", gap: 1.75 }, children: [
      /* @__PURE__ */ t(n, { children: [
        /* @__PURE__ */ e("span", { style: R, children: "Required" }),
        /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Type" }),
            /* @__PURE__ */ e("select", { value: l.type, onChange: (r) => u("type", r.target.value), className: v, style: { cursor: "pointer" }, children: je.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value)) })
          ] }),
          /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: l.type === "tabs" ? "1fr" : "1fr 1fr", gap: 1 }, children: [
            /* @__PURE__ */ t(n, { children: [
              /* @__PURE__ */ t("label", { className: m, children: [
                "Field ID ",
                /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
              ] }),
              /* @__PURE__ */ e("input", { className: v, value: l.id ?? l.name ?? "", onChange: (r) => u("id", r.target.value), placeholder: "e.g. email" })
            ] }),
            l.type !== "tabs" && /* @__PURE__ */ t(n, { children: [
              /* @__PURE__ */ t("label", { className: m, children: [
                "Label ",
                /* @__PURE__ */ e("span", { style: { color: "#dc3545" }, children: "*" })
              ] }),
              /* @__PURE__ */ e("input", { className: v, value: l.label ?? "", onChange: (r) => u("label", r.target.value), placeholder: "Display label" })
            ] })
          ] }),
          l.type !== "tabs" && /* @__PURE__ */ e($e, { value: l.colSpan, onChange: (r) => u("colSpan", r === 12 ? void 0 : r) })
        ] })
      ] }),
      N && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
        /* @__PURE__ */ e("span", { style: R, children: "Specific Settings" }),
        /* @__PURE__ */ e(
          ie,
          {
            schema: { layout: "flat", compact: !0, fields: N.fields },
            initialValues: l,
            onValuesChange: (r) => o({ ...l, ...r }),
            onSubmit: () => {
            }
          }
        )
      ] }),
      l.type === "tabs" && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5, display: "flex", flexDirection: "column", gap: 1.5 }, children: [
        /* @__PURE__ */ e("span", { style: R, children: "Content" }),
        /* @__PURE__ */ e(
          Ue,
          {
            views: (d.tabs ?? []).map((r) => ({ id: r.id, label: r.label })),
            onChange: (r) => {
              const b = d.tabs ?? [], f = r.map((C) => {
                const g = b.find((I) => I.id === C.id);
                return g ? { ...g, ...C } : { ...C, fields: [] };
              });
              o({ ...l, tabs: f });
            }
          }
        ),
        /* @__PURE__ */ e("span", { style: { ...R, marginTop: 4 }, children: "Interaction" }),
        /* @__PURE__ */ t(n, { children: [
          /* @__PURE__ */ e("label", { className: m, children: "Disabled" }),
          /* @__PURE__ */ e("input", { className: v, value: d.disabledExpr ?? "", onChange: (r) => o({ ...l, disabledExpr: r.target.value || void 0 }), placeholder: "false" })
        ] }),
        /* @__PURE__ */ e("span", { style: { ...R, marginTop: 4 }, children: "Appearance" }),
        /* @__PURE__ */ e(
          B,
          {
            label: "Alignment",
            value: d.alignment ?? "left",
            options: [
              { value: "left", label: "|←" },
              { value: "center-left", label: "←|" },
              { value: "center", label: "|·|" },
              { value: "center-right", label: "|→" },
              { value: "right", label: "→|" }
            ],
            onChange: (r) => o({ ...l, alignment: r })
          }
        ),
        /* @__PURE__ */ t(n, { children: [
          /* @__PURE__ */ e("label", { className: m, children: "Hidden" }),
          /* @__PURE__ */ e("input", { className: v, value: d.hiddenExpr ?? "", onChange: (r) => o({ ...l, hiddenExpr: r.target.value || void 0 }), placeholder: "false" })
        ] }),
        /* @__PURE__ */ e(
          B,
          {
            label: "Variant",
            value: d.variant ?? "line",
            options: [{ value: "pill", label: "Pill" }, { value: "line", label: "Line" }],
            onChange: (r) => o({ ...l, variant: r })
          }
        ),
        /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 1 }, children: [
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Active color" }),
            /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
              /* @__PURE__ */ e("input", { type: "color", value: d.activeColor ?? "#6366f1", onChange: (r) => o({ ...l, activeColor: r.target.value }), style: { width: 28, height: 28, border: "1px solid #dee2e6", borderRadius: 6, cursor: "pointer", padding: 2, background: "#fff" } }),
              /* @__PURE__ */ e("input", { className: v, value: d.activeColor ?? "", onChange: (r) => o({ ...l, activeColor: r.target.value || void 0 }), placeholder: "#6366f1", style: { flex: 1 } })
            ] })
          ] }),
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Active text" }),
            /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
              /* @__PURE__ */ e("input", { type: "color", value: d.activeTextColor ?? "#ffffff", onChange: (r) => o({ ...l, activeTextColor: r.target.value }), style: { width: 28, height: 28, border: "1px solid #dee2e6", borderRadius: 6, cursor: "pointer", padding: 2, background: "#fff" } }),
              /* @__PURE__ */ e("input", { className: v, value: d.activeTextColor ?? "", onChange: (r) => o({ ...l, activeTextColor: r.target.value || void 0 }), placeholder: "auto", style: { flex: 1 } })
            ] })
          ] }),
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Inactive text" }),
            /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
              /* @__PURE__ */ e("input", { type: "color", value: d.inactiveTextColor ?? "#64748b", onChange: (r) => o({ ...l, inactiveTextColor: r.target.value }), style: { width: 28, height: 28, border: "1px solid #dee2e6", borderRadius: 6, cursor: "pointer", padding: 2, background: "#fff" } }),
              /* @__PURE__ */ e("input", { className: v, value: d.inactiveTextColor ?? "", onChange: (r) => o({ ...l, inactiveTextColor: r.target.value || void 0 }), placeholder: "#64748b", style: { flex: 1 } })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ t(n, { children: [
          /* @__PURE__ */ e("label", { className: m, children: "Styles" }),
          /* @__PURE__ */ e("input", { className: v, value: d.styles ?? "", onChange: (r) => o({ ...l, styles: r.target.value || void 0 }), placeholder: "None" })
        ] }),
        /* @__PURE__ */ e("span", { style: { ...R, marginTop: 4 }, children: "Spacing" }),
        /* @__PURE__ */ e(
          B,
          {
            label: "Height",
            value: d.height ?? "auto",
            options: [{ value: "auto", label: "Auto" }, { value: "fixed", label: "Fixed" }],
            onChange: (r) => o({ ...l, height: r })
          }
        ),
        /* @__PURE__ */ e(
          B,
          {
            label: "Margin",
            value: d.margin ?? "normal",
            options: [{ value: "normal", label: "Normal" }, { value: "none", label: "None" }],
            onChange: (r) => o({ ...l, margin: r })
          }
        )
      ] }),
      x && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
        /* @__PURE__ */ e("span", { style: R, children: "Options" }),
        /* @__PURE__ */ e(me, { options: d.options ?? [], onChange: (r) => o({ ...l, options: r }) })
      ] }),
      l.type === "array" && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children: [
        /* @__PURE__ */ e("span", { style: R, children: "Array settings" }),
        /* @__PURE__ */ t(n, { children: [
          /* @__PURE__ */ e("label", { className: m, children: "Item type" }),
          /* @__PURE__ */ e("select", { className: v, style: { cursor: "pointer" }, value: d.itemType ?? "text", onChange: (r) => o({ ...l, itemType: r.target.value }), children: Le.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value)) })
        ] }),
        /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Item label" }),
            /* @__PURE__ */ e("input", { className: v, value: d.itemLabel ?? "", onChange: (r) => o({ ...l, itemLabel: r.target.value || void 0 }), placeholder: 'e.g. "Member"' })
          ] }),
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Add button label" }),
            /* @__PURE__ */ e("input", { className: v, value: d.addLabel ?? "", onChange: (r) => o({ ...l, addLabel: r.target.value || void 0 }), placeholder: "Add item" })
          ] })
        ] }),
        /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Min items" }),
            /* @__PURE__ */ e("input", { type: "number", min: 0, className: v, value: d.minItems ?? "", onChange: (r) => o({ ...l, minItems: r.target.value ? Number(r.target.value) : void 0 }), placeholder: "0" })
          ] }),
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Max items" }),
            /* @__PURE__ */ e("input", { type: "number", min: 1, className: v, value: d.maxItems ?? "", onChange: (r) => o({ ...l, maxItems: r.target.value ? Number(r.target.value) : void 0 }), placeholder: "∞" })
          ] })
        ] }),
        !["object", "array", "select"].includes(d.itemType ?? "text") && /* @__PURE__ */ t(n, { children: [
          /* @__PURE__ */ e("label", { className: m, children: "Item placeholder" }),
          /* @__PURE__ */ e("input", { className: v, value: d.itemPlaceholder ?? "", onChange: (r) => o({ ...l, itemPlaceholder: r.target.value || void 0 }), placeholder: "Enter value…" })
        ] })
      ] }),
      /* @__PURE__ */ e(
        He,
        {
          condition: l.condition,
          onChange: (r) => o({ ...l, condition: r })
        }
      ),
      /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", pt: 1.5 }, children: [
        /* @__PURE__ */ e(n, { component: "button", onClick: () => h((r) => !r), sx: { background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 0.5, p: 0, mb: i ? 1.25 : 0 }, children: /* @__PURE__ */ t("span", { style: { ...R, margin: 0, color: i ? "#6366f1" : "#94a3b8" }, children: [
          i ? "▾" : "▸",
          " Optional settings"
        ] }) }),
        /* @__PURE__ */ e(Ie, { in: i, children: /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 1.25 }, children: [
          /* @__PURE__ */ t(n, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }, children: [
            /* @__PURE__ */ t(n, { children: [
              /* @__PURE__ */ e("label", { className: m, children: "Placeholder" }),
              /* @__PURE__ */ e("input", { className: v, value: l.placeholder ?? "", onChange: (r) => u("placeholder", r.target.value || void 0), placeholder: "Hint text…" })
            ] }),
            /* @__PURE__ */ t(n, { children: [
              /* @__PURE__ */ e("label", { className: m, children: "Helper text" }),
              /* @__PURE__ */ e("input", { className: v, value: l.helperText ?? "", onChange: (r) => u("helperText", r.target.value || void 0), placeholder: "Description…" })
            ] })
          ] }),
          /* @__PURE__ */ t(n, { children: [
            /* @__PURE__ */ e("label", { className: m, children: "Info tooltip" }),
            /* @__PURE__ */ e("input", { className: v, value: l.info ?? "", onChange: (r) => u("info", r.target.value || void 0), placeholder: "Shown in ℹ tooltip" })
          ] }),
          /* @__PURE__ */ t(n, { sx: { display: "flex", flexWrap: "wrap", gap: 1.5 }, children: [
            /* @__PURE__ */ e(E, { id: `${s}-req`, label: "Required", checked: !!l.required, onChange: (r) => u("required", r || void 0) }),
            /* @__PURE__ */ e(E, { id: `${s}-dis`, label: "Disabled", checked: !!l.disabled, onChange: (r) => u("disabled", r || void 0) }),
            /* @__PURE__ */ e(E, { id: `${s}-hid`, label: "Hidden", checked: !!l.hidden, onChange: (r) => u("hidden", r || void 0) }),
            /* @__PURE__ */ e(E, { id: `${s}-opt`, label: "Show optional", checked: !!l.showOptional, onChange: (r) => u("showOptional", r || void 0) }),
            /* @__PURE__ */ e(E, { id: `${s}-div`, label: "Divider after", checked: !!l.dividerAfter, onChange: (r) => u("dividerAfter", r || void 0) }),
            /* @__PURE__ */ e(E, { id: `${s}-frm`, label: "Formula input", checked: !!l.formula, onChange: (r) => u("formula", r || void 0) })
          ] })
        ] }) })
      ] })
    ] }),
    !a && /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", gap: 1, justifyContent: "flex-end", bgcolor: "#f8fafc", flexShrink: 0 }, children: [
      /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
      /* @__PURE__ */ t(n, { component: "button", onClick: p, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
        /* @__PURE__ */ e(G, { size: 15 }),
        " Save"
      ] })
    ] })
  ] });
}
const H = {
  text: "#0f172a",
  textMuted: "#64748b",
  borderInput: "rgba(0,0,0,0.23)",
  bg: "#ffffff"
}, qe = {
  md: "6px"
}, ve = {
  sm: 11,
  md: 13
}, ne = {
  width: "100%",
  fontSize: ve.md,
  fontFamily: "inherit",
  padding: "8px 12px",
  border: `1px solid ${H.borderInput}`,
  borderRadius: qe.md,
  outline: "none",
  background: H.bg,
  color: H.text,
  boxSizing: "border-box",
  transition: "border-color 0.15s, box-shadow 0.15s"
};
function ce() {
  return { type: "text", id: "", label: "", colSpan: 12 };
}
function Ye(l) {
  return l.type === "object" || l.type === "array" || l.type === "schema";
}
function Ge(l) {
  if (l.type === "object") return "Child Fields";
  if (l.type === "schema") return "Schema Fields";
  const o = l.itemType ?? "text";
  return o === "object" ? "Item Fields" : o === "select" ? "Item Options" : "Item Config";
}
function Je({ field: l, onChange: o }) {
  var a;
  const p = l, c = p.itemType ?? "text";
  if (l.type === "object")
    return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
      /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Define the fields nested inside this object. Each child field can itself be an object or array." }),
      /* @__PURE__ */ e(
        U,
        {
          value: l.children ?? [],
          onChange: (i) => o({ ...l, children: i }),
          label: "Child fields"
        }
      )
    ] });
  if (l.type === "schema")
    return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
      /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Define the fields inside this schema. When the form is filled, their values are collected into a single object as this field's value." }),
      /* @__PURE__ */ e(
        U,
        {
          value: l.children ?? [],
          onChange: (i) => o({ ...l, children: i }),
          label: "Schema fields"
        }
      )
    ] });
  if (l.type === "array") {
    if (c === "object")
      return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
        /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Define the fields for each item in the array. Each item will be an object with these fields." }),
        /* @__PURE__ */ e(
          U,
          {
            value: p.itemFields ?? [],
            onChange: (i) => o({ ...l, itemFields: i }),
            label: "Item fields"
          }
        )
      ] });
    if (c === "select") {
      const i = p.itemOptions ?? [];
      return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
        /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Options available in each select item." }),
        /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.5, mb: 0.75 }, children: i.map((h, s) => /* @__PURE__ */ t(n, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: [
          /* @__PURE__ */ e(
            "input",
            {
              style: { ...ne, flex: 1, padding: "6px 10px" },
              placeholder: "Label",
              value: h.label,
              onChange: (d) => {
                const x = i.map((y, N) => N === s ? { ...y, label: d.target.value } : y);
                o({ ...l, itemOptions: x });
              }
            }
          ),
          /* @__PURE__ */ e(
            "input",
            {
              style: { ...ne, flex: 1, padding: "6px 10px" },
              placeholder: "Value",
              value: h.value,
              onChange: (d) => {
                const x = i.map((y, N) => N === s ? { ...y, value: d.target.value } : y);
                o({ ...l, itemOptions: x });
              }
            }
          ),
          /* @__PURE__ */ e(
            n,
            {
              component: "button",
              onClick: () => o({ ...l, itemOptions: i.filter((d, x) => x !== s) }),
              sx: { background: "none", border: "none", cursor: "pointer", color: "#94a3b8", display: "flex", p: 0.25, "&:hover": { color: "#dc2626" } },
              children: "✕"
            }
          )
        ] }, s)) }),
        /* @__PURE__ */ e(
          n,
          {
            component: "button",
            onClick: () => o({ ...l, itemOptions: [...i, { label: "", value: "" }] }),
            sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "1px dashed #dee2e6", cursor: "pointer", fontSize: 11, fontWeight: 600, px: 1, py: 0.5, borderRadius: "6px", color: "#6366f1", width: "100%", justifyContent: "center", "&:hover": { borderColor: "#6366f1", bgcolor: "#f5f3ff" } },
            children: "+ Add option"
          }
        )
      ] });
    }
    if (c === "array") {
      const i = ((a = p.itemSchema) == null ? void 0 : a.itemType) ?? "text", h = [
        { value: "text", label: "Text" },
        { value: "number", label: "Number" },
        { value: "email", label: "Email" },
        { value: "url", label: "URL" },
        { value: "password", label: "Password" },
        { value: "select", label: "Select" },
        { value: "object", label: "Object" }
      ];
      return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
        /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#64748b", mb: 2 }, children: "Each item is itself an array. Configure the type of items inside the nested array." }),
        /* @__PURE__ */ e("label", { style: { fontSize: ve.sm, fontWeight: 600, color: H.textMuted, display: "block", marginBottom: 3 }, children: "Nested item type" }),
        /* @__PURE__ */ e(
          "select",
          {
            style: { ...ne, padding: "6px 10px", cursor: "pointer" },
            value: i,
            onChange: (s) => o({ ...l, itemSchema: { ...p.itemSchema ?? {}, itemType: s.target.value } }),
            children: h.map((s) => /* @__PURE__ */ e("option", { value: s.value, children: s.label }, s.value))
          }
        )
      ] });
    }
    return /* @__PURE__ */ e(n, { sx: { p: 2.5 }, children: /* @__PURE__ */ t(n, { sx: { border: "1.5px dashed #e2e8f0", borderRadius: "8px", py: 3, textAlign: "center" }, children: [
      /* @__PURE__ */ t(S, { sx: { fontSize: 13, color: "#94a3b8" }, children: [
        "No extra configuration needed for ",
        /* @__PURE__ */ e("strong", { children: c }),
        " items."
      ] }),
      /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#cbd5e1", mt: 0.5 }, children: "Item placeholder and labels are set in the previous step." })
    ] }) });
  }
  return null;
}
function Ke({ field: l }) {
  var h;
  const [o, p] = T({}), c = l.id ?? l.name ?? "preview", a = [
    { value: 3, label: "1/4" },
    { value: 4, label: "1/3" },
    { value: 6, label: "1/2" },
    { value: 8, label: "2/3" },
    { value: 12, label: "Full" }
  ], i = l.colSpan && l.colSpan < 12 ? ((h = a.find((s) => s.value === l.colSpan)) == null ? void 0 : h.label) ?? l.colSpan : "Full";
  return /* @__PURE__ */ t(n, { sx: { p: 2.5 }, children: [
    /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", mb: 2, px: 1.25, py: 0.75, bgcolor: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: "7px" }, children: [
      /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#15803d", fontWeight: 500, flex: 1 }, children: "Live preview — interact to test the field" }),
      /* @__PURE__ */ t(S, { sx: { fontSize: 11, color: "#64748b" }, children: [
        "Width: ",
        i
      ] })
    ] }),
    /* @__PURE__ */ e(
      ie,
      {
        schema: { layout: "flat", fields: [l] },
        initialValues: { [c]: l.type === "array" ? [] : l.type === "object" || l.type === "schema" ? {} : "" },
        onSubmit: () => {
        },
        conditionConfig: o,
        onConditionConfigChange: p
      }
    )
  ] });
}
function re({ open: l, initial: o, onSave: p, onClose: c, editMode: a = !1 }) {
  const [i, h] = T(1), [s, d] = T(() => o ?? ce());
  function x() {
    d(o ?? ce()), h(1);
  }
  const y = Ye(s), N = y ? 3 : 2, u = y ? ["Configure", Ge(s), "Preview"] : ["Configure", "Preview"], r = !!(s.id || s.name) && !!s.type;
  function b() {
    h((z) => Math.min(z + 1, N));
  }
  function f() {
    h((z) => Math.max(z - 1, 1));
  }
  function C() {
    p(s), c();
  }
  const g = i - 1, I = i === N, w = y && i === 3 || !y && i === 2;
  return /* @__PURE__ */ t(
    he,
    {
      open: l,
      onClose: c,
      TransitionProps: { onEnter: x },
      maxWidth: "sm",
      fullWidth: !0,
      PaperProps: { sx: { borderRadius: "12px", overflow: "hidden", display: "flex", flexDirection: "column", maxHeight: "90vh" } },
      children: [
        /* @__PURE__ */ t(n, { sx: { px: 2.5, pt: 1.75, pb: 0, borderBottom: "1px solid #e2e8f0", flexShrink: 0 }, children: [
          /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
            /* @__PURE__ */ e(S, { sx: { fontSize: 14, fontWeight: 700, color: "#0f172a", flex: 1 }, children: a ? "Edit Field" : "Add Field" }),
            /* @__PURE__ */ e(Y, { size: "small", onClick: c, sx: { color: "#94a3b8" }, children: /* @__PURE__ */ e(_, { size: 17 }) })
          ] }),
          /* @__PURE__ */ e(Fe, { activeStep: g, sx: { pb: 1.5 }, children: u.map((z, W) => /* @__PURE__ */ e(Oe, { completed: g > W, children: /* @__PURE__ */ e(Re, { children: z }) }, z)) })
        ] }),
        /* @__PURE__ */ t(n, { sx: { flex: 1, overflowY: "auto" }, children: [
          i === 1 && /* @__PURE__ */ e(ge, { field: s, onChange: d, onSave: b, onCancel: c, noFooter: !0 }),
          i === 2 && y && /* @__PURE__ */ e(Je, { field: s, onChange: d }),
          w && /* @__PURE__ */ e(Ke, { field: s })
        ] }),
        /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", alignItems: "center", gap: 1, flexShrink: 0, bgcolor: "#f8fafc" }, children: [
          i > 1 && /* @__PURE__ */ t(n, { component: "button", onClick: f, sx: { display: "flex", alignItems: "center", gap: 0.5, background: "none", border: "none", cursor: "pointer", fontSize: 13, fontWeight: 500, color: "#6c757d", px: 0, "&:hover": { color: "#0f172a" } }, children: [
            /* @__PURE__ */ e(fe, { size: 14 }),
            " Back"
          ] }),
          /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
          /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
          I ? /* @__PURE__ */ t(n, { component: "button", onClick: C, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
            /* @__PURE__ */ e(G, { size: 15 }),
            " ",
            a ? "Save changes" : "Add field"
          ] }) : /* @__PURE__ */ e(n, { component: "button", onClick: b, disabled: !r, sx: { border: "none", cursor: r ? "pointer" : "not-allowed", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: r ? "#6366f1" : "#c7d2fe", color: "#fff", "&:hover": { bgcolor: r ? "#4f46e5" : "#c7d2fe" } }, children: "Next →" })
        ] })
      ]
    }
  );
}
function Xe({ field: l, index: o, total: p, onEdit: c, onDelete: a, onMoveUp: i, onMoveDown: h }) {
  const s = l.label || l.id || l.name || "Untitled", d = l.id ?? l.name ?? "";
  return /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", gap: 1, px: 1.5, py: 1, border: "1px solid #e2e8f0", borderRadius: "8px", bgcolor: "#fff" }, children: [
    /* @__PURE__ */ t(n, { sx: { display: "flex", flexDirection: "column", gap: 0.25, color: "#cbd5e1" }, children: [
      /* @__PURE__ */ e(n, { component: "button", onClick: i, disabled: o === 0, sx: { background: "none", border: "none", p: 0, cursor: o === 0 ? "default" : "pointer", color: o === 0 ? "#e2e8f0" : "#94a3b8", lineHeight: 1, fontSize: 10, "&:hover": { color: o === 0 ? "#e2e8f0" : "#475569" } }, children: "▲" }),
      /* @__PURE__ */ e(n, { component: "button", onClick: h, disabled: o === p - 1, sx: { background: "none", border: "none", p: 0, cursor: o === p - 1 ? "default" : "pointer", color: o === p - 1 ? "#e2e8f0" : "#94a3b8", lineHeight: 1, fontSize: 10, "&:hover": { color: o === p - 1 ? "#e2e8f0" : "#475569" } }, children: "▼" })
    ] }),
    /* @__PURE__ */ e(n, { sx: { fontSize: 10, fontWeight: 700, px: 0.75, py: 0.2, borderRadius: "4px", bgcolor: "#eef2ff", color: "#6366f1", flexShrink: 0 }, children: l.type }),
    /* @__PURE__ */ t(n, { sx: { flex: 1, minWidth: 0 }, children: [
      /* @__PURE__ */ t(S, { sx: { fontSize: 13, fontWeight: 600, color: "#0f172a", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
        s,
        l.required && /* @__PURE__ */ e(n, { component: "span", sx: { color: "#dc3545", ml: 0.25 }, children: "*" })
      ] }),
      /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#94a3b8", fontFamily: "monospace" }, children: d })
    ] }),
    /* @__PURE__ */ e(D, { title: "Edit field", placement: "top", children: /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: "6px", p: 0, color: "#94a3b8", "&:hover": { bgcolor: "#f1f5f9", color: "#475569" } }, children: /* @__PURE__ */ e(Ee, { size: 14 }) }) }),
    /* @__PURE__ */ e(D, { title: "Remove field", placement: "top", children: /* @__PURE__ */ e(n, { component: "button", onClick: a, sx: { background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: "6px", p: 0, color: "#94a3b8", "&:hover": { bgcolor: "#fee2e2", color: "#dc2626" } }, children: /* @__PURE__ */ e(Pe, { size: 16 }) }) })
  ] });
}
function Ze({ open: l, value: o, onSave: p, onClose: c }) {
  const [a, i] = T(o), [h, s] = T(null);
  function d() {
    i(o), s(null);
  }
  function x(b) {
    i((f) => f.filter((C, g) => g !== b));
  }
  function y(b, f) {
    i((C) => {
      const g = [...C], I = b + f;
      return I < 0 || I >= g.length ? C : ([g[b], g[I]] = [g[I], g[b]], g);
    });
  }
  function N(b) {
    h !== null && (i((f) => {
      const C = [...f];
      return C[h] = b, C;
    }), s(null));
  }
  function u() {
    p(a), c();
  }
  const r = JSON.stringify(a) !== JSON.stringify(o);
  return /* @__PURE__ */ t(q, { children: [
    /* @__PURE__ */ t(
      he,
      {
        open: l,
        onClose: c,
        TransitionProps: { onEnter: d },
        maxWidth: "sm",
        fullWidth: !0,
        PaperProps: { sx: { borderRadius: "12px", overflow: "hidden", display: "flex", flexDirection: "column", maxHeight: "85vh" } },
        children: [
          /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", px: 2.5, py: 1.75, borderBottom: "1px solid #e2e8f0", flexShrink: 0 }, children: [
            /* @__PURE__ */ t(n, { sx: { flex: 1 }, children: [
              /* @__PURE__ */ e(S, { sx: { fontSize: 14, fontWeight: 700, color: "#0f172a" }, children: "Edit Schema" }),
              /* @__PURE__ */ t(S, { sx: { fontSize: 11, color: "#94a3b8" }, children: [
                a.length,
                " field",
                a.length !== 1 ? "s" : "",
                " defined"
              ] })
            ] }),
            /* @__PURE__ */ e(Y, { size: "small", onClick: c, sx: { color: "#94a3b8" }, children: /* @__PURE__ */ e(_, { size: 17 }) })
          ] }),
          /* @__PURE__ */ e(n, { sx: { flex: 1, overflowY: "auto", p: 2.5 }, children: a.length === 0 ? /* @__PURE__ */ e(n, { sx: { border: "1.5px dashed rgba(0,0,0,0.12)", borderRadius: "8px", py: 4, textAlign: "center" }, children: /* @__PURE__ */ e(S, { sx: { fontSize: 13, color: "#94a3b8" }, children: "No fields defined yet" }) }) : /* @__PURE__ */ e(n, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: a.map((b, f) => /* @__PURE__ */ e(
            Xe,
            {
              field: b,
              index: f,
              total: a.length,
              onEdit: () => s(f),
              onDelete: () => x(f),
              onMoveUp: () => y(f, -1),
              onMoveDown: () => y(f, 1)
            },
            `${b.id ?? b.name}-${f}`
          )) }) }),
          /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", alignItems: "center", gap: 1, flexShrink: 0, bgcolor: "#f8fafc" }, children: [
            r ? /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#f59e0b", fontWeight: 500, flex: 1 }, children: "Unsaved changes" }) : /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
            /* @__PURE__ */ e(n, { component: "button", onClick: c, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
            /* @__PURE__ */ t(n, { component: "button", onClick: u, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
              /* @__PURE__ */ e(G, { size: 15 }),
              " Done"
            ] })
          ] })
        ]
      }
    ),
    h !== null && /* @__PURE__ */ e(
      re,
      {
        open: h !== null,
        initial: a[h],
        onSave: N,
        onClose: () => s(null),
        editMode: !0
      }
    )
  ] });
}
function ye(l) {
  const o = {};
  for (const p of l) {
    const c = p.id ?? p.name ?? "";
    c && (p.type === "array" ? o[c] = [] : p.type === "object" || p.type === "schema" ? o[c] = ye(p.children ?? []) : o[c] = "");
  }
  return o;
}
function U({
  value: l,
  onChange: o,
  suggestions: p,
  label: c = "Fields",
  onPayload: a,
  validate: i = !0,
  onValidityChange: h,
  variableGroups: s,
  initialValues: d,
  initialFormulaConfig: x,
  initialConditionConfig: y
}) {
  const [N, u] = T(!1), [r, b] = T(!1), [f, C] = T(null), [g, I] = T(x ?? {}), [w, z] = T(y ?? {}), W = M(d ?? {}), j = P(() => ye(l), [l]), K = P(
    () => d && Object.keys(d).length > 0 ? { ...j, ...d } : j,
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [j, d]
  ), L = P(
    () => i ? pe(l) : void 0,
    [i, l]
  );
  de(() => {
    a && a({
      schema: l,
      formulaConfig: g,
      conditionConfig: w,
      conditionExpressions: se(w),
      values: W.current,
      evaluationPayload: oe({ values: W.current, conditionConfig: w })
    });
  }, [w, g, l]);
  const X = te((F) => {
    W.current = F, a && a({
      schema: l,
      formulaConfig: g,
      conditionConfig: w,
      conditionExpressions: se(w),
      values: F,
      evaluationPayload: oe({ values: F, conditionConfig: w })
    });
  }, [l, g, w, a]);
  function $(F) {
    o([...l, F]);
  }
  function Z(F) {
    if (!f) return;
    const { containerFieldId: V, tabId: Q } = f, ee = l.map((O) => {
      if ((O.id ?? O.name) !== V) return O;
      const le = O.tabs ?? [];
      return {
        ...O,
        tabs: le.map(
          (A) => A.id === Q ? { ...A, fields: [...A.fields ?? [], F] } : A
        )
      };
    });
    o(ee), C(null);
  }
  function k(F, V, Q) {
    const ee = l.map((O) => {
      if ((O.id ?? O.name) !== F) return O;
      const le = O.tabs ?? [];
      return {
        ...O,
        tabs: le.map(
          (A) => A.id === V ? { ...A, fields: (A.fields ?? []).filter((el, Se) => Se !== Q) } : A
        )
      };
    });
    o(ee);
  }
  const Ce = P(() => ({
    openAddFieldDialog: (F, V) => C({ containerFieldId: F, tabId: V }),
    removeFieldFromTab: k
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }), [l, o]), ae = /* @__PURE__ */ t("div", { className: "schema-builder-root", children: [
    l.length > 0 && /* @__PURE__ */ e("div", { className: "schema-builder-header", children: /* @__PURE__ */ t("div", { className: "schema-builder-actions", children: [
      /* @__PURE__ */ e(D, { title: "Edit schema", placement: "top", children: /* @__PURE__ */ t(
        "button",
        {
          className: "sb-btn sb-btn-outline",
          onClick: () => b(!0),
          children: [
            /* @__PURE__ */ e(be, { size: 13 }),
            " Edit Schema"
          ]
        }
      ) }),
      /* @__PURE__ */ e(D, { title: "Add a new field", placement: "top", children: /* @__PURE__ */ t(
        "button",
        {
          className: "sb-btn sb-btn-primary",
          onClick: () => u(!0),
          children: [
            /* @__PURE__ */ e(J, { size: 14 }),
            " Add Field"
          ]
        }
      ) })
    ] }) }),
    l.length > 0 ? /* @__PURE__ */ e(ze.Provider, { value: Ce, children: /* @__PURE__ */ e(
      ie,
      {
        schema: { layout: "flat", fields: l },
        initialValues: K,
        onSubmit: () => {
        },
        validationSchema: L,
        onValidityChange: h,
        onValuesChange: a ? X : void 0,
        formulaConfig: g,
        onFormulaConfigChange: I,
        conditionConfig: w,
        onConditionConfigChange: z
      }
    ) }) : /* @__PURE__ */ t("div", { className: "schema-builder-empty-state", children: [
      /* @__PURE__ */ e(_e, { size: 40, className: "schema-builder-empty-icon" }),
      /* @__PURE__ */ e("p", { className: "schema-builder-empty-title", children: "Tell us what fields should be in the list, and assign values to them." }),
      /* @__PURE__ */ e("div", { className: "schema-builder-empty-actions", children: /* @__PURE__ */ e(
        "button",
        {
          className: "btn",
          onClick: () => u(!0),
          children: "Add field"
        }
      ) })
    ] }),
    /* @__PURE__ */ e(
      re,
      {
        open: N,
        onSave: $,
        onClose: () => u(!1)
      }
    ),
    /* @__PURE__ */ e(
      Ze,
      {
        open: r,
        value: l,
        onSave: o,
        onClose: () => b(!1)
      }
    ),
    /* @__PURE__ */ e(
      re,
      {
        open: !!f,
        onSave: Z,
        onClose: () => C(null)
      }
    )
  ] });
  return s ? /* @__PURE__ */ t(Te, { groups: s, children: [
    /* @__PURE__ */ e(we, { width: 260, mode: "popover" }),
    ae
  ] }) : ae;
}
function Qe({ fields: l, onOpen: o }) {
  return /* @__PURE__ */ t(n, { sx: { border: "1px solid #e2e8f0", borderRadius: "8px", bgcolor: "#fff", overflow: "hidden" }, children: [
    l.length > 0 ? /* @__PURE__ */ e(n, { sx: { px: 1.5, py: 1.25, display: "flex", flexWrap: "wrap", gap: 0.5 }, children: l.map((p, c) => {
      const a = p.id ?? p.name ?? "";
      return /* @__PURE__ */ e(D, { title: `${p.type} · ${a}`, placement: "top", children: /* @__PURE__ */ e(
        Ae,
        {
          label: p.label || a,
          size: "small",
          sx: { fontSize: 11, fontWeight: 500, height: 22, bgcolor: "#f1f5f9", color: "#334155", border: "1px solid #e2e8f0", "& .MuiChip-label": { px: 1 } }
        }
      ) }, c);
    }) }) : /* @__PURE__ */ e(n, { sx: { px: 1.5, py: 1.5 }, children: /* @__PURE__ */ e(S, { sx: { fontSize: 12, color: "#94a3b8" }, children: "No fields defined yet" }) }),
    /* @__PURE__ */ e(De, { sx: { borderColor: "#f1f5f9" } }),
    /* @__PURE__ */ t(n, { onClick: o, sx: { display: "flex", alignItems: "center", gap: 0.75, px: 1.5, py: 1, cursor: "pointer", "&:hover": { bgcolor: "#f8fafc" }, transition: "background 0.12s" }, children: [
      l.length === 0 ? /* @__PURE__ */ e(J, { size: 14, color: "#6366f1" }) : /* @__PURE__ */ e(be, { size: 13, color: "#6366f1" }),
      /* @__PURE__ */ e(S, { sx: { fontSize: 12, fontWeight: 600, color: "#6366f1", flex: 1 }, children: l.length === 0 ? "Add fields" : "Configure fields" }),
      /* @__PURE__ */ e(Me, { size: 13, color: "#94a3b8" })
    ] })
  ] });
}
function cl({
  value: l,
  onChange: o,
  suggestions: p,
  onPayload: c,
  onDone: a,
  validate: i,
  onValidityChange: h,
  label: s = "Fields",
  drawerTitle: d = "Configure Fields",
  drawerWidth: x = 580
}) {
  const [y, N] = T(!1), [u, r] = T({ type: "list" }), [b, f] = T(l), C = M(null), g = M(void 0), I = M(void 0), w = M(void 0), [z, W] = T(null);
  function j() {
    f(l), r({ type: "list" }), N(!0);
  }
  function K() {
    const k = C.current;
    k && (g.current = k.values, I.current = k.formulaConfig, w.current = k.conditionConfig), o(b), N(!1), a == null || a(b, k);
  }
  function L() {
    const k = C.current;
    k && (g.current = k.values, I.current = k.formulaConfig, w.current = k.conditionConfig), f(l), N(!1);
  }
  function X() {
    if (u.type !== "edit" || !z) return;
    const k = [...b];
    k[u.index] = z, f(k), r({ type: "list" }), W(null);
  }
  function $() {
    r({ type: "list" }), W(null);
  }
  const Z = JSON.stringify(b) !== JSON.stringify(l);
  return u.type === "edit" && b[u.index], /* @__PURE__ */ t(q, { children: [
    /* @__PURE__ */ t(n, { children: [
      /* @__PURE__ */ e(S, { sx: { fontSize: 12, fontWeight: 700, color: "#64748b", textTransform: "uppercase", letterSpacing: 0.5, mb: 0.75 }, children: s }),
      /* @__PURE__ */ e(Qe, { fields: l, onOpen: j })
    ] }),
    /* @__PURE__ */ t(
      We,
      {
        anchor: "right",
        open: y,
        onClose: L,
        PaperProps: { sx: { width: x, display: "flex", flexDirection: "column", boxShadow: "-4px 0 24px rgba(0,0,0,0.12)", overflow: "hidden" } },
        children: [
          /* @__PURE__ */ t(n, { sx: { display: "flex", alignItems: "center", px: 2, py: 1.5, borderBottom: "1px solid #e2e8f0", flexShrink: 0, gap: 1 }, children: [
            u.type === "edit" && /* @__PURE__ */ e(D, { title: "Back to fields", placement: "bottom", children: /* @__PURE__ */ e(Y, { size: "small", onClick: $, sx: { color: "#64748b" }, children: /* @__PURE__ */ e(fe, { size: 17 }) }) }),
            /* @__PURE__ */ t(n, { sx: { flex: 1 }, children: [
              /* @__PURE__ */ e(S, { sx: { fontSize: 14, fontWeight: 700, color: "#0f172a" }, children: u.type === "edit" ? (z == null ? void 0 : z.label) || (z == null ? void 0 : z.id) || "Edit field" : d }),
              /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#94a3b8" }, children: u.type === "edit" ? "Configure field properties" : `${b.length} field${b.length !== 1 ? "s" : ""} defined` })
            ] }),
            u.type === "list" && /* @__PURE__ */ e(D, { title: "Close", placement: "bottom", children: /* @__PURE__ */ e(Y, { size: "small", onClick: L, sx: { color: "#94a3b8" }, children: /* @__PURE__ */ e(_, { size: 17 }) }) })
          ] }),
          u.type === "list" && /* @__PURE__ */ t(q, { children: [
            /* @__PURE__ */ e(n, { sx: { flex: 1, overflowY: "auto", p: 2.5 }, children: /* @__PURE__ */ e(
              U,
              {
                value: b,
                onChange: f,
                suggestions: p,
                onPayload: (k) => {
                  C.current = k, g.current = k.values, I.current = k.formulaConfig, w.current = k.conditionConfig, c == null || c(k);
                },
                validate: i,
                onValidityChange: h,
                label: s,
                initialValues: g.current,
                initialFormulaConfig: I.current,
                initialConditionConfig: w.current
              }
            ) }),
            /* @__PURE__ */ t(n, { sx: { borderTop: "1px solid #e2e8f0", px: 2.5, py: 1.5, display: "flex", alignItems: "center", gap: 1, flexShrink: 0, bgcolor: "#f8fafc" }, children: [
              Z ? /* @__PURE__ */ e(S, { sx: { fontSize: 11, color: "#f59e0b", fontWeight: 500, flex: 1 }, children: "Unsaved changes" }) : /* @__PURE__ */ e(n, { sx: { flex: 1 } }),
              /* @__PURE__ */ e(n, { component: "button", onClick: L, sx: { background: "none", border: "1px solid #dee2e6", cursor: "pointer", fontSize: 13, fontWeight: 500, px: 2, py: 0.75, borderRadius: "7px", color: "#6c757d", "&:hover": { bgcolor: "#f8f9fa" } }, children: "Cancel" }),
              /* @__PURE__ */ t(n, { component: "button", onClick: K, sx: { border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, px: 2.5, py: 0.75, borderRadius: "7px", bgcolor: "#6366f1", color: "#fff", display: "flex", alignItems: "center", gap: 0.75, "&:hover": { bgcolor: "#4f46e5" } }, children: [
                /* @__PURE__ */ e(G, { size: 15 }),
                " Done"
              ] })
            ] })
          ] }),
          u.type === "edit" && z && /* @__PURE__ */ e(
            ge,
            {
              field: z,
              onChange: W,
              onSave: X,
              onCancel: $
            }
          )
        ]
      }
    )
  ] });
}
export {
  je as F,
  U as S,
  cl as a,
  sl as u
};
//# sourceMappingURL=SchemaBuilderDrawer-BP7aZgFe.js.map
