import { useStudio as e } from "../providers/StudioProvider.js";
import { useApiClient as t } from "../hooks/useApi.js";
import { useWorkspaceConfig as n } from "../hooks/useConfig.js";
import { Badge as r } from "../components/ui/badge.js";
import i from "../components/layout/MainLayout.js";
import { DataTable as a } from "../components/data-table/DataTable.js";
import { useMemo as o, useState as s } from "react";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
import { useQueries as u } from "@tanstack/react-query";
import { Home as d } from "lucide-react";
//#region src/pages/DebugWorkflowsPage.tsx
function f() {
	let { router: f } = e(), { envKey: p, api: m } = t(), { data: h, isLoading: g } = n(), _ = u({ queries: (h ?? []).map((e) => ({
		queryKey: [
			"workflowTypes",
			e.className,
			p
		],
		queryFn: async () => {
			let t = await m.config.getWorkflowTypesByWorkspace({ workspaceBlockName: e.className });
			return {
				workspaceBlockName: e.className,
				types: t
			};
		},
		enabled: !!h?.length
	})) }), v = _.some((e) => e.isLoading), y = g || v, b = o(() => y || !_ ? [] : _.flatMap((e) => {
		if (!e.data) return [];
		let { workspaceBlockName: t, types: n } = e.data;
		return (n ?? []).map((e) => ({
			...e,
			id: `${t}::${e.alias}`,
			workspaceBlockName: t
		}));
	}), [_, y]), [x, S] = s(""), [C, w] = s("alias"), [T, E] = s("ASC"), [D, O] = s(0), [k, A] = s(10), j = o(() => {
		let e = b;
		if (x) {
			let t = x.toLowerCase();
			e = e.filter((e) => e.alias?.toLowerCase().includes(t) || e.title?.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t) || e.workspaceBlockName.toLowerCase().includes(t));
		}
		return e = [...e].sort((e, t) => {
			let n = C, r = (e[n] || "").toLowerCase(), i = (t[n] || "").toLowerCase();
			return r < i ? T === "ASC" ? -1 : 1 : r > i ? T === "ASC" ? 1 : -1 : 0;
		}), e;
	}, [
		b,
		x,
		C,
		T
	]), M = o(() => {
		let e = D * k;
		return j.slice(e, e + k);
	}, [
		j,
		D,
		k
	]);
	return /* @__PURE__ */ l(i, {
		breadcrumbsData: [{
			label: "Dashboard",
			href: f.getDashboard(),
			icon: /* @__PURE__ */ c(d, { className: "h-4 w-4" })
		}, {
			label: "Debug Workflows",
			current: !0
		}],
		children: [/* @__PURE__ */ c("h1", {
			className: "mb-4 text-3xl font-bold tracking-tight",
			children: "Workflow Types"
		}), /* @__PURE__ */ c(a, {
			data: M,
			columns: [
				{
					id: "alias",
					label: "Type ID (Alias)",
					sortable: !0,
					minWidth: 200,
					format: (e) => /* @__PURE__ */ c("span", {
						className: "font-medium",
						children: String(e)
					})
				},
				{
					id: "title",
					label: "Title",
					sortable: !0,
					format: (e, t) => /* @__PURE__ */ c("span", { children: String(e || t.alias || "N/A") })
				},
				{
					id: "workspaceBlockName",
					label: "Workspace Type",
					sortable: !0,
					format: (e) => /* @__PURE__ */ c(r, {
						variant: "outline",
						children: String(e)
					})
				},
				{
					id: "description",
					label: "Description",
					sortable: !0,
					format: (e) => /* @__PURE__ */ c("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, t) => {
				w(e), E(t);
			},
			filters: {},
			onFiltersChange: () => {},
			enableBatchActions: !1,
			onRowClick: (e) => void f.navigateToDebugWorkflow(e.id)
		})]
	});
}
//#endregion
export { f as default };
