import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect, useCallback, useMemo } from "react";
import { ChevronDown, ChevronUp, History, RotateCcw, CheckSquare, Square, } from "lucide-react";
import { OperationItem } from "../sidebar/OperationItem";
import { useEditContext } from "../client/editContext";
export function AgentEditOperationsPanel({ operations, onHasContent, }) {
    const [isExpanded, setIsExpanded] = useState(false);
    const [selectedIds, setSelectedIds] = useState(new Set());
    const editContext = useEditContext();
    useEffect(() => {
        onHasContent?.(operations.length > 0);
    }, [operations.length, onHasContent]);
    useEffect(() => {
        // Keep selection aligned with the latest history snapshot from the parent.
        setSelectedIds((prev) => {
            const next = new Set();
            prev.forEach((id) => {
                const op = operations.find((candidate) => candidate.id === id);
                if (op && !op.undone) {
                    next.add(id);
                }
            });
            return next;
        });
    }, [operations]);
    const handleToggleSelection = useCallback((id, selected) => {
        setSelectedIds((prev) => {
            const next = new Set(prev);
            if (selected) {
                next.add(id);
            }
            else {
                next.delete(id);
            }
            return next;
        });
    }, []);
    const undoableOps = useMemo(() => operations.filter((o) => !o.undone && o.undoSupported !== false), [operations]);
    const handleSelectAll = useCallback((e) => {
        e.stopPropagation();
        if (selectedIds.size === undoableOps.length) {
            setSelectedIds(new Set());
        }
        else {
            setSelectedIds(new Set(undoableOps.map((o) => o.id)));
        }
    }, [undoableOps, selectedIds]);
    const handleUndoSelected = useCallback((e) => {
        e.stopPropagation();
        if (selectedIds.size === 0)
            return;
        const performUndo = () => {
            editContext?.operations.undoOperations(Array.from(selectedIds));
            setSelectedIds(new Set());
        };
        // Show confirmation dialog when undoing multiple operations
        if (selectedIds.size > 1) {
            editContext?.confirm({
                header: "Undo Selected Operations",
                message: `Are you sure you want to undo ${selectedIds.size} selected operations?\n\nNote: Undoing selective operations might fail if dependent changes have been made.`,
                acceptLabel: "Undo Selected",
                accept: performUndo,
                showCancel: true,
            });
        }
        else {
            performUndo();
        }
    }, [selectedIds, editContext]);
    const handleUndoAll = useCallback((e) => {
        e.stopPropagation();
        if (undoableOps.length === 0)
            return;
        editContext?.confirm({
            header: "Undo All Actions",
            message: `Are you sure you want to undo all ${undoableOps.length} actions from this agent?`,
            acceptLabel: "Undo All",
            accept: () => {
                editContext?.operations.undoOperations(undoableOps.map((o) => o.id));
                setSelectedIds(new Set());
            },
            showCancel: true,
        });
    }, [undoableOps, editContext]);
    if (operations.length === 0)
        return null;
    return (_jsxs("div", { className: "border-t border-gray-200 bg-gray-50", children: [_jsxs("div", { onClick: () => setIsExpanded(!isExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors hover:bg-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(History, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }), _jsx("span", { className: "text-xs font-normal text-gray-700", children: "Edit History" }), _jsxs("span", { className: "text-xs text-gray-500", children: ["(", operations.length, ")"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [undoableOps.length > 0 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleSelectAll, className: "rounded text-gray-500 transition-colors hover:bg-gray-200", title: selectedIds.size === undoableOps.length
                                            ? "Deselect All"
                                            : "Select All", children: selectedIds.size === undoableOps.length ? (_jsx(CheckSquare, { className: "h-3.5 w-3.5", strokeWidth: 1.5 })) : (_jsx(Square, { className: "h-3.5 w-3.5", strokeWidth: 1.5 })) }), selectedIds.size > 0 ? (_jsxs("button", { onClick: handleUndoSelected, className: "bg-theme-secondary-light hover:bg-theme-secondary-light/80 text-theme-secondary flex items-center gap-1 rounded px-2 text-[10px] font-medium transition-colors", title: `Undo ${selectedIds.size} selected actions`, children: [_jsx(RotateCcw, { className: "h-3 w-3" }), "Undo Selected (", selectedIds.size, ")"] })) : (_jsxs("button", { onClick: handleUndoAll, className: "flex items-center gap-1 rounded px-2 text-[10px] text-gray-600 transition-colors hover:bg-gray-200", title: "Undo all actions from this agent", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), "Undo All"] }))] })), isExpanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }))] })] }), isExpanded && (_jsx("div", { className: "max-h-64 overflow-y-auto", children: operations.map((op, i) => (_jsx(OperationItem, { operation: op, index: i, showUserName: false, showCheckbox: true, selected: selectedIds.has(op.id), onSelect: (selected) => handleToggleSelection(op.id, selected) }, op.id))) }))] }));
}
//# sourceMappingURL=EditOperationsPanel.js.map