"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
/**
 * Inline approval card rendered within the execution timeline when
 * a `human_input` task or agent tool approval gate is active.
 *
 * Provides approve and reject buttons with an optional comment field.
 * Keyboard-navigable and accessible.
 */
export const WorkflowExecutionApprovalCard = memo(function WorkflowExecutionApprovalCard({ prompt, toolCallId, approvers, timeoutSeconds, onSubmitApproval, isSubmitting, className, }) {
    const [comment, setComment] = useState("");
    // ApprovalAction enum values: 0=UNSPECIFIED, 1=APPROVE, 2=SKIP, 3=REJECT
    const handleApprove = useCallback(() => {
        onSubmitApproval(toolCallId, 1, comment || undefined);
    }, [toolCallId, comment, onSubmitApproval]);
    const handleReject = useCallback(() => {
        onSubmitApproval(toolCallId, 3, comment || undefined);
    }, [toolCallId, comment, onSubmitApproval]);
    return (_jsxs("div", { role: "alert", "aria-label": "Approval required", className: cn("my-1 rounded-lg border border-warning/30 bg-warning/5 p-3", className), children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: prompt }), approvers.length > 0 && (_jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: ["Approvers: ", approvers.join(", ")] })), timeoutSeconds > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Expires in ", formatTimeout(timeoutSeconds)] })), _jsx("div", { className: "mt-2", children: _jsx("input", { type: "text", value: comment, onChange: (e) => setComment(e.target.value), placeholder: "Comment (optional)", disabled: isSubmitting, className: cn("w-full rounded border border-border bg-background px-2 py-1 text-xs text-foreground", "placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring", "disabled:opacity-50") }) }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx("button", { type: "button", onClick: handleApprove, disabled: isSubmitting, className: cn("rounded px-3 py-1 text-xs font-medium", "bg-success text-success-foreground", "hover:bg-success/90 disabled:pointer-events-none disabled:opacity-50"), children: "Approve" }), _jsx("button", { type: "button", onClick: handleReject, disabled: isSubmitting, className: cn("rounded border border-destructive/30 px-3 py-1 text-xs font-medium text-destructive", "hover:bg-destructive/10 disabled:pointer-events-none disabled:opacity-50"), children: "Reject" })] })] }));
});
function formatTimeout(seconds) {
    if (seconds < 60)
        return `${seconds}s`;
    const m = Math.floor(seconds / 60);
    if (m < 60)
        return `${m}m`;
    const h = Math.floor(m / 60);
    return `${h}h`;
}
//# sourceMappingURL=WorkflowExecutionApprovalCard.js.map