import { useState, useEffect, useMemo } from 'react';
import { Entity } from '@esengine/ecs-framework';
import { EntityStoreService, MessageHub } from '@esengine/editor-core';
import { PropertyInspector } from './PropertyInspector';
import { BehaviorTreeNodeProperties } from './BehaviorTreeNodeProperties';
import { FileSearch, ChevronDown, ChevronRight, X, Settings, Box, AlertTriangle, Copy, File as FileIcon, Folder, Clock, HardDrive } from 'lucide-react';
import { BehaviorTreeNode, useBehaviorTreeStore } from '../stores/behaviorTreeStore';
import { ICON_MAP } from '../presentation/config/editorConstants';
import { useNodeOperations } from '../presentation/hooks/useNodeOperations';
import { useCommandHistory } from '../presentation/hooks/useCommandHistory';
import { NodeFactory } from '../infrastructure/factories/NodeFactory';
import { BehaviorTreeValidator } from '../infrastructure/validation/BehaviorTreeValidator';
import { TauriAPI } from '../api/tauri';
import '../styles/EntityInspector.css';

interface InspectorProps {
    entityStore: EntityStoreService;
    messageHub: MessageHub;
    projectPath?: string | null;
    isExecuting?: boolean;
    executionMode?: 'idle' | 'running' | 'paused' | 'step';
}

interface AssetFileInfo {
    name: string;
    path: string;
    extension?: string;
    size?: number;
    modified?: number;
    isDirectory: boolean;
}

type InspectorTarget =
    | { type: 'entity'; data: Entity }
    | { type: 'remote-entity'; data: any; details?: any }
    | { type: 'behavior-tree-node'; data: BehaviorTreeNode }
    | { type: 'asset-file'; data: AssetFileInfo; content?: string }
    | null;

export function Inspector({ entityStore: _entityStore, messageHub, projectPath, isExecuting, executionMode }: InspectorProps) {
    const [target, setTarget] = useState<InspectorTarget>(null);
    const [expandedComponents, setExpandedComponents] = useState<Set<number>>(new Set());
    const [componentVersion, setComponentVersion] = useState(0);

    // 行为树节点操作相关
    const nodeFactory = useMemo(() => new NodeFactory(), []);
    const validator = useMemo(() => new BehaviorTreeValidator(), []);
    const { commandManager } = useCommandHistory();
    const nodeOperations = useNodeOperations(nodeFactory, validator, commandManager);
    const { nodes, connections, isExecuting: storeIsExecuting } = useBehaviorTreeStore();

    // 优先使用传入的 isExecuting，否则使用 store 中的
    const isRunning = isExecuting ?? storeIsExecuting;

    // 当节点数据更新时，同步更新 target 中的节点
    useEffect(() => {
        if (target?.type === 'behavior-tree-node') {
            const updatedNode = nodes.find(n => n.id === target.data.id);
            if (updatedNode) {
                const currentDataStr = JSON.stringify(target.data.data);
                const updatedDataStr = JSON.stringify(updatedNode.data);
                if (currentDataStr !== updatedDataStr) {
                    setTarget({ type: 'behavior-tree-node', data: updatedNode });
                }
            }
        }
    }, [nodes]);

    useEffect(() => {
        const handleEntitySelection = (data: { entity: Entity | null }) => {
            if (data.entity) {
                setTarget({ type: 'entity', data: data.entity });
            } else {
                setTarget(null);
            }
            setComponentVersion(0);
        };

        const handleRemoteEntitySelection = (data: { entity: any }) => {
            setTarget({ type: 'remote-entity', data: data.entity });
        };

        const handleEntityDetails = (event: Event) => {
            const customEvent = event as CustomEvent;
            const details = customEvent.detail;
            if (target?.type === 'remote-entity') {
                setTarget({ ...target, details });
            }
        };

        const handleBehaviorTreeNodeSelection = (data: { node: BehaviorTreeNode }) => {
            setTarget({ type: 'behavior-tree-node', data: data.node });
        };

        const handleAssetFileSelection = async (data: { fileInfo: AssetFileInfo }) => {
            const fileInfo = data.fileInfo;

            if (fileInfo.isDirectory) {
                setTarget({ type: 'asset-file', data: fileInfo });
                return;
            }

            const textExtensions = ['txt', 'json', 'md', 'ts', 'tsx', 'js', 'jsx', 'css', 'html', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf', 'log', 'btree', 'ecs'];
            const isTextFile = fileInfo.extension && textExtensions.includes(fileInfo.extension.toLowerCase());

            if (isTextFile) {
                try {
                    const content = await TauriAPI.readFileContent(fileInfo.path);
                    setTarget({ type: 'asset-file', data: fileInfo, content });
                } catch (error) {
                    console.error('Failed to read file content:', error);
                    setTarget({ type: 'asset-file', data: fileInfo });
                }
            } else {
                setTarget({ type: 'asset-file', data: fileInfo });
            }
        };

        const handleComponentChange = () => {
            setComponentVersion((prev) => prev + 1);
        };

        const unsubEntitySelect = messageHub.subscribe('entity:selected', handleEntitySelection);
        const unsubRemoteSelect = messageHub.subscribe('remote-entity:selected', handleRemoteEntitySelection);
        const unsubNodeSelect = messageHub.subscribe('behavior-tree:node-selected', handleBehaviorTreeNodeSelection);
        const unsubAssetFileSelect = messageHub.subscribe('asset-file:selected', handleAssetFileSelection);
        const unsubComponentAdded = messageHub.subscribe('component:added', handleComponentChange);
        const unsubComponentRemoved = messageHub.subscribe('component:removed', handleComponentChange);

        window.addEventListener('profiler:entity-details', handleEntityDetails);

        return () => {
            unsubEntitySelect();
            unsubRemoteSelect();
            unsubNodeSelect();
            unsubAssetFileSelect();
            unsubComponentAdded();
            unsubComponentRemoved();
            window.removeEventListener('profiler:entity-details', handleEntityDetails);
        };
    }, [messageHub, target]);

    const handleRemoveComponent = (index: number) => {
        if (target?.type !== 'entity') return;
        const entity = target.data;
        const component = entity.components[index];
        if (component) {
            entity.removeComponent(component);
            messageHub.publish('component:removed', { entity, component });
        }
    };

    const toggleComponentExpanded = (index: number) => {
        setExpandedComponents((prev) => {
            const newSet = new Set(prev);
            if (newSet.has(index)) {
                newSet.delete(index);
            } else {
                newSet.add(index);
            }
            return newSet;
        });
    };

    const handlePropertyChange = (component: any, propertyName: string, value: any) => {
        if (target?.type !== 'entity') return;
        const entity = target.data;
        messageHub.publish('component:property:changed', {
            entity,
            component,
            propertyName,
            value
        });
    };

    const handleNodePropertyChange = (propertyName: string, value: any) => {
        if (target?.type !== 'behavior-tree-node') return;
        const node = target.data;

        nodeOperations.updateNodeData(node.id, {
            ...node.data,
            [propertyName]: value
        });
    };

    const handleCopyNodeInfo = () => {
        if (target?.type !== 'behavior-tree-node') return;
        const node = target.data;

        const childrenInfo = node.children.map((childId, index) => {
            const childNode = nodes.find(n => n.id === childId);
            return `  ${index + 1}. ${childNode?.template.displayName || '未知'} (ID: ${childId})`;
        }).join('\n');

        const incomingConnections = connections.filter(conn => conn.to === node.id);
        const outgoingConnections = connections.filter(conn => conn.from === node.id);

        const connectionInfo = [
            incomingConnections.length > 0 ? `输入连接: ${incomingConnections.length}个` : '',
            ...incomingConnections.map(conn => {
                const fromNode = nodes.find(n => n.id === conn.from);
                return `  来自: ${fromNode?.template.displayName || '未知'} (${conn.from})`;
            }),
            outgoingConnections.length > 0 ? `输出连接: ${outgoingConnections.length}个` : '',
            ...outgoingConnections.map(conn => {
                const toNode = nodes.find(n => n.id === conn.to);
                return `  到: ${toNode?.template.displayName || '未知'} (${conn.to})`;
            })
        ].filter(Boolean).join('\n');

        const nodeInfo = `
节点信息
========
名称: ${node.template.displayName}
类型: ${node.template.type}
分类: ${node.template.category}
类名: ${node.template.className || '无'}
节点ID: ${node.id}

子节点 (${node.children.length}个):
${childrenInfo || '  无'}

连接信息:
${connectionInfo || '  无连接'}

属性数据:
${JSON.stringify(node.data, null, 2)}
        `.trim();

        navigator.clipboard.writeText(nodeInfo).then(() => {
            messageHub.publish('notification:show', {
                type: 'success',
                message: '节点信息已复制到剪贴板'
            });
        }).catch(() => {
            const textarea = document.createElement('textarea');
            textarea.value = nodeInfo;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            messageHub.publish('notification:show', {
                type: 'success',
                message: '节点信息已复制到剪贴板'
            });
        });
    };

    const renderRemoteProperty = (key: string, value: any) => {
        if (value === null || value === undefined) {
            return (
                <div key={key} className="property-field">
                    <label className="property-label">{key}</label>
                    <span className="property-value-text">null</span>
                </div>
            );
        }

        if (typeof value === 'object' && !Array.isArray(value)) {
            return (
                <div key={key} className="property-field">
                    <label className="property-label">{key}</label>
                    <div className="property-value-object">
                        {Object.entries(value).map(([subKey, subValue]) => (
                            <div key={subKey} className="property-subfield">
                                <span className="property-sublabel">{subKey}:</span>
                                <span className="property-value-text">{String(subValue)}</span>
                            </div>
                        ))}
                    </div>
                </div>
            );
        }

        return (
            <div key={key} className="property-field">
                <label className="property-label">{key}</label>
                <span className="property-value-text">{String(value)}</span>
            </div>
        );
    };

    const formatFileSize = (bytes?: number): string => {
        if (!bytes) return '0 B';
        const units = ['B', 'KB', 'MB', 'GB'];
        let size = bytes;
        let unitIndex = 0;
        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }
        return `${size.toFixed(2)} ${units[unitIndex]}`;
    };

    const formatDate = (timestamp?: number): string => {
        if (!timestamp) return '未知';
        const date = new Date(timestamp * 1000);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    };

    const renderAssetFile = (fileInfo: AssetFileInfo, content?: string) => {
        const IconComponent = fileInfo.isDirectory ? Folder : FileIcon;
        const iconColor = fileInfo.isDirectory ? '#dcb67a' : '#90caf9';

        return (
            <div className="entity-inspector">
                <div className="inspector-header">
                    <IconComponent size={16} style={{ color: iconColor }} />
                    <span className="entity-name">{fileInfo.name}</span>
                </div>

                <div className="inspector-content">
                    <div className="inspector-section">
                        <div className="section-title">文件信息</div>
                        <div className="property-field">
                            <label className="property-label">类型</label>
                            <span className="property-value-text">
                                {fileInfo.isDirectory ? '文件夹' : fileInfo.extension ? `.${fileInfo.extension}` : '文件'}
                            </span>
                        </div>
                        {fileInfo.size !== undefined && !fileInfo.isDirectory && (
                            <div className="property-field">
                                <label className="property-label"><HardDrive size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />大小</label>
                                <span className="property-value-text">{formatFileSize(fileInfo.size)}</span>
                            </div>
                        )}
                        {fileInfo.modified !== undefined && (
                            <div className="property-field">
                                <label className="property-label"><Clock size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />修改时间</label>
                                <span className="property-value-text">{formatDate(fileInfo.modified)}</span>
                            </div>
                        )}
                        <div className="property-field">
                            <label className="property-label">路径</label>
                            <span className="property-value-text" style={{
                                fontFamily: 'Consolas, Monaco, monospace',
                                fontSize: '11px',
                                color: '#666',
                                wordBreak: 'break-all'
                            }}>
                                {fileInfo.path}
                            </span>
                        </div>
                    </div>

                    {content && (
                        <div className="inspector-section">
                            <div className="section-title">文件预览</div>
                            <div className="file-preview-content">
                                {content}
                            </div>
                        </div>
                    )}

                    {!content && !fileInfo.isDirectory && (
                        <div className="inspector-section">
                            <div style={{
                                padding: '20px',
                                textAlign: 'center',
                                color: '#666',
                                fontSize: '13px'
                            }}>
                                此文件类型不支持预览
                            </div>
                        </div>
                    )}
                </div>
            </div>
        );
    };

    const renderBehaviorTreeNode = (node: BehaviorTreeNode) => {
        const IconComponent = node.template.icon ? (ICON_MAP as any)[node.template.icon] : Box;

        return (
            <div className="entity-inspector">
                <div className="inspector-header">
                    {IconComponent && <IconComponent size={16} style={{ color: node.template.color || '#999' }} />}
                    <span className="entity-name">{node.template.displayName || '未命名节点'}</span>
                    <button
                        onClick={handleCopyNodeInfo}
                        style={{
                            marginLeft: 'auto',
                            background: 'transparent',
                            border: '1px solid rgba(255, 255, 255, 0.2)',
                            borderRadius: '4px',
                            padding: '4px 8px',
                            cursor: 'pointer',
                            display: 'flex',
                            alignItems: 'center',
                            gap: '4px',
                            color: '#999',
                            fontSize: '12px'
                        }}
                        title="复制节点信息"
                    >
                        <Copy size={14} />
                        <span>复制信息</span>
                    </button>
                </div>

                {isRunning && (
                    <div style={{
                        padding: '10px 14px',
                        backgroundColor: 'rgba(255, 152, 0, 0.1)',
                        borderLeft: '3px solid #ff9800',
                        margin: '12px',
                        borderRadius: '4px',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '10px',
                        fontSize: '12px',
                        color: '#ff9800',
                        lineHeight: '1.4'
                    }}>
                        <AlertTriangle size={16} style={{ flexShrink: 0 }} />
                        <span>运行时模式：属性修改将在停止后还原</span>
                    </div>
                )}

                <div className="inspector-content">
                    <div className="inspector-section">
                        <div className="section-title">基本信息</div>
                        <div className="property-field">
                            <label className="property-label">节点类型</label>
                            <span className="property-value-text">{node.template.type}</span>
                        </div>
                        <div className="property-field">
                            <label className="property-label">分类</label>
                            <span className="property-value-text">{node.template.category}</span>
                        </div>
                        {node.template.description && (
                            <div className="property-field">
                                <label className="property-label">描述</label>
                                <span className="property-value-text" style={{ color: '#999' }}>{node.template.description}</span>
                            </div>
                        )}
                        {node.template.className && (
                            <div className="property-field">
                                <label className="property-label">类名</label>
                                <span className="property-value-text" style={{ fontFamily: 'Consolas, Monaco, monospace', color: '#0e639c' }}>
                                    {node.template.className}
                                </span>
                            </div>
                        )}
                    </div>

                    {node.template.properties && node.template.properties.length > 0 && (
                        <div className="inspector-section">
                            <div className="section-title">属性</div>
                            <BehaviorTreeNodeProperties
                                key={node.id}
                                selectedNode={node}
                                onPropertyChange={handleNodePropertyChange}
                                projectPath={projectPath}
                            />
                        </div>
                    )}

                    {node.children.length > 0 && (
                        <div className="inspector-section">
                            <div className="section-title">子节点 ({node.children.length})</div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                                {node.children.map((childId, index) => {
                                    const childNode = nodes.find(n => n.id === childId);
                                    const ChildIcon = childNode?.template.icon ? (ICON_MAP as any)[childNode.template.icon] : Box;
                                    return (
                                        <div
                                            key={childId}
                                            className="child-node-item"
                                            style={{
                                                borderLeft: `3px solid ${childNode?.template.color || '#666'}`
                                            }}
                                        >
                                            <span className="child-node-index">{index + 1}.</span>
                                            {childNode && ChildIcon && (
                                                <ChildIcon size={14} style={{ color: childNode.template.color || '#999', flexShrink: 0 }} />
                                            )}
                                            <span className="child-node-name">
                                                {childNode?.template.displayName || childId}
                                            </span>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    )}

                    <div className="inspector-section">
                        <div className="section-title">调试信息</div>
                        <div className="property-field">
                            <label className="property-label">节点ID</label>
                            <span className="property-value-text" style={{ fontFamily: 'Consolas, Monaco, monospace', color: '#666', fontSize: '11px' }}>
                                {node.id}
                            </span>
                        </div>
                        <div className="property-field">
                            <label className="property-label">位置</label>
                            <span className="property-value-text" style={{ color: '#999' }}>
                                ({node.position.x.toFixed(0)}, {node.position.y.toFixed(0)})
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    if (!target) {
        return (
            <div className="entity-inspector">
                <div className="empty-inspector">
                    <FileSearch size={48} style={{ color: '#555', marginBottom: '16px' }} />
                    <div style={{ color: '#999', fontSize: '14px' }}>未选择对象</div>
                    <div style={{ color: '#666', fontSize: '12px', marginTop: '8px' }}>
                        选择实体或节点以查看详细信息
                    </div>
                </div>
            </div>
        );
    }

    if (target.type === 'behavior-tree-node') {
        return renderBehaviorTreeNode(target.data);
    }

    if (target.type === 'asset-file') {
        return renderAssetFile(target.data, target.content);
    }

    if (target.type === 'remote-entity') {
        const entity = target.data;
        const details = (target as any).details;

        return (
            <div className="entity-inspector">
                <div className="inspector-header">
                    <Settings size={16} />
                    <span className="entity-name">运行时实体 #{entity.id}</span>
                </div>

                <div className="inspector-content">
                    <div className="inspector-section">
                        <div className="section-title">基本信息</div>
                        <div className="property-field">
                            <label className="property-label">Entity ID</label>
                            <span className="property-value-text">{entity.id}</span>
                        </div>
                        <div className="property-field">
                            <label className="property-label">Enabled</label>
                            <span className="property-value-text">{entity.enabled ? 'true' : 'false'}</span>
                        </div>
                        {entity.name && (
                            <div className="property-field">
                                <label className="property-label">Name</label>
                                <span className="property-value-text">{entity.name}</span>
                            </div>
                        )}
                    </div>

                    {details && (
                        <div className="inspector-section">
                            <div className="section-title">组件详情</div>
                            {Object.entries(details).map(([key, value]) => renderRemoteProperty(key, value))}
                        </div>
                    )}
                </div>
            </div>
        );
    }

    if (target.type === 'entity') {
        const entity = target.data;

        return (
            <div className="entity-inspector">
                <div className="inspector-header">
                    <Settings size={16} />
                    <span className="entity-name">{entity.name || `Entity #${entity.id}`}</span>
                </div>

                <div className="inspector-content">
                    <div className="inspector-section">
                        <div className="section-title">基本信息</div>
                        <div className="property-field">
                            <label className="property-label">Entity ID</label>
                            <span className="property-value-text">{entity.id}</span>
                        </div>
                        <div className="property-field">
                            <label className="property-label">Enabled</label>
                            <span className="property-value-text">{entity.enabled ? 'true' : 'false'}</span>
                        </div>
                    </div>

                    {entity.components.length > 0 && (
                        <div className="inspector-section">
                            <div className="section-title">组件</div>
                            {entity.components.map((component: any, index: number) => {
                                const isExpanded = expandedComponents.has(index);
                                const componentName = component.constructor?.name || 'Component';

                                return (
                                    <div key={`${componentName}-${index}-${componentVersion}`} className="component-item">
                                        <div className="component-header" onClick={() => toggleComponentExpanded(index)}>
                                            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
                                            <span className="component-name">{componentName}</span>
                                            <button
                                                className="component-remove-btn"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    handleRemoveComponent(index);
                                                }}
                                                title="移除组件"
                                            >
                                                <X size={12} />
                                            </button>
                                        </div>

                                        {isExpanded && (
                                            <div className="component-properties">
                                                <PropertyInspector
                                                    component={component}
                                                    onChange={(propName: string, value: any) => handlePropertyChange(component, propName, value)}
                                                />
                                            </div>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    )}
                </div>
            </div>
        );
    }

    return null;
}