import React, {useState, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-components';
import {Button, Card, Form, Input, InputNumber, Select, Switch, Tabs, Row, Col, message, ColorPicker} from 'antd';
import type {NodeDesignDataResponse} from './types';
import * as service from './service';
import {useParams} 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 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();
    const [isEdit, setIsEdit] = useState(false);
    const [editData, setEditData] = useState<NodeDesignDataResponse | null>(null);

    // 从路由参数获取 id
    const { id } = useParams();

    // 加载节点定义数据
    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();
    }, []);

    // 如果有 id，加载节点详情
    useEffect(() => {
        const loadNodeDetail = async () => {
            if (!id) return;

            try {
                setLoading(true);
                const data = await service.getNodeDefinition(id);
                if (data) {
                    setIsEdit(true);
                    setEditData(data);
                    // 设置基本信息表单值
                    form.setFieldsValue({
                        'base.nodeType': data.nodeType,
                        'base.nodeCode': data.nodeCode,
                        'base.nodeName': data.nodeName,
                        'base.category': data.category,
                        'base.description': data.description
                    });
                }
            } catch (error) {
                console.error('加载节点详情失败:', error);
                message.error('加载节点详情失败');
            } finally {
                setLoading(false);
            }
        };

        loadNodeDetail();
    }, [id, form]);


    // 获取当前节点可用的 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) => {
        console.log('选择节点:', node);
        console.log('当前编辑状态:', isEdit);
        console.log('当前编辑数据:', editData);

        setSelectedNode(node);
        // 更新表单数据
        form.setFieldsValue({
            'base.nodeType': node.nodeType,
            '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 processColorValue = (value: any): any => {
                if (!value || typeof value !== 'object') return value;

                // 如果是 ColorPicker 的值，转换为十六进制
                if (value.metaColor) {
                    const { r, g, b } = value.metaColor;
                    const toHex = (n: number): string => {
                        const hex = n.toString(16);
                        return hex.length === 1 ? '0' + hex : hex;
                    };
                    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
                }

                // 如果是普通对象，递归处理
                if (typeof value === 'object') {
                    const result: any = {};
                    Object.keys(value).forEach(key => {
                        result[key] = processColorValue(value[key]);
                    });
                    return result;
                }

                return value;
            };

            // 将扁平的键值对转换为嵌套对象
            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]];
                    }

                    // 处理颜色值
                    const value = processColorValue(flatObj[key]);
                    current[parts[parts.length - 1]] = value;
                });

                return result;
            };

            const saveData = {
                ...selectedNode,
                ...baseFields,
                uiVariables: convertToNestedObject(uiValues)
            };

            console.log('Save data:', saveData);

            // 根据是否是编辑模式调用不同的接口
            if (isEdit && editData?.id) {
                await service.updateNodeDefinition(editData.id, saveData);
                message.success('更新成功');
            } else {
                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;

        const schema = selectedNode[currentTab.schemaKey as keyof NodeDesignDataResponse];
        console.log('当前 schema:', schema);
        console.log('是否编辑模式:', isEdit);
        console.log('编辑数据:', editData);

        // 如果是编辑模式且有保存的数据，合并到 schema
        if (isEdit && editData?.uiVariables) {
            console.log('开始合并 UI 配置数据');

            // 处理颜色值
            const processColorValue = (value: any): string => {
                if (!value || typeof value !== 'object') return value;

                // 如果是颜色对象结构
                if (value.metaColor) {
                    const { r, g, b } = value.metaColor;
                    // 转换为十六进制
                    const toHex = (n: number): string => {
                        const hex = n.toString(16);
                        return hex.length === 1 ? '0' + hex : hex;
                    };
                    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
                }

                return value;
            };

            const mergeUiVariables = (schemaObj: any, uiData: any, parentPath = ''): any => {
                if (!schemaObj || typeof schemaObj !== 'object') return schemaObj;
                console.log('正在处理 schema:', schemaObj);
                console.log('UI 数据:', uiData);
                console.log('当前路径:', parentPath);

                const result = {...schemaObj};

                // 颜色字段路径列表
                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 (result.properties) {
                    Object.keys(result.properties).forEach(key => {
                        const currentPath = parentPath ? `${parentPath}.${key}` : key;
                        console.log('处理属性:', currentPath);

                        // 处理嵌套对象
                        if (result.properties[key].type === 'object') {
                            const nestedValue = currentPath.split('.').reduce((obj, key) => obj?.[key], uiData);
                            console.log('嵌套对象的值:', nestedValue);
                            if (nestedValue !== undefined) {
                                result.properties[key].default = nestedValue;
                            }
                        }
                        // 处理基本类型
                        else {
                            const value = currentPath.split('.').reduce((obj, key) => obj?.[key], uiData);
                            console.log('属性值:', value);
                            if (value !== undefined) {
                                // 如果是颜色字段，处理颜色值
                                if (colorFields.some(field => currentPath.endsWith(field))) {
                                    result.properties[key].default = processColorValue(value);
                                } else {
                                    result.properties[key].default = value;
                                }
                            }
                        }

                        // 递归处理嵌套属性
                        result.properties[key] = mergeUiVariables(
                            result.properties[key],
                            uiData,
                            currentPath
                        );
                    });
                }

                if (result.items) {
                    result.items = mergeUiVariables(result.items, uiData, parentPath);
                }

                return result;
            };

            const mergedSchema = mergeUiVariables(schema, editData.uiVariables);
            console.log('合并后的 schema:', mergedSchema);
            return mergedSchema;
        }

        console.log('使用原始 schema');
        return schema;
    };

    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={isEdit && editData?.nodeType ?
                        nodeDefinitionsDefined.find(n => n.nodeType === editData.nodeType)?.nodeCode || selectedNode?.nodeCode :
                        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>
                        ),
                        disabled: isEdit && editData?.nodeType && node.nodeType !== editData.nodeType
                    }))}
                />
                <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;
