"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
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 { ChevronDown, Plus, Trash2 } from "lucide-react";
function MappingArrayEditor({
  id,
  value = [],
  error,
  setValue,
  disabled,
  label: labelProp,
  description: descriptionProp
}) {
  const t = useT();
  const { confirm, ConfirmDialogElement } = useConfirmDialog();
  const label = labelProp ?? t("workflows.fieldEditors.mappings.label");
  const description = descriptionProp ?? t("workflows.fieldEditors.mappings.description");
  const [expandedIndices, setExpandedIndices] = useState(/* @__PURE__ */ new Set());
  const mappings = Array.isArray(value) ? value : [];
  const toggleExpanded = (index) => {
    const newExpanded = new Set(expandedIndices);
    if (newExpanded.has(index)) {
      newExpanded.delete(index);
    } else {
      newExpanded.add(index);
    }
    setExpandedIndices(newExpanded);
  };
  const addMapping = () => {
    const newMapping = {
      key: `key_${Date.now()}`,
      value: ""
    };
    const newMappings = [...mappings, newMapping];
    setValue(newMappings);
    const newExpanded = new Set(expandedIndices);
    newExpanded.add(mappings.length);
    setExpandedIndices(newExpanded);
  };
  const removeMapping = async (index) => {
    const confirmed = await confirm({
      title: t("workflows.fieldEditors.mappings.removeMapping"),
      text: t("workflows.fieldEditors.mappings.confirmRemove"),
      variant: "destructive"
    });
    if (!confirmed) return;
    const newMappings = mappings.filter((_, i) => i !== index);
    setValue(newMappings);
    const newExpanded = new Set(expandedIndices);
    newExpanded.delete(index);
    setExpandedIndices(newExpanded);
  };
  const updateMapping = (index, field, fieldValue) => {
    const updated = [...mappings];
    updated[index] = { ...updated[index], [field]: fieldValue };
    setValue(updated);
  };
  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", 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__ */ jsxs(Label, { className: "text-sm font-semibold", children: [
          label,
          " (",
          mappings.length,
          ")"
        ] }),
        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description }),
        error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600 mt-1", children: error })
      ] }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          size: "sm",
          onClick: addMapping,
          disabled,
          className: "w-full sm:w-auto",
          children: [
            /* @__PURE__ */ jsx(Plus, { className: "size-3 mr-1" }),
            t("workflows.fieldEditors.mappings.addMapping")
          ]
        }
      )
    ] }),
    mappings.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border", children: t("workflows.fieldEditors.mappings.emptyState") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: mappings.map((mapping, index) => {
      const isExpanded = expandedIndices.has(index);
      return /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg bg-gray-50", children: [
        /* @__PURE__ */ jsxs(
          "button",
          {
            type: "button",
            onClick: () => toggleExpanded(index),
            disabled,
            className: "w-full px-4 py-3 text-left flex items-center justify-between hover:bg-gray-100 transition-colors rounded-t-lg disabled:opacity-50",
            children: [
              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900", children: mapping.key || `Mapping ${index + 1}` }) }),
                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mt-1 font-mono truncate", children: mapping.value ? /* @__PURE__ */ jsxs(Fragment, { children: [
                  /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "=" }),
                  " ",
                  mapping.value
                ] }) : /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: t("workflows.common.noValueSet") }) })
              ] }),
              /* @__PURE__ */ jsx(
                ChevronDown,
                {
                  className: `w-5 h-5 text-gray-400 transition-transform ${isExpanded ? "rotate-180" : ""}`
                }
              )
            ]
          }
        ),
        isExpanded && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 space-y-3 border-t border-gray-200 bg-white", children: [
          /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-${index}-key`, className: "text-xs font-medium mb-1", children: [
              t("workflows.fieldEditors.mappings.key"),
              " *"
            ] }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `${id}-${index}-key`,
                type: "text",
                value: mapping.key,
                onChange: (e) => updateMapping(index, "key", e.target.value),
                placeholder: t("workflows.fieldEditors.mappings.keyPlaceholder"),
                className: "text-xs",
                disabled
              }
            ),
            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.fieldEditors.mappings.keyHint") })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-${index}-value`, className: "text-xs font-medium mb-1", children: [
              t("workflows.fieldEditors.mappings.value"),
              " *"
            ] }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `${id}-${index}-value`,
                type: "text",
                value: mapping.value,
                onChange: (e) => updateMapping(index, "value", e.target.value),
                placeholder: t("workflows.fieldEditors.mappings.valuePlaceholder"),
                className: "text-xs font-mono",
                disabled
              }
            ),
            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.fieldEditors.mappings.valueHint") })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 pt-3", children: /* @__PURE__ */ jsxs(
            Button,
            {
              type: "button",
              variant: "destructive",
              size: "sm",
              onClick: () => removeMapping(index),
              disabled,
              children: [
                /* @__PURE__ */ jsx(Trash2, { className: "size-4 mr-1" }),
                t("workflows.fieldEditors.mappings.removeMapping")
              ]
            }
          ) })
        ] })
      ] }, index);
    }) }),
    ConfirmDialogElement
  ] });
}
export {
  MappingArrayEditor
};
//# sourceMappingURL=MappingArrayEditor.js.map
