"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Button } from "@open-mercato/ui/primitives/button";
import { Input } from "@open-mercato/ui/primitives/input";
import { Label } from "@open-mercato/ui/primitives/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@open-mercato/ui/primitives/select";
import { Textarea } from "@open-mercato/ui/primitives/textarea";
import { Trash2, Plus, ChevronUp, ChevronDown } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
const STEP_TYPES = [
  { value: "START", label: "Start" },
  { value: "END", label: "End" },
  { value: "USER_TASK", label: "User Task" },
  { value: "AUTOMATED", label: "Automated" },
  { value: "PARALLEL_FORK", label: "Parallel Fork" },
  { value: "PARALLEL_JOIN", label: "Parallel Join" },
  { value: "SUB_WORKFLOW", label: "Sub-Workflow" },
  { value: "WAIT_FOR_SIGNAL", label: "Wait for Signal" },
  { value: "WAIT_FOR_TIMER", label: "Wait for Timer" }
];
function StepsEditor({ value = [], onChange, error }) {
  const t = useT();
  const addStep = () => {
    const newStep = {
      stepId: `step_${Date.now()}`,
      stepName: t("workflows.common.newStep"),
      stepType: "AUTOMATED",
      description: "",
      config: {}
    };
    onChange([...value, newStep]);
  };
  const updateStep = (index, field, fieldValue) => {
    const updated = [...value];
    updated[index] = { ...updated[index], [field]: fieldValue };
    onChange(updated);
  };
  const removeStep = (index) => {
    onChange(value.filter((_, i) => i !== index));
  };
  const moveStep = (index, direction) => {
    const newIndex = direction === "up" ? index - 1 : index + 1;
    if (newIndex < 0 || newIndex >= value.length) return;
    const updated = [...value];
    const temp = updated[index];
    updated[index] = updated[newIndex];
    updated[newIndex] = temp;
    onChange(updated);
  };
  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.form.descriptions.steps") }),
        error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 mt-1", children: error })
      ] }),
      /* @__PURE__ */ jsxs(Button, { type: "button", onClick: addStep, variant: "outline", size: "sm", className: "w-full sm:w-auto", children: [
        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
        t("workflows.form.addStep")
      ] })
    ] }),
    value.length === 0 && /* @__PURE__ */ jsx("div", { className: "p-6 text-center text-muted-foreground border rounded-md bg-muted", children: t("workflows.form.noSteps") }),
    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: value.map((step, index) => /* @__PURE__ */ jsx("div", { className: "p-4 border rounded-md bg-card shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex-1 grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: `step-${index}-id`, className: "text-xs", children: [
              t("workflows.steps.stepId"),
              " *"
            ] }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `step-${index}-id`,
                value: step.stepId,
                onChange: (e) => updateStep(index, "stepId", e.target.value),
                placeholder: "step_name",
                className: "mt-1"
              }
            )
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: `step-${index}-name`, className: "text-xs", children: [
              t("workflows.steps.stepName"),
              " *"
            ] }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `step-${index}-name`,
                value: step.stepName,
                onChange: (e) => updateStep(index, "stepName", e.target.value),
                placeholder: t("workflows.steps.stepName"),
                className: "mt-1"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 self-end sm:self-auto", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              type: "button",
              variant: "ghost",
              size: "sm",
              onClick: () => moveStep(index, "up"),
              disabled: index === 0,
              title: t("common.moveUp"),
              children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              type: "button",
              variant: "ghost",
              size: "sm",
              onClick: () => moveStep(index, "down"),
              disabled: index === value.length - 1,
              title: t("common.moveDown"),
              children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              type: "button",
              variant: "ghost",
              size: "sm",
              onClick: () => removeStep(index),
              title: t("common.delete"),
              children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-red-600" })
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs(Label, { htmlFor: `step-${index}-type`, className: "text-xs", children: [
            t("workflows.steps.stepType"),
            " *"
          ] }),
          /* @__PURE__ */ jsxs(
            Select,
            {
              value: step.stepType,
              onValueChange: (value2) => updateStep(index, "stepType", value2),
              children: [
                /* @__PURE__ */ jsx(SelectTrigger, { id: `step-${index}-type`, className: "mt-1", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
                /* @__PURE__ */ jsx(SelectContent, { children: STEP_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, children: t(`workflows.steps.types.${type.value}`) }, type.value)) })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs(Label, { htmlFor: `step-${index}-timeout`, className: "text-xs", children: [
            t("workflows.steps.timeout"),
            " (ms)"
          ] }),
          /* @__PURE__ */ jsx(
            Input,
            {
              id: `step-${index}-timeout`,
              type: "number",
              value: step.timeout || "",
              onChange: (e) => updateStep(index, "timeout", e.target.value ? parseInt(e.target.value) : void 0),
              placeholder: "30000",
              className: "mt-1"
            }
          )
        ] })
      ] }),
      step.stepType === "WAIT_FOR_TIMER" && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-[1fr_auto_1fr] gap-3 items-end", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: `step-${index}-duration`, className: "text-xs", children: t("workflows.activities.waitDuration") }),
          /* @__PURE__ */ jsx(
            Input,
            {
              id: `step-${index}-duration`,
              value: step.config?.duration || "",
              onChange: (e) => updateStep(index, "config", { ...step.config, duration: e.target.value, until: void 0 }),
              placeholder: t("workflows.activities.waitDurationPlaceholder"),
              className: "mt-1"
            }
          ),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: t("workflows.activities.waitDurationDescription") })
        ] }),
        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground pb-6", children: t("workflows.activities.waitOr") }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: `step-${index}-until`, className: "text-xs", children: t("workflows.activities.waitUntil") }),
          /* @__PURE__ */ jsx(
            Input,
            {
              id: `step-${index}-until`,
              type: "datetime-local",
              value: step.config?.until ? step.config.until.slice(0, 16) : "",
              onChange: (e) => updateStep(index, "config", { ...step.config, until: e.target.value ? new Date(e.target.value).toISOString() : void 0, duration: void 0 }),
              className: "mt-1"
            }
          ),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: t("workflows.activities.waitUntilDescription") })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs(Label, { htmlFor: `step-${index}-description`, className: "text-xs", children: [
          t("workflows.steps.singular"),
          " ",
          t("workflows.definitions.description")
        ] }),
        /* @__PURE__ */ jsx(
          Textarea,
          {
            id: `step-${index}-description`,
            value: step.description || "",
            onChange: (e) => updateStep(index, "description", e.target.value),
            placeholder: t("workflows.form.placeholders.description"),
            rows: 2,
            className: "mt-1"
          }
        )
      ] })
    ] }) }, index)) })
  ] });
}
export {
  StepsEditor
};
//# sourceMappingURL=StepsEditor.js.map
