esengine/packages/editor-app/src/components/SceneHierarchy.tsx

import { useState, useEffect } from 'react';
import { Entity, Core } from '@esengine/ecs-framework';
import { EntityStoreService, MessageHub, SceneManagerService } from '@esengine/editor-core';
import { useLocale } from '../hooks/useLocale';
import { Box, Layers, Wifi, Search, Plus, Trash2 } from 'lucide-react';
import { ProfilerService, RemoteEntity } from '../services/ProfilerService';
import { confirm } from '@tauri-apps/plugin-dialog';
import '../styles/SceneHierarchy.css';

interface SceneHierarchyProps {
  entityStore: EntityStoreService;
  messageHub: MessageHub;
}

export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps) {
    const [entities, setEntities] = useState<Entity[]>([]);
    const [remoteEntities, setRemoteEntities] = useState<RemoteEntity[]>([]);
    const [isRemoteConnected, setIsRemoteConnected] = useState(false);
    const [selectedId, setSelectedId] = useState<number | null>(null);
    const [searchQuery, setSearchQuery] = useState('');
    const [sceneName, setSceneName] = useState<string>('Untitled');
    const [remoteSceneName, setRemoteSceneName] = useState<string | null>(null);
    const [sceneFilePath, setSceneFilePath] = useState<string | null>(null);
    const [isSceneModified, setIsSceneModified] = useState<boolean>(false);
    const { t, locale } = useLocale();

    // Subscribe to scene changes
    useEffect(() => {
        const sceneManager = Core.services.resolve(SceneManagerService);

        const updateSceneInfo = () => {
            if (sceneManager) {
                const state = sceneManager.getSceneState();
                setSceneName(state.sceneName);
                setIsSceneModified(state.isModified);
            }
        };

        updateSceneInfo();

        const unsubLoaded = messageHub.subscribe('scene:loaded', (data: any) => {
            if (data.sceneName) {
                setSceneName(data.sceneName);
                setSceneFilePath(data.path || null);
                setIsSceneModified(data.isModified || false);
            } else {
                updateSceneInfo();
            }
        });
        const unsubNew = messageHub.subscribe('scene:new', () => {
            updateSceneInfo();
        });
        const unsubSaved = messageHub.subscribe('scene:saved', () => {
            updateSceneInfo();
        });
        const unsubModified = messageHub.subscribe('scene:modified', () => {
            updateSceneInfo();
        });

        return () => {
            unsubLoaded();
            unsubNew();
            unsubSaved();
            unsubModified();
        };
    }, [messageHub]);

    // Subscribe to local entity changes
    useEffect(() => {
        const updateEntities = () => {
            setEntities(entityStore.getRootEntities());
        };

        const handleSelection = (data: { entity: Entity | null }) => {
            setSelectedId(data.entity?.id ?? null);
        };

        updateEntities();

        const unsubAdd = messageHub.subscribe('entity:added', updateEntities);
        const unsubRemove = messageHub.subscribe('entity:removed', updateEntities);
        const unsubClear = messageHub.subscribe('entities:cleared', updateEntities);
        const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);

        return () => {
            unsubAdd();
            unsubRemove();
            unsubClear();
            unsubSelect();
        };
    }, [entityStore, messageHub]);

    // Subscribe to remote entity data from ProfilerService
    useEffect(() => {
        const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;

        if (!profilerService) {
            return;
        }

        const initiallyConnected = profilerService.isConnected();
        setIsRemoteConnected(initiallyConnected);

        const unsubscribe = profilerService.subscribe((data) => {
            const connected = profilerService.isConnected();
            setIsRemoteConnected(connected);

            if (connected && data.entities && data.entities.length > 0) {
                // 只在实体列表发生实质性变化时才更新
                setRemoteEntities((prev) => {
                    if (prev.length !== data.entities!.length) {
                        return data.entities!;
                    }

                    // 检查实体ID和名称是否变化
                    const hasChanged = data.entities!.some((entity, index) => {
                        const prevEntity = prev[index];
                        return !prevEntity ||
                   prevEntity.id !== entity.id ||
                   prevEntity.name !== entity.name ||
                   prevEntity.componentCount !== entity.componentCount;
                    });

                    return hasChanged ? data.entities! : prev;
                });

                // 请求第一个实体的详情以获取场景名称
                if (!remoteSceneName && data.entities.length > 0 && data.entities[0]) {
                    profilerService.requestEntityDetails(data.entities[0].id);
                }
            } else if (!connected) {
                setRemoteEntities([]);
                setRemoteSceneName(null);
            }
        });

        return () => unsubscribe();
    }, [remoteSceneName]);

    // Listen for entity details to get remote scene name
    useEffect(() => {
        const handleEntityDetails = ((event: CustomEvent) => {
            const details = event.detail;
            if (details && details.sceneName) {
                setRemoteSceneName(details.sceneName);
            }
        }) as EventListener;

        window.addEventListener('profiler:entity-details', handleEntityDetails);
        return () => window.removeEventListener('profiler:entity-details', handleEntityDetails);
    }, []);

    const handleEntityClick = (entity: Entity) => {
        entityStore.selectEntity(entity);
    };

    const handleRemoteEntityClick = (entity: RemoteEntity) => {
        setSelectedId(entity.id);

        // 请求完整的实体详情（包含组件属性）
        const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
        if (profilerService) {
            profilerService.requestEntityDetails(entity.id);
        }

        // 先发布基本信息，详细信息稍后通过 ProfilerService 异步返回
        messageHub.publish('remote-entity:selected', {
            entity: {
                id: entity.id,
                name: entity.name,
                enabled: entity.enabled,
                componentCount: entity.componentCount,
                componentTypes: entity.componentTypes
            }
        });
    };

    const handleSceneNameClick = () => {
        if (sceneFilePath) {
            messageHub.publish('asset:reveal', { path: sceneFilePath });
        }
    };

    const handleCreateEntity = () => {
        const scene = Core.scene;
        if (!scene) return;

        const entityCount = entityStore.getAllEntities().length;
        const entityName = `Entity ${entityCount + 1}`;
        const entity = scene.createEntity(entityName);
        entityStore.addEntity(entity);
        entityStore.selectEntity(entity);
    };

    const handleDeleteEntity = async () => {
        if (!selectedId) return;

        const entity = entityStore.getEntity(selectedId);
        if (!entity) return;

        const confirmed = await confirm(
            locale === 'zh'
                ? `确定要删除实体 "${entity.name}" 吗？此操作无法撤销。`
                : `Are you sure you want to delete entity "${entity.name}"? This action cannot be undone.`,
            {
                title: locale === 'zh' ? '删除实体' : 'Delete Entity',
                kind: 'warning'
            }
        );

        if (confirmed) {
            entity.destroy();
            entityStore.removeEntity(entity);
        }
    };

    // Listen for Delete key
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === 'Delete' && selectedId && !isRemoteConnected) {
                handleDeleteEntity();
            }
        };

        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }, [selectedId, isRemoteConnected]);

    // Filter entities based on search query
    const filterRemoteEntities = (entityList: RemoteEntity[]): RemoteEntity[] => {
        if (!searchQuery.trim()) return entityList;

        const query = searchQuery.toLowerCase();
        return entityList.filter((entity) => {
            const name = entity.name;
            const id = entity.id.toString();

            // Search by name or ID
            if (name.toLowerCase().includes(query) || id.includes(query)) {
                return true;
            }

            // Search by component types
            if (Array.isArray(entity.componentTypes)) {
                return entity.componentTypes.some((type) =>
                    type.toLowerCase().includes(query)
                );
            }

            return false;
        });
    };

    const filterLocalEntities = (entityList: Entity[]): Entity[] => {
        if (!searchQuery.trim()) return entityList;

        const query = searchQuery.toLowerCase();
        return entityList.filter((entity) => {
            const id = entity.id.toString();
            return id.includes(query);
        });
    };

    // Determine which entities to display
    const displayEntities = isRemoteConnected
        ? filterRemoteEntities(remoteEntities)
        : filterLocalEntities(entities);
    const showRemoteIndicator = isRemoteConnected && remoteEntities.length > 0;
    const displaySceneName = isRemoteConnected && remoteSceneName ? remoteSceneName : sceneName;

    return (
        <div className="scene-hierarchy">
            <div className="hierarchy-header">
                <Layers size={16} className="hierarchy-header-icon" />
                <h3>{t('hierarchy.title')}</h3>
                <div
                    className={`scene-name-container ${!isRemoteConnected && sceneFilePath ? 'clickable' : ''}`}
                    onClick={!isRemoteConnected ? handleSceneNameClick : undefined}
                    title={!isRemoteConnected && sceneFilePath ? `${displaySceneName} - 点击跳转到文件` : displaySceneName}
                >
                    <span className="scene-name">
                        {displaySceneName}{!isRemoteConnected && isSceneModified ? '*' : ''}
                    </span>
                </div>
                {showRemoteIndicator && (
                    <div className="remote-indicator" title="Showing remote entities">
                        <Wifi size={12} />
                    </div>
                )}
            </div>
            <div className="hierarchy-search">
                <Search size={14} />
                <input
                    type="text"
                    placeholder={t('hierarchy.search') || 'Search entities...'}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                />
            </div>
            {!isRemoteConnected && (
                <div className="hierarchy-toolbar">
                    <button
                        className="toolbar-btn"
                        onClick={handleCreateEntity}
                        title={locale === 'zh' ? '创建实体' : 'Create Entity'}
                    >
                        <Plus size={14} />
                        <span>{locale === 'zh' ? '创建实体' : 'Create Entity'}</span>
                    </button>
                    <button
                        className="toolbar-btn"
                        onClick={handleDeleteEntity}
                        disabled={!selectedId}
                        title={locale === 'zh' ? '删除实体' : 'Delete Entity'}
                    >
                        <Trash2 size={14} />
                    </button>
                </div>
            )}
            <div className="hierarchy-content scrollable">
                {displayEntities.length === 0 ? (
                    <div className="empty-state">
                        <Box size={48} strokeWidth={1.5} className="empty-icon" />
                        <div className="empty-title">{t('hierarchy.empty')}</div>
                        <div className="empty-hint">
                            {isRemoteConnected
                                ? 'No entities in remote game'
                                : 'Create an entity to get started'}
                        </div>
                    </div>
                ) : isRemoteConnected ? (
                    <ul className="entity-list">
                        {(displayEntities as RemoteEntity[]).map((entity) => (
                            <li
                                key={entity.id}
                                className={`entity-item remote-entity ${selectedId === entity.id ? 'selected' : ''} ${!entity.enabled ? 'disabled' : ''}`}
                                title={`${entity.name} - ${entity.componentTypes.join(', ')}`}
                                onClick={() => handleRemoteEntityClick(entity)}
                            >
                                <Box size={14} className="entity-icon" />
                                <span className="entity-name">{entity.name}</span>
                                {entity.tag !== 0 && (
                                    <span className="entity-tag" title={`Tag: ${entity.tag}`}>
                    #{entity.tag}
                                    </span>
                                )}
                                {entity.componentCount > 0 && (
                                    <span className="component-count">{entity.componentCount}</span>
                                )}
                            </li>
                        ))}
                    </ul>
                ) : (
                    <ul className="entity-list">
                        {entities.map((entity) => (
                            <li
                                key={entity.id}
                                className={`entity-item ${selectedId === entity.id ? 'selected' : ''}`}
                                onClick={() => handleEntityClick(entity)}
                            >
                                <Box size={14} className="entity-icon" />
                                <span className="entity-name">Entity {entity.id}</span>
                            </li>
                        ))}
                    </ul>
                )}
            </div>
        </div>
    );
}