import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Save, RotateCcw } from 'lucide-react';
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Button } from '@/components/ui/button';
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '@/components/ui/command';
import { Badge } from '@/components/ui/badge';
import { ChevronsUpDown, X } from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';
import type { FlowNode, FlowNodeData, FlowEdge } from '../types';
import type { WorkflowNodeDefinition, JSONSchema } from '../nodes/types';
import { isConfigurableNode } from '../nodes/types';
import { convertJsonSchemaToZod, extractDataSourceTypes } from '../utils/schemaConverter';
import { loadDataSource, DataSourceType, type DataSourceOption } from '@/domain/dataSource';
import { convertObjectToUUID, convertObjectToDisplayName } from '@/utils/workflow/variableConversion';
import VariableInput from '@/components/VariableInput';

interface NodeConfigModalProps {
    visible: boolean;
    node: FlowNode | null;
    allNodes: FlowNode[];
    allEdges: FlowEdge[];
    onCancel: () => void;
    onOk: (nodeId: string, updatedData: Partial<FlowNodeData>) => void;
}

// ✅ 多选组件（使用 shadcn/ui）
interface MultiSelectProps {
    options: Array<{ label: string; value: any }>;
    value: any[];
    onChange: (value: any[]) => void;
    placeholder?: string;
    disabled?: boolean;
}

const MultiSelect: React.FC<MultiSelectProps> = ({ options, value = [], onChange, placeholder, disabled }) => {
    const [open, setOpen] = React.useState(false);
    
    const handleSelect = (optionValue: any) => {
        const newValues = value.includes(optionValue)
            ? value.filter((v: any) => v !== optionValue)
            : [...value, optionValue];
        onChange(newValues);
    };
    
    const handleRemove = (optionValue: any) => {
        onChange(value.filter((v: any) => v !== optionValue));
    };
    
    return (
        <div className="space-y-2">
            <Popover open={open} onOpenChange={setOpen}>
                <PopoverTrigger asChild>
                    <Button
                        variant="outline"
                        role="combobox"
                        aria-expanded={open}
                        className="w-full justify-between"
                        disabled={disabled}
                    >
                        {value.length > 0 
                            ? `已选择 ${value.length} 项` 
                            : placeholder || '请选择'}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="w-[400px] p-0" align="start">
                    <Command>
                        <CommandInput placeholder="搜索..." />
                        <CommandEmpty>未找到选项</CommandEmpty>
                        <CommandGroup className="max-h-64 overflow-auto">
                            {options.map((option) => (
                                <CommandItem
                                    key={option.value}
                                    value={option.value}
                                    onSelect={() => handleSelect(option.value)}
                                >
                                    <Checkbox
                                        checked={value.includes(option.value)}
                                        className="mr-2"
                                    />
                                    {option.label}
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </Command>
                </PopoverContent>
            </Popover>
            
            {/* 已选择的标签 */}
            {value.length > 0 && (
                <div className="flex flex-wrap gap-1">
                    {value.map((val: any) => {
                        const option = options.find((opt: any) => opt.value === val);
                        return (
                            <Badge key={val} variant="secondary" className="px-2 py-1">
                                {option?.label || val}
                                <button
                                    type="button"
                                    className="ml-1 hover:text-destructive"
                                    onClick={() => handleRemove(val)}
                                    disabled={disabled}
                                >
                                    <X className="h-3 w-3" />
                                </button>
                            </Badge>
                        );
                    })}
                </div>
            )}
        </div>
    );
};

const NodeConfigModal: React.FC<NodeConfigModalProps> = ({
    visible,
    node,
    allNodes,
    allEdges,
    onCancel,
    onOk
}) => {
    const [loading, setLoading] = useState(false);
    const { toast } = useToast();
    
    // 固定的节点信息（不通过 schema，直接管理）
    const [nodeName, setNodeName] = useState('');
    const [description, setDescription] = useState('');
    
    // 动态数据源缓存
    const [dataSourceCache, setDataSourceCache] = useState<Record<string, DataSourceOption[]>>({});
    const [loadingDataSources, setLoadingDataSources] = useState(false);

    // ✅ 性能优化：使用 ref 保存 allNodes 和 allEdges 的最新引用
    // 避免这些频繁变化的数组导致 useCallback 重建
    const allNodesRef = useRef<FlowNode[]>(allNodes);
    const allEdgesRef = useRef<FlowEdge[]>(allEdges);
    
    useEffect(() => {
        allNodesRef.current = allNodes;
        allEdgesRef.current = allEdges;
    }, [allNodes, allEdges]);

    // 获取节点定义
    const nodeDefinition: WorkflowNodeDefinition | null = node?.data?.nodeDefinition || null;

    // ✅ 生成 Zod Schema（仅输入映射）
    const inputMappingSchema = useMemo(() => {
        if (!nodeDefinition || !isConfigurableNode(nodeDefinition) || !nodeDefinition.inputMappingSchema) {
            return null;
        }
        return convertJsonSchemaToZod(nodeDefinition.inputMappingSchema);
    }, [nodeDefinition]);

    // ✅ 创建表单实例（仅输入映射）
    const inputForm = useForm({
        resolver: inputMappingSchema ? zodResolver(inputMappingSchema) : undefined,
        defaultValues: {}
    });

    // ✅ 预加载动态数据源（仅输入映射）
    useEffect(() => {
        if (!visible || !nodeDefinition) return;

        const loadDynamicData = async () => {
            const inputTypes = isConfigurableNode(nodeDefinition) && nodeDefinition.inputMappingSchema
                ? extractDataSourceTypes(nodeDefinition.inputMappingSchema)
                : [];
            
            if (inputTypes.length === 0) {
                return;
            }

            setLoadingDataSources(true);
            
            const cache: Record<string, DataSourceOption[]> = {};
            let failedCount = 0;
            
            // ✅ 改进：单独处理每个数据源的加载，避免一个失败影响全部
            await Promise.allSettled(
                inputTypes.map(async (type) => {
                    try {
                        const data = await loadDataSource(type as DataSourceType);
                        cache[type] = data;
                    } catch (error) {
                        console.error(`加载数据源 ${type} 失败:`, error);
                        failedCount++;
                        cache[type] = []; // 失败时使用空数组
                    }
                })
            );
            
            setDataSourceCache(cache);
            setLoadingDataSources(false);
            
            // 如果有失败的数据源，显示提示
            if (failedCount > 0) {
                toast({
                    title: '部分数据加载失败',
                    description: `${failedCount} 个选项数据加载失败，请检查网络后重新打开节点配置`,
                    variant: 'destructive'
                });
            }
        };

        loadDynamicData();
    }, [visible, nodeDefinition, toast]);

    // ✅ 初始化表单数据
    useEffect(() => {
        if (visible && node && nodeDefinition) {
            const nodeData = node.data || {};
            
            // 设置固定节点信息（从 configs 或 nodeDefinition 获取）
            setNodeName(nodeData.configs?.nodeName || nodeDefinition.nodeName);
            setDescription(nodeData.configs?.description || nodeDefinition.description || '');
            
            // 设置输入映射默认值（转换 UUID 为显示名称）
            if (isConfigurableNode(nodeDefinition)) {
                const displayInputMapping = convertObjectToDisplayName(
                    nodeData.inputMapping || {},
                    allNodes
                );
                inputForm.reset(displayInputMapping);
            }
        }
        // 只在 visible 或 node.id 改变时重置表单
        // allNodes 改变不应该触发重置（用户正在编辑时）
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [visible, node?.id]);

    // ✅ 保存配置
    const handleSave = () => {
        if (!node || !nodeDefinition) return;
        
        // 验证节点名称（必填）
        if (!nodeName || !nodeName.trim()) {
            toast({
                title: '保存失败',
                description: '节点名称不能为空',
                variant: 'destructive'
            });
            return;
        }
        
        // 使用 handleSubmit 验证输入映射（如果存在）
        const submitForm = async () => {
            setLoading(true);
            try {
                // 获取输入映射数据
                let inputData = {};
                if (isConfigurableNode(nodeDefinition) && nodeDefinition.inputMappingSchema) {
                    inputData = inputForm.getValues();
                }

                // 转换显示名称格式为 UUID 格式（仅输入映射需要）
                const uuidInputMapping = convertObjectToUUID(inputData as Record<string, any>, allNodes);

                // 构建 configs（包含元数据）
                const configs = {
                    nodeName: nodeName.trim(),
                    nodeCode: nodeDefinition.nodeCode, // 只读，从定义获取
                    description: description.trim()
                };

                // 构建更新数据
            const updatedData: Partial<FlowNodeData> = {
                    label: nodeName.trim(),
                configs,
                    inputMapping: uuidInputMapping,
                    outputs: isConfigurableNode(nodeDefinition) ? nodeDefinition.outputs || [] : []
            };

            onOk(node.id, updatedData);
                
                toast({
                    title: '保存成功',
                    description: '节点配置已更新'
                });
                
                // 关闭抽屉
            onCancel();
        } catch (error) {
                console.error('保存节点配置失败:', error);
                toast({
                    title: '保存失败',
                    description: '请检查必填字段是否填写完整',
                    variant: 'destructive'
                });
        } finally {
            setLoading(false);
        }
    };

        // 如果有输入映射schema，使用表单验证
        if (inputMappingSchema) {
            inputForm.handleSubmit(submitForm)();
        } else {
            submitForm();
        }
    };

    // ✅ 重置表单
    const handleReset = () => {
        if (!node || !nodeDefinition) return;
        
        // 重置节点信息
        setNodeName(nodeDefinition.nodeName);
        setDescription(nodeDefinition.description || '');
        
        // 重置输入映射
        inputForm.reset({});
        
        toast({
            title: '已重置',
            description: '表单已恢复为默认值'
        });
    };

    // ✅ 条件评估函数（支持 x-condition）
    const evaluateCondition = useCallback((
        currentValue: any,
        expectedValue: any,
        operator: string = '==='
    ): boolean => {
        switch (operator) {
            case '===':
            case '==':
                return currentValue === expectedValue;
            case '!==':
            case '!=':
                return currentValue !== expectedValue;
            case '>':
                return Number(currentValue) > Number(expectedValue);
            case '<':
                return Number(currentValue) < Number(expectedValue);
            case '>=':
                return Number(currentValue) >= Number(expectedValue);
            case '<=':
                return Number(currentValue) <= Number(expectedValue);
            case 'includes':
                return Array.isArray(currentValue) && currentValue.includes(expectedValue);
            case 'notIncludes':
                return Array.isArray(currentValue) && !currentValue.includes(expectedValue);
            default:
                return currentValue === expectedValue;
        }
    }, []);

    // ✅ 通用 Select 渲染函数（减少代码重复）
    const renderSelect = useCallback((
        options: Array<{ label: string; value: any }>,
        field: any,
        prop: any,
        disabled: boolean,
        onValueChange?: (value: string) => void
    ) => (
        <Select
            disabled={disabled}
            value={field.value?.toString()}
            onValueChange={onValueChange || field.onChange}
        >
            <SelectTrigger>
                <SelectValue placeholder={`请选择${prop.title || ''}`} />
            </SelectTrigger>
            <SelectContent>
                {options.map((option) => (
                    <SelectItem key={option.value} value={option.value.toString()}>
                        {option.label}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    ), []);

    // ✅ 渲染字段控件
    const renderFieldControl = useCallback((prop: any, field: any, key: string) => {
        // 动态数据源
        if (prop['x-dataSource']) {
            const options = dataSourceCache[prop['x-dataSource']] || [];
            
            // ✅ 数组类型 - 检查是否应该是多选
            if (prop.type === 'array') {
                // 检查 x-multiple-condition（是否应该多选）
                let isMultiple = true;  // 默认多选
                
                if (prop['x-multiple-condition']) {
                    const multipleCondition = prop['x-multiple-condition'];
                    const conditionField = multipleCondition.field;
                    const conditionValue = multipleCondition.value;
                    const conditionOperator = multipleCondition.operator || '===';
                    
                    // 获取条件字段的当前值
                    const currentFieldValue = inputForm.watch(conditionField);
                    
                    // 评估条件
                    isMultiple = evaluateCondition(currentFieldValue, conditionValue, conditionOperator);
                }
                
                // 如果是单选模式
                if (!isMultiple) {
                    return renderSelect(
                        options,
                        {
                            ...field,
                            // 转换数组为单个值
                            value: Array.isArray(field.value) && field.value.length > 0 ? field.value[0] : field.value,
                            onChange: (value: any) => {
                                // 单选时，将值包装为数组
                                field.onChange([value]);
                            }
                        },
                        prop,
                        loadingDataSources || loading
                    );
                }
                
                // 多选模式
                return (
                    <MultiSelect
                        options={options}
                        value={field.value || []}
                        onChange={field.onChange}
                        placeholder={prop.description || `请选择${prop.title || ''}`}
                        disabled={loadingDataSources || loading}
                    />
                );
            }
            
            // ✅ 单选类型
            return renderSelect(
                options,
                field,
                prop,
                loadingDataSources || loading,
                (value) => {
                    // 如果是数字类型，转换为数字
                    const numValue = Number(value);
                    field.onChange(isNaN(numValue) ? value : numValue);
                }
            );
        }

        // 静态枚举值
        if (prop.enum && Array.isArray(prop.enum)) {
            const options = prop.enum.map((value: any, index: number) => {
                const enumValue = typeof value === 'object' ? value.value : value;
                const enumLabel = typeof value === 'object' ? value.label : (prop.enumNames?.[index] || value);
                return { label: enumLabel, value: enumValue };
            });
            return renderSelect(options, field, prop, loading);
        }

        // 根据类型渲染
            switch (prop.type) {
                case 'string': {
                    // 黑名单字段：不使用变量输入
                    const blacklist = ['nodeName', 'nodeCode', 'description'];
                    const isBlacklisted = blacklist.includes(key);
                    const isPassword = prop.format === 'password';
                    
                    // 密码字段或黑名单字段：使用普通输入
                    if (isPassword || isBlacklisted) {
                        if (prop.format === 'textarea' || key.includes('description')) {
                            return (
                                <Textarea
                                    {...field}
                                    disabled={loading}
                                    placeholder={prop.description || `请输入${prop.title || ''}`}
                                    rows={3}
                                />
                            );
                        }
                        return (
                            <Input
                                {...field}
                                type={isPassword ? 'password' : 'text'}
                                disabled={loading}
                                placeholder={prop.description || `请输入${prop.title || ''}`}
                            />
                        );
                    }
                    
                    // 其他字符串字段：使用 VariableInput
                    const isTextarea = prop.format === 'textarea' || 
                                     ['content', 'body', 'expression', 'script'].includes(key);
                    
                    return (
                        <VariableInput
                            value={field.value || ''}
                            onChange={field.onChange}
                            allNodes={allNodesRef.current}
                            allEdges={allEdgesRef.current}
                            currentNodeId={node?.id || ''}
                            variant={isTextarea ? 'textarea' : 'input'}
                            placeholder={prop.description || `请输入${prop.title || ''}`}
                            disabled={loading}
                            rows={3}
                        />
                    );
                }
            
                case 'number':
                case 'integer':
                return (
                    <Input
                        {...field}
                        type="number"
                        disabled={loading}
                        placeholder={prop.description || `请输入${prop.title || ''}`}
                        onChange={(e) => {
                            const value = e.target.value;
                            field.onChange(value === '' ? undefined : Number(value));
                        }}
                    />
                );
            
                case 'boolean':
                return (
                    <div className="flex items-center space-x-2">
                        <Checkbox
                            checked={field.value || false}
                            disabled={loading}
                            onCheckedChange={field.onChange}
                        />
                    </div>
                );
            
                default:
                return (
                    <Input
                        {...field}
                        disabled={loading}
                        placeholder={prop.description || `请输入${prop.title || ''}`}
                    />
                );
        }
    }, [dataSourceCache, loadingDataSources, loading, node, renderSelect]);

    // ✅ 渲染表单字段（不使用 useCallback 以支持 watch 的响应式更新）
    const renderFormFields = (
        schema: JSONSchema,
        form: ReturnType<typeof useForm>,
        prefix: string = ''
    ) => {
        if (!schema.properties || typeof schema.properties !== 'object') {
            return null;
        }

        return Object.entries(schema.properties).map(([key, prop]: [string, any]) => {
            const fieldName = prefix ? `${prefix}.${key}` : key;
            const isRequired = Array.isArray(schema.required) && schema.required.includes(key);

            // ✅ 检查条件显示（x-condition）- 使用 watch 订阅字段变化
            if (prop['x-condition']) {
                const condition = prop['x-condition'];
                const conditionField = condition.field;
                const conditionValue = condition.value;
                const conditionOperator = condition.operator || '===';
                
                // 获取条件字段的当前值（watch 会订阅该字段的变化，触发组件重新渲染）
                const currentFieldValue = form.watch(conditionField);
                
                // 评估条件，如果不满足则不渲染该字段
                if (!evaluateCondition(currentFieldValue, conditionValue, conditionOperator)) {
                    return null;
                }
            }

            return (
                <FormField
                    key={fieldName}
                    control={form.control}
                    name={fieldName}
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>
                                {prop.title || key}
                                {isRequired && <span className="text-red-500 ml-1">*</span>}
                            </FormLabel>
                            <FormControl>
                                {renderFieldControl(prop, field, key)}
                            </FormControl>
                            {prop.description && (
                                <FormDescription>{prop.description}</FormDescription>
                            )}
                            <FormMessage />
                        </FormItem>
                    )}
                />
            );
        });
    };

    if (!nodeDefinition) {
        return null;
    }

    return (
        <Sheet open={visible} onOpenChange={(open) => !open && onCancel()}>
            <SheetContent className="w-[600px] sm:max-w-[600px] flex flex-col p-0">
                {/* Header - 固定在顶部 */}
                <div className="px-6 pt-6 pb-4 border-b">
                    <SheetHeader className="space-y-2">
                        <SheetTitle className="text-xl font-semibold">
                            编辑节点 - {nodeDefinition.nodeName}
                        </SheetTitle>
                        <SheetDescription>
                            配置节点的参数和映射关系
                        </SheetDescription>
                    </SheetHeader>
                </div>

                {/* Content - 可滚动区域 */}
                <div className="flex-1 overflow-y-auto px-6 py-4">
                    <Accordion 
                        type="multiple" 
                        defaultValue={["info", "input"]} 
                        className="w-full"
                    >
                        {/* 节点信息（固定表单，不通过 schema） */}
                        <AccordionItem value="info" className="border-b">
                            <AccordionTrigger className="text-base font-semibold flex-row-reverse justify-end gap-2 hover:no-underline">
                                节点信息
                            </AccordionTrigger>
                            <AccordionContent className="px-1 space-y-4">
                                {/* 节点编码（只读） */}
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">
                                        节点编码
                                    </label>
                                    <Input
                                        value={nodeDefinition.nodeCode}
                                        disabled
                                        className="bg-muted cursor-not-allowed"
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        节点的唯一标识符（只读）
                                    </p>
                </div>

                                {/* 节点名称 */}
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">
                                        节点名称 <span className="text-red-500">*</span>
                                    </label>
                                    <Input
                                        value={nodeName}
                                        onChange={(e) => setNodeName(e.target.value)}
                                        placeholder="请输入节点名称"
                                        disabled={loading}
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        节点在流程图中显示的名称
                                    </p>
                    </div>

                                {/* 节点描述 */}
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">
                                        节点描述
                                    </label>
                                    <Textarea
                                        value={description}
                                        onChange={(e) => setDescription(e.target.value)}
                                        placeholder="请输入节点描述"
                                        disabled={loading}
                                        rows={3}
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        节点的详细说明
                                    </p>
                    </div>
                            </AccordionContent>
                        </AccordionItem>

                        {/* 输入映射 */}
                        {isConfigurableNode(nodeDefinition) && nodeDefinition.inputMappingSchema && (
                            <AccordionItem value="input" className="border-b">
                                <AccordionTrigger className="text-base font-semibold flex-row-reverse justify-end gap-2 hover:no-underline">
                                    输入
                                </AccordionTrigger>
                                <AccordionContent className="px-1 space-y-4">
                                    <Form {...inputForm}>
                                        {renderFormFields(nodeDefinition.inputMappingSchema, inputForm)}
                                    </Form>
                                </AccordionContent>
                            </AccordionItem>
                        )}

                        {/* 输出 - 只读展示 */}
                        {isConfigurableNode(nodeDefinition) && nodeDefinition.outputs && nodeDefinition.outputs.length > 0 && (
                            <AccordionItem value="output" className="border-b">
                                <AccordionTrigger className="text-base font-semibold flex-row-reverse justify-end gap-2 hover:no-underline">
                                    输出
                                </AccordionTrigger>
                                <AccordionContent className="px-1">
                                    <div className="text-sm text-muted-foreground mb-4 p-3 bg-muted/50 rounded-md">
                                        💡 此节点执行后会产生以下数据，可以通过 <code className="px-1 py-0.5 bg-background rounded">{'${节点名.字段名}'}</code> 引用这些数据
                    </div>
                                    <div className="space-y-3">
                                        {nodeDefinition.outputs.map((output) => (
                                            <div key={output.name} className="p-3 border rounded-md bg-background">
                                                <div className="flex items-start justify-between mb-2">
                                                    <div className="flex-1">
                                                        <div className="flex items-center gap-2">
                                                            <span className="font-medium text-foreground">{output.title}</span>
                                                            <code className="px-1.5 py-0.5 text-xs bg-muted rounded">{output.name}</code>
                                                            <span className="text-xs text-muted-foreground border border-border px-1.5 py-0.5 rounded">
                                                                {output.type}
                    </span>
                                                            {output.required && (
                                                                <span className="text-xs text-red-500">*</span>
                                                            )}
                                                        </div>
                                                        <p className="text-sm text-muted-foreground mt-1">
                                                            {output.description}
                                                        </p>
                                                    </div>
                                                </div>
                                                {output.enum && (
                                                    <div className="mt-2 text-xs">
                                                        <span className="text-muted-foreground">可选值：</span>
                                                        <span className="ml-1 text-foreground">{output.enum.join(', ')}</span>
                                                    </div>
                                                )}
                                                {output.example !== undefined && (
                                                    <div className="mt-2 text-xs">
                                                        <span className="text-muted-foreground">示例：</span>
                                                        <code className="ml-1 px-1.5 py-0.5 bg-muted rounded text-foreground">
                                                            {typeof output.example === 'object'
                                                                ? JSON.stringify(output.example)
                                                                : String(output.example)}
                                                        </code>
                                                    </div>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                </AccordionContent>
                            </AccordionItem>
                        )}
                    </Accordion>
                </div>

                {/* Footer - 固定在底部 */}
                <SheetFooter className="px-6 py-4 border-t bg-background">
                    <div className="flex justify-between w-full">
                    <Button 
                            type="button"
                            variant="outline"
                        onClick={handleReset}
                            disabled={loading}
                    >
                            <RotateCcw className="mr-2 h-4 w-4" />
                        重置
                    </Button>
                        <div className="flex gap-2">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={onCancel}
                                disabled={loading}
                            >
                            取消
                        </Button>
                        <Button 
                                type="button"
                                onClick={handleSave}
                                disabled={loading || loadingDataSources}
                            >
                                <Save className="mr-2 h-4 w-4" />
                                {loading ? '保存中...' : '保存配置'}
                        </Button>
                </div>
            </div>
                </SheetFooter>
            </SheetContent>
        </Sheet>
    );
};

export default NodeConfigModal;
