"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import Link from "next/link";
import { ArrowLeft, Edit, LayoutGrid } from "lucide-react";
import { PatternUsageReport } from "../PatternUsageReport.js";
import { Button } from "../../ui/button.js";
import { Alert, AlertDescription, AlertTitle } from "../../ui/alert.js";
import { Skeleton } from "../../ui/skeleton.js";
import { useEntityConfig } from "../../../hooks/useEntityConfig.js";
import { getEntityData } from "../../../lib/api/entities.js";
function PatternReportsPage() {
  const params = useParams();
  const router = useRouter();
  const patternId = params.id;
  const [pattern, setPattern] = useState(null);
  const [dataLoading, setDataLoading] = useState(true);
  const [error, setError] = useState(null);
  const { config: entityConfig, isLoading: configLoading } = useEntityConfig("patterns");
  useEffect(() => {
    async function loadPattern() {
      if (!patternId) {
        setError("Pattern ID is required");
        setDataLoading(false);
        return;
      }
      if (!entityConfig) {
        return;
      }
      if (!entityConfig.enabled) {
        setError("Patterns entity is not configured or not enabled");
        setDataLoading(false);
        return;
      }
      try {
        const data = await getEntityData("patterns", patternId, false);
        setPattern(data);
      } catch (err) {
        console.error("Error loading pattern:", err);
        setError(err instanceof Error ? err.message : "Failed to load pattern");
      } finally {
        setDataLoading(false);
      }
    }
    if (entityConfig) {
      loadPattern();
    }
  }, [patternId, entityConfig]);
  if (configLoading || dataLoading) {
    return /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", "data-cy": "pattern-reports-loading", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64" })
      ] }),
      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-96" }),
      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, i)) }),
      /* @__PURE__ */ jsx(Skeleton, { className: "h-64" })
    ] });
  }
  if (error) {
    return /* @__PURE__ */ jsxs("div", { className: "p-6", "data-cy": "pattern-reports-error", children: [
      /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
        /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
        /* @__PURE__ */ jsx(AlertDescription, { children: error })
      ] }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          variant: "outline",
          className: "mt-4",
          onClick: () => router.push("/dashboard/patterns"),
          children: [
            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
            "Back to Patterns"
          ]
        }
      )
    ] });
  }
  if (!pattern) {
    return /* @__PURE__ */ jsxs("div", { className: "p-6", "data-cy": "pattern-reports-not-found", children: [
      /* @__PURE__ */ jsxs(Alert, { children: [
        /* @__PURE__ */ jsx(AlertTitle, { children: "Pattern Not Found" }),
        /* @__PURE__ */ jsx(AlertDescription, { children: "The pattern you are looking for does not exist or has been deleted." })
      ] }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          variant: "outline",
          className: "mt-4",
          onClick: () => router.push("/dashboard/patterns"),
          children: [
            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
            "Back to Patterns"
          ]
        }
      )
    ] });
  }
  const patternName = pattern.name || pattern.title || pattern.id;
  return /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", "data-cy": "pattern-reports-page", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "icon",
            asChild: true,
            "data-cy": "pattern-reports-back",
            children: /* @__PURE__ */ jsx(Link, { href: "/dashboard/patterns", children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) })
          }
        ),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(LayoutGrid, { className: "h-5 w-5 text-muted-foreground" }),
            /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", "data-cy": "pattern-reports-title", children: patternName })
          ] }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Usage reports and analytics" })
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { variant: "outline", asChild: true, "data-cy": "pattern-reports-edit", children: /* @__PURE__ */ jsxs(Link, { href: `/dashboard/patterns/${patternId}/edit`, children: [
        /* @__PURE__ */ jsx(Edit, { className: "mr-2 h-4 w-4" }),
        "Edit Pattern"
      ] }) }) })
    ] }),
    /* @__PURE__ */ jsx(PatternUsageReport, { patternId, pageSize: 20 })
  ] });
}
export {
  PatternReportsPage as default
};
