import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { ChevronDown, ChevronUp, GitBranch } from "lucide-react";
import { formatTime } from "../utils";
import { cn } from "../../lib/utils";
export function SpawnedAgentsPanel({ agentMetadata, }) {
    const [isExpanded, setIsExpanded] = useState(true);
    // Extract child agents from metadata
    const childAgents = useMemo(() => {
        if (!agentMetadata)
            return [];
        try {
            const childAgents = agentMetadata?.childAgents;
            if (!Array.isArray(childAgents) || childAgents.length === 0) {
                return [];
            }
            // Normalize to a consistent format, filtering out invalid entries
            return childAgents
                .filter((agent) => agent != null && typeof agent === "object")
                .map((agent) => ({
                id: String(agent.agentId || ""),
                name: String(agent.name || "Unknown Agent"),
                profileName: String(agent.profileName || ""),
                status: String(agent.status || "unknown"),
                spawnedAt: String(agent.spawnedAt || ""),
                task: String(agent.task || ""),
            }))
                .filter((agent) => agent.id); // Only include agents with valid IDs
        }
        catch (e) {
            console.error("📋 Error extracting spawned agents from metadata:", e);
            return [];
        }
    }, [agentMetadata]);
    if (childAgents.length === 0)
        return null;
    // Helper to get status color based on status string
    const getStatusColor = (status) => {
        const normalizedStatus = status.toLowerCase();
        if (normalizedStatus === "running")
            return "bg-theme-secondary";
        if (normalizedStatus === "waitingforapproval" ||
            normalizedStatus === "waiting for approval")
            return "bg-amber-500";
        if (normalizedStatus === "completed")
            return "bg-green-500";
        if (normalizedStatus === "error")
            return "bg-red-500";
        if (normalizedStatus === "closed")
            return "bg-gray-400";
        if (normalizedStatus === "idle")
            return "bg-gray-300";
        if (normalizedStatus === "costlimitreached" ||
            normalizedStatus === "cost limit reached")
            return "bg-amber-500";
        return "bg-gray-400";
    };
    // Helper to get status label
    const getStatusLabel = (status) => {
        const normalizedStatus = status.toLowerCase();
        if (normalizedStatus === "running")
            return "Running";
        if (normalizedStatus === "waitingforapproval" ||
            normalizedStatus === "waiting for approval")
            return "Waiting for Approval";
        if (normalizedStatus === "completed")
            return "Completed";
        if (normalizedStatus === "error")
            return "Error";
        if (normalizedStatus === "closed")
            return "Closed";
        if (normalizedStatus === "idle")
            return "Idle";
        if (normalizedStatus === "costlimitreached" ||
            normalizedStatus === "cost limit reached")
            return "Cost Limit Reached";
        return status || "Unknown";
    };
    const handleAgentClick = (agentId) => {
        if (!agentId)
            return;
        // Dispatch event to switch to the spawned agent
        window.dispatchEvent(new CustomEvent("editor:openAgent", {
            detail: { agentId },
        }));
    };
    return (_jsxs("div", { className: "border-t border-gray-200 bg-gray-50", children: [_jsxs("button", { 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(GitBranch, { className: "h-4 w-4 text-gray-500", strokeWidth: 1 }), _jsx("span", { className: "text-xs font-normal text-gray-700", children: "Spawned Agents" }), _jsx("span", { className: "text-xs text-gray-500", children: childAgents.length })] }), 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 px-4 pb-3", children: _jsx("div", { className: "space-y-1.5", children: childAgents.map((agent, idx) => (_jsx("div", { className: "cursor-pointer rounded bg-white p-2 text-[11px] transition-colors hover:bg-gray-100", onClick: () => handleAgentClick(agent.id), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex-shrink-0 pt-0.5", children: _jsx("div", { className: cn("h-2 w-2 rounded-full", getStatusColor(agent.status), agent.status.toLowerCase() === "running" &&
                                            "animate-pulse"), title: getStatusLabel(agent.status) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-gray-900", children: agent.name }), agent.profileName && (_jsxs("span", { className: "text-[10px] text-gray-400", children: ["(", agent.profileName, ")"] }))] }), agent.task && (_jsx("div", { className: "mt-0.5 text-[10px] text-gray-500 line-clamp-1", children: agent.task })), agent.spawnedAt && (() => {
                                            try {
                                                const spawnedDate = new Date(agent.spawnedAt);
                                                if (!isNaN(spawnedDate.getTime())) {
                                                    return (_jsxs("div", { className: "mt-0.5 text-[10px] text-gray-400", children: ["Spawned ", formatTime(spawnedDate)] }));
                                                }
                                            }
                                            catch (e) {
                                                // Invalid date, skip rendering timestamp
                                            }
                                            return null;
                                        })()] })] }) }, agent.id || `spawned-${idx}`))) }) }))] }));
}
//# sourceMappingURL=SpawnedAgentsPanel.js.map