"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { X, ChevronUp, ChevronDown } from "lucide-react";
import { Input } from "@open-mercato/ui/primitives/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@open-mercato/ui/primitives/select";
import { getActionTypeOptions, getRequiredConfigFields, getOptionalConfigFields } from "./utils/actionValidation.js";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function ActionRow({
  action,
  index,
  onChange,
  onDelete,
  onMoveUp,
  onMoveDown,
  canMoveUp,
  canMoveDown,
  error
}) {
  const t = useT();
  const actionTypes = getActionTypeOptions(t);
  const requiredFields = getRequiredConfigFields(action.type);
  const optionalFields = getOptionalConfigFields(action.type);
  const handleTypeChange = (e) => {
    onChange(index, {
      ...action,
      type: e.target.value,
      config: {}
      // Reset config when type changes
    });
  };
  const handleConfigChange = (field, value) => {
    onChange(index, {
      ...action,
      config: {
        ...action.config || {},
        [field]: value
      }
    });
  };
  const renderConfigField = (field, required) => {
    const value = action.config?.[field] || "";
    if (field === "recipients" && action.type === "NOTIFY") {
      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2 items-start", children: [
        /* @__PURE__ */ jsxs("label", { className: "text-xs font-medium text-foreground col-span-1", children: [
          t("business_rules.components.actionRow.config.recipients"),
          " ",
          required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: t("business_rules.components.actionRow.actionType.required") })
        ] }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "text",
            value,
            onChange: (e) => handleConfigChange(field, e.target.value.split(",").map((s) => s.trim())),
            placeholder: t("business_rules.components.actionRow.config.recipients.placeholder"),
            className: "col-span-3"
          }
        ),
        /* @__PURE__ */ jsx("div", { className: "col-span-4 col-start-2", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("business_rules.components.actionRow.config.recipients.help") }) })
      ] }, field);
    }
    if (field === "level" && action.type === "LOG") {
      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2 items-center", children: [
        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground col-span-1", children: t("business_rules.components.actionRow.config.level") }),
        /* @__PURE__ */ jsxs(
          Select,
          {
            value: value || "info",
            onValueChange: (next) => handleConfigChange(field, next),
            children: [
              /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "col-span-3", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
              /* @__PURE__ */ jsxs(SelectContent, { children: [
                /* @__PURE__ */ jsx(SelectItem, { value: "info", children: t("business_rules.components.actionRow.config.level.info") }),
                /* @__PURE__ */ jsx(SelectItem, { value: "warn", children: t("business_rules.components.actionRow.config.level.warn") }),
                /* @__PURE__ */ jsx(SelectItem, { value: "error", children: t("business_rules.components.actionRow.config.level.error") }),
                /* @__PURE__ */ jsx(SelectItem, { value: "debug", children: t("business_rules.components.actionRow.config.level.debug") })
              ] })
            ]
          }
        )
      ] }, field);
    }
    if (field === "method" && action.type === "CALL_WEBHOOK") {
      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2 items-center", children: [
        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground col-span-1", children: t("business_rules.components.actionRow.config.method") }),
        /* @__PURE__ */ jsxs(
          Select,
          {
            value: value || "POST",
            onValueChange: (next) => handleConfigChange(field, next),
            children: [
              /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "col-span-3", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
              /* @__PURE__ */ jsxs(SelectContent, { children: [
                /* @__PURE__ */ jsx(SelectItem, { value: "GET", children: "GET" }),
                /* @__PURE__ */ jsx(SelectItem, { value: "POST", children: "POST" }),
                /* @__PURE__ */ jsx(SelectItem, { value: "PUT", children: "PUT" }),
                /* @__PURE__ */ jsx(SelectItem, { value: "PATCH", children: "PATCH" }),
                /* @__PURE__ */ jsx(SelectItem, { value: "DELETE", children: "DELETE" })
              ] })
            ]
          }
        )
      ] }, field);
    }
    if (field === "message") {
      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2 items-start", children: [
        /* @__PURE__ */ jsxs("label", { className: "text-xs font-medium text-foreground col-span-1", children: [
          t("business_rules.components.actionRow.config.message"),
          " ",
          required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: t("business_rules.components.actionRow.actionType.required") })
        ] }),
        /* @__PURE__ */ jsx(
          "textarea",
          {
            value,
            onChange: (e) => handleConfigChange(field, e.target.value),
            placeholder: t("business_rules.components.actionRow.config.message.placeholder"),
            rows: 2,
            className: "col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          }
        ),
        /* @__PURE__ */ jsx("div", { className: "col-span-4 col-start-2", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("business_rules.components.actionRow.config.message.help") }) })
      ] }, field);
    }
    return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2 items-center", children: [
      /* @__PURE__ */ jsxs("label", { className: "text-xs font-medium text-foreground col-span-1", children: [
        field,
        " ",
        required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: t("business_rules.components.actionRow.actionType.required") })
      ] }),
      /* @__PURE__ */ jsx(
        Input,
        {
          type: "text",
          value,
          onChange: (e) => handleConfigChange(field, e.target.value),
          placeholder: t("business_rules.components.actionRow.config.field.placeholder", { field }),
          className: "col-span-3"
        }
      )
    ] }, 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 space-y-2", children: [
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2 items-center", children: [
        /* @__PURE__ */ jsxs("label", { className: "text-xs font-medium text-foreground col-span-1", children: [
          t("business_rules.components.actionRow.actionType"),
          " ",
          /* @__PURE__ */ jsx("span", { className: "text-red-500", children: t("business_rules.components.actionRow.actionType.required") })
        ] }),
        /* @__PURE__ */ jsxs(
          Select,
          {
            value: action.type || void 0,
            onValueChange: (value) => handleTypeChange({ target: { value } }),
            children: [
              /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "col-span-3 font-medium", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("business_rules.components.actionRow.actionType.placeholder") }) }),
              /* @__PURE__ */ jsx(SelectContent, { children: actionTypes.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, children: type.label }, type.value)) })
            ]
          }
        )
      ] }),
      action.type && /* @__PURE__ */ jsxs(Fragment, { children: [
        requiredFields.map((field) => renderConfigField(field, true)),
        optionalFields.map((field) => renderConfigField(field, false))
      ] }),
      error && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600", children: error }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
      onMoveUp && /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          onClick: () => onMoveUp(index),
          disabled: !canMoveUp,
          className: "p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
          title: t("business_rules.components.actionRow.moveUp"),
          children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4" })
        }
      ),
      onMoveDown && /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          onClick: () => onMoveDown(index),
          disabled: !canMoveDown,
          className: "p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
          title: t("business_rules.components.actionRow.moveDown"),
          children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          onClick: () => onDelete(index),
          className: "p-1 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.actionRow.delete"),
          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
        }
      )
    ] })
  ] });
}
export {
  ActionRow
};
//# sourceMappingURL=ActionRow.js.map
