"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 pending human_input approvals.
 *
 * Displays a compact list of workflow tasks awaiting reviewer decisions,
 * with workflow name, task name, waiting duration, and a review action.
 *
 * All visuals use `--stgm-*` tokens. No hardcoded colors.
 */
export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({ approvals, totalCount, isLoading, onReviewClick, className, }) {
    if (isLoading) {
        return (_jsxs("div", { className: cn("space-y-2", className), "aria-busy": "true", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "h-4 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-4 w-8 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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Pending Approvals" }), totalCount > 0 && (_jsx("span", { className: "rounded-full bg-warning/10 px-2 py-0.5 text-xs font-medium text-warning", children: totalCount }))] }), approvals.length === 0 ? (_jsx("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No approvals pending" })) : (_jsx("ul", { className: "space-y-2", role: "list", children: approvals.map((approval) => {
                    const requestedAt = approval.requestedAt
                        ? timestampDate(approval.requestedAt)
                        : null;
                    return (_jsx("li", { className: "rounded-lg border border-border 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: approval.workflowName || approval.executionId }), _jsxs("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: ["Task: ", approval.taskName, requestedAt && (_jsxs(_Fragment, { children: [" \u00B7 ", formatTimeAgo(requestedAt)] }))] })] }), onReviewClick && (_jsx("button", { type: "button", onClick: () => onReviewClick(approval.executionId), className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Review" }))] }) }, `${approval.executionId}-${approval.taskName}`));
                }) }))] }));
});
//# sourceMappingURL=PendingApprovalsWidget.js.map