"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
import { cn } from "@stigmer/theme";
const PHASE_CONFIG = new Map([
    [
        ExecutionPhase.EXECUTION_PENDING,
        {
            label: "Pending",
            icon: PulseDotIcon,
            colorClass: "text-muted-foreground",
        },
    ],
    [
        ExecutionPhase.EXECUTION_IN_PROGRESS,
        {
            label: "Running",
            icon: PulseDotIcon,
            colorClass: "text-foreground",
        },
    ],
    [
        ExecutionPhase.EXECUTION_COMPLETED,
        {
            label: "Completed",
            icon: CheckIcon,
            colorClass: "text-success",
        },
    ],
    [
        ExecutionPhase.EXECUTION_FAILED,
        {
            label: "Failed",
            icon: XIcon,
            colorClass: "text-destructive",
        },
    ],
    [
        ExecutionPhase.EXECUTION_CANCELLED,
        {
            label: "Cancelled",
            icon: XIcon,
            colorClass: "text-muted-foreground",
        },
    ],
    [
        ExecutionPhase.EXECUTION_TERMINATED,
        {
            label: "Terminated",
            icon: StopIcon,
            colorClass: "text-destructive",
        },
    ],
    [
        ExecutionPhase.EXECUTION_WAITING_FOR_APPROVAL,
        {
            label: "Waiting for approval",
            icon: ClockIcon,
            colorClass: "text-warning",
        },
    ],
    [
        ExecutionPhase.EXECUTION_PAUSED,
        {
            label: "Paused",
            icon: PauseIcon,
            colorClass: "text-muted-foreground",
        },
    ],
]);
/**
 * Displays the lifecycle phase of an `AgentExecution` as an
 * inline badge with a status icon and label.
 *
 * Renders nothing for `EXECUTION_PHASE_UNSPECIFIED`.
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * <ExecutionPhaseBadge phase={ExecutionPhase.EXECUTION_COMPLETED} />
 * ```
 */
export const ExecutionPhaseBadge = memo(function ExecutionPhaseBadge({ phase, className, }) {
    const config = PHASE_CONFIG.get(phase);
    if (!config)
        return null;
    const Icon = config.icon;
    return (_jsxs("span", { role: "status", "aria-label": config.label, className: cn("inline-flex items-center gap-1.5 text-xs font-medium", config.colorClass, className), children: [_jsx("span", { "aria-hidden": "true", children: _jsx(Icon, {}) }), config.label] }));
});
function DotIcon() {
    return (_jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "currentColor", children: _jsx("circle", { cx: "4", cy: "4", r: "3" }) }));
}
function PulseDotIcon() {
    return (_jsxs("span", { className: "relative flex h-2 w-2", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75" }), _jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-current" })] }));
}
function CheckIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5" }) }));
}
function XIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3 3L9 9M9 3L3 9" }) }));
}
function StopIcon() {
    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: _jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" }) }));
}
function ClockIcon() {
    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "6", cy: "6", r: "4.5" }), _jsx("path", { d: "M6 3.5V6L7.5 7.5" })] }));
}
function PauseIcon() {
    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: [_jsx("rect", { x: "2.5", y: "2", width: "2.5", height: "8", rx: "0.5" }), _jsx("rect", { x: "7", y: "2", width: "2.5", height: "8", rx: "0.5" })] }));
}
//# sourceMappingURL=ExecutionPhaseBadge.js.map