"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Suspense, useMemo, useState, memo, useCallback } from "react";
import { ChevronUp, ChevronDown } from "lucide-react";
import { useTranslations } from "next-intl";
import { Button } from "../../ui/button.js";
import { cn } from "../../../lib/utils/index.js";
import { sel } from "../../../lib/test/index.js";
import { FloatingBlockToolbar } from "./floating-block-toolbar.js";
import { getBlockComponent, normalizeBlockProps } from "../../../lib/blocks/loader.js";
import { isPatternReference } from "../../../types/pattern-reference.js";
import { PatternReferencePreview } from "./pattern-reference-preview.js";
function BlockSkeleton() {
  return /* @__PURE__ */ jsx("div", { className: "w-full py-12 px-4 animate-pulse", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto", children: [
    /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-3/4 mb-4" }),
    /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-full mb-2" }),
    /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-5/6" })
  ] }) });
}
function BlockPreviewCanvas({
  blocks,
  selectedBlockId,
  onSelectBlock,
  onMoveUp,
  onMoveDown,
  onCopy,
  onDuplicate,
  onRemove
}) {
  const t = useTranslations("admin.builder");
  const [hoveredBlockId, setHoveredBlockId] = useState(null);
  const handleHover = useCallback((id) => setHoveredBlockId(id), []);
  const handleLeave = useCallback(() => setHoveredBlockId(null), []);
  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",
        "data-cy": sel("blockEditor.previewCanvas.empty"),
        children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-2", children: t("canvas.empty.title") }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("canvas.empty.subtitle") })
        ] })
      }
    );
  }
  return /* @__PURE__ */ jsx("div", { className: "space-y-0", "data-cy": sel("blockEditor.previewCanvas.container"), children: blocks.map((block, index) => /* @__PURE__ */ jsx(
    SelectableBlockPreview,
    {
      block,
      isSelected: selectedBlockId === block.id,
      isHovered: hoveredBlockId === block.id,
      onSelect: onSelectBlock,
      blockId: block.id,
      onHover: handleHover,
      onLeave: handleLeave,
      isFirst: index === 0,
      isLast: index === blocks.length - 1,
      onMoveUp,
      onMoveDown,
      onCopy,
      onDuplicate,
      onRemove
    },
    block.id || `block-${index}`
  )) });
}
const SelectableBlockPreview = memo(function SelectableBlockPreview2({
  block,
  blockId,
  isSelected,
  isHovered,
  onSelect,
  onHover,
  onLeave,
  isFirst = false,
  isLast = false,
  onMoveUp,
  onMoveDown,
  onCopy,
  onDuplicate,
  onRemove
}) {
  const t = useTranslations("admin.builder");
  const handleSelect = useCallback(() => onSelect(blockId), [onSelect, blockId]);
  const handleHover = useCallback(() => onHover(blockId), [onHover, blockId]);
  const handleMoveUp = useCallback((e) => {
    e.stopPropagation();
    onMoveUp == null ? void 0 : onMoveUp(blockId);
  }, [onMoveUp, blockId]);
  const handleMoveDown = useCallback((e) => {
    e.stopPropagation();
    onMoveDown == null ? void 0 : onMoveDown(blockId);
  }, [onMoveDown, blockId]);
  const handleCopy = useCallback(() => onCopy == null ? void 0 : onCopy(blockId), [onCopy, blockId]);
  const handleDuplicate = useCallback(() => onDuplicate == null ? void 0 : onDuplicate(blockId), [onDuplicate, blockId]);
  const handleRemove = useCallback(() => onRemove == null ? void 0 : onRemove(blockId), [onRemove, blockId]);
  if (isPatternReference(block)) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: "relative group",
        onMouseEnter: handleHover,
        onMouseLeave: onLeave,
        children: [
          (onMoveUp || onMoveDown) && /* @__PURE__ */ jsxs("div", { className: cn(
            "absolute top-2 left-2 z-30 flex gap-1 transition-opacity",
            "opacity-0 group-hover:opacity-100",
            isSelected && "opacity-100"
          ), children: [
            /* @__PURE__ */ jsx(
              Button,
              {
                variant: "secondary",
                size: "icon",
                className: "h-7 w-7 shadow-md",
                onClick: handleMoveUp,
                disabled: isFirst,
                "data-cy": sel("blockEditor.previewCanvas.moveUp", { id: block.id }),
                children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
              }
            ),
            /* @__PURE__ */ jsx(
              Button,
              {
                variant: "secondary",
                size: "icon",
                className: "h-7 w-7 shadow-md",
                onClick: handleMoveDown,
                disabled: isLast,
                "data-cy": sel("blockEditor.previewCanvas.moveDown", { id: block.id }),
                children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
              }
            )
          ] }),
          /* @__PURE__ */ jsx(
            PatternReferencePreview,
            {
              patternRef: block,
              isSelected,
              onSelect: handleSelect,
              onRemove: handleRemove
            }
          )
        ]
      }
    );
  }
  const BlockComponent = getBlockComponent(block.blockSlug);
  const normalizedProps = useMemo(
    () => normalizeBlockProps(block.props),
    [block.props]
  );
  if (!BlockComponent) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: "w-full py-12 px-4 bg-destructive/10 border border-destructive/20",
        onClick: handleSelect,
        children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
          t("canvas.error.blockNotFound"),
          ": ",
          /* @__PURE__ */ jsx("code", { className: "font-mono", children: block.blockSlug })
        ] }) })
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "relative cursor-pointer transition-[border-color] duration-150 group @container",
        "border-2 border-transparent",
        "hover:border-primary/50",
        isSelected && "border-primary"
      ),
      onClick: handleSelect,
      onMouseEnter: handleHover,
      onMouseLeave: onLeave,
      "data-cy": sel("blockEditor.previewCanvas.block", { id: block.id }),
      children: [
        onDuplicate && onRemove && /* @__PURE__ */ jsx(
          FloatingBlockToolbar,
          {
            blockId: block.id,
            blockSlug: block.blockSlug,
            isVisible: isHovered || isSelected,
            onCopy: handleCopy,
            onDuplicate: handleDuplicate,
            onRemove: handleRemove
          }
        ),
        isSelected && /* @__PURE__ */ jsx(
          "div",
          {
            className: "absolute top-2 right-2 z-20 bg-primary text-primary-foreground text-xs px-2 py-1 rounded shadow-md",
            "data-cy": sel("blockEditor.previewCanvas.editingBadge", { id: block.id }),
            children: t("canvas.editingBadge")
          }
        ),
        (onMoveUp || onMoveDown) && /* @__PURE__ */ jsxs("div", { className: cn(
          "absolute top-2 left-2 z-20 flex gap-1 transition-opacity",
          "opacity-0 group-hover:opacity-100",
          isSelected && "opacity-100"
        ), children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "secondary",
              size: "icon",
              className: "h-7 w-7 shadow-md",
              onClick: handleMoveUp,
              disabled: isFirst,
              "data-cy": sel("blockEditor.previewCanvas.moveUp", { id: block.id }),
              children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "secondary",
              size: "icon",
              className: "h-7 w-7 shadow-md",
              onClick: handleMoveDown,
              disabled: isLast,
              "data-cy": sel("blockEditor.previewCanvas.moveDown", { id: block.id }),
              children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: "pointer-events-none", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(BlockSkeleton, {}), children: /* @__PURE__ */ jsx(BlockComponent, { ...normalizedProps }) }) })
      ]
    }
  );
});
export {
  BlockPreviewCanvas
};
