import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState, useEffect } from "react";
import { Dialog, DialogContent } from "../../../components/ui/dialog";
import { Button } from "../../../components/ui/button";
import { Select } from "../../../components/ui/select";
import { Input } from "../../../components/ui/input";
import { StyledDialogTitle } from "../../../components/ui/styled-dialog-title";
import { setupWizardService, } from "../../services/setupWizardService";
import { RefreshCw, Plus } from "lucide-react";
export function AddModelDialog({ open, onOpenChange, onSuccess, providers, installedModels, }) {
    const [error, setError] = useState(null);
    const [creating, setCreating] = useState(false);
    const [createFormData, setCreateFormData] = useState({
        templateType: "Ai Chat Model",
        modelName: "",
        itemName: "",
        providerId: providers[0]?.id || "",
        inputCostPerMillionTokens: "",
        outputCostPerMillionTokens: "",
        cachedInputCostPerMillionTokens: "",
    });
    // Reset state when dialog opens
    useEffect(() => {
        if (open) {
            setError(null);
            setCreateFormData({
                templateType: "Ai Chat Model",
                modelName: "",
                itemName: "",
                providerId: providers[0]?.id || "",
                inputCostPerMillionTokens: "",
                outputCostPerMillionTokens: "",
                cachedInputCostPerMillionTokens: "",
            });
        }
    }, [open, providers]);
    const handleCreateModel = useCallback(async () => {
        if (!createFormData.modelName || !createFormData.providerId) {
            setError("Model name and provider are required");
            return;
        }
        try {
            setCreating(true);
            setError(null);
            // Build pricing from form data
            const inputCost = parseFloat(createFormData.inputCostPerMillionTokens);
            const outputCost = parseFloat(createFormData.outputCostPerMillionTokens);
            const cachedInputCost = parseFloat(createFormData.cachedInputCostPerMillionTokens);
            const hasPricing = !isNaN(inputCost) || !isNaN(outputCost) || !isNaN(cachedInputCost);
            const pricing = hasPricing
                ? {
                    inputCostPerMillionTokens: !isNaN(inputCost)
                        ? inputCost
                        : undefined,
                    outputCostPerMillionTokens: !isNaN(outputCost)
                        ? outputCost
                        : undefined,
                    cachedInputCostPerMillionTokens: !isNaN(cachedInputCost)
                        ? cachedInputCost
                        : undefined,
                }
                : undefined;
            await setupWizardService.createModel({
                templateType: createFormData.templateType,
                modelName: createFormData.modelName,
                itemName: createFormData.itemName.trim() || undefined,
                providerId: createFormData.providerId,
                pricing,
            });
            onSuccess();
            onOpenChange(false);
        }
        catch (e) {
            setError(e?.message || "Failed to create model");
        }
        finally {
            setCreating(false);
        }
    }, [createFormData, onSuccess, onOpenChange]);
    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-xl", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1 }), title: "Add Model" }), _jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: "Provider" }), _jsx(Select, { value: createFormData.providerId, onValueChange: (value) => {
                                                setCreateFormData({
                                                    ...createFormData,
                                                    providerId: value,
                                                });
                                            }, options: providers.map((provider) => ({
                                                value: provider.id,
                                                label: `${provider.name} (${provider.type})`,
                                            })), placeholder: "Select provider" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: "Model Name" }), _jsx(Input, { value: createFormData.modelName, onChange: (e) => {
                                                setCreateFormData({
                                                    ...createFormData,
                                                    modelName: e.target.value,
                                                });
                                            }, placeholder: "e.g., gpt-4o, claude-3.5-sonnet" }), _jsx("p", { className: "text-xs text-gray-500", children: "This is the provider model ID sent to the API." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: "Internal Name" }), _jsx(Input, { value: createFormData.itemName, onChange: (e) => {
                                                setCreateFormData({
                                                    ...createFormData,
                                                    itemName: e.target.value,
                                                });
                                            }, placeholder: "Optional Sitecore item name" }), _jsx("p", { className: "text-xs text-gray-500", children: "Used as the internal Sitecore item name. Defaults to Model Name." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: "Model Type" }), _jsx(Select, { value: createFormData.templateType, onValueChange: (value) => {
                                                const templateType = value;
                                                setCreateFormData({
                                                    ...createFormData,
                                                    templateType: templateType,
                                                });
                                            }, options: [
                                                { value: "Ai Chat Model", label: "Chat Model" },
                                                { value: "Ai Embeddings Model", label: "Embeddings Model" },
                                                { value: "Ai Image Model", label: "Image Model" },
                                            ], placeholder: "Select type" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: "Pricing (USD per million tokens)" }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs text-gray-500", children: "Input Cost" }), _jsx(Input, { type: "number", step: "0.01", min: "0", value: createFormData.inputCostPerMillionTokens, onChange: (e) => {
                                                                setCreateFormData({
                                                                    ...createFormData,
                                                                    inputCostPerMillionTokens: e.target.value,
                                                                });
                                                            }, placeholder: "e.g., 2.50" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs text-gray-500", children: "Output Cost" }), _jsx(Input, { type: "number", step: "0.01", min: "0", value: createFormData.outputCostPerMillionTokens, onChange: (e) => {
                                                                setCreateFormData({
                                                                    ...createFormData,
                                                                    outputCostPerMillionTokens: e.target.value,
                                                                });
                                                            }, placeholder: "e.g., 10.00" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs text-gray-500", children: "Cached Input" }), _jsx(Input, { type: "number", step: "0.01", min: "0", value: createFormData.cachedInputCostPerMillionTokens, onChange: (e) => {
                                                                setCreateFormData({
                                                                    ...createFormData,
                                                                    cachedInputCostPerMillionTokens: e.target.value,
                                                                });
                                                            }, placeholder: "e.g., 0.25" })] })] })] })] }), error && (_jsx("div", { className: "rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700", children: error })), _jsxs("div", { className: "flex justify-end gap-3 pt-2", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { onClick: handleCreateModel, disabled: creating ||
                                        !createFormData.modelName ||
                                        !createFormData.providerId, children: [creating ? (_jsx(RefreshCw, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Plus, { className: "mr-2 h-4 w-4" })), "Add Model"] })] })] })] }) }));
}
export default AddModelDialog;
//# sourceMappingURL=AddModelDialog.js.map