"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useEffect, useRef } from "react";
import { cn } from "@stigmer/theme";
import { kindToDisplayName, categorizeKind } from "./kind-metadata";
import { CATEGORY_COLORS } from "./canvas-constants";
/**
 * Lightweight popover shown when clicking a node in the overview graph.
 *
 * Displays the task name, kind, category, and a brief config summary.
 * Provides an "Open in editor" action link via callback prop.
 *
 * Positioned absolutely relative to the graph container at the click
 * coordinates, with viewport clamping to stay within bounds.
 */
export const WorkflowNodePopover = memo(function WorkflowNodePopover({ data, x, y, onClose, onOpenInEditor, }) {
    const ref = useRef(null);
    useEffect(() => {
        function handleClickOutside(e) {
            if (ref.current && !ref.current.contains(e.target)) {
                onClose();
            }
        }
        function handleEscape(e) {
            if (e.key === "Escape")
                onClose();
        }
        document.addEventListener("mousedown", handleClickOutside);
        document.addEventListener("keydown", handleEscape);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
            document.removeEventListener("keydown", handleEscape);
        };
    }, [onClose]);
    const handleOpenInEditor = useCallback(() => {
        onOpenInEditor?.(data.taskName);
        onClose();
    }, [onOpenInEditor, data.taskName, onClose]);
    const displayName = kindToDisplayName(data.kindString);
    const category = categorizeKind(data.kindString);
    const categoryColor = CATEGORY_COLORS[category];
    const configSummary = extractConfigSummary(data);
    return (_jsxs("div", { ref: ref, role: "dialog", "aria-label": `${data.taskName} task details`, className: cn("absolute z-50 w-64 overflow-visible rounded-lg border border-[var(--stgm-border,#d4d4d8)]", "bg-[var(--stgm-popover,#fff)] p-3 shadow-lg", "text-[var(--stgm-popover-foreground,#1a1a2e)]"), style: {
            left: Math.min(x, (ref.current?.parentElement?.clientWidth ?? 800) - 272),
            top: y + 8,
            minWidth: "16rem",
        }, children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: categoryColor }, "aria-hidden": "true" }), _jsx("span", { className: "truncate text-sm font-medium", children: data.taskName })] }), _jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs text-[var(--stgm-muted-foreground,#737373)]", children: [_jsx("span", { className: "rounded bg-[var(--stgm-muted,#f5f5f5)] px-1.5 py-0.5 font-medium", children: displayName }), _jsx("span", { className: "capitalize", children: category.replace(/_/g, " ") })] }), configSummary && (_jsx("p", { className: "mb-2 truncate text-xs text-[var(--stgm-muted-foreground,#737373)]", children: configSummary })), onOpenInEditor && (_jsx("button", { type: "button", onClick: handleOpenInEditor, className: cn("mt-1 block w-full whitespace-nowrap rounded-md px-2.5 py-1.5 text-center text-xs font-medium", "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]", "hover:bg-[var(--stgm-primary-hover,#4f46e5)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stgm-ring,#6366f1)]", "transition-colors"), children: "Open in editor" }))] }));
});
function extractConfigSummary(data) {
    const config = data.config;
    if (!config)
        return null;
    switch (data.kindString) {
        case "agent_call": {
            const agent = config.agent;
            return agent ? `Agent: ${agent}` : null;
        }
        case "call_http":
        case "http_call": {
            const method = config.method ?? "GET";
            const url = config.url;
            return url ? `${method.toUpperCase()} ${url}` : null;
        }
        case "call_llm":
        case "llm_call": {
            const model = config.model;
            return model ? `Model: ${model}` : null;
        }
        case "switch_case": {
            const cases = config.cases;
            return cases ? `${cases.length} case${cases.length === 1 ? "" : "s"}` : null;
        }
        case "fork": {
            const branches = config.branches;
            return branches ? `${branches.length} branch${branches.length === 1 ? "" : "es"}` : null;
        }
        case "wait": {
            const dur = config.duration;
            const secs = dur?.seconds;
            return secs ? `Wait ${secs}s` : null;
        }
        case "run_workflow": {
            const wfRef = config.workflow_ref;
            return wfRef ? `Workflow: ${wfRef}` : null;
        }
        default:
            return null;
    }
}
//# sourceMappingURL=WorkflowNodePopover.js.map