import { useStudio as e } from "../providers/StudioProvider.js";
import { useFilterWorkflows as t } from "../hooks/useWorkflows.js";
import { Button as n } from "../components/ui/button.js";
import { NewRunDialog as r } from "../features/workbench/components/NewRunDialog.js";
import "../features/workbench/index.js";
import { useCallback as i, useState as a } from "react";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { ChevronDown as c, Loader2 as l, Play as u } from "lucide-react";
import { formatDistanceToNow as d } from "date-fns";
//#region src/pages/StudioLandingPage.tsx
var f = {
	completed: "bg-green-500",
	running: "bg-blue-500",
	failed: "bg-red-500",
	paused: "bg-yellow-500",
	canceled: "bg-orange-500",
	pending: "bg-muted-foreground"
};
function p() {
	let { router: d } = e(), [f, p] = a(!1), [h, g] = a(3), _ = t(void 0, { parentId: null }, "createdAt", "DESC", 0, h), v = _.data?.data ?? [], y = _.data?.total ?? 0, b = v.length < y, x = t(void 0, {
		parentId: null,
		status: "paused"
	}, "createdAt", "DESC", 0, 5).data?.data ?? [], S = i((e) => {
		p(!1), d.navigateToWorkflow(e);
	}, [d]), C = i((e) => {
		d.navigateToWorkflow(e);
	}, [d]);
	return /* @__PURE__ */ s("div", {
		className: "flex h-full flex-col items-center justify-center",
		children: [/* @__PURE__ */ s("div", {
			className: "w-full max-w-sm space-y-6 px-4",
			children: [
				/* @__PURE__ */ o("div", {
					className: "flex justify-center",
					children: /* @__PURE__ */ s(n, {
						variant: "secondary",
						size: "sm",
						className: "gap-1.5",
						onClick: () => p(!0),
						children: [/* @__PURE__ */ o(u, { className: "h-3.5 w-3.5" }), "New Run"]
					})
				}),
				x.length > 0 && /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("p", {
					className: "text-muted-foreground mb-2 text-xs font-medium",
					children: "Needs Attention"
				}), /* @__PURE__ */ o("div", {
					className: "divide-border divide-y",
					children: x.map((e) => /* @__PURE__ */ o(m, {
						workflow: e,
						onClick: () => C(e.id)
					}, e.id))
				})] }),
				_.isLoading && v.length === 0 ? /* @__PURE__ */ o("div", {
					className: "flex justify-center py-4",
					children: /* @__PURE__ */ o(l, { className: "text-muted-foreground h-4 w-4 animate-spin" })
				}) : v.length > 0 ? /* @__PURE__ */ s("div", { children: [
					/* @__PURE__ */ o("p", {
						className: "text-muted-foreground mb-2 text-xs font-medium",
						children: "Recent"
					}),
					/* @__PURE__ */ o("div", {
						className: "max-h-[280px] overflow-auto",
						children: /* @__PURE__ */ o("div", {
							className: "divide-border divide-y",
							children: v.map((e) => /* @__PURE__ */ o(m, {
								workflow: e,
								onClick: () => C(e.id)
							}, e.id))
						})
					}),
					b && /* @__PURE__ */ s("button", {
						className: "text-muted-foreground hover:text-foreground mt-2 flex w-full items-center justify-center gap-1 py-1 text-xs transition-colors",
						onClick: () => g((e) => e + 5),
						children: [/* @__PURE__ */ o(c, { className: "h-3 w-3" }), "Load more"]
					})
				] }) : null
			]
		}), /* @__PURE__ */ o(r, {
			open: f,
			onOpenChange: p,
			onSuccess: S
		})]
	});
}
function m({ workflow: e, onClick: t }) {
	return /* @__PURE__ */ s("button", {
		className: "hover:bg-accent w-full rounded-md px-2 py-2.5 text-left transition-colors",
		onClick: t,
		children: [/* @__PURE__ */ s("div", {
			className: "flex items-center gap-2",
			children: [/* @__PURE__ */ o("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${f[e.status] ?? "bg-muted-foreground"}` }), /* @__PURE__ */ s("span", {
				className: "truncate text-sm font-medium",
				children: [
					"Run #",
					e.run,
					" · ",
					e.alias
				]
			})]
		}), /* @__PURE__ */ s("p", {
			className: "text-muted-foreground mt-0.5 pl-3.5 text-xs",
			children: [
				e.status,
				" · ",
				d(new Date(e.createdAt), { addSuffix: !0 })
			]
		})]
	});
}
//#endregion
export { p as default };
