"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelDeploymentForm = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
/**
 * ModelDeploymentForm Component
 *
 * Form for deploying LLM models with integrated standards validation
 */
const ModelDeploymentForm = ({ model, onSubmit, onCancel, loading = false, error }) => {
    // Form state
    const [formData, setFormData] = (0, react_1.useState)({
        model_id: model.id,
        environment: model.deployment_config?.environment || 'development',
        strategy: model.deployment_config?.strategy || 'rolling',
        version: model.version,
        config: {
            ...model.deployment_config,
            replicas: model.deployment_config?.replicas || 1,
            auto_scaling: model.deployment_config?.auto_scaling || false
        },
        auto_rollback: true,
        rollback_threshold: 0.8
    });
    // Validation state
    const [validationError, setValidationError] = (0, react_1.useState)(null);
    // Environment options
    const environmentOptions = [
        'development',
        'staging',
        'production'
    ];
    // Deployment strategy options
    const strategyOptions = [
        'rolling',
        'blue_green',
        'canary',
        'recreate'
    ];
    // Strategy descriptions
    const strategyDescriptions = {
        rolling: 'Gradually replace instances with new versions',
        blue_green: 'Deploy new version alongside old and switch traffic',
        canary: 'Deploy to a subset of instances first to test',
        recreate: 'Stop all instances and then start new versions (downtime)'
    };
    // Handle form input changes
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        // Handle nested properties
        if (name.includes('.')) {
            const [parent, child] = name.split('.');
            if (parent === 'config') {
                setFormData(prev => ({
                    ...prev,
                    config: {
                        ...prev.config,
                        [child]: value
                    }
                }));
            }
        }
        else {
            setFormData(prev => ({ ...prev, [name]: value }));
        }
    };
    // Handle numeric input changes
    const handleNumericChange = (e) => {
        const { name, value } = e.target;
        const numericValue = parseFloat(value);
        if (name.includes('.')) {
            const [parent, child] = name.split('.');
            if (parent === 'config') {
                setFormData(prev => ({
                    ...prev,
                    config: {
                        ...prev.config,
                        [child]: isNaN(numericValue) ? '' : numericValue
                    }
                }));
            }
            else {
                setFormData(prev => ({
                    ...prev,
                    [parent]: {
                        ...prev[parent],
                        [child]: isNaN(numericValue) ? '' : numericValue
                    }
                }));
            }
        }
        else {
            setFormData(prev => ({
                ...prev,
                [name]: isNaN(numericValue) ? '' : numericValue
            }));
        }
    };
    // Handle checkbox changes
    const handleCheckboxChange = (e) => {
        const { name, checked } = e.target;
        if (name.includes('.')) {
            const [parent, child] = name.split('.');
            if (parent === 'config') {
                setFormData(prev => ({
                    ...prev,
                    config: {
                        ...prev.config,
                        [child]: checked
                    }
                }));
            }
        }
        else {
            setFormData(prev => ({ ...prev, [name]: checked }));
        }
    };
    // Handle form submission
    const handleSubmit = (e) => {
        e.preventDefault();
        // Basic validation
        if (!formData.environment) {
            setValidationError('Environment is required');
            return;
        }
        // Clear validation errors
        setValidationError(null);
        // Submit form data
        onSubmit(formData);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: "model-deployment-form", children: [(error || validationError) && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4", role: "alert", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: "Deployment Error" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: error || validationError })] })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 bg-gray-50 p-4 rounded-md", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-2", children: "Model Information" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: "Name" }), (0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: model.name })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: "Version" }), (0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: model.version })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: "Provider" }), (0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: model.provider })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: "Status" }), (0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: model.status })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-4", children: "Deployment Configuration" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "environment", children: ["Environment ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-600", children: "*" })] }), (0, jsx_runtime_1.jsxs)("select", { id: "environment", name: "environment", className: "w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500", value: formData.environment, onChange: handleInputChange, required: true, disabled: loading, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select environment" }), environmentOptions.map((env) => ((0, jsx_runtime_1.jsx)("option", { value: env, children: env.charAt(0).toUpperCase() + env.slice(1) }, env)))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "strategy", children: "Deployment Strategy" }), (0, jsx_runtime_1.jsxs)("select", { id: "strategy", name: "strategy", className: "w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500", value: formData.strategy, onChange: handleInputChange, disabled: loading, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select strategy" }), strategyOptions.map((strategy) => ((0, jsx_runtime_1.jsx)("option", { value: strategy, children: strategy.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') }, strategy)))] }), formData.strategy && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: strategyDescriptions[formData.strategy] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "config.replicas", children: "Replicas" }), (0, jsx_runtime_1.jsx)("input", { type: "number", id: "config.replicas", name: "config.replicas", className: "w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500", value: formData.config?.replicas ?? '', onChange: handleNumericChange, placeholder: "1", min: "1", disabled: loading }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Number of deployment instances" })] }), (0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center text-gray-700 font-medium", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "config.auto_scaling", name: "config.auto_scaling", className: "h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 mr-2", checked: formData.config?.auto_scaling ?? false, onChange: handleCheckboxChange, disabled: loading }), "Enable Auto Scaling"] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-4", children: "Rollback Options" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("label", { className: "flex items-center text-gray-700 font-medium", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "auto_rollback", name: "auto_rollback", className: "h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 mr-2", checked: formData.auto_rollback, onChange: handleCheckboxChange, disabled: loading }), "Enable Automatic Rollback"] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Automatically roll back if deployment exceeds error threshold" })] }), formData.auto_rollback && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "rollback_threshold", children: "Rollback Threshold" }), (0, jsx_runtime_1.jsx)("input", { type: "number", id: "rollback_threshold", name: "rollback_threshold", className: "w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500", value: formData.rollback_threshold ?? '', onChange: handleNumericChange, placeholder: "0.8", min: "0", max: "1", step: "0.1", disabled: loading }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Error rate threshold for automatic rollback (0-1)" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end space-x-3 mt-6", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50", onClick: onCancel, disabled: loading, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { type: "submit", className: `px-4 py-2 rounded-md text-white font-medium ${loading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`, disabled: loading, children: loading ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Deploying..."] })) : ('Deploy Model') })] })] })] }));
};
exports.ModelDeploymentForm = ModelDeploymentForm;
//# sourceMappingURL=ModelDeploymentForm.js.map