"use client";
import { 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 { Badge } from "@open-mercato/ui/primitives/badge";
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 { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
import { ChevronDown, Plus, Trash2 } from "lucide-react";
function FormFieldArrayEditor({
  id,
  value = [],
  error,
  setValue,
  disabled,
  isJsonSchemaFormat = false
}) {
  const t = useT();
  const { confirm, ConfirmDialogElement } = useConfirmDialog();
  const [expandedIndices, setExpandedIndices] = useState(/* @__PURE__ */ new Set());
  const formFields = 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 addFormField = () => {
    const newField = {
      name: `field_${Date.now()}`,
      type: "text",
      label: t("workflows.form.newField"),
      required: false,
      placeholder: ""
    };
    const newFields = [...formFields, newField];
    setValue(newFields);
    const newExpanded = new Set(expandedIndices);
    newExpanded.add(formFields.length);
    setExpandedIndices(newExpanded);
  };
  const removeFormField = async (index) => {
    const confirmed = await confirm({
      title: t("workflows.fieldEditors.formFields.removeField"),
      text: t("workflows.fieldEditors.formFields.confirmRemove"),
      variant: "destructive"
    });
    if (!confirmed) return;
    const newFields = formFields.filter((_, i) => i !== index);
    setValue(newFields);
    const newExpanded = new Set(expandedIndices);
    newExpanded.delete(index);
    setExpandedIndices(newExpanded);
  };
  const updateFormField = (index, fieldKey, fieldValue) => {
    const updated = [...formFields];
    updated[index] = { ...updated[index], [fieldKey]: 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: [
          t("workflows.fieldEditors.formFields.title"),
          " (",
          formFields.length,
          ")"
        ] }),
        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.fieldEditors.formFields.description") }),
        error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600 mt-1", children: error })
      ] }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          size: "sm",
          onClick: addFormField,
          disabled,
          className: "w-full sm:w-auto",
          children: [
            /* @__PURE__ */ jsx(Plus, { className: "size-3 mr-1" }),
            t("workflows.fieldEditors.formFields.addField")
          ]
        }
      )
    ] }),
    isJsonSchemaFormat && /* @__PURE__ */ jsx(Alert, { variant: "info", children: /* @__PURE__ */ jsx(AlertDescription, { className: "text-xs", children: t("workflows.fieldEditors.formFields.jsonSchemaNotice") }) }),
    formFields.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border", children: t("workflows.fieldEditors.formFields.emptyState") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: formFields.map((field, 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__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
                  /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900", children: field.label || field.name }),
                  /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: field.type }),
                  field.required && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs text-white", children: t("workflows.form.required") })
                ] }),
                /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 mt-1", children: [
                  "Field name: ",
                  /* @__PURE__ */ jsx("code", { className: "bg-white px-1 rounded", children: field.name })
                ] })
              ] }),
              /* @__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}-name`, className: "text-xs font-medium mb-1", children: [
              t("workflows.fieldEditors.formFields.fieldName"),
              " *"
            ] }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `${id}-${index}-name`,
                type: "text",
                value: field.name,
                onChange: (e) => updateFormField(index, "name", e.target.value),
                placeholder: t("workflows.fieldEditors.formFields.fieldNamePlaceholder"),
                className: "text-xs",
                disabled
              }
            ),
            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.fieldEditors.formFields.fieldNameHint") })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-${index}-label`, className: "text-xs font-medium mb-1", children: [
              t("workflows.fieldEditors.formFields.fieldLabel"),
              " *"
            ] }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `${id}-${index}-label`,
                type: "text",
                value: field.label,
                onChange: (e) => updateFormField(index, "label", e.target.value),
                placeholder: t("workflows.fieldEditors.formFields.fieldLabelPlaceholder"),
                className: "text-xs",
                disabled
              }
            ),
            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.fieldEditors.formFields.fieldLabelHint") })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-${index}-type`, className: "text-xs font-medium mb-1", children: [
              t("workflows.fieldEditors.formFields.fieldType"),
              " *"
            ] }),
            /* @__PURE__ */ jsxs(
              Select,
              {
                value: field.type,
                onValueChange: (value2) => updateFormField(index, "type", value2),
                disabled,
                children: [
                  /* @__PURE__ */ jsx(SelectTrigger, { id: `${id}-${index}-type`, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
                  /* @__PURE__ */ jsxs(SelectContent, { children: [
                    /* @__PURE__ */ jsx(SelectItem, { value: "text", children: t("workflows.form.fieldTypes.text") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "number", children: t("workflows.form.fieldTypes.number") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "email", children: t("workflows.form.fieldTypes.email") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "tel", children: t("workflows.form.fieldTypes.tel") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "url", children: t("workflows.form.fieldTypes.url") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "textarea", children: t("workflows.form.fieldTypes.textarea") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "select", children: t("workflows.form.fieldTypes.select") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "radio", children: t("workflows.form.fieldTypes.radio") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "checkbox", children: t("workflows.form.fieldTypes.checkbox") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "date", children: t("workflows.form.fieldTypes.date") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "time", children: t("workflows.form.fieldTypes.time") }),
                    /* @__PURE__ */ jsx(SelectItem, { value: "datetime-local", children: t("workflows.form.fieldTypes.datetime-local") })
                  ] })
                ]
              }
            )
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${index}-placeholder`, className: "text-xs font-medium mb-1", children: t("workflows.fieldEditors.formFields.placeholder") }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `${id}-${index}-placeholder`,
                type: "text",
                value: field.placeholder || "",
                onChange: (e) => updateFormField(index, "placeholder", e.target.value),
                placeholder: t("workflows.fieldEditors.formFields.placeholderPlaceholder"),
                className: "text-xs",
                disabled
              }
            )
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${index}-defaultValue`, className: "text-xs font-medium mb-1", children: t("workflows.fieldEditors.formFields.defaultValue") }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `${id}-${index}-defaultValue`,
                type: "text",
                value: field.defaultValue || "",
                onChange: (e) => updateFormField(index, "defaultValue", e.target.value),
                placeholder: t("workflows.fieldEditors.formFields.defaultValuePlaceholder"),
                className: "text-xs",
                disabled
              }
            )
          ] }),
          (field.type === "select" || field.type === "radio") && /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${index}-options`, className: "text-xs font-medium mb-1", children: t("workflows.fieldEditors.formFields.options") }),
            /* @__PURE__ */ jsx(
              Input,
              {
                id: `${id}-${index}-options`,
                type: "text",
                value: field.options?.join(", ") || "",
                onChange: (e) => updateFormField(
                  index,
                  "options",
                  e.target.value.split(",").map((o) => o.trim()).filter(Boolean)
                ),
                placeholder: t("workflows.fieldEditors.formFields.optionsPlaceholder"),
                className: "text-xs",
                disabled
              }
            ),
            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.fieldEditors.formFields.optionsHint") })
          ] }),
          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(
              "input",
              {
                type: "checkbox",
                id: `${id}-${index}-required`,
                checked: field.required,
                onChange: (e) => updateFormField(index, "required", e.target.checked),
                className: "h-4 w-4 rounded border-gray-300 text-blue-600 focus-visible:ring-ring",
                disabled
              }
            ),
            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${index}-required`, className: "text-xs font-medium cursor-pointer", children: t("workflows.fieldEditors.formFields.requiredField") })
          ] }) }),
          /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 pt-3", children: /* @__PURE__ */ jsxs(
            Button,
            {
              type: "button",
              variant: "destructive",
              size: "sm",
              onClick: () => removeFormField(index),
              disabled,
              children: [
                /* @__PURE__ */ jsx(Trash2, { className: "size-4 mr-1" }),
                t("workflows.fieldEditors.formFields.removeField")
              ]
            }
          ) })
        ] })
      ] }, index);
    }) }),
    ConfirmDialogElement
  ] });
}
export {
  FormFieldArrayEditor
};
//# sourceMappingURL=FormFieldArrayEditor.js.map
