"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { useDroppable } from '../../../../../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.mjs';
import { SortableContext, verticalListSortingStrategy } from '../../../../../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.mjs';
import { cn } from '../../lib/utils.mjs';
import { SortableField } from './sortable-field.mjs';
import { StepTabs } from './step-tabs.mjs';

function DropZone({ id, isDraggingFromPalette }) {
  const { setNodeRef, isOver } = useDroppable({
    id
  });
  if (!isDraggingFromPalette) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: setNodeRef,
      className: cn(
        "h-2 rounded-full transition-all duration-200",
        isOver ? "h-3 bg-primary animate-pulse" : "bg-muted-foreground/20"
      )
    }
  );
}
function Canvas({
  fields,
  components,
  onEditField,
  onDeleteField,
  onConfigureNested,
  isDraggingFromPalette,
  className,
  steps,
  activeStepIndex,
  onActiveStepChange,
  onAddStep,
  onDeleteStep,
  onRenameStep,
  hideStepControls
}) {
  const { setNodeRef, isOver } = useDroppable({
    id: "canvas"
  });
  const getComponent = (type) => components.find((c) => c.type === type);
  const visibleFields = useMemo(() => {
    if (steps.length <= 1) {
      return fields;
    }
    return fields.filter((f) => (f.stepGroup ?? 0) === activeStepIndex);
  }, [fields, steps.length, activeStepIndex]);
  const sortableItems = useMemo(() => visibleFields.map((f) => f.id), [visibleFields]);
  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), children: [
    /* @__PURE__ */ jsx(
      StepTabs,
      {
        steps,
        activeStepIndex,
        onActiveStepChange,
        onAddStep,
        onDeleteStep,
        onRenameStep,
        hideStepControls
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        ref: setNodeRef,
        "data-testid": "form-builder-canvas",
        className: cn(
          "flex-1 p-4 rounded-lg border-2 border-dashed min-h-[400px] transition-colors",
          isOver && isDraggingFromPalette ? "border-primary bg-primary/5" : "border-muted-foreground/20"
        ),
        children: visibleFields.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground", "data-testid": "canvas-drop-zone", children: [
          /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "Drop components here" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm", children: steps.length > 1 ? `Drag components from the palette to add to ${steps[activeStepIndex]?.title || "this step"}` : "Drag components from the palette to build your form" })
        ] }) : /* @__PURE__ */ jsx(
          SortableContext,
          {
            items: sortableItems,
            strategy: verticalListSortingStrategy,
            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
              /* @__PURE__ */ jsx(DropZone, { id: "drop-zone-start", isDraggingFromPalette }),
              visibleFields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
                /* @__PURE__ */ jsx(
                  SortableField,
                  {
                    field,
                    index,
                    component: getComponent(field.type),
                    onEdit: () => onEditField(field.id),
                    onDelete: () => onDeleteField(field.id),
                    onConfigureNested: onConfigureNested ? () => onConfigureNested(field.id) : void 0
                  }
                ),
                /* @__PURE__ */ jsx(DropZone, { id: `drop-zone-${field.id}`, isDraggingFromPalette })
              ] }, field.id))
            ] })
          }
        )
      }
    )
  ] });
}

export { Canvas };
