"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Plus, X } from "lucide-react";
import { Button } from "@open-mercato/ui/primitives/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@open-mercato/ui/primitives/select";
import { ConditionRow } from "./ConditionRow.js";
import { isGroupCondition, getLogicalOperators } from "./utils/conditionValidation.js";
import { useT } from "@open-mercato/shared/lib/i18n/context";
const DEPTH_COLORS = [
  "border-blue-300 bg-blue-50 dark:border-blue-700 dark:bg-blue-950/50",
  "border-green-300 bg-green-50 dark:border-green-700 dark:bg-green-950/50",
  "border-purple-300 bg-purple-50 dark:border-purple-700 dark:bg-purple-950/50",
  "border-orange-300 bg-orange-50 dark:border-orange-700 dark:bg-orange-950/50",
  "border-pink-300 bg-pink-50 dark:border-pink-700 dark:bg-pink-950/50"
];
function ConditionGroup({ group, onChange, onDelete, depth, maxDepth = 5, entityType }) {
  const t = useT();
  const logicalOperators = getLogicalOperators(t);
  const colorClass = DEPTH_COLORS[depth % DEPTH_COLORS.length];
  const handleOperatorChange = (e) => {
    onChange({
      ...group,
      operator: e.target.value
    });
  };
  const handleRuleChange = (index, updatedRule) => {
    const newRules = [...group.rules];
    newRules[index] = updatedRule;
    onChange({
      ...group,
      rules: newRules
    });
  };
  const handleDeleteRule = (index) => {
    const newRules = group.rules.filter((_, i) => i !== index);
    if (newRules.length === 0) {
      onDelete?.();
    } else {
      onChange({
        ...group,
        rules: newRules
      });
    }
  };
  const addSimpleCondition = () => {
    const newCondition = {
      field: "",
      operator: "=",
      value: null
    };
    onChange({
      ...group,
      rules: [...group.rules, newCondition]
    });
  };
  const addConditionGroup = () => {
    if (depth >= maxDepth) {
      alert(t("business_rules.components.conditionGroup.maxDepthReached", { maxDepth }));
      return;
    }
    const newGroup = {
      operator: "AND",
      rules: [
        {
          field: "",
          operator: "=",
          value: null
        }
      ]
    };
    onChange({
      ...group,
      rules: [...group.rules, newGroup]
    });
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: `p-3 rounded border-2 ${colorClass}`,
      style: { marginLeft: depth > 0 ? `${depth * 16}px` : "0" },
      children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t("business_rules.components.conditionGroup.group", { depth: depth + 1 }) }),
          /* @__PURE__ */ jsxs(
            Select,
            {
              value: group.operator,
              onValueChange: (value) => handleOperatorChange({ target: { value } }),
              children: [
                /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-auto min-w-[6rem] font-semibold", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
                /* @__PURE__ */ jsx(SelectContent, { children: logicalOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
              ]
            }
          ),
          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
            "(",
            t("business_rules.components.conditionGroup.ruleCount", { count: group.rules.length }),
            ")"
          ] }),
          onDelete && /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              onClick: onDelete,
              className: "ml-auto p-1 text-muted-foreground hover:text-status-error-text hover:bg-status-error-bg rounded transition-colors",
              title: t("business_rules.components.conditionGroup.deleteGroup"),
              children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: group.rules.map((rule, index) => /* @__PURE__ */ jsx("div", { children: isGroupCondition(rule) ? (
          // Recursive: Nested Group
          /* @__PURE__ */ jsx(
            ConditionGroup,
            {
              group: rule,
              onChange: (updatedGroup) => handleRuleChange(index, updatedGroup),
              onDelete: () => handleDeleteRule(index),
              depth: depth + 1,
              maxDepth,
              entityType
            }
          )
        ) : (
          // Base Case: Simple Condition
          /* @__PURE__ */ jsx(
            ConditionRow,
            {
              condition: rule,
              onChange: (updatedCondition) => handleRuleChange(index, updatedCondition),
              onDelete: () => handleDeleteRule(index),
              entityType
            }
          )
        ) }, index)) }),
        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3", children: [
          /* @__PURE__ */ jsxs(
            Button,
            {
              type: "button",
              onClick: addSimpleCondition,
              variant: "outline",
              size: "sm",
              className: "text-xs",
              children: [
                /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 mr-1" }),
                t("business_rules.components.conditionGroup.addCondition")
              ]
            }
          ),
          depth < maxDepth && /* @__PURE__ */ jsxs(
            Button,
            {
              type: "button",
              onClick: addConditionGroup,
              variant: "outline",
              size: "sm",
              className: "text-xs",
              children: [
                /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 mr-1" }),
                t("business_rules.components.conditionGroup.addGroup", { depth: depth + 2 })
              ]
            }
          )
        ] })
      ]
    }
  );
}
export {
  ConditionGroup
};
//# sourceMappingURL=ConditionGroup.js.map
