"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useMemo, Suspense, useState } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from "../ui/table";
import { ArrowLeft, LayoutGrid, TestTube2, CheckCircle2, XCircle, Eye, Loader2 } 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 { getBlockComponent } from "../../lib/blocks/loader";
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 BlockPreviewLoading() {
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-20 bg-muted rounded-lg", children: [
    /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }),
    /* @__PURE__ */ jsx("span", { className: "ml-3 text-muted-foreground", children: "Loading block preview..." })
  ] });
}
function BlockPreviewError({ error }) {
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-20 bg-red-50 dark:bg-red-950/20 rounded-lg border border-red-200 dark:border-red-900", children: [
    /* @__PURE__ */ jsx(XCircle, { className: "h-8 w-8 text-red-500 mb-3" }),
    /* @__PURE__ */ jsx("p", { className: "text-red-600 dark:text-red-400 font-medium", children: "Failed to load block preview" }),
    /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 dark:text-red-400/70 mt-1", children: error })
  ] });
}
function BlockDetailViewer({ slug }) {
  const t = useTranslations("devtools.blocks.detail");
  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
  const block = useMemo(() => BLOCK_REGISTRY[slug], [slug]);
  const testCoverage = useMemo(() => {
    const blockTags = TAGS_REGISTRY.blocks;
    const tagData = blockTags[slug];
    return {
      testCount: (tagData == null ? void 0 : tagData.testCount) || 0,
      hasTests: ((tagData == null ? void 0 : tagData.testCount) || 0) > 0,
      files: (tagData == null ? void 0 : tagData.files) ? [...tagData.files] : []
    };
  }, [slug]);
  const fieldsByTab = useMemo(() => {
    if (!(block == null ? void 0 : block.fieldDefinitions)) return {};
    const grouped = {};
    for (const [fieldKey, field] of Object.entries(block.fieldDefinitions)) {
      const tab = field.tab || "content";
      if (!grouped[tab]) {
        grouped[tab] = {};
      }
      grouped[tab][fieldKey] = field;
    }
    return grouped;
  }, [block]);
  const examples = useMemo(() => (block == null ? void 0 : block.examples) || [], [block]);
  const currentExample = useMemo(() => examples[selectedExampleIndex], [examples, selectedExampleIndex]);
  const BlockComponent = useMemo(() => {
    if (!block) return null;
    const component = getBlockComponent(slug);
    console.log("[BlockDetailViewer] Loading block:", slug, "Component:", component);
    return component;
  }, [block, slug]);
  if (!block) {
    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col items-center justify-center py-12", children: [
      /* @__PURE__ */ jsx(LayoutGrid, { className: "h-12 w-12 text-muted-foreground mb-4" }),
      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "Block not found" }),
      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
        'The block "',
        slug,
        '" does not exist in the registry.'
      ] }),
      /* @__PURE__ */ jsx(Link, { href: "/devtools/blocks", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }),
        t("back")
      ] }) })
    ] }) });
  }
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-cy": sel("devtools.blocks.detail.page", { slug }), children: [
    /* @__PURE__ */ jsxs(
      Link,
      {
        href: "/devtools/blocks",
        className: "inline-flex items-center text-sm text-muted-foreground hover:text-foreground",
        children: [
          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }),
          t("back")
        ]
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
      /* @__PURE__ */ jsx("div", { className: "w-32 h-24 bg-muted rounded-lg flex items-center justify-center overflow-hidden flex-shrink-0", children: block.thumbnail ? /* @__PURE__ */ jsx(
        "img",
        {
          src: block.thumbnail,
          alt: block.name,
          className: "w-full h-full object-cover"
        }
      ) : /* @__PURE__ */ jsx(LayoutGrid, { className: "h-8 w-8 text-muted-foreground" }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: block.name }),
          /* @__PURE__ */ jsx(Badge, { className: CATEGORY_COLORS[block.category] || "bg-gray-100 text-gray-800", children: block.category })
        ] }),
        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: block.description }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mt-3", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
              t("scope"),
              ":"
            ] }),
            (block.scope || []).map((scope) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: scope }, scope))
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(TestTube2, { className: "h-4 w-4 text-muted-foreground" }),
            /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
              testCoverage.testCount,
              " tests"
            ] }),
            testCoverage.hasTests ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-gray-400" })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "preview", className: "space-y-4", children: [
      /* @__PURE__ */ jsxs(TabsList, { children: [
        /* @__PURE__ */ jsxs(TabsTrigger, { value: "preview", "data-cy": sel("devtools.blocks.detail.tabPreview"), children: [
          /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-1" }),
          t("preview")
        ] }),
        /* @__PURE__ */ jsxs(TabsTrigger, { value: "fields", "data-cy": sel("devtools.blocks.detail.tabFields"), children: [
          t("fieldsTab"),
          " (",
          Object.keys(block.fieldDefinitions || {}).length,
          ")"
        ] }),
        /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", "data-cy": sel("devtools.blocks.detail.tabOverview"), children: t("overview") })
      ] }),
      /* @__PURE__ */ jsxs(TabsContent, { value: "preview", className: "space-y-4", children: [
        /* @__PURE__ */ jsxs(Card, { children: [
          /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
            /* @__PURE__ */ jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: [
              /* @__PURE__ */ jsx(Eye, { className: "h-5 w-5" }),
              t("livePreview")
            ] }),
            /* @__PURE__ */ jsx(CardDescription, { children: t("previewDescription") })
          ] }),
          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
            examples.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-wrap", "data-cy": sel("devtools.blocks.detail.exampleSelector"), children: examples.map((ex, i) => /* @__PURE__ */ jsx(
              Button,
              {
                variant: i === selectedExampleIndex ? "default" : "outline",
                size: "sm",
                onClick: () => setSelectedExampleIndex(i),
                "data-cy": sel("devtools.blocks.detail.exampleBtn", { index: i.toString() }),
                children: ex.name
              },
              i
            )) }),
            currentExample && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
              /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", "data-cy": sel("devtools.blocks.detail.exampleName"), children: currentExample.name }),
              currentExample.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-cy": sel("devtools.blocks.detail.exampleDescription"), children: currentExample.description })
            ] }),
            currentExample ? /* @__PURE__ */ jsx(
              "div",
              {
                className: "light border rounded-lg overflow-hidden bg-white text-gray-900",
                style: { colorScheme: "light" },
                "data-cy": sel("devtools.blocks.detail.preview", { slug }),
                children: BlockComponent ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(BlockPreviewLoading, {}), children: /* @__PURE__ */ jsx(BlockComponent, { ...currentExample.props }) }, `${slug}-${selectedExampleIndex}`) : /* @__PURE__ */ jsx(BlockPreviewError, { error: "Block component not found in registry" })
              }
            ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-20 bg-muted rounded-lg border", children: [
              /* @__PURE__ */ jsx(Eye, { className: "h-8 w-8 text-muted-foreground mb-3" }),
              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground font-medium", children: "No examples defined for this block" }),
              /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
                "Run ",
                /* @__PURE__ */ jsxs("code", { className: "bg-background px-2 py-1 rounded", children: [
                  "/block:update ",
                  slug
                ] }),
                " to add examples"
              ] })
            ] })
          ] })
        ] }),
        currentExample && /* @__PURE__ */ jsxs(Card, { children: [
          /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
            /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: t("exampleProps") }),
            /* @__PURE__ */ jsx(CardDescription, { children: t("examplePropsDescription") })
          ] }),
          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("pre", { className: "bg-muted p-4 rounded-lg overflow-x-auto text-xs font-mono", children: JSON.stringify(currentExample.props, null, 2) }) })
        ] })
      ] }),
      /* @__PURE__ */ jsx(TabsContent, { value: "fields", className: "space-y-6", children: Object.entries(fieldsByTab).map(([tabName, fields]) => /* @__PURE__ */ jsxs(Card, { children: [
        /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
          /* @__PURE__ */ jsx(CardTitle, { className: "text-lg capitalize", children: tabName }),
          /* @__PURE__ */ jsxs(CardDescription, { children: [
            Object.keys(fields).length,
            " fields"
          ] })
        ] }),
        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Table, { children: [
          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
            /* @__PURE__ */ jsx(TableHead, { className: "w-[180px]", children: t("fieldName") }),
            /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: t("fieldType") }),
            /* @__PURE__ */ jsx(TableHead, { className: "w-[80px]", children: t("required") }),
            /* @__PURE__ */ jsx(TableHead, { children: t("default") }),
            /* @__PURE__ */ jsx(TableHead, { children: t("options") })
          ] }) }),
          /* @__PURE__ */ jsx(TableBody, { children: Object.entries(fields).map(([fieldKey, field]) => /* @__PURE__ */ jsxs(TableRow, { children: [
            /* @__PURE__ */ jsxs(TableCell, { className: "font-mono text-sm", children: [
              fieldKey,
              field.label && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground font-sans", children: field.label })
            ] }),
            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "font-mono text-xs", children: field.type }) }),
            /* @__PURE__ */ jsx(TableCell, { children: field.required ? /* @__PURE__ */ jsx("span", { className: "text-green-600", children: t("yes") }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("no") }) }),
            /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-xs", children: field.default !== void 0 ? /* @__PURE__ */ jsx("code", { className: "bg-muted px-1 py-0.5 rounded", children: JSON.stringify(field.default) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }) }),
            /* @__PURE__ */ jsx(TableCell, { className: "text-xs", children: field.options ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
              field.options.slice(0, 5).map((opt, i) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: opt.label || String(opt.value) }, i)),
              field.options.length > 5 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
                "+",
                field.options.length - 5
              ] })
            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }) })
          ] }, fieldKey)) })
        ] }) })
      ] }, tabName)) }),
      /* @__PURE__ */ jsx(TabsContent, { value: "overview", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
        /* @__PURE__ */ jsxs(Card, { children: [
          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Block Info" }) }),
          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground", children: "Slug" }),
              /* @__PURE__ */ jsx("p", { className: "font-mono", children: block.slug })
            ] }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground", children: t("category") }),
              /* @__PURE__ */ jsx("p", { children: block.category })
            ] }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground", children: t("scope") }),
              /* @__PURE__ */ jsx("p", { children: (block.scope || []).join(", ") })
            ] }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground", children: "Icon" }),
              /* @__PURE__ */ jsx("p", { className: "font-mono", children: block.icon })
            ] }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground", children: "Source" }),
              /* @__PURE__ */ jsxs("p", { children: [
                block.source,
                " (",
                block.sourceId,
                ")"
              ] })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Card, { children: [
          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: t("testCoverage") }) }),
          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ jsx(TestTube2, { className: "h-5 w-5 text-muted-foreground" }),
              /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold", children: testCoverage.testCount }),
              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "tests" })
            ] }),
            testCoverage.hasTests ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-green-600", children: [
              /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5" }),
              /* @__PURE__ */ jsx("span", { children: "Block has test coverage" })
            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
              /* @__PURE__ */ jsx(XCircle, { className: "h-5 w-5" }),
              /* @__PURE__ */ jsx("span", { children: "No tests for this block" })
            ] }),
            testCoverage.files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
              /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground mb-2 block", children: "Test files:" }),
              /* @__PURE__ */ jsx("ul", { className: "text-sm space-y-1", children: testCoverage.files.map((file, i) => /* @__PURE__ */ jsx("li", { className: "font-mono text-xs text-muted-foreground truncate", children: file.split("/").pop() }, i)) })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "mt-4 bg-muted rounded-md p-3", children: [
              /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground mb-1 block", children: "Grep command:" }),
              /* @__PURE__ */ jsxs("code", { className: "text-xs font-mono", children: [
                'npx cypress run --env grepTags="@b-',
                block.slug,
                '"'
              ] })
            ] })
          ] })
        ] })
      ] }) })
    ] })
  ] });
}
export {
  BlockDetailViewer
};
