import { useStudio } from "../providers/StudioProvider.js";
import { useApiClient } from "../hooks/useApi.js";
import { Badge } from "../components/ui/badge.js";
import MainLayout_default from "../components/layout/MainLayout.js";
import { DataTable } from "../components/data-table/DataTable.js";
import { useWorkspaceConfig } from "../hooks/useConfig.js";
import { useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useQueries } from "@tanstack/react-query";
import { Home } from "lucide-react";
function DebugWorkflowsPage() {
	let { router: f } = useStudio(), { envKey: p, api: m } = useApiClient(), { data: h, isLoading: g } = useWorkspaceConfig(), _ = useQueries({ queries: (h ?? []).map((e) => ({
		queryKey: [
			"pipeline-types",
			e.blockName,
			p
		],
		queryFn: async () => {
			if (!m) throw Error("API not available");
			let c = await m.ApiV1ConfigApi.configControllerGetPipelineTypesByWorkspace({ workspaceBlockName: e.blockName });
			return {
				workspaceBlockName: e.blockName,
				types: c.data
			};
		},
		enabled: !!h?.length
	})) }), v = _.some((e) => e.isLoading), y = g || v, b = useMemo(() => y || !_ ? [] : _.flatMap((e) => {
		if (!e.data) return [];
		let { workspaceBlockName: c, types: l } = e.data;
		return (l ?? []).map((e) => ({
			...e,
			id: `${c}::${e.blockName}`,
			workspaceBlockName: c
		}));
	}), [_, y]), [x, S] = useState(""), [C, w] = useState("blockName"), [T, E] = useState("ASC"), [D, O] = useState(0), [k, A] = useState(10), j = useMemo(() => {
		let e = b;
		if (x) {
			let c = x.toLowerCase();
			e = e.filter((e) => e.blockName?.toLowerCase().includes(c) || e.title?.toLowerCase().includes(c) || e.description?.toLowerCase().includes(c) || e.workspaceBlockName.toLowerCase().includes(c));
		}
		return e = [...e].sort((e, c) => {
			let l = C, u = (e[l] || "").toLowerCase(), d = (c[l] || "").toLowerCase();
			return u < d ? T === "ASC" ? -1 : 1 : u > d ? T === "ASC" ? 1 : -1 : 0;
		}), e;
	}, [
		b,
		x,
		C,
		T
	]), M = useMemo(() => {
		let e = D * k;
		return j.slice(e, e + k);
	}, [
		j,
		D,
		k
	]);
	return /* @__PURE__ */ jsxs(MainLayout_default, {
		breadcrumbsData: [{
			label: "Dashboard",
			href: f.getDashboard(),
			icon: /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" })
		}, {
			label: "Debug Workflows",
			current: !0
		}],
		children: [/* @__PURE__ */ jsx("h1", {
			className: "mb-4 text-3xl font-bold tracking-tight",
			children: "Workflow Types"
		}), /* @__PURE__ */ jsx(DataTable, {
			data: M,
			columns: [
				{
					id: "blockName",
					label: "Type ID (Block Name)",
					sortable: !0,
					minWidth: 200,
					format: (e) => /* @__PURE__ */ jsx("span", {
						className: "font-medium",
						children: String(e)
					})
				},
				{
					id: "title",
					label: "Title",
					sortable: !0,
					format: (e, c) => /* @__PURE__ */ jsx("span", { children: String(e || c.blockName || "N/A") })
				},
				{
					id: "workspaceBlockName",
					label: "Workspace Type",
					sortable: !0,
					format: (e) => /* @__PURE__ */ jsx(Badge, {
						variant: "outline",
						children: String(e)
					})
				},
				{
					id: "description",
					label: "Description",
					sortable: !0,
					format: (e) => /* @__PURE__ */ jsx("span", {
						className: "text-muted-foreground max-w-xs truncate block",
						children: String(e || "-")
					})
				}
			],
			loading: y,
			totalItems: j.length,
			searchTerm: x,
			onSearchChange: S,
			page: D,
			pageSize: k,
			onPageChange: (e) => O(e),
			onPageSizeChange: (e) => {
				A(e), O(0);
			},
			sortBy: C,
			sortOrder: T,
			onSortChange: (e, c) => {
				w(e), E(c);
			},
			filters: {},
			onFiltersChange: () => {},
			enableBatchActions: !1,
			onRowClick: (e) => void f.navigateToDebugWorkflow(e.id)
		})]
	});
}
export { DebugWorkflowsPage as default };
