"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const ReactDOM = require('react-dom');
const core_esm = require('../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.cjs');
const modifiers_esm = require('../../../../../node_modules/.pnpm/@dnd-kit_modifiers@9.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0__react@19.2.0/node_modules/@dnd-kit/modifiers/dist/modifiers.esm.cjs');
const sortable_esm = require('../../../../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0__react@19.2.0/node_modules/@dnd-kit/sortable/dist/sortable.esm.cjs');
const LucideIcons = require('lucide-react');
const button = require('../button.cjs');
const dialog = require('../dialog.cjs');
const palette = require('./palette.cjs');
const canvas = require('./canvas.cjs');
const editFieldDialog = require('./edit-field-dialog.cjs');
const sortableField = require('./sortable-field.cjs');
const index = require('./components/index.cjs');
const schemaUtils = require('./schema-utils.cjs');

function NestedFieldEditorDialog({
  open,
  onOpenChange,
  field,
  components,
  onSave
}) {
  const dndContextId = React.useId();
  const initialFields = React.useMemo(() => {
    if (!field) return [];
    if (field.type === "object") return field.children || [];
    if (field.type === "array") return field.itemTemplate || [];
    return [];
  }, [field]);
  const [nestedFields, setNestedFields] = React.useState(initialFields);
  const [activeId, setActiveId] = React.useState(null);
  const [editDialogFieldId, setEditDialogFieldId] = React.useState(null);
  const [prevField, setPrevField] = React.useState(field);
  const [prevOpen, setPrevOpen] = React.useState(open);
  if (prevField !== field || open && !prevOpen) {
    setPrevField(field);
    setPrevOpen(open);
    setNestedFields(initialFields);
    setEditDialogFieldId(null);
  }
  if (prevOpen !== open) {
    setPrevOpen(open);
  }
  const sensors = core_esm.useSensors(
    core_esm.useSensor(core_esm.PointerSensor, {
      activationConstraint: { distance: 8 }
    }),
    core_esm.useSensor(core_esm.TouchSensor, {
      activationConstraint: { distance: 8 }
    }),
    core_esm.useSensor(core_esm.KeyboardSensor, {
      coordinateGetter: sortable_esm.sortableKeyboardCoordinates
    })
  );
  const activeDragData = React.useMemo(() => {
    if (!activeId) return null;
    const idStr = String(activeId);
    if (idStr.startsWith("palette-")) {
      const componentType = idStr.replace("palette-", "");
      return {
        type: "palette",
        componentType,
        component: index.getComponentByType(componentType, components)
      };
    }
    const nestedField = nestedFields.find((f) => f.id === idStr);
    if (nestedField) {
      return {
        type: "field",
        field: nestedField,
        component: index.getComponentByType(nestedField.type, components)
      };
    }
    return null;
  }, [activeId, nestedFields, components]);
  const handleDragStart = (event) => {
    setActiveId(event.active.id);
  };
  const handleDragEnd = (event) => {
    const { active, over } = event;
    setActiveId(null);
    if (!over) return;
    const activeData = active.data.current;
    if (activeData?.type === "palette") {
      const { componentType } = activeData;
      const component = index.getComponentByType(componentType, components);
      if (component) {
        const newField = {
          id: schemaUtils.generateFieldId(componentType),
          type: componentType,
          props: {
            label: component.defaultProps.label || component.label,
            ...component.defaultProps
          }
        };
        let insertIndex = nestedFields.length;
        const overId = String(over.id);
        if (overId === "drop-zone-start") {
          insertIndex = 0;
        } else if (overId.startsWith("drop-zone-")) {
          const fieldId = overId.replace("drop-zone-", "");
          const overIndex = nestedFields.findIndex((f) => f.id === fieldId);
          if (overIndex !== -1) {
            insertIndex = overIndex + 1;
          }
        } else if (overId !== "canvas") {
          const overIndex = nestedFields.findIndex((f) => f.id === overId);
          if (overIndex !== -1) {
            insertIndex = overIndex + 1;
          }
        }
        const newFields = [...nestedFields];
        newFields.splice(insertIndex, 0, newField);
        setNestedFields(newFields);
      }
      return;
    }
    if (activeData?.type === "field" && active.id !== over.id) {
      const oldIndex = nestedFields.findIndex((f) => f.id === active.id);
      const newIndex = nestedFields.findIndex((f) => f.id === over.id);
      if (oldIndex !== -1 && newIndex !== -1) {
        setNestedFields(sortable_esm.arrayMove(nestedFields, oldIndex, newIndex));
      }
    }
  };
  const handleDeleteField = React.useCallback((id) => {
    setNestedFields((fields) => fields.filter((f) => f.id !== id));
  }, []);
  const handleEditField = React.useCallback((id) => {
    setEditDialogFieldId(id);
  }, []);
  const handleUpdateField = React.useCallback(
    (id, props, newId) => {
      if (newId && newId !== id) {
        const idExists = nestedFields.some((f) => f.id === newId && f.id !== id);
        if (idExists) {
          console.warn(`Cannot rename field "${id}" to "${newId}": a field with that ID already exists`);
          return;
        }
      }
      setNestedFields(
        (fields) => fields.map((f) => {
          if (f.id !== id) return f;
          return {
            ...f,
            id: newId || f.id,
            props: { ...f.props, ...props }
          };
        })
      );
    },
    [nestedFields]
  );
  const handleSave = React.useCallback(() => {
    if (!field) return;
    onSave(field.id, nestedFields);
    onOpenChange(false);
  }, [field, nestedFields, onSave, onOpenChange]);
  if (!field) return null;
  const isObjectField = field.type === "object";
  const Icon = isObjectField ? LucideIcons.FolderOpen : LucideIcons.List;
  const fieldTypeLabel = isObjectField ? "Field Group" : "Repeating Group";
  const nestedLabel = isObjectField ? "nested fields" : "item fields";
  const editDialogField = nestedFields.find((f) => f.id === editDialogFieldId) || null;
  const editDialogComponent = editDialogField ? index.getComponentByType(editDialogField.type, components) || null : null;
  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog, { open, onOpenChange, children: [
    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-6xl! max-h-[90vh] overflow-hidden flex flex-col", children: [
      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
        /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogTitle, { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-5 w-5 text-muted-foreground" }),
          "Configure ",
          fieldTypeLabel,
          ": ",
          field.props.label
        ] }),
        /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogDescription, { children: [
          "Add and arrange the ",
          nestedLabel,
          " for this ",
          fieldTypeLabel.toLowerCase(),
          ".",
          isObjectField ? " These fields will be grouped together." : " Each item in the array will have these fields."
        ] })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
        core_esm.DndContext,
        {
          id: dndContextId,
          sensors,
          collisionDetection: core_esm.closestCenter,
          onDragStart: handleDragStart,
          onDragEnd: handleDragEnd,
          children: [
            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[50vh] gap-4", children: [
              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-48 overflow-auto shrink-0 border-r pr-4", children: /* @__PURE__ */ jsxRuntime.jsx(palette.Palette, { components }) }),
              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
                canvas.Canvas,
                {
                  fields: nestedFields,
                  components,
                  onEditField: handleEditField,
                  onDeleteField: handleDeleteField,
                  isDraggingFromPalette: activeDragData?.type === "palette",
                  steps: [],
                  activeStepIndex: 0,
                  onActiveStepChange: () => {
                  },
                  onAddStep: () => {
                  },
                  onDeleteStep: () => {
                  },
                  onRenameStep: () => {
                  },
                  hideStepControls: true
                }
              ) })
            ] }),
            typeof document !== "undefined" && ReactDOM.createPortal(
              /* @__PURE__ */ jsxRuntime.jsxs(core_esm.DragOverlay, { dropAnimation: null, modifiers: [modifiers_esm.snapCenterToCursor], children: [
                activeDragData?.type === "palette" && activeDragData.component && /* @__PURE__ */ jsxRuntime.jsx(palette.PaletteDragOverlay, { component: activeDragData.component }),
                activeDragData?.type === "field" && activeDragData.field && /* @__PURE__ */ jsxRuntime.jsx(
                  sortableField.FieldDragOverlay,
                  {
                    field: activeDragData.field,
                    component: activeDragData.component
                  }
                )
              ] }),
              document.body
            )
          ]
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { className: "border-t pt-4", children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground mr-auto", children: [
          nestedFields.length,
          " ",
          nestedFields.length === 1 ? "field" : "fields"
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: handleSave, children: "Save Fields" })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(
      editFieldDialog.EditFieldDialog,
      {
        open: editDialogFieldId !== null,
        onOpenChange: (open2) => !open2 && setEditDialogFieldId(null),
        field: editDialogField,
        component: editDialogComponent,
        onUpdate: handleUpdateField,
        steps: [],
        allFieldIds: nestedFields.map((f) => f.id)
      }
    )
  ] });
}

exports.NestedFieldEditorDialog = NestedFieldEditorDialog;
