"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo } from "react";
import { cn } from "@stigmer/theme";
import { PATTERN_LABELS } from "./types.js";
import { deriveTemplateMeta } from "./derive-template-metadata.js";
import { TEMPLATE_CATEGORY_LABELS } from "../../resource-creation/templates/types.js";
const CATEGORY_COLORS = {
    "customer-support": "bg-blue-500/10 text-blue-700 dark:text-blue-400",
    "code-review": "bg-violet-500/10 text-violet-700 dark:text-violet-400",
    "data-analysis": "bg-amber-500/10 text-amber-700 dark:text-amber-400",
    devops: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
    content: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
    integration: "bg-cyan-500/10 text-cyan-700 dark:text-cyan-400",
    general: "bg-muted text-muted-foreground",
};
const PATTERN_COLORS = {
    parallel: "bg-violet-500/10 text-violet-700 dark:text-violet-400",
    branching: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
    hitl: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
    loop: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
    "error-handling": "bg-red-500/10 text-red-700 dark:text-red-400",
    batch: "bg-cyan-500/10 text-cyan-700 dark:text-cyan-400",
    "ai-pipeline": "bg-blue-500/10 text-blue-700 dark:text-blue-400",
    "http-integration": "bg-orange-500/10 text-orange-700 dark:text-orange-400",
};
/**
 * Enhanced template card for workflow templates.
 *
 * Shows the template name, description, category badge, pattern badges,
 * task count, and env var count. Click selects the template; an optional
 * preview button opens the graph preview dialog.
 */
export function WorkflowTemplateCard({ template, onSelect, onPreview, className, }) {
    const meta = useMemo(() => deriveTemplateMeta(template.data.yaml ?? ""), [template.data.yaml]);
    const handleClick = useCallback(() => {
        onSelect(template);
    }, [onSelect, template]);
    const handlePreview = useCallback((e) => {
        e.stopPropagation();
        onPreview?.(template);
    }, [onPreview, template]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            onSelect(template);
        }
    }, [onSelect, template]);
    const categoryLabel = TEMPLATE_CATEGORY_LABELS[template.category] ?? template.category;
    return (_jsxs("div", { role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: handleKeyDown, "aria-label": `Use ${template.name} template`, className: cn("group flex cursor-pointer flex-col gap-3 rounded-lg border border-border bg-card p-4", "transition-colors hover:border-primary hover:bg-accent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: template.name }), _jsx("span", { className: cn("mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-medium", CATEGORY_COLORS[template.category] ?? CATEGORY_COLORS.general), children: categoryLabel })] }), onPreview && (_jsx("button", { type: "button", onClick: handlePreview, "aria-label": `Preview ${template.name}`, className: cn("rounded-md p-1 text-muted-foreground opacity-0 transition-opacity", "hover:bg-accent hover:text-accent-foreground", "focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "group-hover:opacity-100"), children: _jsx(PreviewIcon, {}) }))] }), _jsx("p", { className: "line-clamp-2 text-xs leading-relaxed text-muted-foreground", children: template.description }), meta.patterns.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1", children: meta.patterns.slice(0, 3).map((pattern) => (_jsx("span", { className: cn("rounded px-1.5 py-0.5 text-[10px] font-medium", PATTERN_COLORS[pattern] ?? "bg-muted text-muted-foreground"), children: PATTERN_LABELS[pattern] }, pattern))) })), _jsxs("div", { className: "flex items-center gap-3 text-[10px] text-muted-foreground", children: [_jsxs("span", { children: [meta.taskCount, " tasks"] }), meta.envVarCount > 0 && _jsxs("span", { children: [meta.envVarCount, " env vars"] }), meta.hasBudget && _jsx("span", { children: "Budget" })] })] }));
}
function PreviewIcon() {
    return (_jsxs("svg", { className: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), _jsx("circle", { cx: 12, cy: 12, r: 3 })] }));
}
//# sourceMappingURL=WorkflowTemplateCard.js.map