"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useState, useCallback } from "react";
import { cn } from "@stigmer/theme";
import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "../canvas-constants.js";
/**
 * Inspector panel header showing node identity and an actions overflow menu.
 *
 * Displays the task name (click-to-rename), kind badge with category color,
 * and a `...` overflow menu for structural actions (Duplicate, Delete, etc.).
 *
 * @since T10 (Inspector Panel Refactor)
 */
export const InspectorHeader = memo(function InspectorHeader({ identity, graph, mutations, onViewYaml, className, }) {
    const [editingName, setEditingName] = useState(false);
    const [nameValue, setNameValue] = useState(identity.taskName);
    const [nameError, setNameError] = useState(null);
    const [menuOpen, setMenuOpen] = useState(false);
    const existingNames = new Set(graph.nodes.filter((n) => n.id !== identity.nodeId).map((n) => n.taskName));
    const startEditing = useCallback(() => {
        setEditingName(true);
        setNameValue(identity.taskName);
        setNameError(null);
        setMenuOpen(false);
    }, [identity.taskName]);
    const commitName = useCallback(() => {
        const trimmed = nameValue.trim();
        if (!trimmed) {
            setNameError("Name cannot be empty");
            return;
        }
        if (!TASK_NAME_PATTERN.test(trimmed)) {
            setNameError(TASK_NAME_PATTERN_ERROR);
            return;
        }
        if (existingNames.has(trimmed)) {
            setNameError("A task with this name already exists");
            return;
        }
        setEditingName(false);
        setNameError(null);
        if (trimmed !== identity.taskName) {
            mutations.onRenameNode(identity.nodeId, trimmed);
        }
    }, [nameValue, existingNames, identity.nodeId, identity.taskName, mutations.onRenameNode]);
    const handleKeyDown = useCallback((e) => {
        if (e.key === "Enter")
            commitName();
        if (e.key === "Escape") {
            setEditingName(false);
            setNameError(null);
        }
    }, [commitName]);
    const toggleMenu = useCallback(() => setMenuOpen((prev) => !prev), []);
    const closeMenu = useCallback(() => setMenuOpen(false), []);
    return (_jsxs("div", { className: cn("flex flex-col gap-1.5 border-b border-[var(--stgm-border,#e5e5e5)] px-3 py-2.5", className), children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: editingName ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("input", { type: "text", value: nameValue, onChange: (e) => { setNameValue(e.target.value); setNameError(null); }, onBlur: commitName, onKeyDown: handleKeyDown, autoFocus: true, className: "w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1 text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]" }), nameError && (_jsx("span", { className: "text-[10px] text-[var(--stgm-destructive,#ef4444)]", children: nameError }))] })) : (_jsx("button", { type: "button", onClick: startEditing, className: "w-fit max-w-full truncate text-left text-sm font-semibold text-[var(--stgm-foreground,#1a1a2e)] hover:underline", title: "Click to rename", children: identity.taskName })) }), _jsxs("div", { className: "relative shrink-0", children: [_jsx("button", { type: "button", onClick: toggleMenu, className: "flex h-6 w-6 items-center justify-center rounded text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]", "aria-label": "Node actions", "aria-expanded": menuOpen, "aria-haspopup": "true", children: _jsx(MoreIcon, {}) }), menuOpen && (_jsx(ActionsMenu, { nodeId: identity.nodeId, mutations: mutations, onRename: startEditing, onViewYaml: onViewYaml, onClose: closeMenu }))] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block rounded px-1.5 py-0.5 text-[10px] font-medium leading-tight", style: {
                            color: identity.categoryColor,
                            backgroundColor: `color-mix(in srgb, ${identity.categoryColor} 12%, transparent)`,
                        }, children: identity.kindString.replace(/_/g, " ") }), identity.description && (_jsx("span", { className: "truncate text-[10px] text-[var(--stgm-muted-foreground,#737373)]", title: identity.description, children: identity.description }))] })] }));
});
// ---------------------------------------------------------------------------
// Actions menu
// ---------------------------------------------------------------------------
function ActionsMenu({ nodeId, mutations, onRename, onViewYaml, onClose, }) {
    const handleAction = useCallback((action) => {
        onClose();
        action();
    }, [onClose]);
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { role: "menu", className: "absolute right-0 top-full z-50 mt-1 min-w-[160px] rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-popover,var(--stgm-background,#fff))] py-1 shadow-md", children: [_jsx(MenuItem, { label: "Rename", onClick: () => handleAction(onRename) }), mutations.onDuplicateNode && (_jsx(MenuItem, { label: "Duplicate", onClick: () => handleAction(() => mutations.onDuplicateNode(nodeId)) })), mutations.onToggleDisabled && (_jsx(MenuItem, { label: "Disable / Bypass", onClick: () => handleAction(() => mutations.onToggleDisabled(nodeId)) })), mutations.onWrapInTryCatch && (_jsx(MenuItem, { label: "Wrap in Try/Catch", onClick: () => handleAction(() => mutations.onWrapInTryCatch(nodeId)) })), onViewYaml && (_jsx(MenuItem, { label: "View YAML", onClick: () => handleAction(() => onViewYaml(nodeId)) })), _jsx(MenuDivider, {}), mutations.onDeleteNode && (_jsx(MenuItem, { label: "Delete task", destructive: true, onClick: () => handleAction(() => mutations.onDeleteNode(nodeId)) }))] })] }));
}
function MenuItem({ label, onClick, destructive, }) {
    return (_jsx("button", { type: "button", role: "menuitem", onClick: onClick, className: cn("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", destructive
            ? "text-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)]/10"
            : "text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-muted,#f5f5f5)]"), children: label }));
}
function MenuDivider() {
    return _jsx("div", { className: "my-1 border-t border-[var(--stgm-border,#e5e5e5)]" });
}
function MoreIcon() {
    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "3", r: "1.5" }), _jsx("circle", { cx: "8", cy: "8", r: "1.5" }), _jsx("circle", { cx: "8", cy: "13", r: "1.5" })] }));
}
//# sourceMappingURL=InspectorHeader.js.map