"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Suspense, useMemo } from "react";
import { ChevronUp, ChevronDown } from "lucide-react";
import { Button } from "../../ui/button";
import { cn } from "../../../lib/utils";
import { getBlockComponent, normalizeBlockProps } from "../../../lib/blocks/loader";
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
}) {
  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": "block-preview-canvas-empty",
        children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-2", children: "No blocks yet" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Add blocks from the left sidebar" })
        ] })
      }
    );
  }
  return /* @__PURE__ */ jsx("div", { className: "space-y-0", "data-cy": "block-preview-canvas", children: blocks.map((block, index) => /* @__PURE__ */ jsx(
    SelectableBlockPreview,
    {
      block,
      isSelected: selectedBlockId === block.id,
      onSelect: () => onSelectBlock(block.id),
      isFirst: index === 0,
      isLast: index === blocks.length - 1,
      onMoveUp: onMoveUp ? () => onMoveUp(block.id) : void 0,
      onMoveDown: onMoveDown ? () => onMoveDown(block.id) : void 0
    },
    block.id
  )) });
}
function SelectableBlockPreview({
  block,
  isSelected,
  onSelect,
  isFirst = false,
  isLast = false,
  onMoveUp,
  onMoveDown
}) {
  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: onSelect,
        children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
          "Block not found: ",
          /* @__PURE__ */ jsx("code", { className: "font-mono", children: block.blockSlug })
        ] }) })
      }
    );
  }
  const handleMoveUp = (e) => {
    e.stopPropagation();
    onMoveUp == null ? void 0 : onMoveUp();
  };
  const handleMoveDown = (e) => {
    e.stopPropagation();
    onMoveDown == null ? void 0 : onMoveDown();
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "relative cursor-pointer transition-all group",
        "hover:ring-2 hover:ring-primary/50 hover:ring-offset-2",
        isSelected && "ring-2 ring-primary ring-offset-2"
      ),
      onClick: onSelect,
      "data-cy": `preview-block-${block.id}`,
      children: [
        isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-20 bg-primary text-primary-foreground text-xs px-2 py-1 rounded shadow-md", children: "Editing" }),
        (onMoveUp || onMoveDown) && /* @__PURE__ */ jsxs("div", { className: cn(
          "absolute top-2 right-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": `preview-block-${block.id}-move-up`,
              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": `preview-block-${block.id}-move-down`,
              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
};
