"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { useTranslations } from "next-intl";
import { Search, Plus } from "lucide-react";
import { Input } from "../../ui/input";
import { Button } from "../../ui/button";
import { Badge } from "../../ui/badge";
import { ScrollArea } from "../../ui/scroll-area";
function BlockPicker({ blocks, onAddBlock }) {
  const t = useTranslations("admin.blockEditor.picker");
  const [search, setSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState(null);
  const categories = useMemo(() => {
    const uniqueCategories = [...new Set(blocks.map((block) => block.category))];
    return uniqueCategories.sort();
  }, [blocks]);
  const filteredBlocks = useMemo(() => {
    return blocks.filter((block) => {
      const matchesSearch = search === "" || block.name.toLowerCase().includes(search.toLowerCase()) || block.description.toLowerCase().includes(search.toLowerCase());
      const matchesCategory = !selectedCategory || block.category === selectedCategory;
      return matchesSearch && matchesCategory;
    });
  }, [blocks, search, selectedCategory]);
  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col bg-card", "data-cy": "block-picker", children: [
    /* @__PURE__ */ jsxs("div", { className: "border-b p-4 space-y-4", children: [
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: t("title") }),
        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("description") })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "text",
            placeholder: t("search.placeholder"),
            value: search,
            onChange: (e) => setSearch(e.target.value),
            className: "pl-9",
            "data-cy": "block-search-input"
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: !selectedCategory ? "default" : "outline",
            size: "sm",
            onClick: () => setSelectedCategory(null),
            "data-cy": "category-all",
            children: t("categories.all")
          }
        ),
        categories.map((category) => /* @__PURE__ */ jsx(
          Button,
          {
            variant: selectedCategory === category ? "default" : "outline",
            size: "sm",
            onClick: () => setSelectedCategory(category),
            "data-cy": `category-${category}`,
            className: "capitalize",
            children: category
          },
          category
        ))
      ] })
    ] }),
    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 p-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filteredBlocks.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { children: t("empty") }) }) : filteredBlocks.map((block) => /* @__PURE__ */ jsx(
      "div",
      {
        className: "group relative rounded-lg border bg-background p-4 hover:bg-accent transition-colors cursor-pointer",
        draggable: true,
        onDragStart: (e) => {
          e.dataTransfer.setData("blockSlug", block.slug);
          e.dataTransfer.effectAllowed = "copy";
        },
        onClick: () => onAddBlock(block.slug),
        "data-cy": `block-item-${block.slug}`,
        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
              /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm text-foreground truncate", children: block.name }),
              /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs capitalize", children: block.category })
            ] }),
            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: block.description })
          ] }),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "sm",
              className: "opacity-0 group-hover:opacity-100 transition-opacity",
              onClick: (e) => {
                e.stopPropagation();
                onAddBlock(block.slug);
              },
              "data-cy": `add-block-${block.slug}`,
              children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
            }
          )
        ] })
      },
      block.slug
    )) }) })
  ] });
}
export {
  BlockPicker
};
