import React, { useEffect, useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Row, Col, Menu, Tabs, Card, Button, message } from 'antd';
import { BetaSchemaForm, ProForm, ProFormGroup, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import type { NodeDesignData } from './types';
import * as service from './service';
import { useLocation } from 'react-router-dom';

// Tab 配置
const TAB_CONFIG = [
    { key: 'panel', label: '属性（预览）', schemaKey: 'panelVariablesSchema', readonly: true },
    { key: 'local', label: '环境变量（预览）', schemaKey: 'localVariablesSchema', readonly: true },
    { key: 'form', label: '表单（预览）', schemaKey: 'formVariablesSchema', readonly: true },
    { key: 'ui', label: 'UI配置', schemaKey: 'uiVariables', readonly: false }
];

const NodeDesignForm: React.FC = () => {
    const location = useLocation();
    const nodeData = location.state?.nodeData;

    // 缓存节点定义数据
    const [nodeDefinitions, setNodeDefinitions] = useState<NodeDesignData[]>([]);
    const [loading, setLoading] = useState(false);
    // 当前选中的节点
    const [selectedNode, setSelectedNode] = useState<NodeDesignData | null>(null);
    // 当前选中的 tab
    const [activeTab, setActiveTab] = useState<string>('panel');

    const formRef = useRef<any>();
    const uiFormRef = useRef<any>();  // 添加 UI 配置表单的 ref

    // 加载节点定义数据
    useEffect(() => {
        const loadNodeDefinitions = async () => {
            try {
                setLoading(true);
                const data = await service.getNodeDefinitionsDefined();
                setNodeDefinitions(data);
                // 如果是修改模式，设置当前节点为选中状态
                if (nodeData) {
                    setSelectedNode(nodeData);
                } else if (data.length > 0) {
                    setSelectedNode(data[0]);
                }
            } catch (error) {
                console.error('加载节点定义失败:', error);
            } finally {
                setLoading(false);
            }
        };

        loadNodeDefinitions();
    }, [nodeData]);

    // 获取当前节点可用的 Tab 列表
    const getAvailableTabs = (node: NodeDesignData | null) => {
        if (!node) return [];
        
        // 如果是修改模式，从nodeDefinitions中找到对应的节点定义
        if (nodeData) {
            const nodeDefinition = nodeDefinitions.find(def => def.nodeCode === nodeData.nodeType);
            if (nodeDefinition) {
                return TAB_CONFIG.filter(tab => {
                    // 使用节点定义中的schema
                    const value = nodeDefinition[tab.schemaKey as keyof NodeDesignData];
                    return value !== null && value !== undefined;
                });
            }
        }
        
        // 新建模式
        return TAB_CONFIG.filter(tab => {
            const value = node[tab.schemaKey as keyof NodeDesignData];
            return value !== null && value !== undefined;
        });
    };

    // 处理节点选择
    const handleNodeSelect = (nodeCode: string) => {
        // 如果是修改模式，不允许选择其他节点
        if (nodeData) return;
        
        const node = nodeDefinitions.find(n => n.nodeCode === nodeCode);
        if (node) {
            setSelectedNode(node);
            // 获取可用的 tab 列表
            const availableTabs = getAvailableTabs(node);
            // 如果当前选中的 tab 不在可用列表中，则选择第一个可用的 tab
            if (availableTabs.length > 0 && !availableTabs.find(tab => tab.key === activeTab)) {
                setActiveTab(availableTabs[0].key);
            }
        }
    };

    // 处理 Tab 切换
    const handleTabChange = (newTab: string) => {
        setActiveTab(newTab);
    };

    // 处理表单提交
    const handleFormSubmit = async (values: any) => {
        console.log('表单提交:', values);
        // TODO: 调用接口保存数据
    };

    // 递归获取默认值
    const getDefaultValues = (schema: any) => {
        console.log('Current Schema:', schema);
        if (!schema || !schema.properties) return {};
        
        const result = Object.entries(schema.properties).reduce((acc, [key, value]: [string, any]) => {
            console.log(`Processing key: ${key}, value:`, value);
            if (value.type === 'object') {
                const nestedDefaults = getDefaultValues(value);
                console.log(`Nested defaults for ${key}:`, nestedDefaults);
                acc[key] = nestedDefaults;
            } else if (value.type === 'array' && value.items) {
                acc[key] = value.default || [];
            } else {
                acc[key] = value.default;
            }
            return acc;
        }, {});

        console.log('Result for schema:', result);
        return result;
    };

    // 将 JSON Schema 转换为 ProForm Schema
    const convertToProFormSchema = (schema: any, parentKey = '', level = 0) => {
        if (!schema || !schema.properties) return [];

        return Object.entries(schema.properties).map(([key, value]: [string, any]) => {
            const fullKey = parentKey ? `${parentKey}.${key}` : key;
            console.log('Converting schema key:', fullKey, 'value:', value);

            // 基础字段配置
            const baseField = {
                title: value.title,
                dataIndex: fullKey,
                tooltip: value.description,
                initialValue: value.default
            };

            // 处理不同类型的字段
            if (value.type === 'object') {
                return {
                    ...baseField,
                    dataIndex: fullKey,
                    valueType: 'group',
                    columns: convertToProFormSchema(value, fullKey, level + 1),
                    fieldProps: {
                        title: value.title,
                        style: {
                            padding: level === 0 ? '16px' : '8px',
                            marginBottom: '16px',
                            border: '1px solid #f0f0f0',
                            borderRadius: '4px',
                            background: level === 0 ? '#fafafa' : 'transparent'
                        }
                    }
                };
            }

            // 处理枚举类型
            if (value.enum) {
                return {
                    ...baseField,
                    valueType: 'select',
                    valueEnum: value.enum.reduce((acc: any, item: string, index: number) => {
                        acc[item] = { text: value.enumNames?.[index] || item };
                        return acc;
                    }, {}),
                    placeholder: `请选择${value.title}`
                };
            }

            // 处理数组类型
            if (value.type === 'array') {
                const itemColumns = value.items ? convertToProFormSchema(
                    { properties: { item: value.items } },
                    `${fullKey}.item`,
                    level + 1
                ) : [];

                return {
                    ...baseField,
                    valueType: 'formList',
                    columns: itemColumns,
                    placeholder: `请添加${value.title}`
                };
            }

            // 处理基础类型
            const typeMap: Record<string, string> = {
                'string': 'text',
                'integer': 'digit',
                'number': 'digit',
                'boolean': 'switch'
            };

            // 判断是否是颜色字段
            const isColorField = value.type === 'string' && 
                (value.title?.includes('颜色') || value.description?.includes('颜色'));

            if (isColorField) {
                return {
                    ...baseField,
                    valueType: 'color',
                    placeholder: `请选择${value.title}`,
                    fieldProps: {
                        showText: true,
                        format: 'hex'
                    }
                };
            }

            return {
                ...baseField,
                valueType: typeMap[value.type] || 'text',
                placeholder: `请输入${value.title}`
            };
        });
    };

    // 渲染 Tab 内容
    const renderTabContent = (schemaKey: string) => {
        if (!selectedNode) return null;

        // 获取schema和初始值
        let schema;
        let initialValues = {};

        if (nodeData) {
            // 编辑模式
            const nodeDefinition = nodeDefinitions.find(def => def.nodeCode === nodeData.nodeType);
            if (!nodeDefinition) return null;

            if (schemaKey === 'uiVariables') {
                // UI配置：使用nodeDefinitions中的schema定义，使用nodeData中的实际数据作为初始值
                schema = nodeDefinition.uiVariables;
                initialValues = nodeData.uiVariables || {};
            } else {
                // 其他配置：使用schema中的定义
                schema = nodeDefinition[schemaKey as keyof NodeDesignData];
                // 只在非UI配置时使用默认值
                initialValues = getDefaultValues(schema);
            }
        } else {
            // 新建模式
            schema = selectedNode[schemaKey as keyof NodeDesignData];
            initialValues = getDefaultValues(schema);
        }

        if (!schema) return null;

        console.log(`Rendering ${schemaKey}:`, {
            schema,
            initialValues
        });
        
        const formColumns = convertToProFormSchema(schema);
        
        return (
            <BetaSchemaForm
                key={`${selectedNode.nodeCode}-${schemaKey}`}
                formRef={schemaKey === 'uiVariables' ? uiFormRef : undefined}
                layoutType="Form"
                initialValues={initialValues}
                columns={formColumns}
                submitter={false}
            />
        );
    };

    // 将扁平的对象转换为嵌套对象
    const flatToNested = (obj: Record<string, any>) => {
        const result: Record<string, any> = {};
        
        Object.keys(obj).forEach(key => {
            const parts = key.split('.');
            let current = result;
            
            parts.forEach((part, index) => {
                if (index === parts.length - 1) {
                    current[part] = obj[key];
                } else {
                    current[part] = current[part] || {};
                    current = current[part];
                }
            });
        });
        
        return result;
    };

    const handleSave = async () => {
        if (!selectedNode) return;
        
        try {
            const formValues = await formRef.current?.validateFields();
            const uiValues = await uiFormRef.current?.validateFields();
            
            const saveData = {
                nodeType: formValues.nodeType,
                nodeCode: formValues.nodeCode,
                nodeName: formValues.nodeName,
                category: formValues.category,
                description: formValues.description,
                uiVariables: flatToNested(uiValues),  // 将扁平结构转换为嵌套结构
                localVariablesSchema: selectedNode.localVariablesSchema,
                panelVariablesSchema: selectedNode.panelVariablesSchema,
                formVariablesSchema: selectedNode.formVariablesSchema
            };
            
            await service.saveNodeDefinition(saveData);
            message.success('保存成功');
        } catch (error) {
            console.error('Save failed:', error);
            message.error('保存失败');
        }
    };

    const renderBasicForm = () => {
        if (!selectedNode) return null;

        return (
            <ProForm
                formRef={formRef}
                key={selectedNode.nodeCode}
                layout="horizontal"
                submitter={false}
                initialValues={{
                    nodeType: selectedNode.nodeCode,
                    nodeCode: selectedNode.nodeCode,
                    nodeName: selectedNode.nodeName,
                    category: selectedNode.category,
                }}
            >
                <ProForm.Group>
                    <ProFormText
                        name="nodeType"
                        label="节点类型"
                        disabled
                        colProps={{ span: 12 }}
                    />
                    <ProFormText
                        name="nodeCode"
                        label="节点编码"
                        disabled
                        colProps={{ span: 12 }}
                    />
                </ProForm.Group>
                <ProForm.Group>
                    <ProFormText
                        name="nodeName"
                        label="节点名称"
                        disabled
                        colProps={{ span: 12 }}
                    />
                    <ProFormText
                        name="category"
                        label="节点类别"
                        disabled
                        colProps={{ span: 12 }}
                    />
                </ProForm.Group>
                <ProForm.Group>
                    <ProFormTextArea
                        name="description"
                        label="节点描述"
                        placeholder="请输入节点描述"
                        colProps={{ span: 24 }}
                    />
                </ProForm.Group>
            </ProForm>
        );
    };

    return (
        <PageContainer
            title={nodeData ? `修改节点设计 - ${nodeData.nodeName}` : '新建节点设计'}
            loading={loading}
            extra={[
                <Button
                    key="save"
                    type="primary"
                    onClick={handleSave}
                    disabled={!selectedNode}
                >
                    保存
                </Button>
            ]}
        >
            <div style={{ display: 'flex', height: '100%' }}>
                <div style={{ width: 200, borderRight: '1px solid #f0f0f0', marginRight: 24 }}>
                    <div style={{
                        padding: '8px 16px',
                        fontWeight: 'bold',
                        borderBottom: '1px solid #f0f0f0'
                    }}>
                        节点类型
                    </div>
                    <Menu
                        mode="vertical"
                        selectedKeys={[selectedNode?.nodeCode || '']}
                        items={nodeDefinitions.map(node => ({
                            key: node.nodeCode,
                            label: `${node.nodeName}（${node.nodeCode}）`,
                            disabled: nodeData ? node.nodeCode !== nodeData.nodeCode : false // 只在修改模式下禁用不匹配的节点
                        }))}
                        onClick={({ key }) => handleNodeSelect(key)}
                        style={{
                            border: 'none',
                            padding: '0 16px'
                        }}
                    />
                </div>
                <div style={{ flex: 1 }}>
                    {renderBasicForm()}
                    <Tabs
                        activeKey={activeTab}
                        onChange={handleTabChange}
                        items={getAvailableTabs(selectedNode).map(tab => ({
                            key: tab.schemaKey,
                            label: tab.label,
                            children: renderTabContent(tab.schemaKey)
                        }))}
                    />
                </div>
            </div>
        </PageContainer>
    );
};

export default NodeDesignForm;