"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
import { Badge } from "../ui/badge.js";
import { Progress } from "../ui/progress.js";
import {
  BarChart3,
  FileText,
  Tags,
  Workflow,
  AlertTriangle,
  CheckCircle2,
  Loader2
} from "lucide-react";
import { sel } from "../../lib/test/index.js";
function StatCard({ icon, label, value, percentage, dataCy, subtext }) {
  return /* @__PURE__ */ jsx(Card, { "data-cy": dataCy, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
      /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-violet-100 dark:bg-violet-900/30", children: icon }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: label }),
        /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: value }),
        subtext && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtext })
      ] })
    ] }),
    percentage !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
      /* @__PURE__ */ jsx(Progress, { value: percentage, className: "h-2" }),
      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1 text-right", children: [
        percentage,
        "%"
      ] })
    ] })
  ] }) });
}
const TAG_CATEGORY_MAP = {
  layers: "Layers",
  priorities: "Priorities",
  features: "Features",
  flows: "Flows",
  blocks: "Blocks",
  roles: "Roles",
  operations: "Operations",
  other: "Other"
};
function TestCoverageDashboard() {
  const t = useTranslations("devtools.tests.dashboard");
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    async function fetchCoverage() {
      try {
        const response = await fetch("/api/v1/devtools/testing");
        const json = await response.json();
        if (!response.ok) throw new Error(json.error || "Failed to load coverage data");
        setData(json);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to load");
      } finally {
        setLoading(false);
      }
    }
    fetchCoverage();
  }, []);
  if (loading) {
    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", "data-cy": sel("devtools.tests.dashboard"), children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-violet-600 dark:text-violet-400" }) });
  }
  if (error) {
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", "data-cy": sel("devtools.tests.dashboard"), children: [
      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-12 w-12 text-amber-500 mb-4" }),
      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-amber-600 dark:text-amber-400", children: error })
    ] });
  }
  if (!(data == null ? void 0 : data.data)) return null;
  const { summary, features = [], flows = [] } = data.data;
  const featureCoverage = summary.features.total > 0 ? Math.round(summary.features.withTests / summary.features.total * 100) : 0;
  const flowCoverage = summary.flows.total > 0 ? Math.round(summary.flows.withTests / summary.flows.total * 100) : 0;
  const uncoveredFeatures = features.filter((f) => !f.testing.hasTests);
  const uncoveredFlows = flows.filter((f) => !f.testing.hasTests);
  const criticalUncoveredFlows = uncoveredFlows.filter((f) => f.criticalPath);
  const hasGaps = uncoveredFeatures.length > 0 || uncoveredFlows.length > 0;
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 h-full overflow-y-auto", "data-cy": sel("devtools.tests.dashboard"), children: [
    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-violet-600 dark:text-violet-400", children: t("title") }) }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
        "data-cy": sel("devtools.tests.dashboardStats"),
        children: [
          /* @__PURE__ */ jsx(
            StatCard,
            {
              icon: /* @__PURE__ */ jsx(BarChart3, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
              label: t("features"),
              value: `${summary.features.withTests}/${summary.features.total}`,
              percentage: featureCoverage,
              dataCy: sel("devtools.tests.dashboardStatFeatures"),
              subtext: `${summary.features.withTests} ${t("withTests")}`
            }
          ),
          /* @__PURE__ */ jsx(
            StatCard,
            {
              icon: /* @__PURE__ */ jsx(Workflow, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
              label: t("flows"),
              value: `${summary.flows.withTests}/${summary.flows.total}`,
              percentage: flowCoverage,
              dataCy: sel("devtools.tests.dashboardStatFlows"),
              subtext: `${summary.flows.withTests} ${t("withTests")}`
            }
          ),
          /* @__PURE__ */ jsx(
            StatCard,
            {
              icon: /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
              label: t("testFiles"),
              value: String(summary.testFiles),
              dataCy: sel("devtools.tests.dashboardStatFiles")
            }
          ),
          /* @__PURE__ */ jsx(
            StatCard,
            {
              icon: /* @__PURE__ */ jsx(Tags, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
              label: t("tags"),
              value: String(summary.totalTags),
              dataCy: sel("devtools.tests.dashboardStatTags")
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsxs(Card, { "data-cy": sel("devtools.tests.dashboardGaps"), children: [
      /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: [
        hasGaps ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-amber-500" }) : /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" }),
        t("gaps")
      ] }) }),
      /* @__PURE__ */ jsx(CardContent, { children: !hasGaps ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 text-muted-foreground", children: [
        /* @__PURE__ */ jsx(CheckCircle2, { className: "h-8 w-8 text-green-500 mx-auto mb-2" }),
        /* @__PURE__ */ jsx("p", { children: t("noGaps") })
      ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
        criticalUncoveredFlows.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-red-600 dark:text-red-400 mb-2 flex items-center gap-1", children: [
            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
            t("criticalPath"),
            " (",
            criticalUncoveredFlows.length,
            ")"
          ] }),
          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: criticalUncoveredFlows.map((flow) => /* @__PURE__ */ jsx(
            Badge,
            {
              variant: "destructive",
              "data-cy": sel("devtools.tests.dashboardGapItem", { slug: flow.slug }),
              children: flow.title
            },
            flow.slug
          )) })
        ] }),
        uncoveredFeatures.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-amber-600 dark:text-amber-400 mb-2", children: [
            t("features"),
            " ",
            t("withoutTests"),
            " (",
            uncoveredFeatures.length,
            ")"
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
            uncoveredFeatures.slice(0, 10).map((feature) => /* @__PURE__ */ jsx(
              Badge,
              {
                variant: "outline",
                className: "border-amber-500 text-amber-600 dark:text-amber-400",
                "data-cy": sel("devtools.tests.dashboardGapItem", { slug: feature.slug }),
                children: feature.title
              },
              feature.slug
            )),
            uncoveredFeatures.length > 10 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
              "+",
              uncoveredFeatures.length - 10
            ] })
          ] })
        ] }),
        uncoveredFlows.filter((f) => !f.criticalPath).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-amber-600 dark:text-amber-400 mb-2", children: [
            t("flows"),
            " ",
            t("withoutTests"),
            " (",
            uncoveredFlows.filter((f) => !f.criticalPath).length,
            ")"
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
            uncoveredFlows.filter((f) => !f.criticalPath).slice(0, 10).map((flow) => /* @__PURE__ */ jsx(
              Badge,
              {
                variant: "outline",
                className: "border-amber-500 text-amber-600 dark:text-amber-400",
                "data-cy": sel("devtools.tests.dashboardGapItem", { slug: flow.slug }),
                children: flow.title
              },
              flow.slug
            )),
            uncoveredFlows.filter((f) => !f.criticalPath).length > 10 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
              "+",
              uncoveredFlows.filter((f) => !f.criticalPath).length - 10
            ] })
          ] })
        ] })
      ] }) })
    ] }),
    summary.byCategory && Object.keys(summary.byCategory).length > 0 && /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: t("coverage") }) }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", children: Object.entries(summary.byCategory).map(([category, count]) => /* @__PURE__ */ jsxs(
        "div",
        {
          className: "text-center p-3 rounded-lg bg-muted/50",
          children: [
            /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-violet-600 dark:text-violet-400", children: count }),
            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground capitalize", children: TAG_CATEGORY_MAP[category] || category })
          ]
        },
        category
      )) }) })
    ] })
  ] });
}
export {
  TestCoverageDashboard
};
