"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Input } from "@open-mercato/ui/primitives/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@open-mercato/ui/primitives/select";
import { X } from "lucide-react";
import { getComparisonOperators, isValidFieldPath } from "./utils/conditionValidation.js";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function ConditionRow({ condition, onChange, onDelete, error }) {
  const t = useT();
  const operators = getComparisonOperators(t);
  const [useFieldComparison, setUseFieldComparison] = React.useState(!!condition.valueField);
  const handleFieldChange = (e) => {
    onChange({ ...condition, field: e.target.value });
  };
  const handleOperatorChange = (e) => {
    onChange({ ...condition, operator: e.target.value });
  };
  const handleValueChange = (e) => {
    const rawValue = e.target.value;
    let parsedValue = rawValue;
    if (rawValue.trim().startsWith("[") || rawValue.trim().startsWith("{")) {
      try {
        parsedValue = JSON.parse(rawValue);
      } catch {
        parsedValue = rawValue;
      }
    }
    onChange({ ...condition, value: parsedValue, valueField: void 0 });
  };
  const handleValueFieldChange = (e) => {
    onChange({ ...condition, valueField: e.target.value, value: null });
  };
  const toggleFieldComparison = () => {
    if (useFieldComparison) {
      onChange({ ...condition, valueField: void 0, value: null });
      setUseFieldComparison(false);
    } else {
      onChange({ ...condition, value: null, valueField: "" });
      setUseFieldComparison(true);
    }
  };
  const operatorNeedsValue = !["IS_EMPTY", "IS_NOT_EMPTY"].includes(condition.operator);
  const fieldError = condition.field && !isValidFieldPath(condition.field);
  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3 bg-muted rounded border border-border", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex-1 grid grid-cols-1 md:grid-cols-3 gap-2", children: [
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-foreground mb-1", children: t("business_rules.components.conditionRow.field") }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "text",
            value: condition.field || "",
            onChange: handleFieldChange,
            placeholder: t("business_rules.components.conditionRow.field.placeholder"),
            "aria-invalid": fieldError ? true : void 0
          }
        ),
        fieldError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600 mt-0.5", children: t("business_rules.components.conditionRow.field.invalidPath") })
      ] }),
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-foreground mb-1", children: t("business_rules.components.conditionRow.operator") }),
        /* @__PURE__ */ jsxs(
          Select,
          {
            value: condition.operator || "=",
            onValueChange: (value) => handleOperatorChange({ target: { value } }),
            children: [
              /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
              /* @__PURE__ */ jsx(SelectContent, { children: operators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
            ]
          }
        )
      ] }),
      operatorNeedsValue && /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
          /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-foreground", children: useFieldComparison ? t("business_rules.components.conditionRow.compareToField") : t("business_rules.components.conditionRow.value") }),
          /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              onClick: toggleFieldComparison,
              className: "text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
              title: t("business_rules.components.conditionRow.toggleFieldComparison"),
              children: useFieldComparison ? t("business_rules.components.conditionRow.useValue") : t("business_rules.components.conditionRow.useField")
            }
          )
        ] }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "text",
            value: useFieldComparison ? condition.valueField || "" : condition.value === null || condition.value === void 0 ? "" : typeof condition.value === "string" ? condition.value : JSON.stringify(condition.value),
            onChange: useFieldComparison ? handleValueFieldChange : handleValueChange,
            placeholder: useFieldComparison ? t("business_rules.components.conditionRow.field.comparisonPlaceholder") : t("business_rules.components.conditionRow.value.placeholder")
          }
        ),
        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: useFieldComparison ? t("business_rules.components.conditionRow.field.comparisonHelp") : t("business_rules.components.conditionRow.value.help") })
      ] })
    ] }),
    /* @__PURE__ */ jsx(
      "button",
      {
        type: "button",
        onClick: onDelete,
        className: "p-1.5 text-muted-foreground hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors",
        title: t("business_rules.components.conditionRow.deleteCondition"),
        children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
      }
    ),
    error && /* @__PURE__ */ jsx("div", { className: "col-span-full mt-2", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600", children: error }) })
  ] });
}
export {
  ConditionRow
};
//# sourceMappingURL=ConditionRow.js.map
