"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useSortable } 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 { CSS } from '../../../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.0/node_modules/@dnd-kit/utilities/dist/utilities.esm.mjs';
import { GripVertical, Settings2, Pencil, Trash2 } from 'lucide-react';
import { cn } from '../../lib/utils.mjs';
import { Button } from '../button.mjs';

function SortableField({
  field,
  index,
  component,
  onEdit,
  onDelete,
  onConfigureNested
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging
  } = useSortable({
    id: field.id,
    data: {
      type: "field",
      fieldId: field.id,
      index
    }
  });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  };
  const Icon = component?.icon;
  const isContainerField = field.type === "object" || field.type === "array";
  const nestedFieldCount = field.type === "object" ? field.children?.length || 0 : field.itemTemplate?.length || 0;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: setNodeRef,
      style,
      className: cn(
        "group flex items-center gap-2 p-3 rounded-lg border bg-card",
        "transition-all duration-200",
        isDragging && "opacity-50 shadow-lg z-50",
        !isDragging && "hover:border-muted-foreground/30"
      ),
      children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            ...attributes,
            ...listeners,
            className: cn(
              "flex items-center justify-center p-1 rounded cursor-grab active:cursor-grabbing",
              "hover:bg-muted touch-none",
              "min-w-[44px] min-h-[44px] -m-1"
            ),
            onClick: (e) => e.stopPropagation(),
            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" })
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
            /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label }),
            field.props.required && /* @__PURE__ */ jsx("span", { className: "text-destructive text-sm", children: "*" }),
            isContainerField && /* @__PURE__ */ jsxs("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground", children: [
              nestedFieldCount,
              " ",
              nestedFieldCount === 1 ? "field" : "fields"
            ] })
          ] }),
          field.props.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate mt-0.5", children: field.props.description }),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60 mt-1", children: component?.label || field.type })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
          isContainerField && onConfigureNested && /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "icon",
              className: cn(
                "h-8 w-8 text-muted-foreground hover:text-primary",
                "opacity-0 group-hover:opacity-100 transition-opacity",
                "min-w-[44px] min-h-[44px]"
              ),
              onClick: (e) => {
                e.stopPropagation();
                onConfigureNested();
              },
              title: "Configure nested fields",
              children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "icon",
              className: cn(
                "h-8 w-8 text-muted-foreground hover:text-primary",
                "opacity-0 group-hover:opacity-100 transition-opacity",
                "min-w-[44px] min-h-[44px]"
              ),
              onClick: (e) => {
                e.stopPropagation();
                onEdit();
              },
              children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "icon",
              className: cn(
                "h-8 w-8 text-muted-foreground hover:text-destructive",
                "opacity-0 group-hover:opacity-100 transition-opacity",
                "min-w-[44px] min-h-[44px]"
              ),
              onClick: (e) => {
                e.stopPropagation();
                onDelete();
              },
              children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
            }
          )
        ] })
      ]
    }
  );
}
function FieldDragOverlay({ field, component }) {
  const Icon = component?.icon;
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-card shadow-lg cursor-grabbing", children: [
    /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
      Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
      /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: field.props.label })
    ] }) })
  ] });
}

export { FieldDragOverlay, SortableField };
