"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelForm = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ModelStandardsValidator_js_1 = require("./ModelStandardsValidator.js");
const ModelStandardsUtility_js_1 = require("./ModelStandardsUtility.js");
/**
 * ModelForm Component
 *
 * Form for creating and editing LLM models with integrated standards validation
 */
const ModelForm = ({ model, onSubmit, onCancel, loading = false, error }) => {
    // Form state
    const [formData, setFormData] = (0, react_1.useState)(() => {
        if (model) {
            // Edit mode - initialize with existing model data
            return {
                id: model.id,
                name: model.name,
                provider: model.provider,
                version: model.version,
                description: model.description || '',
                capabilities: model.capabilities || [],
                parameters: model.parameters || {},
                deployment_config: model.deployment_config || {},
                tags: model.tags || {}
            };
        }
        else {
            // Create mode - initialize with defaults
            return {
                name: '',
                provider: 'openai',
                version: '1.0.0',
                description: '',
                capabilities: [],
                parameters: {
                    temperature: 0.7,
                    max_tokens: 1024
                },
                deployment_config: {
                    environment: 'development',
                    strategy: 'rolling',
                    replicas: 1,
                    auto_scaling: false
                },
                tags: {}
            };
        }
    });
    // Validation state
    const [isValid, setIsValid] = (0, react_1.useState)(true);
    const [validationError, setValidationError] = (0, react_1.useState)(null);
    const [standardsValidationResults, setStandardsValidationResults] = (0, react_1.useState)({
        valid: true,
        errors: [],
        warnings: []
    });
    const [showAdvanced, setShowAdvanced] = (0, react_1.useState)(false);
    // Capability options
    const capabilityOptions = [
        'text-generation',
        'summarization',
        'translation',
        'question-answering',
        'classification',
        'embedding',
        'code-generation',
        'chat',
        'function-calling',
        'vision'
    ];
    // Provider options
    const providerOptions = [
        'openai',
        'anthropic',
        'meta',
        'mistral',
        'google',
        'local',
        'custom'
    ];
    // Environment options
    const environmentOptions = [
        'development',
        'staging',
        'production'
    ];
    // Deployment strategy options
    const strategyOptions = [
        'rolling',
        'blue_green',
        'canary',
        'recreate'
    ];
    // Handle form input changes
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        // Handle nested properties (e.g., parameters.temperature)
        if (name.includes('.')) {
            const [parent, child] = name.split('.');
            setFormData(prev => ({
                ...prev,
                [parent]: {
                    ...prev[parent],
                    [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('.');
            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('.');
            setFormData(prev => ({
                ...prev,
                [parent]: {
                    ...prev[parent],
                    [child]: checked
                }
            }));
        }
        else {
            setFormData(prev => ({ ...prev, [name]: checked }));
        }
    };
    // Handle array input changes (capabilities)
    const handleCapabilityChange = (e) => {
        const { value, checked } = e.target;
        setFormData(prev => {
            const capabilities = prev.capabilities || [];
            if (checked && !capabilities.includes(value)) {
                return { ...prev, capabilities: [...capabilities, value] };
            }
            else if (!checked && capabilities.includes(value)) {
                return {
                    ...prev,
                    capabilities: capabilities.filter(cap => cap !== value)
                };
            }
            return prev;
        });
    };
    // Handle tag changes
    const handleTagChange = (e) => {
        const { name, value } = e.target;
        const tagKey = name.replace('tag-', '');
        setFormData(prev => ({
            ...prev,
            tags: {
                ...prev.tags,
                [tagKey]: value
            }
        }));
    };
    // Handle form submission
    const handleSubmit = async (e) => {
        e.preventDefault();
        // Basic validation
        if (!formData.name.trim()) {
            setValidationError('Model name is required');
            return;
        }
        if (!formData.provider) {
            setValidationError('Provider is required');
            return;
        }
        if (!formData.version) {
            setValidationError('Version is required');
            return;
        }
        // Additional validation
        if (standardsValidationResults && !standardsValidationResults.valid) {
            // Ask user if they want to auto-fix issues
            if (window.confirm('There are validation errors in the model configuration. Would you like to automatically fix these issues?')) {
                try {
                    // Apply standards to fix issues
                    const fixedModel = await (0, ModelStandardsUtility_js_1.applyModelStandards)(formData);
                    setFormData(fixedModel);
                    // We'll proceed with submission only if there are no errors after fixing
                    // The component will re-render with the fixed data and re-validate
                    return;
                }
                catch (error) {
                    console.error('Error applying model standards:', error);
                    setValidationError(`Failed to auto-fix model: ${error instanceof Error ? error.message : 'Unknown error'}`);
                    return;
                }
            }
            else {
                setValidationError('Please fix standards validation errors before submitting');
                return;
            }
        }
        // Clear validation errors
        setValidationError(null);
        // Submit form data
        onSubmit(formData);
    };
    // Handle standards validation results
    const handleStandardsValidation = (isValid, results) => {
        setStandardsValidationResults(results);
        setIsValid(isValid);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: "model-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: "Form 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", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-4", children: "Basic Information" }), (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: "name", children: ["Model Name ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-600", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", id: "name", name: "name", 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.name, onChange: handleInputChange, placeholder: "Enter model name", required: true, disabled: loading })] }), (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: "provider", children: ["Provider ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-600", children: "*" })] }), (0, jsx_runtime_1.jsxs)("select", { id: "provider", name: "provider", 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.provider, onChange: handleInputChange, required: true, disabled: loading, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select a provider" }), providerOptions.map((provider) => ((0, jsx_runtime_1.jsx)("option", { value: provider, children: provider.charAt(0).toUpperCase() + provider.slice(1) }, provider)))] })] }), (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: "version", children: ["Version ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-600", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", id: "version", name: "version", 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.version, onChange: handleInputChange, placeholder: "1.0.0", required: true, pattern: "^\\d+\\.\\d+\\.\\d+(?:-[a-zA-Z0-9\\-\\.]+)?(?:\\+[a-zA-Z0-9\\-\\.]+)?$", title: "Version must follow semantic versioning (e.g., 1.0.0, 1.2.3-beta.1)", disabled: loading }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Use semantic versioning (e.g., 1.0.0, 2.1.0-beta)" })] }), (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: "description", children: "Description" }), (0, jsx_runtime_1.jsx)("textarea", { id: "description", name: "description", className: "w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 h-24", value: formData.description, onChange: handleInputChange, placeholder: "Enter model description", maxLength: 500, disabled: loading })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-4", children: "Capabilities" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-3", children: capabilityOptions.map((capability) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: `capability-${capability}`, name: `capability-${capability}`, value: capability, checked: (formData.capabilities || []).includes(capability), onChange: handleCapabilityChange, disabled: loading, className: "h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: `capability-${capability}`, className: "ml-2 text-sm text-gray-700", children: capability.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') })] }, capability))) })] }), (0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "text-blue-600 hover:text-blue-800 font-medium flex items-center", onClick: () => setShowAdvanced(!showAdvanced), children: [(0, jsx_runtime_1.jsx)("svg", { className: `h-4 w-4 mr-1 transition-transform ${showAdvanced ? 'rotate-90' : ''}`, fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }) }), showAdvanced ? 'Hide Advanced Settings' : 'Show Advanced Settings'] }) }), showAdvanced && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium mb-4", children: "Model Parameters" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "parameters.temperature", children: "Temperature" }), (0, jsx_runtime_1.jsx)("input", { type: "number", id: "parameters.temperature", name: "parameters.temperature", 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.parameters?.temperature ?? '', onChange: handleNumericChange, placeholder: "0.7", min: "0", max: "1", step: "0.1", disabled: loading }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Controls randomness (0-1)" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "parameters.max_tokens", children: "Max Tokens" }), (0, jsx_runtime_1.jsx)("input", { type: "number", id: "parameters.max_tokens", name: "parameters.max_tokens", 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.parameters?.max_tokens ?? '', onChange: handleNumericChange, placeholder: "1024", min: "1", disabled: loading }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Maximum response length" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "parameters.top_p", children: "Top P" }), (0, jsx_runtime_1.jsx)("input", { type: "number", id: "parameters.top_p", name: "parameters.top_p", 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.parameters?.top_p ?? '', onChange: handleNumericChange, placeholder: "0.95", min: "0", max: "1", step: "0.01", disabled: loading }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Nucleus sampling threshold" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "parameters.top_k", children: "Top K" }), (0, jsx_runtime_1.jsx)("input", { type: "number", id: "parameters.top_k", name: "parameters.top_k", 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.parameters?.top_k ?? '', onChange: handleNumericChange, placeholder: "50", min: "1", disabled: loading }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "Number of tokens to consider" })] })] })] }), (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: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "deployment_config.environment", children: "Environment" }), (0, jsx_runtime_1.jsxs)("select", { id: "deployment_config.environment", name: "deployment_config.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.deployment_config?.environment, onChange: handleInputChange, 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", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "deployment_config.strategy", children: "Deployment Strategy" }), (0, jsx_runtime_1.jsxs)("select", { id: "deployment_config.strategy", name: "deployment_config.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.deployment_config?.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)))] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-gray-700 font-medium mb-2", htmlFor: "deployment_config.replicas", children: "Replicas" }), (0, jsx_runtime_1.jsx)("input", { type: "number", id: "deployment_config.replicas", name: "deployment_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.deployment_config?.replicas ?? '', onChange: handleNumericChange, placeholder: "1", min: "1", disabled: loading })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center text-gray-700 font-medium mb-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "deployment_config.auto_scaling", name: "deployment_config.auto_scaling", className: "h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 mr-2", checked: formData.deployment_config?.auto_scaling ?? false, onChange: handleCheckboxChange, disabled: loading }), "Enable Auto Scaling"] }) })] })] })] })), (0, jsx_runtime_1.jsx)(ModelStandardsValidator_js_1.ModelStandardsValidator, { model: formData, onChange: handleStandardsValidation, showWarnings: true }), (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 || !isValid, 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" })] }), model ? 'Updating...' : 'Creating...'] })) : (model ? 'Update Model' : 'Create Model') })] })] })] }));
};
exports.ModelForm = ModelForm;
//# sourceMappingURL=ModelForm.js.map