import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from "react";
import { Dialog, DialogContent, DialogFooter } from "../../../components/ui/dialog";
import { Button } from "../../../components/ui/button";
import { Input } from "../../../components/ui/input";
import { StyledDialogTitle } from "../../../components/ui/styled-dialog-title";
import { setupWizardService, } from "../../../setup/services/setupWizardService";
import { AlertCircle, FileCode2, Loader2, Plus } from "lucide-react";
export function CreateJavaScriptToolDialog({ open, onOpenChange, onCreated, }) {
    const [name, setName] = useState("");
    const [error, setError] = useState(null);
    const [creating, setCreating] = useState(false);
    useEffect(() => {
        if (!open)
            return;
        setName("");
        setError(null);
        setCreating(false);
    }, [open]);
    const handleCreate = useCallback(async () => {
        const trimmedName = name.trim();
        if (!trimmedName) {
            setError("Tool name is required");
            return;
        }
        try {
            setCreating(true);
            setError(null);
            const request = { name: trimmedName };
            const toolId = await setupWizardService.createJavaScriptTool(request);
            await onCreated(toolId);
            onOpenChange(false);
        }
        catch (e) {
            setError(e instanceof Error ? e.message : "Failed to create JavaScript tool");
        }
        finally {
            setCreating(false);
        }
    }, [name, onCreated, onOpenChange]);
    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md gap-0 p-0", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1 }), title: "Add JavaScript Tool", subtitle: "Create a new custom JavaScript tool under the settings Scripts folder." }), _jsxs("div", { className: "space-y-4 px-8 pb-2 pt-6", children: [_jsx("div", { className: "rounded border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-900", children: "A starter schema and script will be created automatically. You can refine them in the editor after creation." }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "create-javascript-tool-name", className: "block text-sm font-medium text-gray-700", children: "Name" }), _jsx(Input, { id: "create-javascript-tool-name", value: name, onChange: (e) => setName(e.target.value), autoFocus: true, onKeyDown: (e) => {
                                        if (e.key === "Enter" && !creating) {
                                            e.preventDefault();
                                            void handleCreate();
                                        }
                                    } })] }), error ? (_jsxs("div", { className: "flex items-start gap-2 rounded border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: [_jsx(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), error] })) : null] }), _jsxs(DialogFooter, { className: "gap-2 border-t border-gray-100 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(), children: creating ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1.5 }), "Creating..."] })) : (_jsxs(_Fragment, { children: [_jsx(FileCode2, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), "Create"] })) })] })] }) }));
}
export default CreateJavaScriptToolDialog;
//# sourceMappingURL=CreateJavaScriptToolDialog.js.map