"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { useTranslations } from "next-intl";
import { Button } from "../../ui/button.js";
import { Card, CardContent } from "../../ui/card.js";
import { Badge } from "../../ui/badge.js";
import { GripVertical, Copy, Trash2 } from "lucide-react";
import { BLOCK_REGISTRY } from "@nextsparkjs/registries/block-registry";
import { cn } from "../../../lib/utils/index.js";
import { sel } from "../../../lib/test/index.js";
function SortableBlock({
  block,
  isSelected,
  onSelect,
  onRemove,
  onDuplicate
}) {
  const t = useTranslations("admin.blockEditor.block");
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging
  } = useSortable({ id: block.id });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  };
  const blockConfig = BLOCK_REGISTRY[block.blockSlug];
  if (!blockConfig) {
    return /* @__PURE__ */ jsx(Card, { className: "border-destructive", "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.error", { id: block.id }), children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: t("error.notFound", { slug: block.blockSlug }) }) }) });
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: setNodeRef,
      style,
      className: cn(
        "group relative",
        isDragging && "opacity-50"
      ),
      "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.container", { id: block.id }),
      children: /* @__PURE__ */ jsx(
        Card,
        {
          className: cn(
            "cursor-pointer transition-shadow duration-150",
            isSelected && "ring-2 ring-primary ring-offset-2",
            "hover:shadow-md"
          ),
          onClick: onSelect,
          children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
            /* @__PURE__ */ jsx(
              "button",
              {
                ...attributes,
                ...listeners,
                className: "mt-1 cursor-grab active:cursor-grabbing focus:outline-none focus:ring-2 focus:ring-primary rounded p-1",
                "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.dragHandle", { id: block.id }),
                children: /* @__PURE__ */ jsx(GripVertical, { className: "h-5 w-5 text-muted-foreground" })
              }
            ),
            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
                /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: blockConfig.name }),
                /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs capitalize", children: blockConfig.category })
              ] }),
              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: blockConfig.description }),
              Object.keys(block.props).length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
                Object.entries(block.props).slice(0, 3).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
                  /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
                    key,
                    ":"
                  ] }),
                  /* @__PURE__ */ jsx("span", { className: "font-mono truncate max-w-[100px]", children: typeof value === "string" ? value : JSON.stringify(value) })
                ] }, key)),
                Object.keys(block.props).length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
                  "+",
                  Object.keys(block.props).length - 3,
                  " more"
                ] })
              ] }) })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
              /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "sm",
                  onClick: (e) => {
                    e.stopPropagation();
                    onDuplicate();
                  },
                  "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.duplicateBtn", { id: block.id }),
                  children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
                }
              ),
              /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "sm",
                  onClick: (e) => {
                    e.stopPropagation();
                    onRemove();
                  },
                  className: "text-destructive hover:text-destructive",
                  "data-cy": sel("blockEditor.layoutCanvas.sortableBlock.removeBtn", { id: block.id }),
                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
                }
              )
            ] })
          ] }) })
        }
      )
    }
  );
}
export {
  SortableBlock
};
