"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import Link from "next/link";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Copy, Check, Search, TestTube2, CheckCircle2, XCircle, ArrowRight, LayoutGrid, Image as ImageIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import { BLOCK_REGISTRY } from "@nextsparkjs/registries/block-registry";
import { TAGS_REGISTRY } from "@nextsparkjs/registries/testing-registry";
import { sel } from "../../lib/test";
const CATEGORY_COLORS = {
  hero: "bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300",
  content: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
  cta: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
  features: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300",
  pricing: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
  testimonials: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300",
  stats: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300",
  faq: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300"
};
function BlocksViewer() {
  const t = useTranslations("devtools.blocks");
  const [searchQuery, setSearchQuery] = useState("");
  const [categoryFilter, setCategoryFilter] = useState("all");
  const [coverageFilter, setCoverageFilter] = useState("all");
  const [copiedTag, setCopiedTag] = useState(null);
  const blocksWithCoverage = useMemo(() => {
    const blockTags = TAGS_REGISTRY.blocks;
    return Object.values(BLOCK_REGISTRY).map((block) => {
      const tagData = blockTags[block.slug];
      return {
        ...block,
        testCount: (tagData == null ? void 0 : tagData.testCount) || 0,
        hasTests: ((tagData == null ? void 0 : tagData.testCount) || 0) > 0
      };
    });
  }, []);
  const filteredBlocks = useMemo(() => {
    return blocksWithCoverage.filter((block) => {
      if (searchQuery) {
        const query = searchQuery.toLowerCase();
        const matchesSearch = block.name.toLowerCase().includes(query) || block.description.toLowerCase().includes(query) || block.slug.toLowerCase().includes(query);
        if (!matchesSearch) return false;
      }
      if (categoryFilter !== "all" && block.category !== categoryFilter) {
        return false;
      }
      if (coverageFilter !== "all") {
        if (coverageFilter === "covered" && !block.hasTests) return false;
        if (coverageFilter === "uncovered" && block.hasTests) return false;
      }
      return true;
    });
  }, [blocksWithCoverage, searchQuery, categoryFilter, coverageFilter]);
  const categories = useMemo(() => {
    const cats = new Set(blocksWithCoverage.map((b) => b.category));
    return Array.from(cats).sort();
  }, [blocksWithCoverage]);
  const stats = useMemo(() => {
    const total = blocksWithCoverage.length;
    const withTests = blocksWithCoverage.filter((b) => b.hasTests).length;
    return { total, withTests, withoutTests: total - withTests };
  }, [blocksWithCoverage]);
  const copyGrepCommand = (slug) => {
    const command = `npx cypress run --env grepTags="@b-${slug}"`;
    navigator.clipboard.writeText(command);
    setCopiedTag(slug);
    setTimeout(() => setCopiedTag(null), 2e3);
  };
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-cy": sel("devtools.blocks.viewer"), children: [
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "pt-4", children: [
        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-violet-600 dark:text-violet-400", children: stats.total }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("stats.total") })
      ] }) }),
      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "pt-4", children: [
        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-green-600 dark:text-green-400", children: stats.withTests }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("stats.covered") })
      ] }) }),
      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "pt-4", children: [
        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-gray-600 dark:text-gray-400", children: stats.withoutTests }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("stats.uncovered") })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
        /* @__PURE__ */ jsx(
          Input,
          {
            placeholder: t("search"),
            value: searchQuery,
            onChange: (e) => setSearchQuery(e.target.value),
            className: "pl-10",
            "data-cy": sel("devtools.blocks.search")
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 flex-wrap", children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: categoryFilter === "all" ? "default" : "outline",
            size: "sm",
            onClick: () => setCategoryFilter("all"),
            "data-cy": sel("devtools.blocks.filterAll"),
            children: t("filters.all")
          }
        ),
        categories.map((cat) => /* @__PURE__ */ jsx(
          Button,
          {
            variant: categoryFilter === cat ? "default" : "outline",
            size: "sm",
            onClick: () => setCategoryFilter(cat),
            "data-cy": sel("devtools.blocks.filterCategory", { category: cat }),
            children: cat
          },
          cat
        ))
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: coverageFilter === "all" ? "secondary" : "outline",
            size: "sm",
            onClick: () => setCoverageFilter("all"),
            "data-cy": sel("devtools.blocks.coverageAll"),
            children: t("filters.allCoverage")
          }
        ),
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: coverageFilter === "covered" ? "secondary" : "outline",
            size: "sm",
            onClick: () => setCoverageFilter("covered"),
            className: "text-green-600",
            "data-cy": sel("devtools.blocks.coverageCovered"),
            children: [
              /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 mr-1" }),
              t("filters.covered")
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          Button,
          {
            variant: coverageFilter === "uncovered" ? "secondary" : "outline",
            size: "sm",
            onClick: () => setCoverageFilter("uncovered"),
            className: "text-gray-600",
            "data-cy": sel("devtools.blocks.coverageUncovered"),
            children: [
              /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 mr-1" }),
              t("filters.uncovered")
            ]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("showing", { count: filteredBlocks.length, total: blocksWithCoverage.length }) }),
    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", children: filteredBlocks.map((block) => {
      var _a;
      return /* @__PURE__ */ jsxs(
        Card,
        {
          className: "hover:shadow-md transition-shadow flex flex-col",
          "data-cy": sel("devtools.blocks.card", { slug: block.slug }),
          children: [
            /* @__PURE__ */ jsx("div", { className: "h-32 bg-muted flex items-center justify-center rounded-t-lg overflow-hidden", children: block.thumbnail ? /* @__PURE__ */ jsx(
              "img",
              {
                src: block.thumbnail,
                alt: block.name,
                className: "w-full h-full object-cover"
              }
            ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-muted-foreground", children: [
              /* @__PURE__ */ jsx(LayoutGrid, { className: "h-8 w-8 mb-1" }),
              /* @__PURE__ */ jsx("span", { className: "text-xs", children: "No preview" })
            ] }) }),
            /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
                /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: block.name }),
                /* @__PURE__ */ jsx(Badge, { className: CATEGORY_COLORS[block.category] || "bg-gray-100 text-gray-800", children: block.category })
              ] }),
              /* @__PURE__ */ jsx(CardDescription, { className: "text-xs line-clamp-2", children: block.description })
            ] }),
            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3 flex-1 flex flex-col", children: [
              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: (block.scope || []).map((scope) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: scope }, scope)) }),
              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
                  Object.keys(block.fieldDefinitions || {}).length,
                  " ",
                  t("fields")
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
                    /* @__PURE__ */ jsx(ImageIcon, { className: "h-3 w-3" }),
                    /* @__PURE__ */ jsxs("span", { children: [
                      ((_a = block.examples) == null ? void 0 : _a.length) || 0,
                      " ",
                      t("examples")
                    ] })
                  ] }),
                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                    /* @__PURE__ */ jsx(TestTube2, { className: "h-3 w-3" }),
                    /* @__PURE__ */ jsxs("span", { children: [
                      block.testCount,
                      " ",
                      t("tests")
                    ] })
                  ] })
                ] })
              ] }),
              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-muted rounded-md px-2 py-1 mt-auto", children: [
                /* @__PURE__ */ jsxs("code", { className: "text-xs font-mono", children: [
                  "@b-",
                  block.slug
                ] }),
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "ghost",
                    size: "sm",
                    className: "h-6 w-6 p-0",
                    onClick: () => copyGrepCommand(block.slug),
                    "data-cy": sel("devtools.blocks.copyTag", { slug: block.slug }),
                    children: copiedTag === block.slug ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
                  }
                )
              ] }),
              /* @__PURE__ */ jsxs(
                Link,
                {
                  href: `/devtools/blocks/${block.slug}`,
                  className: "flex items-center justify-center gap-1 text-sm text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-300 mt-2",
                  "data-cy": sel("devtools.blocks.viewDetails", { slug: block.slug }),
                  children: [
                    t("viewDetails"),
                    /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" })
                  ]
                }
              )
            ] })
          ]
        },
        block.slug
      );
    }) }),
    filteredBlocks.length === 0 && /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col items-center justify-center py-12", children: [
      /* @__PURE__ */ jsx(Search, { className: "h-12 w-12 text-muted-foreground mb-4" }),
      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: t("noResults") }),
      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("noResultsHint") })
    ] }) })
  ] });
}
export {
  BlocksViewer
};
