import React, {useState, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Card, Form, Input, InputNumber, Select, Switch, Space, Menu, Tabs, Row, Col, message, ColorPicker} from 'antd';
import type {NodeDesignDataResponse} from './types';
import * as service from './service';

// 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 renderField = (schema: any, fieldPath: string) => {
    const commonProps = {
        placeholder: `请输入${schema.title}`,
    };

    // 颜色字段路径列表
    const colorFields = [
        'ports.groups.in.attrs.circle.fill',
        'ports.groups.in.attrs.circle.stroke',
        'ports.groups.out.attrs.circle.fill',
        'ports.groups.out.attrs.circle.stroke',
        'style.fill',
        'style.stroke',
        'style.iconColor'
    ];

    // 检查是否是颜色字段
    if (colorFields.some(path => fieldPath.endsWith(path))) {
        return <ColorPicker showText/>;
    }

    if (schema.enum) {
        return (
            <Select
                {...commonProps}
                options={schema.enum.map((value: string, index: number) => ({
                    label: schema.enumNames?.[index] || value,
                    value
                }))}
            />
        );
    }

    switch (schema.type) {
        case 'string':
            return <Input {...commonProps} />;
        case 'integer':
        case 'number':
            return <InputNumber {...commonProps} style={{width: '100%'}}/>;
        case 'boolean':
            return <Switch/>;
        default:
            return <Input {...commonProps} />;
    }
};

// 表单渲染器组件
const FormRenderer: React.FC<{
    schema: any;
    path?: string;
    readOnly?: boolean;
}> = ({schema, path = '', readOnly = false}) => {
    if (!schema || !schema.properties) return null;
    const renderPortConfig = (portSchema: any, portPath: string) => {
        if (!portSchema || !portSchema.properties) return null;

        const {position, attrs} = portSchema.properties;
        return (
            <>
                {/* 先渲染端口位置 */}
                <Form.Item
                    name={`${portPath}.position`}
                    label={
                        <span style={{fontSize: '14px'}}>
                            {position.title}
                        </span>
                    }
                    tooltip={position.description}
                    required={portSchema.required?.includes('position')}
                    initialValue={'default' in position ? position.default : undefined}
                    style={{marginBottom: 16}}
                >
                    {readOnly ? (
                        <span style={{color: '#666'}}>{position.default || '-'}</span>
                    ) : (
                        renderField(position, `${portPath}.position`)
                    )}
                </Form.Item>

                {/* 再渲染端口属性 */}
                {attrs && (
                    <Card
                        title={attrs.title}
                        size="small"
                        style={{
                            marginBottom: 16,
                            boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
                            borderRadius: '8px',
                            border: '1px solid #f0f0f0'
                        }}
                        styles={{
                            body: {padding: '16px'}
                        }}
                    >
                        <FormRenderer
                            schema={attrs}
                            path={`${portPath}.attrs`}
                            readOnly={readOnly}
                        />
                    </Card>
                )}
            </>
        );
    };

    return (
        <div style={{padding: '8px 0'}}>
            {Object.entries(schema.properties).map(([key, value]: [string, any]) => {
                const fieldPath = path ? `${path}.${key}` : key;
                if (value.type === 'object') {
                    // 特殊处理端口组配置
                    if (key === 'groups' && path.endsWith('ports')) {
                        const inPort = value.properties?.in;
                        const outPort = value.properties?.out;

                        return (
                            <Row key={fieldPath} gutter={16}>
                                <Col span={12}>
                                    <Card
                                        title={inPort.title}
                                        size="small"
                                        style={{
                                            marginBottom: 16,
                                            boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
                                            borderRadius: '8px',
                                            border: '1px solid #f0f0f0'
                                        }}
                                        styles={{
                                            body: {padding: '16px'}
                                        }}
                                    >
                                        {renderPortConfig(inPort, `${fieldPath}.in`)}
                                    </Card>
                                </Col>
                                <Col span={12}>
                                    <Card
                                        title={outPort.title}
                                        size="small"
                                        style={{
                                            marginBottom: 16,
                                            boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
                                            borderRadius: '8px',
                                            border: '1px solid #f0f0f0'
                                        }}
                                        styles={{
                                            body: {padding: '16px'}
                                        }}
                                    >
                                        {renderPortConfig(outPort, `${fieldPath}.out`)}
                                    </Card>
                                </Col>
                            </Row>
                        );
                    }

                    return (
                        <Card
                            key={fieldPath}
                            title={
                                <span style={{fontSize: '14px', fontWeight: 500}}>
                                    {value.title}
                                </span>
                            }
                            size="small"
                            style={{
                                marginBottom: 16,
                                boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
                                borderRadius: '8px',
                                border: '1px solid #f0f0f0'
                            }}
                            styles={{
                                body: {padding: '16px'}
                            }}
                        >
                            <FormRenderer
                                schema={value}
                                path={fieldPath}
                                readOnly={readOnly}
                            />
                        </Card>
                    );
                }

                return (
                    <Form.Item
                        key={fieldPath}
                        name={fieldPath}
                        label={
                            <span style={{fontSize: '14px'}}>
                                {value.title}
                            </span>
                        }
                        tooltip={value.description}
                        required={schema.required?.includes(key)}
                        initialValue={'default' in value ? value.default : undefined}
                        style={{marginBottom: 16}}
                    >
                        {readOnly ? (
                            <span style={{color: '#666'}}>{value.default || '-'}</span>
                        ) : (
                            renderField(value, fieldPath)
                        )}
                    </Form.Item>
                );
            })}
        </div>
    );
};

const NodeDesignForm: React.FC = () => {
    const [nodeDefinitionsDefined, setNodeDefinitionsDefined] = useState<NodeDesignDataResponse[]>([]);
    const [loading, setLoading] = useState(false);
    const [selectedNode, setSelectedNode] = useState<NodeDesignDataResponse | null>(null);
    const [activeTab, setActiveTab] = useState<string>('panel');
    const [form] = Form.useForm();

    // 加载节点定义数据
    useEffect(() => {
        const loadNodeDefinitions = async () => {
            try {
                setLoading(true);
                const data = await service.getNodeDefinitionsDefined();
                setNodeDefinitionsDefined(data);
                // 自动选中第一个节点
                if (data && data.length > 0) {
                    handleNodeSelect(data[0]);
                }
            } catch (error) {
                console.error('加载节点定义失败:', error);
                message.error('加载节点定义失败');
            } finally {
                setLoading(false);
            }
        };

        loadNodeDefinitions();
    }, []);

    // 获取当前节点可用的 Tab 列表
    const getAvailableTabs = (node: NodeDesignDataResponse | null) => {
        if (!node) return [];
        return TAB_CONFIG.filter(tab => {
            const value = node[tab.schemaKey as keyof NodeDesignDataResponse];
            return value !== null && value !== undefined;
        });
    };

    // 处理节点选择
    const handleNodeSelect = (node: NodeDesignDataResponse) => {
        setSelectedNode(node);
        // 更新表单数据
        form.setFieldsValue({
            'base.nodeType': node.nodeCode,  // 使用 nodeCode 作为节点类型
            'base.nodeCode': node.nodeCode,
            'base.nodeName': node.nodeName,
            'base.category': node.category,
            'base.description': node.description
        });
    };

    // 处理 Tab 切换
    const handleTabChange = (key: string) => {
        setActiveTab(key);
        // 不需要重置表单
    };

    // 处理保存
    const handleSave = async () => {
        try {
            const values = await form.validateFields();
            console.log('Form values:', values);
            
            // 提取基本信息字段
            const baseFields = {
                nodeType: values['base.nodeType'],
                nodeCode: values['base.nodeCode'],
                nodeName: values['base.nodeName'],
                category: values['base.category'],
                description: values['base.description']
            };

            // 移除基本信息字段，处理 UI 配置
            const uiValues = {...values};
            delete uiValues['base.nodeType'];
            delete uiValues['base.nodeCode'];
            delete uiValues['base.nodeName'];
            delete uiValues['base.category'];
            delete uiValues['base.description'];

            // 将扁平的键值对转换为嵌套对象
            const convertToNestedObject = (flatObj: any) => {
                const result: any = {};
                
                Object.keys(flatObj).forEach(key => {
                    const parts = key.split('.');
                    let current = result;
                    
                    for (let i = 0; i < parts.length - 1; i++) {
                        current[parts[i]] = current[parts[i]] || {};
                        current = current[parts[i]];
                    }
                    
                    current[parts[parts.length - 1]] = flatObj[key];
                });
                
                return result;
            };
            
            const saveData = {
                ...selectedNode,
                ...baseFields,
                uiVariables: convertToNestedObject(uiValues)
            };
            
            console.log('Save data:', saveData);
            await service.saveNodeDefinition(saveData);
            message.success('保存成功');
        } catch (error) {
            console.error('保存失败:', error);
            message.error('保存失败');
        }
    };

    // 获取当前 schema
    const getCurrentSchema = () => {
        if (!selectedNode) return null;
        const currentTab = TAB_CONFIG.find(tab => tab.key === activeTab);
        if (!currentTab) return null;
        return selectedNode[currentTab.schemaKey as keyof NodeDesignDataResponse];
    };

    return (
        <PageContainer
            header={{
                title: '节点设计',
                extra: [
                    <Button
                        key="save"
                        type="primary"
                        onClick={handleSave}
                    >
                        保存
                    </Button>
                ],
            }}
        >
            <div style={{display: 'flex', gap: '24px', padding: '24px'}}>
                <Tabs
                    tabPosition="left"
                    type="card"
                    activeKey={selectedNode?.nodeCode || ''}
                    onChange={(key) => {
                        const node = nodeDefinitionsDefined.find(n => n.nodeCode === key);
                        if (node) {
                            handleNodeSelect(node);
                        }
                    }}
                    items={nodeDefinitionsDefined.map(node => ({
                        key: node.nodeCode,
                        label: (
                            <div style={{padding: '4px 0'}}>
                                <div style={{fontSize: '14px', fontWeight: 500}}>
                                    {node.nodeName}
                                </div>
                                <div style={{
                                    fontSize: '12px',
                                    color: '#666',
                                    marginTop: '4px'
                                }}>
                                    {node.nodeCode}
                                </div>
                            </div>
                        )
                    }))}
                />
                <Card
                    style={{
                        flex: 1,
                    }}
                >
                    <Form
                        form={form}
                        layout="vertical"
                        key={`${selectedNode?.nodeCode}-${activeTab}`}
                    >
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="base.nodeType"
                                    label="节点类型"
                                    rules={[{required: true}]}
                                >
                                    <Input disabled/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    name="base.nodeCode"
                                    label="节点编码"
                                    rules={[{required: true}]}
                                >
                                    <Input disabled/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="base.nodeName"
                                    label="节点名称"
                                    rules={[{required: true}]}
                                >
                                    <Input disabled/>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    name="base.category"
                                    label="节点类别"
                                >
                                    <Input disabled/>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Form.Item
                            name="base.description"
                            label="节点描述"
                        >
                            <Input.TextArea rows={4}/>
                        </Form.Item>
                        <Tabs
                            activeKey={activeTab}
                            onChange={handleTabChange}
                            items={getAvailableTabs(selectedNode).map(tab => ({
                                key: tab.key,
                                label: (
                                    <span style={{fontSize: '14px'}}>
                                        {tab.label}
                                    </span>
                                ),
                                children: tab.key === activeTab ? (
                                    <div style={{
                                        padding: '16px 0',
                                        minHeight: '400px'
                                    }}>
                                        <FormRenderer
                                            schema={getCurrentSchema()}
                                            readOnly={tab.readonly}
                                        />
                                    </div>
                                ) : null
                            }))}
                        />
                    </Form>
                </Card>
            </div>
        </PageContainer>
    );
};

export default NodeDesignForm;