"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useCallback, useMemo, useEffect } from "react";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy
} from "@dnd-kit/sortable";
import { useTranslations } from "next-intl";
import { LayoutList } from "lucide-react";
import { ScrollArea } from "../../ui/scroll-area.js";
import { sel } from "../../../lib/test/index.js";
import { TreeViewNode } from "./tree-view-node.js";
import { isPatternReference } from "../../../types/pattern-reference.js";
function TreeView({
  blocks,
  selectedBlockId,
  onSelectBlock,
  onReorder,
  onCopy,
  onDuplicate,
  onRemove,
  emptyMessage
}) {
  const t = useTranslations("admin.builder");
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8
      }
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates
    })
  );
  const groupedItems = useMemo(() => {
    const items = [];
    blocks.forEach((block) => {
      if (isPatternReference(block)) {
        items.push({ id: block.id, block, patternRef: block.ref });
      } else {
        items.push({ id: block.id, block });
      }
    });
    return items;
  }, [blocks]);
  const handleDragEnd = useCallback((event) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      const oldIndex = blocks.findIndex((b) => b.id === active.id);
      const newIndex = blocks.findIndex((b) => b.id === over.id);
      if (oldIndex !== -1 && newIndex !== -1) {
        const newBlocks = arrayMove(blocks, oldIndex, newIndex);
        onReorder(newBlocks);
      }
    }
  }, [blocks, onReorder]);
  useEffect(() => {
    if (selectedBlockId) {
      const previewBlock = document.querySelector(
        `[data-cy="${sel("blockEditor.previewCanvas.block", { id: selectedBlockId })}"]`
      );
      if (previewBlock) {
        previewBlock.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    }
  }, [selectedBlockId]);
  const handleSelectBlock = useCallback((blockId) => {
    onSelectBlock(blockId);
  }, [onSelectBlock]);
  if (blocks.length === 0) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        "data-cy": sel("blockEditor.treeView.empty"),
        className: "flex flex-col items-center justify-center h-full p-6 text-center",
        children: [
          /* @__PURE__ */ jsx(LayoutList, { className: "h-12 w-12 text-muted-foreground/30 mb-4" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage || t("layout.empty") })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx(
    "div",
    {
      "data-cy": sel("blockEditor.treeView.container"),
      className: "p-3 space-y-1",
      children: /* @__PURE__ */ jsx(
        DndContext,
        {
          sensors,
          collisionDetection: closestCenter,
          onDragEnd: handleDragEnd,
          children: /* @__PURE__ */ jsx(
            SortableContext,
            {
              items: groupedItems.map((item) => item.id),
              strategy: verticalListSortingStrategy,
              children: groupedItems.map((item) => /* @__PURE__ */ jsx(
                TreeViewNode,
                {
                  block: item.block,
                  isSelected: selectedBlockId === item.id,
                  onSelect: () => handleSelectBlock(item.id),
                  onCopy: onCopy ? () => onCopy(item.id) : void 0,
                  onDuplicate: onDuplicate ? () => onDuplicate(item.id) : void 0,
                  onRemove: onRemove ? () => onRemove(item.id) : void 0,
                  isPartOfPattern: false
                },
                item.id
              ))
            }
          )
        }
      )
    }
  ) });
}
export {
  TreeView
};
