"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback, useContext, useMemo, useRef, useState } from "react";
import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from "@xyflow/react";
import { cn } from "@stigmer/theme";
import { CanvasActionsContext } from "./CanvasActionsContext";
import { TaskPickerPopover } from "./TaskPickerPopover";
import { useWorkflowGraphMode } from "./WorkflowGraphModeContext";
const EDGE_EXECUTION_STYLES = {
    taken: {
        strokeClass: "!stroke-[var(--stgm-success,#22c55e)]",
        opacity: 1,
        labelDimmed: false,
    },
    not_taken: {
        strokeClass: "!stroke-[var(--stgm-muted-foreground,#737373)]",
        opacity: 0.3,
        dashArray: "5 5",
        labelDimmed: true,
    },
    active: {
        strokeClass: "!stroke-[var(--stgm-primary,#6366f1)]",
        opacity: 1,
        dashArray: "8 4",
        animate: true,
        labelDimmed: false,
    },
    not_reached: {
        strokeClass: "!stroke-[var(--stgm-muted-foreground,#737373)]",
        opacity: 0.25,
        labelDimmed: true,
    },
};
const EDGE_DIFF_STYLES = {
    added: {
        strokeClass: "!stroke-[var(--stgm-success,#22c55e)]",
        opacity: 1,
        labelDimmed: false,
    },
    removed: {
        strokeClass: "!stroke-[var(--stgm-destructive,#ef4444)]",
        opacity: 0.3,
        dashArray: "5 5",
        labelDimmed: true,
    },
    unchanged: {
        strokeClass: "!stroke-[var(--stgm-muted-foreground,#737373)]",
        opacity: 0.6,
        labelDimmed: false,
    },
};
/**
 * Custom React Flow edge rendering a directed transition between tasks.
 *
 * Uses smoothstep routing (90-degree bends) with an arrowhead marker.
 * Optionally renders a label pill for named branches (switch_case cases,
 * human_input outcomes).
 *
 * In execution mode, applies per-edge visual treatment based on
 * `data.executionState` (T06): taken/not_taken/active/not_reached.
 *
 * Shows a "+" button at the midpoint on hover in design mode. Clicking
 * the button inserts a new task node between the source and target.
 *
 * @since T15 (Visual Canvas Editor), T06 (Branch Highlighting)
 */
export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected, markerEnd, }) {
    const mode = useWorkflowGraphMode();
    const [edgePath, labelX, labelY] = getSmoothStepPath({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
        borderRadius: 8,
    });
    const label = data?.label;
    const execState = data?.executionState;
    const diffState = data?.diffState;
    const actions = useContext(CanvasActionsContext);
    const [hovered, setHovered] = useState(false);
    const [pickerOpen, setPickerOpen] = useState(false);
    const insertBtnRef = useRef(null);
    const isDesignMode = mode === "design";
    const isExecutionMode = mode === "execution";
    const isDiffMode = mode === "diff";
    const handleOpenPicker = useCallback(() => {
        setPickerOpen(true);
    }, []);
    const handlePickerOpenChange = useCallback((nextOpen) => {
        setPickerOpen(nextOpen);
    }, []);
    const handleKindSelected = useCallback((kindString) => {
        actions?.insertTaskOnEdge(id, kindString);
    }, [actions, id]);
    const insertionContext = useMemo(() => {
        const graph = actions?.getGraphModel();
        if (!graph)
            return null;
        const sourceNode = graph.nodes.find((n) => n.id === source);
        const targetNode = graph.nodes.find((n) => n.id === target);
        return {
            mode: "edge-splice",
            edgeId: id,
            sourceNodeId: source,
            sourceDisplayName: sourceNode?.taskName ?? source,
            targetNodeId: target,
            targetDisplayName: targetNode?.taskName ?? target,
        };
    }, [actions, id, source, target]);
    // Resolve visual style: diff mode → diff styles, execution mode → execution styles, else defaults.
    const execVisual = isDiffMode && diffState
        ? EDGE_DIFF_STYLES[diffState]
        : isExecutionMode && execState
            ? EDGE_EXECUTION_STYLES[execState]
            : null;
    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: edgePath, markerEnd: markerEnd, className: cn(execVisual
                    ? execVisual.strokeClass
                    : "!stroke-[var(--stgm-border-prominent,#a3a3a3)]", selected && "!stroke-[var(--stgm-ring,#3b82f6)]", !isDesignMode && !execVisual && "!opacity-60", execVisual?.animate && "stgm-edge-active"), style: {
                    strokeWidth: selected ? 2.5 : 2,
                    ...(execVisual && { opacity: execVisual.opacity }),
                    ...(execVisual?.dashArray && { strokeDasharray: execVisual.dashArray }),
                }, "data-edge-execution-state": execState }), _jsx(EdgeLabelRenderer, { children: _jsxs("div", { className: "pointer-events-auto absolute", style: {
                        transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
                    }, onMouseEnter: isDesignMode ? () => setHovered(true) : undefined, onMouseLeave: isDesignMode ? () => setHovered(false) : undefined, children: [label && (_jsx("div", { className: cn("stgm mb-1 rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-2 py-0.5 text-center text-[10px] font-medium text-[var(--stgm-foreground,#1a1a2e)] shadow-sm", execVisual?.labelDimmed && "opacity-30"), "aria-label": execState
                                ? `Branch ${label}, ${execState.replace(/_/g, " ")}`
                                : `Branch ${label}`, children: label })), isDesignMode && (_jsxs(_Fragment, { children: [_jsx("button", { ref: insertBtnRef, type: "button", onClick: handleOpenPicker, className: cn("flex h-5 w-5 items-center justify-center rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] text-[var(--stgm-muted-foreground,#737373)] shadow-sm transition-all", "hover:border-[var(--stgm-primary,#6366f1)] hover:bg-[var(--stgm-primary,#6366f1)] hover:text-[var(--stgm-primary-foreground,#fff)]", hovered || selected || pickerOpen ? "scale-100 opacity-100" : "scale-75 opacity-0"), "aria-label": "Insert task here", title: "Insert task", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M5 2v6M2 5h6" }) }) }), _jsx(TaskPickerPopover, { open: pickerOpen, onOpenChange: handlePickerOpenChange, onSelectKind: handleKindSelected, anchorRef: insertBtnRef, insertionContext: insertionContext, graph: actions?.getGraphModel() ?? null, side: "bottom" })] }))] }) })] }));
});
//# sourceMappingURL=CanvasTransitionEdge.js.map