"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useEffect, useState } from "react";
import { cn } from "@stigmer/theme";
import { DecisionButton } from "../internal/DecisionButton.js";
import { InCardDecisionError } from "../internal/InCardDecisionError.js";
/**
 * 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, error, className, }) {
    const [comment, setComment] = useState("");
    // Which action is in flight, so the spinner lands on the clicked button —
    // matching ApprovalCard / WorkflowTaskApprovalCard. Reset once the RPC settles.
    const [active, setActive] = useState(null);
    useEffect(() => {
        if (!isSubmitting)
            setActive(null);
    }, [isSubmitting]);
    // ApprovalAction enum values: 0=UNSPECIFIED, 1=APPROVE, 2=SKIP, 3=REJECT
    const handleApprove = useCallback(() => {
        setActive("approve");
        onSubmitApproval(toolCallId, 1, comment || undefined);
    }, [toolCallId, comment, onSubmitApproval]);
    const handleReject = useCallback(() => {
        setActive("reject");
        onSubmitApproval(toolCallId, 3, comment || undefined);
    }, [toolCallId, comment, onSubmitApproval]);
    return (_jsxs("div", { role: "alert", "aria-label": "Approval required", 
        // Neutral card + 2px warning left accent — the quiet Cursor-grade chrome
        // shared with ApprovalCard. (Replaces the old amber `bg-warning/5` fill.)
        className: cn("my-1 rounded-lg border border-border-prominent border-l-2 border-l-warning 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(DecisionButton, { label: "Approve", variant: "primary", onClick: handleApprove, isActive: active === "approve", isSubmitting: isSubmitting }), _jsx(DecisionButton, { label: "Reject", variant: "danger", onClick: handleReject, isActive: active === "reject", isSubmitting: isSubmitting })] }), error && (_jsx(InCardDecisionError, { error: error, leadIn: "submit decision", cursorTarget: "wf-approval-error" }))] }));
});
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