"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
import { Badge } from "../ui/badge.js";
import { Button } from "../ui/button.js";
import { Input } from "../ui/input.js";
import { Copy, Check, Search, TestTube2, CheckCircle2, XCircle } from "lucide-react";
import { useTranslations } from "next-intl";
import { FEATURE_REGISTRY, COVERAGE_SUMMARY } from "@nextsparkjs/registries/testing-registry";
import { sel } from "../../lib/test/index.js";
const CATEGORY_COLORS = {
  core: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
  entities: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
  content: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
  settings: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300",
  admin: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
  public: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300"
};
function FeaturesViewer() {
  const t = useTranslations("devtools.features");
  const [searchQuery, setSearchQuery] = useState("");
  const [categoryFilter, setCategoryFilter] = useState("all");
  const [coverageFilter, setCoverageFilter] = useState("all");
  const [copiedTag, setCopiedTag] = useState(null);
  const features = useMemo(() => Object.values(FEATURE_REGISTRY), []);
  const filteredFeatures = useMemo(() => {
    return features.filter((feature) => {
      if (searchQuery) {
        const query = searchQuery.toLowerCase();
        const matchesSearch = feature.name.toLowerCase().includes(query) || feature.description.toLowerCase().includes(query) || feature.key.toLowerCase().includes(query);
        if (!matchesSearch) return false;
      }
      if (categoryFilter !== "all" && feature.category !== categoryFilter) {
        return false;
      }
      if (coverageFilter !== "all") {
        const hasCoverage = feature.testing.hasTests;
        if (coverageFilter === "covered" && !hasCoverage) return false;
        if (coverageFilter === "uncovered" && hasCoverage) return false;
      }
      return true;
    });
  }, [features, searchQuery, categoryFilter, coverageFilter]);
  const categories = useMemo(() => {
    const cats = new Set(features.map((f) => f.category));
    return Array.from(cats).sort();
  }, [features]);
  const copyGrepCommand = (tag) => {
    const command = `npx cypress run --env grepTags="@${tag}"`;
    navigator.clipboard.writeText(command);
    setCopiedTag(tag);
    setTimeout(() => setCopiedTag(null), 2e3);
  };
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-cy": sel("devtools.features.viewer"), children: [
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 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: COVERAGE_SUMMARY.features.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: COVERAGE_SUMMARY.features.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-red-600 dark:text-red-400", children: COVERAGE_SUMMARY.features.withoutTests }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("stats.uncovered") })
      ] }) }),
      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "pt-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold text-blue-600 dark:text-blue-400", children: [
          Math.round(COVERAGE_SUMMARY.features.withTests / COVERAGE_SUMMARY.features.total * 100),
          "%"
        ] }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("stats.coverage") })
      ] }) })
    ] }),
    /* @__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.features.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.features.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.features.filterCategory", { category: cat }),
            children: t(`categories.${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.features.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.features.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-red-600",
            "data-cy": sel("devtools.features.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: filteredFeatures.length, total: features.length }) }),
    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: filteredFeatures.map((feature) => /* @__PURE__ */ jsxs(
      Card,
      {
        className: "hover:shadow-md transition-shadow",
        "data-cy": sel("devtools.features.card", { slug: feature.key }),
        children: [
          /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
              /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: feature.name }),
              /* @__PURE__ */ jsx(Badge, { className: CATEGORY_COLORS[feature.category], children: t(`categories.${feature.category}`) })
            ] }),
            /* @__PURE__ */ jsx(CardDescription, { children: feature.description })
          ] }),
          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
              /* @__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: [
                  feature.testing.testCount,
                  " ",
                  t("tests")
                ] })
              ] }),
              feature.testing.hasTests ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-green-600 border-green-600", children: [
                /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 mr-1" }),
                t("covered")
              ] }) : /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-red-600 border-red-600", children: [
                /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 mr-1" }),
                t("uncovered")
              ] })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-muted rounded-md px-3 py-2", children: [
              /* @__PURE__ */ jsxs("code", { className: "text-sm font-mono", children: [
                "@",
                feature.tag
              ] }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "sm",
                  onClick: () => copyGrepCommand(feature.tag),
                  "data-cy": sel("devtools.features.copyTag", { slug: feature.key }),
                  children: copiedTag === feature.tag ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
                }
              )
            ] })
          ] })
        ]
      },
      feature.key
    )) }),
    filteredFeatures.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 {
  FeaturesViewer
};
