"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
import { McpServerPicker } from "../../mcp-server/McpServerPicker.js";
import { SkillPicker } from "../../skill/SkillPicker.js";
/**
 * Wizard step 2: Agent capabilities.
 *
 * All sections are optional and start collapsed. The user expands
 * sections to add MCP servers, skills, and environment variables.
 * No validation gate — the user can proceed with zero capabilities.
 */
export function CapabilitiesStep({ org, data, updateData, }) {
    const [expandedSections, setExpandedSections] = useState(() => {
        const initial = new Set();
        if (data.mcpServerUsages.length > 0)
            initial.add("mcp");
        if (data.skillRefs.length > 0)
            initial.add("skills");
        if (data.env.length > 0)
            initial.add("env");
        return initial;
    });
    const toggleSection = useCallback((section) => {
        setExpandedSections((prev) => {
            const next = new Set(prev);
            if (next.has(section))
                next.delete(section);
            else
                next.add(section);
            return next;
        });
    }, []);
    const handleMcpChange = useCallback((usages) => {
        updateData({ mcpServerUsages: usages });
    }, [updateData]);
    const handleSkillsChange = useCallback((refs) => {
        updateData({ skillRefs: refs });
    }, [updateData]);
    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Capabilities" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Configure what tools, skills, and secrets this agent can use. All sections are optional." })] }), _jsx(CollapsibleSection, { id: "mcp", title: "MCP Servers", subtitle: "Tools and integrations the agent can call", count: data.mcpServerUsages.length, expanded: expandedSections.has("mcp"), onToggle: toggleSection, children: _jsx(McpServerPicker, { org: org, scope: "all", value: data.mcpServerUsages, onChange: handleMcpChange }) }), _jsx(CollapsibleSection, { id: "skills", title: "Skills", subtitle: "Knowledge and capabilities to attach", count: data.skillRefs.length, expanded: expandedSections.has("skills"), onToggle: toggleSection, children: _jsx(SkillPicker, { org: org, scope: "all", value: data.skillRefs, onChange: handleSkillsChange }) }), _jsx(CollapsibleSection, { id: "env", title: "Environment Variables", subtitle: "Secrets and config the agent declares", count: data.env.length, expanded: expandedSections.has("env"), onToggle: toggleSection, children: _jsx(EnvVarEditor, { entries: data.env, onChange: (env) => updateData({ env }) }) })] }));
}
// ---------------------------------------------------------------------------
// CollapsibleSection
// ---------------------------------------------------------------------------
function CollapsibleSection({ id, title, subtitle, count, expanded, onToggle, children, }) {
    return (_jsxs("div", { className: "overflow-hidden rounded-lg border border-border", children: [_jsxs("button", { type: "button", onClick: () => onToggle(id), "aria-expanded": expanded, "aria-controls": `stgm-wizard-section-${id}`, className: cn("flex w-full items-center justify-between px-4 py-3 text-left transition-colors", "hover:bg-accent-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: title }), count > 0 && (_jsx("span", { className: "ml-2 inline-flex items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-medium text-primary-foreground", children: count })), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: subtitle })] }), _jsx(ChevronIcon, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-180") })] }), expanded && (_jsx("div", { id: `stgm-wizard-section-${id}`, className: "border-t border-border px-4 py-4", children: children }))] }));
}
// ---------------------------------------------------------------------------
// EnvVarEditor — key-value editor for env var declarations
// ---------------------------------------------------------------------------
function EnvVarEditor({ entries, onChange, }) {
    const addEntry = useCallback(() => {
        onChange([
            ...entries,
            { key: "", description: "", isSecret: true, optional: false },
        ]);
    }, [entries, onChange]);
    const updateEntry = useCallback((index, partial) => {
        const updated = entries.map((entry, i) => i === index ? { ...entry, ...partial } : entry);
        onChange(updated);
    }, [entries, onChange]);
    const removeEntry = useCallback((index) => {
        onChange(entries.filter((_, i) => i !== index));
    }, [entries, onChange]);
    return (_jsxs("div", { className: "flex flex-col gap-3", children: [entries.map((entry, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-border p-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "flex-1 space-y-1.5", children: [_jsx("input", { type: "text", value: entry.key, onChange: (e) => updateEntry(index, { key: e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "") }), placeholder: "VARIABLE_NAME", "aria-label": `Environment variable name ${index + 1}`, className: cn("w-full rounded-md border border-input bg-input-bg px-2.5 py-1.5 font-mono text-xs text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring") }), _jsx("input", { type: "text", value: entry.description, onChange: (e) => updateEntry(index, { description: e.target.value }), placeholder: "Description (optional)", "aria-label": `Description for ${entry.key || `variable ${index + 1}`}`, className: cn("w-full rounded-md border border-input bg-input-bg px-2.5 py-1.5 text-xs text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring") })] }), _jsx("button", { type: "button", onClick: () => removeEntry(index), "aria-label": `Remove ${entry.key || "variable"}`, className: cn("mt-1 rounded p-1 text-muted-foreground transition-colors", "hover:bg-accent-hover hover:text-destructive", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: _jsx(RemoveIcon, { className: "size-3.5" }) })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: entry.isSecret, onChange: (e) => updateEntry(index, { isSecret: e.target.checked }), className: "size-3.5 rounded border-input" }), "Secret"] }), _jsxs("label", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: entry.optional, onChange: (e) => updateEntry(index, { optional: e.target.checked }), className: "size-3.5 rounded border-input" }), "Optional"] })] })] }, index))), _jsxs("button", { type: "button", onClick: addEntry, className: cn("inline-flex w-fit items-center gap-1.5 rounded-md border border-dashed border-input px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors", "hover:border-border hover:text-foreground hover:bg-accent-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: [_jsx(PlusIcon, { className: "size-3" }), "Add variable"] })] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function ChevronIcon({ className }) {
    return (_jsx("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: "m4 6 4 4 4-4" }) }));
}
function PlusIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M8 3v10M3 8h10" }) }));
}
function RemoveIcon({ className }) {
    return (_jsx("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: "M4 4l8 8M12 4l-8 8" }) }));
}
//# sourceMappingURL=CapabilitiesStep.js.map