"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo, useCallback } from "react";
import { cn } from "@stigmer/theme";
import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model";
import { Tabs } from "../../tabs/Tabs";
import { CATEGORY_COLORS } from "../canvas-constants";
import { taskKindToString } from "../workflow-graph-conversions";
import { InspectorHeader } from "./InspectorHeader";
import { useInspectorTabs } from "./useInspectorTabs";
import { ConfigureTab } from "./tabs/ConfigureTab";
import { BranchesTab } from "./tabs/BranchesTab";
import { CatchTab } from "./tabs/CatchTab";
import { IterationTab } from "./tabs/IterationTab";
import { DataTab } from "./tabs/DataTab";
import { RuntimeTab } from "./tabs/RuntimeTab";
import { AdvancedTab } from "./tabs/AdvancedTab";
import { DocsTab } from "./tabs/DocsTab";
import { EdgeInspector } from "./EdgeInspector";
import { SentinelInspector } from "./SentinelInspector";
/**
 * Shared inspector shell that renders a consistent header, tab bar, and
 * scrollable content area. Routes to the appropriate sub-inspector based
 * on the current selection.
 *
 * In design mode, renders tabbed configuration forms. Sentinel and edge
 * selections render dedicated lightweight inspectors.
 *
 * @since T10 (Inspector Panel Refactor)
 */
export const InspectorShell = memo(function InspectorShell({ selection, graph, descriptor, mutations, validationErrors, emptyState, onViewYaml, className, }) {
    if (!selection || !graph) {
        return (_jsx("div", { className: cn("flex h-full flex-col", className), children: emptyState ?? (_jsx("div", { className: "flex flex-1 items-center justify-center p-4", children: _jsx("span", { className: "text-xs text-[var(--stgm-muted-foreground,#737373)]", children: "Select a task or connection to inspect" }) })) }));
    }
    if (selection.type === "edge") {
        const edge = graph.edges.find((e) => e.id === selection.id);
        if (!edge)
            return null;
        return (_jsx(EdgeInspector, { edge: edge, graph: graph, onDeleteEdge: mutations.onDeleteEdge, className: className }));
    }
    const node = graph.nodes.find((n) => n.id === selection.id);
    if (!node)
        return null;
    if (node.id === START_NODE_ID || node.id === END_NODE_ID) {
        return _jsx(SentinelInspector, { node: node, className: className });
    }
    return (_jsx(NodeInspectorShell, { node: node, graph: graph, descriptor: descriptor, mutations: mutations, validationErrors: validationErrors, onViewYaml: onViewYaml, className: className }));
});
// ---------------------------------------------------------------------------
// NodeInspectorShell — tabbed design-mode inspector
// ---------------------------------------------------------------------------
function NodeInspectorShell({ node, graph, descriptor, mutations, validationErrors, onViewYaml, className, }) {
    const kindStr = taskKindToString(node.kind);
    const identity = useMemo(() => ({
        nodeId: node.id,
        taskName: node.taskName,
        kindString: kindStr,
        category: node.category,
        categoryColor: CATEGORY_COLORS[node.category],
        displayName: descriptor?.displayName ?? kindStr.replace(/_/g, " "),
        description: descriptor?.description,
        icon: descriptor?.icon,
    }), [node.id, node.taskName, node.category, kindStr, descriptor]);
    const { tabs, activeTab, setActiveTab } = useInspectorTabs({
        kindString: kindStr,
        descriptor,
        mode: "design",
        nodeId: node.id,
    });
    const handleTabChange = useCallback((tabId) => setActiveTab(tabId), [setActiveTab]);
    const handleFieldChange = useCallback((fieldPath, value) => {
        mutations.onUpdateField(node.id, fieldPath, value);
    }, [node.id, mutations.onUpdateField]);
    const otherTaskNames = useMemo(() => graph.nodes
        .filter((n) => n.id !== node.id && n.id !== START_NODE_ID && n.id !== END_NODE_ID)
        .map((n) => n.taskName), [graph.nodes, node.id]);
    const nodeErrors = validationErrors?.get(node.id);
    return (_jsxs("div", { className: cn("flex h-full flex-col", className), children: [_jsx(InspectorHeader, { identity: identity, graph: graph, mutations: mutations, onViewYaml: onViewYaml }), _jsx(Tabs, { tabs: tabs.map((t) => ({ id: t.id, label: t.label, badge: t.badge, icon: t.icon })), activeTab: activeTab, onTabChange: handleTabChange, "aria-label": "Task configuration", className: "min-h-0 flex-1", children: _jsxs("div", { className: "overflow-y-auto", children: [activeTab === "configure" && (_jsx(ConfigureTab, { node: node, graph: graph, descriptor: descriptor, kindString: kindStr, otherTaskNames: otherTaskNames, onFieldChange: handleFieldChange, mutations: mutations })), activeTab === "branches" && (_jsx(BranchesTab, { node: node, graph: graph, mutations: mutations, kindString: kindStr })), activeTab === "catch" && (_jsx(CatchTab, { node: node, mutations: mutations })), activeTab === "iteration" && (_jsx(IterationTab, { node: node, mutations: mutations })), activeTab === "data" && (_jsx(DataTab, { node: node, onUpdateExport: mutations.onUpdateExport })), activeTab === "runtime" && (_jsx(RuntimeTab, { node: node, kindString: kindStr, descriptor: descriptor, onFieldChange: handleFieldChange })), activeTab === "advanced" && (_jsx(AdvancedTab, { node: node, otherTaskNames: otherTaskNames, kindString: kindStr, onUpdateFlow: mutations.onUpdateFlow })), activeTab === "docs" && descriptor && (_jsx(DocsTab, { descriptor: descriptor }))] }) })] }));
}
//# sourceMappingURL=InspectorShell.js.map