"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { GripVertical, ClipboardCopy, Copy, Trash2 } from "lucide-react";
import { cn } from "../../../lib/utils/index.js";
import { sel } from "../../../lib/test/index.js";
import { BlockService } from "../../../lib/services/block.service.js";
import { DynamicIcon } from "../../ui/dynamic-icon.js";
import { isPatternReference } from "../../../types/pattern-reference.js";
function TreeViewNode({
  block,
  isSelected,
  onSelect,
  onCopy,
  onDuplicate,
  onRemove,
  isPartOfPattern = false
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging
  } = useSortable({
    id: block.id,
    disabled: isPartOfPattern
    // Disable individual dragging for pattern blocks
  });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1
  };
  const blockConfig = isPatternReference(block) ? null : BlockService.get(block.blockSlug);
  const iconName = (blockConfig == null ? void 0 : blockConfig.icon) || "LayoutGrid";
  const blockName = (blockConfig == null ? void 0 : blockConfig.name) || (isPatternReference(block) ? "Pattern" : "Unknown Block");
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: setNodeRef,
      style,
      "data-cy": sel("blockEditor.treeView.node", { id: block.id }),
      className: cn(
        "group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors",
        "hover:bg-muted/80",
        isSelected && "bg-primary/10 ring-1 ring-primary",
        isPartOfPattern && "ml-4 border-l-2 border-muted-foreground/20",
        isDragging && "z-50"
      ),
      onClick: onSelect,
      children: [
        !isPartOfPattern && /* @__PURE__ */ jsx(
          "div",
          {
            "data-cy": sel("blockEditor.treeView.nodeDragHandle", { id: block.id }),
            className: cn(
              "cursor-grab active:cursor-grabbing text-muted-foreground/50",
              "opacity-0 group-hover:opacity-100 transition-opacity",
              isSelected && "opacity-100"
            ),
            ...attributes,
            ...listeners,
            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            "data-cy": sel("blockEditor.treeView.nodeIcon", { id: block.id }),
            className: "text-muted-foreground shrink-0",
            children: /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ jsx(
          "span",
          {
            "data-cy": sel("blockEditor.treeView.nodeName", { id: block.id }),
            className: cn(
              "text-sm truncate flex-1",
              isSelected && "font-medium"
            ),
            children: blockName
          }
        ),
        (onCopy || onDuplicate || onRemove) && /* @__PURE__ */ jsxs(
          "div",
          {
            className: cn(
              "flex items-center gap-0.5 shrink-0 transition-opacity",
              "opacity-0 group-hover:opacity-100",
              isSelected && "opacity-100"
            ),
            children: [
              onCopy && /* @__PURE__ */ jsx(
                "button",
                {
                  "data-cy": sel("blockEditor.treeView.nodeCopy", { id: block.id }),
                  className: "p-1 rounded hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
                  onClick: (e) => {
                    e.stopPropagation();
                    onCopy();
                  },
                  children: /* @__PURE__ */ jsx(ClipboardCopy, { className: "h-3.5 w-3.5" })
                }
              ),
              onDuplicate && /* @__PURE__ */ jsx(
                "button",
                {
                  "data-cy": sel("blockEditor.treeView.nodeDuplicate", { id: block.id }),
                  className: "p-1 rounded hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
                  onClick: (e) => {
                    e.stopPropagation();
                    onDuplicate();
                  },
                  children: /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
                }
              ),
              onRemove && /* @__PURE__ */ jsx(
                "button",
                {
                  "data-cy": sel("blockEditor.treeView.nodeRemove", { id: block.id }),
                  className: "p-1 rounded hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors cursor-pointer",
                  onClick: (e) => {
                    e.stopPropagation();
                    onRemove();
                  },
                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
                }
              )
            ]
          }
        )
      ]
    }
  );
}
export {
  TreeViewNode
};
