"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { cn } from "@stigmer/theme";
import { generateSlug } from "../../internal/slug";
const SLUG_PATTERN = /^[a-z0-9]+(-[a-z0-9]+)*$/;
/**
 * Wizard step 1: MCP server identity and transport configuration.
 *
 * Collects: name (required), slug (auto-derived), description,
 * icon URL, visibility, transport type (HTTP vs Stdio), and the
 * transport-specific fields.
 *
 * Transport type uses a radio group (mutually exclusive modes).
 * Conditional fields render based on the selected transport.
 */
export function IdentityTransportStep({ data, updateData, validationError, }) {
    const handleNameChange = useCallback((value) => {
        if (!data.slugTouched) {
            updateData({ name: value, slug: generateSlug(value) });
        }
        else {
            updateData({ name: value });
        }
    }, [data.slugTouched, updateData]);
    const handleSlugChange = useCallback((value) => {
        updateData({ slug: value, slugTouched: true });
    }, [updateData]);
    const slugError = data.slug.length > 0 && !SLUG_PATTERN.test(data.slug)
        ? "Slug must be lowercase letters, numbers, and hyphens only"
        : null;
    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Identity & Transport" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Define the MCP server and how to connect to it." })] }), validationError && (_jsx("p", { className: "text-sm text-destructive", role: "alert", children: validationError })), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("label", { htmlFor: "stgm-wizard-mcp-name", className: "text-sm font-medium text-foreground", children: ["Name ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "stgm-wizard-mcp-name", type: "text", value: data.name, onChange: (e) => handleNameChange(e.target.value), placeholder: "e.g. GitHub", autoFocus: true, className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-mcp-slug", className: "text-sm font-medium text-foreground", children: "Slug" }), _jsx("input", { id: "stgm-wizard-mcp-slug", type: "text", value: data.slug, onChange: (e) => handleSlugChange(e.target.value), placeholder: "auto-generated", className: cn("w-full rounded-md border px-3 py-2 font-mono text-sm text-foreground", slugError
                                    ? "border-destructive bg-input-bg"
                                    : "border-input bg-input-bg", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") }), slugError && (_jsx("p", { className: "text-xs text-destructive", children: slugError })), !slugError && data.slug && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Referenced as ", _jsx("code", { className: "font-mono", children: data.slug })] }))] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-mcp-description", className: "text-sm font-medium text-foreground", children: "Description" }), _jsx("input", { id: "stgm-wizard-mcp-description", type: "text", value: data.description, onChange: (e) => updateData({ description: e.target.value }), placeholder: "A brief description of this MCP server", maxLength: 200, className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-mcp-icon", className: "text-sm font-medium text-foreground", children: "Icon URL" }), _jsx("input", { id: "stgm-wizard-mcp-icon", type: "url", value: data.iconUrl, onChange: (e) => updateData({ iconUrl: e.target.value }), placeholder: "https://example.com/icon.png", className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("fieldset", { className: "space-y-1.5", children: [_jsx("legend", { className: "text-sm font-medium text-foreground", children: "Visibility" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(RadioOption, { name: "stgm-wizard-mcp-visibility", value: "private", label: "Private", checked: data.visibility === "private", onChange: () => updateData({ visibility: "private" }) }), _jsx(RadioOption, { name: "stgm-wizard-mcp-visibility", value: "public", label: "Public", checked: data.visibility === "public", onChange: () => updateData({ visibility: "public" }) })] })] })] }), _jsxs("fieldset", { className: "space-y-3", children: [_jsxs("legend", { className: "text-sm font-medium text-foreground", children: ["Transport ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(RadioOption, { name: "stgm-wizard-mcp-transport", value: "http", label: "HTTP (Streamable HTTP / SSE)", checked: data.transportType === "http", onChange: () => updateData({ transportType: "http" }) }), _jsx(RadioOption, { name: "stgm-wizard-mcp-transport", value: "stdio", label: "Stdio (local process)", checked: data.transportType === "stdio", onChange: () => updateData({ transportType: "stdio" }) })] }), data.transportType === "http" && (_jsxs("div", { className: "flex flex-col gap-4 rounded-lg border border-border p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("label", { htmlFor: "stgm-wizard-mcp-http-url", className: "text-sm font-medium text-foreground", children: ["URL ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "stgm-wizard-mcp-http-url", type: "url", value: data.httpUrl, onChange: (e) => updateData({ httpUrl: e.target.value }), placeholder: "https://mcp.example.com/sse", className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 font-mono text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-medium text-foreground", children: "Headers" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Custom HTTP headers sent with every request. Values may use", " ", _jsx("code", { className: "font-mono text-[11px]", children: "${VAR}" }), " ", "placeholders."] }), _jsx(KeyValueEditor, { entries: data.httpHeaders, onChange: (httpHeaders) => updateData({ httpHeaders }), keyPlaceholder: "Header-Name", valuePlaceholder: "value" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-mcp-http-timeout", className: "text-sm font-medium text-foreground", children: "Timeout (seconds)" }), _jsx("input", { id: "stgm-wizard-mcp-http-timeout", type: "number", min: 0, step: 1, value: data.httpTimeoutSeconds || "", onChange: (e) => updateData({
                                            httpTimeoutSeconds: e.target.value
                                                ? parseInt(e.target.value, 10)
                                                : 0,
                                        }), placeholder: "Default", className: cn("w-32 rounded-md border border-input bg-input-bg px-3 py-2 text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] })] })), data.transportType === "stdio" && (_jsxs("div", { className: "flex flex-col gap-4 rounded-lg border border-border p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("label", { htmlFor: "stgm-wizard-mcp-stdio-command", className: "text-sm font-medium text-foreground", children: ["Command ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { id: "stgm-wizard-mcp-stdio-command", type: "text", value: data.stdioCommand, onChange: (e) => updateData({ stdioCommand: e.target.value }), placeholder: "e.g. npx, python, node", className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 font-mono text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-mcp-stdio-args", className: "text-sm font-medium text-foreground", children: "Arguments" }), _jsx("input", { id: "stgm-wizard-mcp-stdio-args", type: "text", value: data.stdioArgs, onChange: (e) => updateData({ stdioArgs: e.target.value }), placeholder: "e.g. -y @modelcontextprotocol/server-github", className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 font-mono text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Space-separated arguments passed to the command." })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-mcp-stdio-workdir", className: "text-sm font-medium text-foreground", children: "Working Directory" }), _jsx("input", { id: "stgm-wizard-mcp-stdio-workdir", type: "text", value: data.stdioWorkingDir, onChange: (e) => updateData({ stdioWorkingDir: e.target.value }), placeholder: "/path/to/working/directory", className: cn("w-full rounded-md border border-input bg-input-bg px-3 py-2 font-mono text-sm text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring") })] })] }))] })] }));
}
// ---------------------------------------------------------------------------
// Radio option (reusable within this step)
// ---------------------------------------------------------------------------
function RadioOption({ name, value, label, checked, onChange, }) {
    return (_jsxs("label", { className: cn("inline-flex cursor-pointer items-center rounded-md border px-3 py-1.5 text-sm transition-colors", checked
            ? "border-primary bg-primary-subtle text-primary font-medium"
            : "border-input bg-input-bg text-muted-foreground hover:border-border hover:text-foreground"), children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: onChange, className: "sr-only" }), label] }));
}
// ---------------------------------------------------------------------------
// Key-value editor (for HTTP headers)
// ---------------------------------------------------------------------------
function KeyValueEditor({ entries, onChange, keyPlaceholder, valuePlaceholder, }) {
    const addEntry = () => {
        onChange([...entries, { key: "", value: "" }]);
    };
    const updateEntry = (index, partial) => {
        const updated = entries.map((entry, i) => i === index ? { ...entry, ...partial } : entry);
        onChange(updated);
    };
    const removeEntry = (index) => {
        onChange(entries.filter((_, i) => i !== index));
    };
    return (_jsxs("div", { className: "flex flex-col gap-2", children: [entries.map((entry, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: entry.key, onChange: (e) => updateEntry(index, { key: e.target.value }), placeholder: keyPlaceholder, "aria-label": `Header key ${index + 1}`, className: cn("flex-1 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.value, onChange: (e) => updateEntry(index, { value: e.target.value }), placeholder: valuePlaceholder, "aria-label": `Header value ${index + 1}`, className: cn("flex-1 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("button", { type: "button", onClick: () => removeEntry(index), "aria-label": `Remove header ${entry.key || index + 1}`, className: cn("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" }) })] }, 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 header"] })] }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
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=IdentityTransportStep.js.map