import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { AlertCircle, Loader2, Plus, Server } from "lucide-react";
import { Button } from "../../../components/ui/button";
import { Dialog, DialogContent, DialogFooter, } from "../../../components/ui/dialog";
import { Input } from "../../../components/ui/input";
import { Select } from "../../../components/ui/select";
import { StyledDialogTitle } from "../../../components/ui/styled-dialog-title";
import { setupWizardService, } from "../../../setup/services/setupWizardService";
export function CreateMcpServerDialog({ open, onOpenChange, onCreated, }) {
    const [name, setName] = useState("");
    const [type, setType] = useState("SSE");
    const [url, setUrl] = useState("");
    const [connectionStringName, setConnectionStringName] = useState("");
    const [authToken, setAuthToken] = useState("");
    const [error, setError] = useState(null);
    const [creating, setCreating] = useState(false);
    useEffect(() => {
        if (!open)
            return;
        setName("");
        setType("SSE");
        setUrl("");
        setConnectionStringName("");
        setAuthToken("");
        setError(null);
        setCreating(false);
    }, [open]);
    const handleCreate = useCallback(async () => {
        const trimmedName = name.trim();
        const trimmedUrl = url.trim();
        if (!trimmedName) {
            setError("Server name is required");
            return;
        }
        if (!trimmedUrl) {
            setError("Server URL is required");
            return;
        }
        try {
            setCreating(true);
            setError(null);
            const serverId = await setupWizardService.createMcpServer({
                name: trimmedName,
                type,
                url: trimmedUrl,
                connectionStringName: connectionStringName.trim() || undefined,
                authToken: authToken.trim() || undefined,
            });
            await onCreated(serverId, trimmedName);
            onOpenChange(false);
        }
        catch (e) {
            setError(e instanceof Error ? e.message : "Failed to create MCP server");
        }
        finally {
            setCreating(false);
        }
    }, [
        authToken,
        connectionStringName,
        name,
        onCreated,
        onOpenChange,
        type,
        url,
    ]);
    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-lg gap-0 p-0", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1 }), title: "New MCP Server", subtitle: "Create an SSE MCP server configuration for tool discovery." }), _jsxs("div", { className: "space-y-4 px-8 pt-6 pb-2", children: [_jsx("div", { className: "border-feedback-blue bg-feedback-blue-light text-feedback-blue rounded border px-3 py-2 text-xs", children: "Prefer a connection string key for secrets. A direct auth token can be saved here when a connection string is not available." }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "create-mcp-server-name", className: "text-neutral-grey-100 block text-sm font-medium", children: "Server name" }), _jsx(Input, { id: "create-mcp-server-name", value: name, onChange: (e) => setName(e.target.value), autoFocus: true })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "create-mcp-server-type", className: "text-neutral-grey-100 block text-sm font-medium", children: "Type" }), _jsx(Select, { id: "create-mcp-server-type", value: type, onValueChange: (v) => setType(v), options: [
                                                { value: "SSE", label: "SSE" },
                                                { value: "STDIO", label: "STDIO", disabled: true },
                                            ], className: "w-full bg-white" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "create-mcp-server-url", className: "text-neutral-grey-100 block text-sm font-medium", children: "URL" }), _jsx(Input, { id: "create-mcp-server-url", value: url, onChange: (e) => setUrl(e.target.value), placeholder: "https://example.com/sse", className: "h-[27px]", onKeyDown: (e) => {
                                                if (e.key === "Enter" && !creating) {
                                                    e.preventDefault();
                                                    void handleCreate();
                                                }
                                            } })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "create-mcp-server-connection-string", className: "text-neutral-grey-100 block text-sm font-medium", children: "Connection string name" }), _jsx(Input, { id: "create-mcp-server-connection-string", value: connectionStringName, onChange: (e) => setConnectionStringName(e.target.value), placeholder: "parhelia.mcp.my-server" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "create-mcp-server-auth-token", className: "text-neutral-grey-100 block text-sm font-medium", children: "Auth token" }), _jsx(Input, { id: "create-mcp-server-auth-token", type: "password", value: authToken, onChange: (e) => setAuthToken(e.target.value), placeholder: "Optional" })] }), error ? (_jsxs("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red flex items-start gap-2 rounded border p-2 text-xs", children: [_jsx(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0", strokeWidth: 1 }), error] })) : null] }), _jsxs(DialogFooter, { className: "border-border-default gap-2 border-t pt-5 sm:gap-3", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: creating, children: "Cancel" }), _jsx(Button, { onClick: () => void handleCreate(), disabled: creating || !name.trim() || !url.trim(), children: creating ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 }), "Creating..."] })) : (_jsxs(_Fragment, { children: [_jsx(Server, { className: "h-3.5 w-3.5", strokeWidth: 1 }), "Create"] })) })] })] }) }));
}
export default CreateMcpServerDialog;
//# sourceMappingURL=CreateMcpServerDialog.js.map