import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { ArrowRight, Check, ChevronDown, ChevronUp, ListTodo, Loader2, X, } from "lucide-react";
import { computeAgentTodos } from "../../agentTodoExtraction";
export const TodoListPanel = ({ messages, agentMetadata, headerless, }) => {
    const [isExpanded, setIsExpanded] = useState(true);
    const todos = computeAgentTodos(messages, agentMetadata);
    const isUpdating = messages.some((msg) => {
        if (msg.role !== "assistant" || msg.isCompleted)
            return false;
        const content = msg.content || "";
        const fencedStart = content.indexOf("```todo_list");
        if (fencedStart !== -1) {
            const afterStart = fencedStart + "```todo_list".length;
            const closePos = content.indexOf("```", afterStart);
            if (closePos === -1) {
                return true;
            }
        }
        const plainStart = content.indexOf("todo_list");
        if (plainStart !== -1 && plainStart !== fencedStart) {
            const before = plainStart > 0 ? content[plainStart - 1] : "\n";
            if (before === "\n" || before === "\r" || plainStart === 0) {
                const braceStart = content.indexOf("{", plainStart);
                if (braceStart !== -1) {
                    let depth = 0;
                    let braceEnd = -1;
                    for (let i = braceStart; i < content.length; i++) {
                        if (content[i] === "{")
                            depth++;
                        if (content[i] === "}") {
                            depth--;
                            if (depth === 0) {
                                braceEnd = i;
                                break;
                            }
                        }
                    }
                    if (braceEnd === -1) {
                        return true;
                    }
                }
            }
        }
        return false;
    });
    if (todos.length === 0 && !isUpdating)
        return null;
    const completedCount = todos.filter((t) => t.status === "completed").length;
    const totalCount = todos.length;
    const listTitle = todos.find((t) => t.sourceTitle)?.sourceTitle || "Todo list";
    const progressLabel = `${completedCount} of ${totalCount} complete`;
    const getStatusIcon = (status) => {
        switch (status) {
            case "completed":
                return (_jsx("div", { className: "bg-neutral-grey-100 flex h-4 w-4 items-center justify-center rounded-full", children: _jsx(Check, { className: "h-2.5 w-2.5 text-white", strokeWidth: 1 }) }));
            case "in_progress":
                return (_jsx("div", { className: "border-neutral-grey-100 text-neutral-grey-100 flex h-4 w-4 items-center justify-center rounded-full border-[1.5px]", children: _jsx(ArrowRight, { className: "h-2.5 w-2.5", strokeWidth: 1 }) }));
            case "cancelled":
                return (_jsx("div", { className: "border-neutral-grey-15 text-neutral-grey-50 flex h-4 w-4 items-center justify-center rounded-full border-[1.5px]", children: _jsx(X, { className: "h-2.5 w-2.5", strokeWidth: 1 }) }));
            default:
                return (_jsx("div", { className: "border-neutral-grey-15 h-4 w-4 rounded-full border-[1.5px]" }));
        }
    };
    const getTextClass = (status) => {
        switch (status) {
            case "cancelled":
                return "text-neutral-grey-50 line-through";
            case "completed":
            case "in_progress":
                return "text-neutral-grey-100";
            default:
                return "text-neutral-grey-50";
        }
    };
    // In the popover (headerless) the outer wrapper already caps height at
    // 60vh; only the docked/tab variant needs its own scroll clamp.
    const bodyContent = (_jsxs("div", { className: headerless
            ? "px-4 pt-2 pb-3"
            : "max-h-64 overflow-y-auto px-4 pt-2 pb-3", "data-testid": "todo-list-panel", "data-completed-count": completedCount, "data-total-count": totalCount, children: [todos.length > 0 && (_jsx("div", { className: "space-y-2.5", children: todos.map((todo, idx) => (_jsxs("div", { className: "flex items-start gap-2.5 text-xs", "data-testid": "todo-list-item", "data-status": todo.status || "pending", children: [_jsx("div", { className: "shrink-0", children: getStatusIcon(todo.status) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: getTextClass(todo.status), children: todo.title }), todo.instructions && (_jsx("div", { className: "text-neutral-grey-50 mt-0.5 text-[11px]", children: todo.instructions }))] })] }, todo.id || `${todo.messageId}-${idx}`))) })), isUpdating && (_jsxs("div", { className: `flex items-center gap-2 rounded px-3 py-2 text-[11px] ${todos.length > 0
                    ? "bg-highlight-10 text-highlight-100 mt-2.5"
                    : "text-neutral-grey-50 justify-center"}`, children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), _jsx("span", { children: todos.length > 0
                            ? "Updating todo list..."
                            : "Loading todo list..." })] }))] }));
    if (headerless) {
        return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 px-4 pt-3", children: [_jsx("span", { className: "text-neutral-grey-100 text-xs font-semibold", children: listTitle }), _jsx("span", { className: "text-neutral-grey-50 text-xs", children: progressLabel })] }), bodyContent] }));
    }
    return (_jsxs("div", { className: "border-border-default border-t bg-white", children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "hover:bg-neutral-grey-5 flex w-full cursor-pointer items-center justify-between px-4 py-2 text-left transition-colors", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ListTodo, { className: "text-neutral-grey-100 h-4 w-4", strokeWidth: 1 }), _jsx("span", { className: "text-neutral-grey-100 text-xs font-semibold", children: listTitle }), isUpdating ? (_jsxs("span", { className: "text-highlight-100 flex items-center gap-1 text-xs", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", strokeWidth: 1 }), "Updating..."] })) : (_jsx("span", { className: "text-neutral-grey-50 text-xs", children: progressLabel }))] }), isExpanded ? (_jsx(ChevronUp, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1 })) : (_jsx(ChevronDown, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1 }))] }), isExpanded && bodyContent] }));
};
//# sourceMappingURL=TodoListPanel.js.map