"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useId, useMemo } from "react";
import { cn } from "@stigmer/theme";
import { useScrollShadows } from "../internal/useScrollShadows";
import { ScrollFade } from "../internal/ScrollFade";
/**
 * Checklist of discovered MCP server tools with approval policy badges.
 *
 * Renders one checkbox row per tool with the tool name, a one-line
 * description, and an "Approval" badge for tools that have an entry
 * in `toolApprovals`. The header shows the tool count and compact
 * "All" / "None" bulk-selection shortcuts.
 *
 * This is a **pure presentational component** — it has no knowledge
 * of the setup hook, personal environments, or session creation.
 * State is fully controlled via `enabledTools` and `onChange`.
 *
 * When `tools` is empty (capabilities not yet discovered), the
 * component renders an informational empty state. The caller is
 * responsible for deciding whether to render the selector at all.
 *
 * All visual properties flow through `--stgm-*` design tokens.
 *
 * @example
 * ```tsx
 * <McpToolSelector
 *   tools={entry.discoveredTools}
 *   toolApprovals={entry.toolApprovals}
 *   enabledTools={entry.enabledTools}
 *   onChange={(tools) => setEnabledTools(serverRef, tools)}
 * />
 * ```
 */
export function McpToolSelector({ tools, toolApprovals, enabledTools, onChange, disabled, className, }) {
    const instanceId = useId();
    const list = useScrollShadows();
    const approvalsByTool = useMemo(() => new Map(toolApprovals.map((p) => [p.toolName, p.message])), [toolApprovals]);
    const enabledSet = useMemo(() => new Set(enabledTools), [enabledTools]);
    const handleToggle = useCallback((toolName) => {
        const next = enabledSet.has(toolName)
            ? enabledTools.filter((n) => n !== toolName)
            : [...enabledTools, toolName];
        onChange(next);
    }, [enabledSet, enabledTools, onChange]);
    const handleSelectAll = useCallback(() => {
        onChange(tools.map((t) => t.name));
    }, [tools, onChange]);
    const handleSelectNone = useCallback(() => {
        onChange([]);
    }, [onChange]);
    if (tools.length === 0) {
        return (_jsxs("div", { className: cn("space-y-1", className), children: [_jsx("div", { className: "text-[0.65rem] font-medium text-muted-foreground", children: "Tools" }), _jsxs("div", { className: "rounded-md border border-border px-3 py-4 text-center", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Tools have not been discovered yet." }), _jsx("p", { className: "mt-1 text-[0.65rem] text-muted-foreground-subtle", children: "All tools will be enabled by default." })] })] }));
    }
    return (_jsxs("div", { className: cn("space-y-1.5", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-[0.65rem] font-medium text-muted-foreground", children: ["Tools (", tools.length, ")"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: handleSelectAll, disabled: disabled, className: cn("rounded px-1.5 py-0.5 text-[0.6rem] font-medium", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), children: "All" }), _jsx("button", { type: "button", onClick: handleSelectNone, disabled: disabled, className: cn("rounded px-1.5 py-0.5 text-[0.6rem] font-medium", "text-muted-foreground hover:text-foreground hover:bg-accent-hover", "disabled:pointer-events-none disabled:opacity-50"), children: "None" })] })] }), _jsxs("div", { className: "relative", children: [list.canScrollUp && _jsx(ScrollFade, { position: "top" }), _jsx("div", { ref: list.scrollRef, role: "group", "aria-label": "MCP server tools", className: "max-h-52 space-y-0.5 overflow-y-auto", children: tools.map((tool) => {
                            const checkboxId = `${instanceId}-tool-${tool.name}`;
                            const descId = tool.description
                                ? `${checkboxId}-desc`
                                : undefined;
                            const approvalMessage = approvalsByTool.get(tool.name);
                            const isEnabled = enabledSet.has(tool.name);
                            return (_jsx("div", { className: cn("group rounded-md px-2 py-1.5 transition-colors", isEnabled ? "bg-accent-hover" : "hover:bg-accent-hover"), children: _jsxs("label", { htmlFor: checkboxId, className: "flex cursor-pointer items-start gap-2", children: [_jsx("input", { id: checkboxId, type: "checkbox", checked: isEnabled, onChange: () => handleToggle(tool.name), disabled: disabled, "aria-describedby": descId, className: "mt-0.5 size-3 shrink-0 accent-primary disabled:pointer-events-none disabled:opacity-50" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate font-mono text-xs text-foreground", children: tool.name }), approvalMessage !== undefined && (_jsx(ApprovalBadge, { message: approvalMessage }))] }), tool.description && (_jsx("span", { id: descId, className: "line-clamp-2 group-hover:line-clamp-none group-focus-within:line-clamp-none text-[0.65rem] leading-relaxed text-muted-foreground", children: tool.description }))] })] }) }, tool.name));
                        }) }), list.canScrollDown && _jsx(ScrollFade, { position: "bottom" })] })] }));
}
// ---------------------------------------------------------------------------
// Internal components
// ---------------------------------------------------------------------------
function ApprovalBadge({ message }) {
    const resolvedTitle = message || "This tool requires approval before execution";
    return (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-0.5 rounded px-1 py-0.5 text-[0.6rem] font-medium leading-none bg-warning/15 text-warning", title: resolvedTitle, children: [_jsx(ShieldIcon, {}), "Approval"] }));
}
function ShieldIcon() {
    return (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M8 1.5L2.5 4v4c0 3.5 2.5 5.5 5.5 7 3-1.5 5.5-3.5 5.5-7V4L8 1.5z" }) }));
}
//# sourceMappingURL=McpToolSelector.js.map