"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { timestampDate } from "@bufbuild/protobuf/wkt";
import { cn } from "@stigmer/theme";
function formatTimeAgo(date) {
    const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
    if (seconds < 60)
        return "just now";
    if (seconds < 3600)
        return `${Math.floor(seconds / 60)}m ago`;
    if (seconds < 86400)
        return `${Math.floor(seconds / 3600)}h ago`;
    return `${Math.floor(seconds / 86400)}d ago`;
}
/**
 * Dashboard widget showing recent failed workflow executions.
 *
 * Consumes data from `useWorkflowExecutionList({ phase: EXECUTION_FAILED })`.
 * Displays a compact list with execution name, error summary, and time of failure.
 *
 * All visuals use `--stgm-*` tokens. No hardcoded colors.
 */
export const FailedRunsWidget = memo(function FailedRunsWidget({ executions, isLoading, onViewClick, className, }) {
    if (isLoading) {
        return (_jsxs("div", { className: cn("space-y-2", className), "aria-busy": "true", children: [_jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" }), Array.from({ length: 3 }, (_, i) => (_jsx("div", { className: "h-14 animate-pulse rounded-lg border border-border bg-muted/50" }, i)))] }));
    }
    return (_jsxs("div", { className: cn("space-y-3", className), children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Recent Failures" }), executions.length === 0 ? (_jsx("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No recent failures" })) : (_jsx("ul", { className: "space-y-2", role: "list", children: executions.map((exec) => {
                    const id = exec.metadata?.id;
                    const name = exec.metadata?.name || exec.metadata?.slug || "Unnamed";
                    const errorMsg = exec.status?.error || "Unknown error";
                    const failedAt = exec.status?.audit?.specAudit?.updatedAt;
                    const failedDate = failedAt ? timestampDate(failedAt) : null;
                    return (_jsx("li", { className: "rounded-lg border border-destructive/20 bg-destructive/5 px-3 py-2.5", children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: name }), _jsx("p", { className: "mt-0.5 line-clamp-1 text-xs text-destructive", children: errorMsg }), failedDate && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: formatTimeAgo(failedDate) }))] }), onViewClick && id && (_jsx("button", { type: "button", onClick: () => onViewClick(id), className: "shrink-0 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "View" }))] }) }, id));
                }) }))] }));
});
//# sourceMappingURL=FailedRunsWidget.js.map