"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef } from "react";
import { cn } from "@stigmer/theme";
import { DependencyTreeNode } from "./DependencyTreeNode.js";
/**
 * Accessible CSS-based tree visualization of an agent's dependencies.
 *
 * Renders `MCP Servers`, `Skills`, and `Sub-Agents` (with recursive
 * sub-agent children) as a nested tree with visual connector lines.
 * The root node represents the agent itself.
 *
 * Implements the WAI-ARIA TreeView pattern:
 * - `role="tree"` on the root list
 * - `role="treeitem"` on each node (via {@link DependencyTreeNode})
 * - Arrow-key navigation between visible nodes (roving tabindex)
 * - `Home`/`End` to jump to first/last visible node
 *
 * All visual properties flow through `--stgm-*` design tokens.
 * Zero Console dependencies — safe for platform builder embedding.
 *
 * @example
 * ```tsx
 * const { tree } = useDependencyGraph({
 *   agentName: "pr-review-agent",
 *   agentOrg: "acme",
 *   spec: agent.spec,
 * });
 *
 * {tree && (
 *   <DependencyGraph
 *     tree={tree}
 *     onNodeClick={(node) => {
 *       if (node.kind === "mcp-server") navigateTo(`/mcp-servers/${node.ref!.slug}`);
 *     }}
 *   />
 * )}
 * ```
 */
export function DependencyGraph({ tree, onNodeClick, defaultExpanded = true, className, }) {
    const treeRef = useRef(null);
    const handleKeyDown = useCallback((e) => {
        const container = treeRef.current;
        if (!container)
            return;
        const items = Array.from(container.querySelectorAll("[role='treeitem'] > button, [role='treeitem'] > div")).filter((el) => {
            let parent = el.closest("[role='treeitem']")?.parentElement?.closest("[role='treeitem']");
            while (parent) {
                if (parent.getAttribute("aria-expanded") === "false")
                    return false;
                parent = parent.parentElement?.closest("[role='treeitem']");
            }
            return true;
        });
        if (items.length === 0)
            return;
        const activeEl = document.activeElement;
        const currentIndex = activeEl ? items.indexOf(activeEl) : -1;
        let nextIndex = null;
        switch (e.key) {
            case "ArrowDown":
                nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
                break;
            case "ArrowUp":
                nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
                break;
            case "Home":
                nextIndex = 0;
                break;
            case "End":
                nextIndex = items.length - 1;
                break;
            default:
                return;
        }
        e.preventDefault();
        items[nextIndex].focus();
    }, []);
    const { root } = tree;
    return (_jsxs("div", { className: cn("py-2", className), children: [_jsxs("div", { className: "mb-3 flex items-center gap-2 px-2", children: [_jsx(TreeIcon, { className: "size-4 text-muted-foreground" }), _jsx("h3", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Dependency Tree" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [tree.nodeCount, " ", tree.nodeCount === 1 ? "node" : "nodes"] })] }), _jsx("ul", { ref: treeRef, role: "tree", "aria-label": `Dependencies of ${root.label}`, onKeyDown: handleKeyDown, className: "rounded-lg border border-border p-2", children: _jsx(DependencyTreeNode, { node: root, depth: 0, onNodeClick: onNodeClick, defaultExpanded: defaultExpanded }) })] }));
}
// ---------------------------------------------------------------------------
// Header icon
// ---------------------------------------------------------------------------
function TreeIcon({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M8 2v4M8 6 4 10M8 6l4 4" }), _jsx("circle", { cx: "8", cy: "2", r: "1", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "4", cy: "11", r: "1.5" }), _jsx("circle", { cx: "8", cy: "11", r: "1.5" }), _jsx("circle", { cx: "12", cy: "11", r: "1.5" })] }));
}
//# sourceMappingURL=DependencyGraph.js.map