import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { getAgentTriggerSubscriptions, } from "../editor/services/agentService";
import { isAgentClosed } from "../editor/services/agentStatus";
import { getAgentStatusConfig } from "../editor/ai/AgentStatusBadge";
import { cn } from "../lib/utils";
import { sanitizeSvg } from "../lib/sanitize";
import { Trash, X, Play, Users, AlertCircle, Clock, DollarSign, Coins, MessageSquare, HelpCircle, Bell, } from "lucide-react";
import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
import { SecretAgentIcon } from "../editor/ui/Icons";
/**
 * Get attention indicator info for an agent
 */
function getAttentionIndicator(agent) {
    const status = agent.status;
    if (status === "waitingForApproval") {
        return {
            show: true,
            icon: _jsx(Clock, { className: "size-3", strokeWidth: 2 }),
            label: "Needs Approval",
            colorClass: "bg-amber-50 text-amber-700 border-amber-100",
            accentBorderClass: "border-l-4 border-l-amber-500",
            hoverClass: "hover:border-amber-200 hover:bg-amber-50/30",
        };
    }
    if (status === "costLimitReached") {
        return {
            show: true,
            icon: _jsx(DollarSign, { className: "size-3", strokeWidth: 2 }),
            label: "Budget Exceeded",
            colorClass: "bg-orange-50 text-orange-700 border-orange-100",
            accentBorderClass: "border-l-4 border-l-orange-500",
            hoverClass: "hover:border-orange-200 hover:bg-orange-50/30",
        };
    }
    if (status === "error") {
        return {
            show: true,
            icon: _jsx(AlertCircle, { className: "size-3", strokeWidth: 2 }),
            label: "Error",
            colorClass: "bg-red-50 text-red-700 border-red-100",
            accentBorderClass: "border-l-4 border-l-red-500",
            hoverClass: "hover:border-red-200 hover:bg-red-50/30",
        };
    }
    return null;
}
function getInboxAttentionInfo(agent) {
    const status = agent.status;
    if (status === "waitingForApproval") {
        return {
            priority: 1,
        };
    }
    if (status === "waitingForInput") {
        return {
            priority: 0,
        };
    }
    if (status === "costLimitReached") {
        return {
            priority: 2,
        };
    }
    if (status === "error") {
        return {
            priority: 3,
        };
    }
    if (status === "completed") {
        return {
            priority: 5,
        };
    }
    return {
        priority: 4,
    };
}
export function getInboxAttentionPriority(agent) {
    return getInboxAttentionInfo(agent).priority;
}
function getSelectedCardClass(agent) {
    const status = agent.status;
    if (status === "running") {
        return "border-theme-secondary bg-theme-secondary/10 ring-2 ring-theme-secondary";
    }
    if (status === "waitingForApproval") {
        return "border-amber-300 bg-amber-50/30 ring-2 ring-amber-500";
    }
    if (status === "waitingForInput") {
        return "border-amber-300 bg-amber-50/30 ring-2 ring-amber-500";
    }
    if (status === "completed") {
        return "border-green-300 bg-green-50/30 ring-2 ring-green-500";
    }
    if (status === "error") {
        return "border-red-300 bg-red-50/30 ring-2 ring-red-500";
    }
    if (status === "costLimitReached") {
        return "border-amber-300 bg-amber-50/30 ring-2 ring-amber-500";
    }
    if (status === "idle") {
        return "border-amber-300 bg-amber-50/30 ring-2 ring-amber-500";
    }
    return "border-gray-300 bg-gray-50/50 ring-2 ring-gray-400";
}
export function AgentCard({ agent, onClick, onResume, onClose, onDelete, onDismiss, formatDateTime, selected = false, }) {
    const [loadedTriggerCount, setLoadedTriggerCount] = React.useState(agent.triggerSubscriptionCount ?? null);
    React.useEffect(() => {
        if (agent.triggerSubscriptionCount !== undefined) {
            setLoadedTriggerCount(agent.triggerSubscriptionCount);
            return;
        }
        let cancelled = false;
        void getAgentTriggerSubscriptions(agent.id)
            .then((subscriptions) => {
            if (cancelled)
                return;
            setLoadedTriggerCount(subscriptions.filter((subscription) => subscription.isActive).length);
        })
            .catch(() => {
            if (cancelled)
                return;
            setLoadedTriggerCount(0);
        });
        return () => {
            cancelled = true;
        };
    }, [agent.id, agent.triggerSubscriptionCount]);
    const statusConfig = getAgentStatusConfig(agent);
    const isClosed = isAgentClosed(agent.status);
    const attentionIndicator = getAttentionIndicator(agent) ??
        (agent.status === "waitingForInput"
            ? {
                show: true,
                icon: _jsx(HelpCircle, { className: "size-3", strokeWidth: 2 }),
                label: "Input Required",
                colorClass: "bg-amber-50 text-amber-700 border-amber-100",
                accentBorderClass: "border-l-4 border-l-amber-500",
                hoverClass: "hover:border-amber-200 hover:bg-amber-50/30",
            }
            : agent.status === "idle"
                ? {
                    show: true,
                    icon: _jsx(MessageSquare, { className: "size-3", strokeWidth: 2 }),
                    label: "Awaiting Response",
                    colorClass: "bg-amber-50 text-amber-700 border-amber-100",
                    accentBorderClass: "border-l-4 border-l-amber-500",
                    hoverClass: "hover:border-amber-200 hover:bg-amber-50/30",
                }
                : agent.status === "completed"
                    ? {
                        show: true,
                        icon: _jsx(MessageSquare, { className: "size-3", strokeWidth: 2 }),
                        label: "Ready",
                        colorClass: "bg-green-50 text-green-700 border-green-100",
                        accentBorderClass: "border-l-4 border-l-green-500",
                        hoverClass: "hover:border-green-200 hover:bg-green-50/30",
                    }
                    : null);
    const selectedClass = getSelectedCardClass(agent);
    const handleCardClick = () => {
        if (isClosed && onResume) {
            onResume(agent);
        }
        else {
            onClick(agent);
        }
    };
    return (_jsx("div", { className: cn("group relative cursor-pointer overflow-hidden rounded-lg border bg-white px-3 py-2.5 transition-all hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]", attentionIndicator
            ? "border-gray-200"
            : "border-gray-100 hover:border-gray-200", attentionIndicator?.accentBorderClass, attentionIndicator?.hoverClass, selected && selectedClass), onClick: handleCardClick, title: `ID: ${agent.id}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-gray-50 text-gray-400", children: agent.profileSvgIcon ? (_jsx("div", { className: "h-4 w-4 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
                            __html: sanitizeSvg(agent.profileSvgIcon),
                        } })) : (_jsx(SecretAgentIcon, { size: 16, strokeWidth: 1.5, className: "text-gray-400" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h4", { className: "truncate text-[13px] font-semibold tracking-tight text-gray-900", children: agent.name }), _jsx("div", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", statusConfig.color, statusConfig.shouldPulse && "animate-pulse"), title: statusConfig.label }), agent.isShared && (_jsx("span", { className: "rounded-full bg-blue-50 px-1.5 py-px text-[9px] font-bold tracking-wider text-blue-500 uppercase", children: "Shared" }))] }), (attentionIndicator || agent.description) && (_jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [attentionIndicator && (_jsxs("span", { className: cn("inline-flex items-center gap-1 rounded px-1.5 py-px text-[10px] font-semibold", attentionIndicator.colorClass), children: [attentionIndicator.icon, attentionIndicator.label] })), agent.description && (_jsx("p", { className: "min-w-0 truncate text-xs text-gray-400", children: agent.description }))] })), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 text-[10px] text-gray-400", children: [agent.nextRunAt && (_jsxs("span", { className: "flex items-center gap-0.5 text-amber-600", children: [_jsx(Clock, { className: "size-2.5", strokeWidth: 2 }), "Wake: ", formatDateTime(agent.nextRunAt)] })), _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(Clock, { className: "size-2.5", strokeWidth: 2 }), agent.lastMessageDate
                                            ? formatDateTime(agent.lastMessageDate)
                                            : formatDateTime(agent.updatedDate)] }), agent.isShared && agent.ownerName && (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(Users, { className: "size-2.5", strokeWidth: 2 }), "By ", agent.ownerName] })), agent.messageCount !== undefined && agent.messageCount > 0 && (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(MessageSquare, { className: "size-2.5", strokeWidth: 2 }), agent.messageCount, " msg"] })), loadedTriggerCount !== null && loadedTriggerCount > 0 && (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(Bell, { className: "size-2.5", strokeWidth: 2 }), loadedTriggerCount, " trigger", loadedTriggerCount !== 1 ? "s" : ""] })), agent.totalCost !== undefined && agent.totalCost > 0 && (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(Coins, { className: "size-2.5", strokeWidth: 2 }), "$", agent.totalCost.toFixed(2)] }))] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100", children: [isClosed && (_jsx(SimpleIconButton, { onClick: (e) => {
                                e.stopPropagation();
                                onResume?.(agent);
                            }, icon: _jsx(Play, { className: "size-3.5", strokeWidth: 2 }), label: "Resume Agent", className: "h-7 w-7 rounded-md text-gray-400 hover:bg-blue-50 hover:text-blue-600" })), !isClosed && !onDismiss && (_jsx(SimpleIconButton, { onClick: (e) => {
                                e.stopPropagation();
                                onClose?.(agent.id, agent.name);
                            }, icon: _jsx(X, { className: "size-3.5", strokeWidth: 2 }), label: "Close Agent", className: "h-7 w-7 rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-600" })), onDismiss ? (_jsx(SimpleIconButton, { onClick: (e) => {
                                e.stopPropagation();
                                onDismiss(agent.id, agent.name);
                            }, icon: _jsx(X, { className: "size-3.5", strokeWidth: 2 }), label: "Dismiss", className: "h-7 w-7 rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-600" })) : (_jsx(SimpleIconButton, { onClick: (e) => onDelete?.(agent.id, agent.name, e), icon: _jsx(Trash, { className: "size-3.5", strokeWidth: 2 }), label: "Delete Agent", className: "h-7 w-7 rounded-md text-gray-400 hover:bg-red-50 hover:text-red-600" }))] })] }) }, agent.id));
}
//# sourceMappingURL=AgentCard.js.map