"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Button } from "@open-mercato/ui/primitives/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle
} from "@open-mercato/ui/primitives/dialog";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Save, MoreVertical, FileText, Trash2, CircleQuestionMark, Play } from "lucide-react";
import { NODE_TYPE_ICONS, NODE_TYPE_LABELS } from "../../lib/node-type-icons.js";
import { WorkflowGraph } from "../WorkflowGraph.js";
import { MobileMetadataSheet } from "./MobileMetadataSheet.js";
const NODE_TYPES = ["start", "userTask", "automated", "waitForSignal", "subWorkflow", "end"];
function MobileVisualEditor({
  definitionId,
  isSaving,
  nodes,
  edges,
  onNodesChange,
  onEdgesChange,
  onNodeClick,
  onEdgeClick,
  onConnect,
  onAddNode,
  onSave,
  onValidate,
  onTest,
  onLoadExample,
  onClear,
  metadata,
  metadataHandlers
}) {
  const t = useT();
  const [showMetadata, setShowMetadata] = useState(false);
  const [showMoreActions, setShowMoreActions] = useState(false);
  const { workflowName } = metadata;
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
    /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-between gap-1 border-b border-border bg-background px-3 py-2", children: [
      /* @__PURE__ */ jsx("h1", { className: "truncate text-sm font-semibold", children: definitionId ? workflowName || t("workflows.definitions.singular") : t("workflows.backend.definitions.visual_editor.title") }),
      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: "outline",
            size: "sm",
            onClick: () => setShowMetadata(true),
            className: "h-8 px-2",
            "aria-label": t("workflows.mobile.metadata", "Metadata"),
            children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: "outline",
            size: "sm",
            onClick: onValidate,
            disabled: isSaving,
            className: "h-8 px-2",
            "aria-label": t("workflows.mobile.validate"),
            children: /* @__PURE__ */ jsx(CircleQuestionMark, { className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ jsxs(
          Button,
          {
            size: "sm",
            onClick: onSave,
            disabled: isSaving,
            className: "h-8 px-2",
            "aria-label": isSaving ? t("workflows.mobile.saving") : t("workflows.mobile.save"),
            children: [
              /* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }),
              /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs", children: isSaving ? "..." : definitionId ? t("workflows.common.update") : t("workflows.common.save") })
            ]
          }
        ),
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "sm",
            className: "h-8 w-8 p-0",
            onClick: () => setShowMoreActions(true),
            "aria-label": t("workflows.mobile.moreActions", "More"),
            children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border bg-background px-3 py-2", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto pb-0.5", children: NODE_TYPES.map((nodeType) => {
      const Icon = NODE_TYPE_ICONS[nodeType];
      return /* @__PURE__ */ jsxs(
        "button",
        {
          onClick: () => onAddNode(nodeType),
          className: "flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/50",
          children: [
            /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
            /* @__PURE__ */ jsx("span", { children: NODE_TYPE_LABELS[nodeType].title })
          ]
        },
        nodeType
      );
    }) }) }),
    /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
      /* @__PURE__ */ jsx(
        WorkflowGraph,
        {
          initialNodes: nodes,
          initialEdges: edges,
          onNodesChange,
          onEdgesChange,
          onNodeClick,
          onEdgeClick,
          onConnect,
          editable: true,
          height: "100%"
        }
      ),
      nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center px-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
        /* @__PURE__ */ jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: t("workflows.mobile.startBuilding", "Start Building") }),
        /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm text-muted-foreground", children: t("workflows.mobile.startBuildingHint", "Tap a step type above to add it") }),
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: onLoadExample,
            className: "pointer-events-auto text-sm text-primary hover:underline",
            children: t("workflows.mobile.loadExample", "Load an example workflow")
          }
        )
      ] }) })
    ] }),
    /* @__PURE__ */ jsx(Dialog, { open: showMoreActions, onOpenChange: setShowMoreActions, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("workflows.mobile.moreActions", "More Actions") }) }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => {
              onLoadExample();
              setShowMoreActions(false);
            },
            className: "flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted",
            children: t("workflows.mobile.loadExample", "Load Example")
          }
        ),
        /* @__PURE__ */ jsxs(
          "button",
          {
            onClick: () => {
              onTest();
              setShowMoreActions(false);
            },
            disabled: isSaving,
            className: "flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted disabled:opacity-50",
            children: [
              /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
              t("workflows.mobile.runTest", "Run Test")
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          "button",
          {
            onClick: () => {
              onClear();
              setShowMoreActions(false);
            },
            disabled: isSaving,
            className: "flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm text-destructive hover:bg-muted active:bg-muted disabled:opacity-50",
            children: [
              /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
              t("workflows.mobile.clear", "Clear")
            ]
          }
        )
      ] })
    ] }) }),
    /* @__PURE__ */ jsx(
      MobileMetadataSheet,
      {
        open: showMetadata,
        onOpenChange: setShowMetadata,
        definitionId,
        metadata,
        metadataHandlers
      }
    )
  ] });
}
export {
  MobileVisualEditor
};
//# sourceMappingURL=MobileVisualEditor.js.map
