"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from "react";
import { cn } from "@stigmer/theme";
/**
 * Wizard step 2: Environment variables and auth configuration.
 *
 * Both sections are optional. Env vars start expanded if any exist;
 * auth starts collapsed unless already enabled. No validation gate —
 * the user can proceed with zero configuration.
 */
export function EnvironmentAuthStep({ data, updateData, }) {
    const [envExpanded, setEnvExpanded] = useState(data.env.length > 0);
    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Environment & Auth" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Declare environment variables and configure authentication. Both sections are optional." })] }), _jsx(CollapsibleSection, { id: "env", title: "Environment Variables", subtitle: "Secrets and configuration the server requires at runtime", count: data.env.length, expanded: envExpanded, onToggle: () => setEnvExpanded((v) => !v), children: _jsx(EnvVarEditor, { entries: data.env, onChange: (env) => updateData({ env }) }) }), _jsx(CollapsibleSection, { id: "auth", title: "OAuth Authentication", subtitle: "Configure OAuth for servers that require user authorization", expanded: data.authEnabled, onToggle: () => updateData({ authEnabled: !data.authEnabled }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_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-auth-app-org", className: "text-sm font-medium text-foreground", children: "OAuth App Organization" }), _jsx("input", { id: "stgm-wizard-mcp-auth-app-org", type: "text", value: data.authOAuthAppOrg, onChange: (e) => updateData({ authOAuthAppOrg: e.target.value }), placeholder: "e.g. stigmer", 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-auth-app-slug", className: "text-sm font-medium text-foreground", children: "OAuth App Slug" }), _jsx("input", { id: "stgm-wizard-mcp-auth-app-slug", type: "text", value: data.authOAuthAppSlug, onChange: (e) => updateData({ authOAuthAppSlug: e.target.value }), placeholder: "e.g. github-oauth", 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-auth-target-var", className: "text-sm font-medium text-foreground", children: "Target Environment Variable" }), _jsx("input", { id: "stgm-wizard-mcp-auth-target-var", type: "text", value: data.authTargetEnvVar, onChange: (e) => updateData({ authTargetEnvVar: e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "") }), placeholder: "e.g. GITHUB_TOKEN", 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: "The env var that receives the OAuth access token." })] }), _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-auth-lifetime", className: "text-sm font-medium text-foreground", children: "Token Lifetime Hint" }), _jsx("input", { id: "stgm-wizard-mcp-auth-lifetime", type: "text", value: data.authTokenLifetimeHint, onChange: (e) => updateData({ authTokenLifetimeHint: e.target.value }), placeholder: "e.g. 1h, 8h, never", 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-auth-scopes", className: "text-sm font-medium text-foreground", children: "Scope Hints" }), _jsx("input", { id: "stgm-wizard-mcp-auth-scopes", type: "text", value: data.authScopeHints, onChange: (e) => updateData({ authScopeHints: e.target.value }), placeholder: "e.g. repo, read:org", 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") }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Comma-separated OAuth scopes." })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "stgm-wizard-mcp-auth-discovery", className: "text-sm font-medium text-foreground", children: "Discovery URL" }), _jsx("input", { id: "stgm-wizard-mcp-auth-discovery", type: "url", value: data.authDiscoveryUrl, onChange: (e) => updateData({ authDiscoveryUrl: e.target.value }), placeholder: "https://provider.com/.well-known/openid-configuration", 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") })] })] }) })] }));
}
// ---------------------------------------------------------------------------
// 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, "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 != null && 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
// ---------------------------------------------------------------------------
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=EnvironmentAuthStep.js.map