"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, Zap, AlertTriangle } from "lucide-react";
import { useTranslations } from "next-intl";
import { FLOW_REGISTRY, COVERAGE_SUMMARY } from "@nextsparkjs/registries/testing-registry";
import { sel } from "../../lib/test/index.js";
const CATEGORY_COLORS = {
  acquisition: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300",
  navigation: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-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 FlowsViewer() {
  const t = useTranslations("devtools.flows");
  const [searchQuery, setSearchQuery] = useState("");
  const [categoryFilter, setCategoryFilter] = useState("all");
  const [coverageFilter, setCoverageFilter] = useState("all");
  const [copiedTag, setCopiedTag] = useState(null);
  const flows = useMemo(() => Object.values(FLOW_REGISTRY), []);
  const filteredFlows = useMemo(() => {
    return flows.filter((flow) => {
      if (searchQuery) {
        const query = searchQuery.toLowerCase();
        const matchesSearch = flow.name.toLowerCase().includes(query) || flow.description.toLowerCase().includes(query) || flow.key.toLowerCase().includes(query);
        if (!matchesSearch) return false;
      }
      if (categoryFilter !== "all" && flow.category !== categoryFilter) {
        return false;
      }
      if (coverageFilter !== "all") {
        const hasCoverage = flow.testing.hasTests;
        if (coverageFilter === "covered" && !hasCoverage) return false;
        if (coverageFilter === "uncovered" && hasCoverage) return false;
      }
      return true;
    });
  }, [flows, searchQuery, categoryFilter, coverageFilter]);
  const categories = useMemo(() => {
    const cats = new Set(flows.map((f) => f.category));
    return Array.from(cats).sort();
  }, [flows]);
  const criticalCount = useMemo(() => {
    return flows.filter((f) => f.criticalPath).length;
  }, [flows]);
  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.flows.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.flows.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.flows.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.flows.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__ */ jsx("div", { className: "text-2xl font-bold text-amber-600 dark:text-amber-400", children: criticalCount }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("stats.critical") })
      ] }) })
    ] }),
    COVERAGE_SUMMARY.flows.withoutTests > 0 && /* @__PURE__ */ jsx(Card, { className: "border-amber-500 bg-amber-50 dark:bg-amber-950", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex items-center gap-3 py-4", children: [
      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-amber-600" }),
      /* @__PURE__ */ jsxs("p", { className: "text-sm text-amber-800 dark:text-amber-200", children: [
        COVERAGE_SUMMARY.flows.withoutTests,
        " flow(s) have no test coverage. Consider adding tests for critical user journeys."
      ] })
    ] }) }),
    /* @__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.flows.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.flows.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.flows.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.flows.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.flows.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.flows.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: filteredFlows.length, total: flows.length }) }),
    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filteredFlows.map((flow) => /* @__PURE__ */ jsxs(
      Card,
      {
        className: "hover:shadow-md transition-shadow",
        "data-cy": sel("devtools.flows.card", { slug: flow.key }),
        children: [
          /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: flow.name }),
                flow.criticalPath && /* @__PURE__ */ jsxs(Badge, { className: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300", children: [
                  /* @__PURE__ */ jsx(Zap, { className: "h-3 w-3 mr-1" }),
                  t("criticalPath")
                ] })
              ] }),
              /* @__PURE__ */ jsx(Badge, { className: CATEGORY_COLORS[flow.category], children: t(`categories.${flow.category}`) })
            ] }),
            /* @__PURE__ */ jsx(CardDescription, { children: flow.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: [
                  flow.testing.testCount,
                  " ",
                  t("tests")
                ] })
              ] }),
              flow.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: [
                "@",
                flow.tag
              ] }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "sm",
                  onClick: () => copyGrepCommand(flow.tag),
                  "data-cy": sel("devtools.flows.copyTag", { slug: flow.key }),
                  children: copiedTag === flow.tag ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
                }
              )
            ] })
          ] })
        ]
      },
      flow.key
    )) }),
    filteredFlows.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 {
  FlowsViewer
};
