import { cn } from "./index3.js";
import { AnimatePresence } from "./index308.js";
import { motion } from "./index359.js";
import { cva } from "class-variance-authority";
import { AlertCircle, Check, ChevronDown, ChevronRight, Clock, Loader } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/ai/AISteps/AISteps.tsx
var stepsContainerVariants = cva("overflow-hidden rounded-xl border", {
	variants: { variant: {
		default: "border-border bg-background",
		subtle: "border-border bg-muted"
	} },
	defaultVariants: { variant: "default" }
});
var stepItemVariants = cva("flex items-start gap-3 px-4 py-3 transition-colors", {
	variants: { status: {
		pending: "text-muted-foreground",
		running: "text-primary",
		completed: "text-success",
		error: "text-destructive"
	} },
	defaultVariants: { status: "pending" }
});
var stepIconVariants = cva("size-5 shrink-0 flex items-center justify-center rounded-full", {
	variants: { status: {
		pending: "bg-accent text-muted-foreground",
		running: "bg-primary/20 text-primary",
		completed: "bg-success/20 text-success",
		error: "bg-destructive/20 text-destructive"
	} },
	defaultVariants: { status: "pending" }
});
function StepIcon({ status, index, className }) {
	const iconClass = cn(stepIconVariants({ status }), className);
	switch (status) {
		case "running": return /* @__PURE__ */ jsx("div", {
			className: cn(iconClass, "delight-status-pulse motion-reduce:!animate-none"),
			children: /* @__PURE__ */ jsx(Loader, { className: "size-3 animate-spin motion-reduce:animate-none" })
		});
		case "completed": return /* @__PURE__ */ jsx("div", {
			className: cn(iconClass, "delight-check-bounce motion-reduce:!animate-none"),
			children: /* @__PURE__ */ jsx(Check, { className: "size-3" })
		});
		case "error": return /* @__PURE__ */ jsx("div", {
			className: cn(iconClass, "delight-shake motion-reduce:!animate-none"),
			children: /* @__PURE__ */ jsx(AlertCircle, { className: "size-3" })
		});
		default: return /* @__PURE__ */ jsx("div", {
			className: iconClass,
			children: /* @__PURE__ */ jsx("span", {
				className: "text-xs font-medium",
				children: index + 1
			})
		});
	}
}
StepIcon.displayName = "StepIcon";
function AIStepItem({ step, index, isLast, expandable = true, defaultExpanded = false }) {
	const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
	const hasContent = step.content || step.error;
	const formatDuration = (ms) => {
		if (ms < 1e3) return `${ms}ms`;
		return `${(ms / 1e3).toFixed(1)}s`;
	};
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-step-item",
		className: cn(!isLast && "border-b border-border"),
		children: [/* @__PURE__ */ jsxs("button", {
			type: "button",
			onClick: () => hasContent && expandable && setIsExpanded(!isExpanded),
			disabled: !hasContent || !expandable,
			"aria-expanded": hasContent && expandable ? isExpanded : void 0,
			className: cn(stepItemVariants({ status: step.status }), hasContent && expandable && "hover:bg-muted cursor-pointer", "w-full focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"),
			children: [
				/* @__PURE__ */ jsx(StepIcon, {
					status: step.status,
					index
				}),
				/* @__PURE__ */ jsxs("div", {
					className: "flex-1 min-w-0 text-start",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2",
						children: [/* @__PURE__ */ jsx("span", {
							className: cn("text-sm font-medium", step.status === "pending" ? "text-quaternary-foreground" : "text-foreground"),
							children: step.title
						}), step.duration !== void 0 && step.status === "completed" && /* @__PURE__ */ jsx("span", {
							className: "text-xs text-muted-foreground",
							children: formatDuration(step.duration)
						})]
					}), step.description && /* @__PURE__ */ jsx("p", {
						className: "text-xs text-quaternary-foreground mt-0.5",
						children: step.description
					})]
				}),
				hasContent && expandable && /* @__PURE__ */ jsx("div", {
					className: "shrink-0",
					children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground rtl:rotate-180" })
				})
			]
		}), /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && hasContent && /* @__PURE__ */ jsx(motion.div, {
			initial: {
				height: 0,
				opacity: 0
			},
			animate: {
				height: "auto",
				opacity: 1
			},
			exit: {
				height: 0,
				opacity: 0
			},
			transition: { duration: .2 },
			className: "overflow-hidden",
			children: /* @__PURE__ */ jsx("div", {
				className: "px-4 pb-3 ps-12",
				children: step.error ? /* @__PURE__ */ jsx("div", {
					className: "p-3 rounded-lg bg-destructive/10 border border-destructive/50",
					children: /* @__PURE__ */ jsxs("div", {
						className: "flex items-start gap-2",
						children: [/* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive mt-0.5 shrink-0" }), /* @__PURE__ */ jsx("p", {
							className: "text-sm text-destructive",
							children: step.error
						})]
					})
				}) : step.content
			})
		}) })]
	});
}
AIStepItem.displayName = "AIStepItem";
/**
* AISteps displays a multi-step progress indicator for AI workflows.
* Shows step status (pending, running, complete, error) with expandable details and timing.
*
* @llms Multi-step AI progress with status icons, timing, expandable details
* @example
* ```tsx
* <AISteps
*   title="Processing"
*   steps={[
*     { label: 'Analyzing', status: 'complete', duration: '2s' },
*     { label: 'Generating', status: 'running' },
*   ]}
* />
* ```
*/
function AISteps({ steps, title, variant, collapsible = true, defaultExpanded = true, stepsExpandable = true, className }) {
	const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
	const completedCount = steps.filter((s) => s.status === "completed").length;
	const totalCount = steps.length;
	const hasError = steps.some((s) => s.status === "error");
	const isRunning = steps.some((s) => s.status === "running");
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-steps",
		role: "region",
		"aria-label": title || "Steps",
		className: cn(stepsContainerVariants({ variant }), className),
		children: [(title || collapsible) && /* @__PURE__ */ jsxs("button", {
			type: "button",
			onClick: () => collapsible && setIsExpanded(!isExpanded),
			disabled: !collapsible,
			"aria-expanded": collapsible ? isExpanded : void 0,
			className: cn("flex items-center justify-between w-full px-4 py-3 border-b border-border", collapsible && "hover:bg-muted cursor-pointer", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"),
			children: [/* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-2",
				children: [
					isRunning && /* @__PURE__ */ jsx(Clock, { className: "size-4 text-primary animate-pulse motion-reduce:animate-none" }),
					hasError && !isRunning && /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive" }),
					!isRunning && !hasError && completedCount === totalCount && /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }),
					/* @__PURE__ */ jsx("span", {
						className: "text-sm font-medium text-foreground",
						children: title || "Steps"
					}),
					/* @__PURE__ */ jsxs("span", {
						className: "text-xs text-quaternary-foreground",
						children: [
							"(",
							completedCount,
							"/",
							totalCount,
							")"
						]
					})
				]
			}), collapsible && /* @__PURE__ */ jsx("div", {
				className: "shrink-0",
				children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground rtl:rotate-180" })
			})]
		}), /* @__PURE__ */ jsx(AnimatePresence, {
			initial: false,
			children: isExpanded && /* @__PURE__ */ jsx(motion.div, {
				initial: {
					height: 0,
					opacity: 0
				},
				animate: {
					height: "auto",
					opacity: 1
				},
				exit: {
					height: 0,
					opacity: 0
				},
				transition: { duration: .2 },
				className: "overflow-hidden",
				children: /* @__PURE__ */ jsx("ol", {
					className: "list-none m-0 p-0",
					children: steps.map((step, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AIStepItem, {
						step,
						index,
						isLast: index === steps.length - 1,
						expandable: stepsExpandable
					}) }, step.id))
				})
			})
		})]
	});
}
AISteps.displayName = "AISteps";
//#endregion
export { AIStepItem, AISteps, StepIcon, stepIconVariants, stepItemVariants, stepsContainerVariants };

//# sourceMappingURL=index438.js.map