import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import { useToolApprovalStore } from '../../stores/toolApprovalStore';
import { Shield, Check, X, Terminal, FileEdit, GitCommit } from 'lucide-react';
const TOOL_ICONS = {
    bash: Terminal,
    write: FileEdit,
    apply_patch: FileEdit,
    edit: FileEdit,
    terminal: Terminal,
    git_commit: GitCommit,
    git_push: GitCommit,
};
export function ToolApprovalDialog({ baseUrl, sessionId, }) {
    const { pendingApprovals, removePendingApproval } = useToolApprovalStore();
    const [processingId, setProcessingId] = useState(null);
    const handleApproval = useCallback(async (callId, approved) => {
        setProcessingId(callId);
        try {
            const response = await fetch(`${baseUrl}/v1/sessions/${sessionId}/approval`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ callId, approved }),
            });
            if (response.ok) {
                removePendingApproval(callId);
            }
        }
        catch (error) {
            console.error('Failed to send approval:', error);
        }
        finally {
            setProcessingId(null);
        }
    }, [baseUrl, sessionId, removePendingApproval]);
    if (pendingApprovals.length === 0)
        return null;
    const formatArgs = (args) => {
        if (!args)
            return '';
        if (typeof args === 'string')
            return args;
        try {
            const str = JSON.stringify(args, null, 2);
            return str.length > 200 ? `${str.slice(0, 200)}...` : str;
        }
        catch {
            return String(args);
        }
    };
    return (_jsx("div", { className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-md", children: pendingApprovals.map((approval) => {
            const Icon = TOOL_ICONS[approval.toolName] || Shield;
            const isProcessing = processingId === approval.callId;
            return (_jsxs("div", { className: "bg-background border border-border rounded-lg shadow-lg p-4 animate-in slide-in-from-right-2", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "p-2 bg-warning/10 rounded-lg", children: _jsx(Icon, { className: "w-5 h-5 text-warning" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [_jsx(Shield, { className: "w-4 h-4 text-warning" }), "Tool Approval Required"] }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: _jsx("code", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: approval.toolName }) }), approval.args && (_jsx("pre", { className: "mt-2 p-2 bg-muted rounded text-xs font-mono overflow-x-auto max-h-24 overflow-y-auto", children: formatArgs(approval.args) }))] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2 mt-3", children: [_jsxs("button", { type: "button", onClick: () => handleApproval(approval.callId, false), disabled: isProcessing, className: "flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded transition-colors hover:bg-muted disabled:opacity-50", children: [_jsx(X, { className: "w-4 h-4" }), "Reject"] }), _jsxs("button", { type: "button", onClick: () => handleApproval(approval.callId, true), disabled: isProcessing, className: "flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded transition-colors bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50", children: [_jsx(Check, { className: "w-4 h-4" }), isProcessing ? 'Approving...' : 'Approve'] })] })] }, approval.callId));
        }) }));
}
//# sourceMappingURL=ToolApprovalDialog.js.map