"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { useTranslations } from "next-intl";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy
} from "@dnd-kit/sortable";
import { SortableBlock } from "./sortable-block";
function BlockCanvas({
  blocks,
  selectedBlockId,
  onSelectBlock,
  onRemoveBlock,
  onDuplicateBlock,
  onReorder,
  onAddBlock
}) {
  const t = useTranslations("admin.blockEditor.canvas");
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8
      }
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates
    })
  );
  const handleDragEnd = useCallback((event) => {
    const { active, over } = event;
    if (!over) return;
    if (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) {
        onReorder(arrayMove(blocks, oldIndex, newIndex));
      }
    }
  }, [blocks, onReorder]);
  const handleDrop = useCallback((e) => {
    e.preventDefault();
    const blockSlug = e.dataTransfer.getData("blockSlug");
    if (blockSlug) {
      onAddBlock(blockSlug);
    }
  }, [onAddBlock]);
  if (blocks.length === 0) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: "flex items-center justify-center min-h-[400px] rounded-lg border-2 border-dashed border-border bg-muted/10",
        onDragOver: (e) => e.preventDefault(),
        onDrop: handleDrop,
        "data-cy": "block-canvas-empty",
        children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-2", children: t("empty.message") }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("empty.hint") })
        ] })
      }
    );
  }
  return /* @__PURE__ */ jsx("div", { "data-cy": "block-canvas", children: /* @__PURE__ */ jsx(
    DndContext,
    {
      sensors,
      collisionDetection: closestCenter,
      onDragEnd: handleDragEnd,
      children: /* @__PURE__ */ jsx(
        SortableContext,
        {
          items: blocks.map((b) => b.id),
          strategy: verticalListSortingStrategy,
          children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: blocks.map((block) => /* @__PURE__ */ jsx(
            SortableBlock,
            {
              block,
              isSelected: selectedBlockId === block.id,
              onSelect: () => onSelectBlock(block.id),
              onRemove: () => onRemoveBlock(block.id),
              onDuplicate: () => onDuplicateBlock(block.id)
            },
            block.id
          )) })
        }
      )
    }
  ) });
}
export {
  BlockCanvas
};
