import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useCallback } from "react";
import { Target, FileText, ListTodo, GitBranch, History } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger, } from "../../../../components/ui/popover";
import { Tooltip, TooltipContent, TooltipTrigger, } from "../../../../components/ui/tooltip";
import { AgentDocumentList, } from "./AgentDocumentList";
import { AgentEditOperationsPanel } from "./EditOperationsPanel";
import { SpawnedAgentsPanel } from "./SpawnedAgentsPanel";
import { TodoListPanel } from "./TodoListPanel";
import { computeAgentTodos } from "../../agentTodoExtraction";
import { cn } from "../../../../lib/utils";
function TrayIcon({ id, title, tooltip, icon: Icon, count, open, onOpenChange, renderBody, tone = "default", }) {
    const isLive = tone === "live";
    const [actionsEl, setActionsEl] = useState(null);
    const badgeText = count !== undefined && count > 0
        ? count > 99
            ? "99+"
            : String(count)
        : null;
    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": title, className: cn("relative inline-flex h-6 w-6 items-center justify-center rounded transition-colors", isLive
                                    ? open
                                        ? "bg-feedback-green-light text-feedback-green"
                                        : "text-feedback-green hover:bg-feedback-green-light hover:text-feedback-green"
                                    : open
                                        ? "bg-neutral-grey-5 text-neutral-grey-100"
                                        : "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100"), "data-testid": `tray-icon-${id}`, "data-live": isLive ? "true" : undefined, children: [_jsx(Icon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), badgeText !== null && (_jsx("span", { className: cn("absolute -top-0.5 -right-0.5 flex h-2.5 min-w-[10px] items-center justify-center rounded-full px-0.5 text-[8px] leading-none font-medium text-white", isLive ? "bg-feedback-green" : "bg-neutral-grey-50"), "aria-hidden": "true", children: badgeText }))] }) }) }), !open && (_jsx(TooltipContent, { side: "top", sideOffset: 6, children: tooltip ?? title }))] }), _jsxs(PopoverContent, { align: "start", side: "top", sideOffset: 6, className: "w-[420px] max-w-[90vw] p-0", children: [_jsxs("div", { className: "border-border-default flex items-center justify-between gap-2 border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Icon, { className: "text-neutral-grey-50 h-3.5 w-3.5", strokeWidth: 1.5 }), _jsx("span", { className: "text-neutral-grey-100 text-xs font-medium", children: title })] }), _jsx("div", { ref: setActionsEl, className: "flex items-center gap-1" })] }), renderBody(actionsEl)] })] }));
}
export function AgentPromptTrayPopovers({ contextChrome, agent, activeProfile, documentListRef, hasTodoContent, hasSpawnedAgents, hasHistoryContent, messages, agentMetadata, operations, isLiveEditorContextMode, }) {
    const [openPanel, setOpenPanel] = useState(null);
    const [documentCount, setDocumentCount] = useState(0);
    const handleDocumentCount = useCallback((n) => {
        setDocumentCount(n);
    }, []);
    const makeHandler = (id) => (open) => {
        setOpenPanel(open ? id : null);
    };
    const ctx = agentMetadata;
    const contextCount = (ctx?.items?.length ?? 0) +
        (ctx?.components?.length ?? 0) +
        (ctx?.field ? 1 : 0);
    const spawnedCount = Array.isArray(agentMetadata?.childAgents)
        ? agentMetadata.childAgents.length
        : 0;
    const todos = React.useMemo(() => computeAgentTodos(messages, agentMetadata), [messages, agentMetadata]);
    const todosCompleted = todos.filter((t) => t.status === "completed").length;
    const showDocumentsIcon = !!(agent?.id && activeProfile);
    const showContextIcon = !!agent;
    const showTodosIcon = hasTodoContent;
    const showSpawnedIcon = hasSpawnedAgents;
    const showHistoryIcon = !!(agent?.id && hasHistoryContent);
    const renderContextNode = (actionsContainer) => React.isValidElement(contextChrome)
        ? React.cloneElement(contextChrome, {
            headerless: true,
            headerActionsContainer: actionsContainer,
        })
        : contextChrome;
    return (_jsxs("div", { className: "flex items-center gap-0.5", children: [showDocumentsIcon && (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id, loadOnly: true, onCountChange: handleDocumentCount }, `count-${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), showContextIcon && (_jsx(TrayIcon, { id: "context", title: isLiveEditorContextMode ? "Context (Live mode)" : "Context", tooltip: isLiveEditorContextMode
                    ? `Context · live${contextCount > 0 ? ` · ${contextCount} item${contextCount === 1 ? "" : "s"}` : ""}`
                    : contextCount > 0
                        ? `Context · ${contextCount} item${contextCount === 1 ? "" : "s"}`
                        : "Context", icon: Target, count: contextCount, open: openPanel === "context", onOpenChange: makeHandler("context"), tone: isLiveEditorContextMode ? "live" : "default", renderBody: (actionsEl) => (_jsx("div", { className: "max-h-[60vh] overflow-y-auto", children: renderContextNode(actionsEl) })) })), showDocumentsIcon && (_jsx(TrayIcon, { id: "documents", title: "Documents", tooltip: documentCount > 0
                    ? `Documents · ${documentCount} uploaded`
                    : "Documents", icon: FileText, count: documentCount, open: openPanel === "documents", onOpenChange: makeHandler("documents"), renderBody: (actionsEl) => (_jsx("div", { className: "max-h-[60vh] overflow-y-auto", children: _jsx(AgentDocumentList, { agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id, headerless: true, headerActionsContainer: actionsEl, onCountChange: handleDocumentCount, onRequestClose: () => setOpenPanel(null) }, `popover-${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`) })) })), showTodosIcon && (_jsx(TrayIcon, { id: "todos", title: "Todos", tooltip: todos.length > 0
                    ? `Todos · ${todosCompleted}/${todos.length} completed`
                    : "Todos", icon: ListTodo, count: todos.length, open: openPanel === "todos", onOpenChange: makeHandler("todos"), renderBody: () => (_jsx("div", { className: "max-h-[60vh] overflow-y-auto", children: _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata, headerless: true }) })) })), showSpawnedIcon && (_jsx(TrayIcon, { id: "spawned", title: "Spawned Agents", tooltip: spawnedCount > 0
                    ? `Spawned agents · ${spawnedCount}`
                    : "Spawned agents", icon: GitBranch, count: spawnedCount, open: openPanel === "spawned", onOpenChange: makeHandler("spawned"), renderBody: () => (_jsx("div", { className: "max-h-[60vh] overflow-y-auto", children: _jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata, headerless: true }) })) })), showHistoryIcon && (_jsx(TrayIcon, { id: "history", title: "Edit History", tooltip: operations.length > 0
                    ? `Edit history · ${operations.length} action${operations.length === 1 ? "" : "s"}`
                    : "Edit history", icon: History, count: operations.length, open: openPanel === "history", onOpenChange: makeHandler("history"), renderBody: (actionsEl) => (_jsx("div", { className: "max-h-[60vh] overflow-y-auto", children: _jsx(AgentEditOperationsPanel, { operations: operations, headerless: true, headerActionsContainer: actionsEl }) })) }))] }));
}
//# sourceMappingURL=AgentPromptTrayPopovers.js.map