/**
 * 实时无人机飞行轨迹显示系统
 * 连接后端WebSocket接收实时数据并在Cesium中显示
 * 参考trajectory-playback.js和app.js的实现
 */

class RealTimeTrajectoryViewer {
    constructor() {
        // Cesium 相关
        this.viewer = null;
        this.droneEntity = null;
        this.cameraDirection = null; // 相机中心视角方向箭头
        this.cameraFrustum = null; // 相机视锥
        this.trajectoryEntity = null;
        this.trajectoryPoints = [];
        this.positionMarkers = [];
        
        // WebSocket 连接
        this.statusSocket = null;
        this.videoSocket = null;
        this.isConnected = false;
        this.isVideoConnected = false;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 10;
        
        // 无人机状态数据 - 参考app.js结构
        this.currentDroneStatus = {
            device_sn: '',
            position: { latitude: 0, longitude: 0, altitude: 0 },
            attitude: { heading: 0, pitch: 0, roll: 0 },
            gimbalAttitude: { pitch: 0, roll: 0, yaw: 0 },
            isOnline: false,
            batteryLevel: 0,
            timestamp: 0
        };
        
        // 视频帧相关
        this.currentVideoFrame = null;
        this.videoTexture = null;
        
        // 状态标记
        this.firstDataReceived = false; // 是否已接收到第一个数据
        this.firstVideoFrameReceived = false; // 是否已接收到第一个视频帧
        
        // 相机参数 (基于DJI相机的典型参数)
        this.cameraParams = {
            fov: 84.0,      // 对角视场角度
            hfov: 84.0,     // 水平视场角度
            vfov: 53.0,     // 垂直视场角度（基于16:9宽高比计算）
            aspectRatio: 16/9,
            nearDistance: 1.0,
            farDistance: 500.0,
            projectionDistance: 25.0  // 固定投影距离（米）
        };
        
        // 配置参数
        this.config = {
            websocketHost: window.location.hostname || 'localhost',
            statusPort: 8765,
            videoPort: 8766,
            reconnectInterval: 3000,
            trajectoryMaxPoints: 1000,
            droneModelScale: 2.0
        };
    }
    
    /**
     * 初始化系统
     */
    async init() {
        try {
            await this.initCesium();
            await this.connectWebSockets();
            this.setupUI();
            this.hideLoading();
            
            console.log('✅ 实时轨迹显示系统初始化完成');
        } catch (error) {
            console.error('❌ 系统初始化失败:', error);
            this.showError('系统初始化失败: ' + error.message);
        }
    }
    
    /**
     * 初始化Cesium场景
     */
    async initCesium() {
        // 创建Cesium viewer - 参考trajectory-playback.js配置
        this.viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
            shadows: true,
            homeButton: false,
            sceneModePicker: false,
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            timeline: false,
            fullscreenButton: false,
            vrButton: false,
            geocoder: false,
            infoBox: false,
            selectionIndicator: false
        });
        
        // 禁用默认的相机控制器行为
        this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        
        // 设置相机初始位置 (西安上空)
        this.viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(108.9398, 34.3416, 5000),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-45),
                roll: 0.0
            }
        });
        
        // 创建无人机实体和相关显示元素
        this.createDroneEntity();
        
        console.log('✅ Cesium场景初始化完成');
    }
    
    /**
     * 创建无人机实体 - 参考trajectory-playback.js实现
     */
    createDroneEntity() {
        this.droneEntity = this.viewer.entities.add({
            name: '无人机',
            position: Cesium.Cartesian3.fromDegrees(0, 0, 0),
            point: {
                pixelSize: 15,
                color: Cesium.Color.YELLOW,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                heightReference: Cesium.HeightReference.NONE,
                show: true
            },
            label: {
                text: '🚁',
                font: '16px sans-serif',
                fillColor: Cesium.Color.WHITE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                pixelOffset: new Cesium.Cartesian2(0, -30),
                showBackground: true,
                backgroundColor: Cesium.Color.BLACK.withAlpha(0.7)
            }
        });

        // 创建相机中心视角方向箭头
        this.createCameraDirection();
        this.createCameraFrustum();
    }

    /**
     * 创建相机中心视角方向箭头 - 参考trajectory-playback.js实现
     */
    createCameraDirection() {
        const arrowLength = 15.0; // 箭头长度
        const arrowWidth = 3.0;   // 箭头线宽

        // 创建红色箭头表示相机中心视角方向
        this.cameraDirection = this.viewer.entities.add({
            name: '相机视角方向',
            polyline: {
                positions: [
                    Cesium.Cartesian3.fromDegrees(0, 0, 0),
                    Cesium.Cartesian3.fromDegrees(0, 0, 0)
                ],
                width: arrowWidth,
                material: Cesium.Color.RED,
                clampToGround: false,
                show: true
            }
        });
    }

    /**
     * 创建相机视锥 - 参考trajectory-playback.js实现
     */
    createCameraFrustum() {
        // 相机视锥参数 - 使用统一的cameraParams配置
        const fovHorizontal = Cesium.Math.toRadians(this.cameraParams.hfov); // 水平视场角
        const fovVertical = Cesium.Math.toRadians(this.cameraParams.vfov);   // 垂直视场角

        // 创建视锥线框实体
        this.cameraFrustum = {
            fovHorizontal: fovHorizontal,
            fovVertical: fovVertical,
            lines: this.viewer.entities.add({
                name: '相机视锥线框',
                polyline: {
                    positions: [],
                    width: 2,
                    material: Cesium.Color.YELLOW,
                    clampToGround: false,
                    show: true
                }
            }),
            surface: this.viewer.entities.add({
                name: '相机视锥表面',
                polygon: {
                    hierarchy: new Cesium.PolygonHierarchy([]),
                    material: Cesium.Color.YELLOW.withAlpha(0.3),
                    outline: false,  // 禁用轮廓线以避免与视频帧图像产生闪烁冲突
                    fill: true,
                    show: true,
                    heightReference: Cesium.HeightReference.NONE,
                    extrudedHeight: 0
                }
            })
        };
    }
    
    /**
     * 连接WebSocket服务器
     */
    async connectWebSockets() {
        await Promise.all([
            this.connectStatusWebSocket(),
            this.connectVideoWebSocket()
        ]);
    }
    
    /**
     * 连接状态数据WebSocket - 参考app.js实现
     */
    async connectStatusWebSocket() {
        return new Promise((resolve) => {
            const wsUrl = `ws://${this.config.websocketHost}:${this.config.statusPort}`;
            console.log(`📡 连接状态WebSocket: ${wsUrl}`);
            
            this.statusSocket = new WebSocket(wsUrl);
            
            this.statusSocket.onopen = () => {
                console.log('✅ 状态WebSocket连接成功');
                this.reconnectAttempts = 0;
                this.isConnected = true;
                this.updateConnectionStatus(true);
                resolve();
            };
            
            this.statusSocket.onmessage = (event) => {
                try {
                    const message = JSON.parse(event.data);
                    console.log('📨 收到状态WebSocket消息:', message.type);
                    this.handleStatusMessage(message);
                } catch (error) {
                    console.error('解析状态消息失败:', error);
                }
            };
            
            this.statusSocket.onclose = (event) => {
                console.log('🔌 状态WebSocket连接断开', event.code, event.reason);
                this.isConnected = false;
                this.updateConnectionStatus(false);
                if (!event.wasClean) {
                    this.scheduleReconnect('status');
                }
            };
            
            this.statusSocket.onerror = (error) => {
                console.error('❌ 状态WebSocket错误:', error);
                resolve(); // 即使连接失败也继续
            };
        });
    }
    
    /**
     * 连接视频流WebSocket - 参考app.js实现
     */
    async connectVideoWebSocket() {
        return new Promise((resolve) => {
            const wsUrl = `ws://${this.config.websocketHost}:${this.config.videoPort}`;
            console.log(`📺 连接视频WebSocket: ${wsUrl}`);
            
            this.videoSocket = new WebSocket(wsUrl);
            
            this.videoSocket.onopen = () => {
                console.log('✅ 视频WebSocket连接成功');
                this.isVideoConnected = true;
                resolve();
            };
            
            this.videoSocket.onmessage = (event) => {
                try {
                    const message = JSON.parse(event.data);
                    console.log('📨 收到视频WebSocket消息:', message.type);
                    this.handleVideoMessage(message);
                } catch (error) {
                    console.error('解析视频消息失败:', error);
                }
            };
            
            this.videoSocket.onclose = (event) => {
                console.log('🔌 视频WebSocket连接断开', event.code, event.reason);
                this.isVideoConnected = false;
                if (!event.wasClean) {
                    this.scheduleReconnect('video');
                }
            };
            
            this.videoSocket.onerror = (error) => {
                console.error('❌ 视频WebSocket错误:', error);
                resolve(); // 即使连接失败也继续
            };
        });
    }
    
    /**
     * 处理状态消息 - 参考app.js实现
     */
    handleStatusMessage(message) {
        console.log('📨 处理状态消息:', message.type, message.data ? Object.keys(message.data) : 'no data');
        
        // 第一次接收到任何状态数据时隐藏加载动画
        if (!this.firstDataReceived) {
            this.firstDataReceived = true;
            this.hideLoading();
            console.log('✅ 首次接收到状态数据，隐藏加载动画');
        }
        
        switch (message.type) {
            case 'connection_status':
                console.log('📡 连接状态:', message.data);
                break;
            case 'drone_status':
                this.updateDroneStatus(message.data);
                break;
            case 'coordinates':
                this.updateDronePosition(message.data);
                break;
            case 'gimbal_attitude':
                this.updateGimbalAttitude(message.data);
                break;
            case 'error':
                console.error('服务器错误:', message.data);
                break;
            default:
                console.log('未知状态消息类型:', message.type);
        }
    }
    
    /**
     * 处理视频消息 - 参考app.js实现
     */
    handleVideoMessage(message) {
        console.log('📨 处理视频消息:', message.type);
        
        switch (message.type) {
            case 'video_frame':
                console.log('🎥 收到视频帧，frame大小:', message.data.frame ? message.data.frame.length : 'no frame');
                this.updateVideoFrame(message.data);
                break;
            case 'connection_established':
                console.log('📺 视频连接已建立');
                break;
            case 'stats':
                console.log('📊 视频服务器统计:', message.data);
                break;
            default:
                console.log('未知视频消息类型:', message.type);
        }
    }
    
    /**
     * 更新无人机状态
     */
    updateDroneStatus(data) {
        this.currentDroneStatus.device_sn = data.device_sn || '';
        this.currentDroneStatus.isOnline = data.is_online || false;
        this.currentDroneStatus.batteryLevel = data.battery_level || 0;
        this.currentDroneStatus.timestamp = data.timestamp || Date.now() / 1000;
        
        // 更新UI
        this.updateStatusDisplay();
        
        console.log(`🚁 无人机状态更新: ${data.device_sn}, 在线: ${data.is_online}`);
    }
    
    /**
     * 更新无人机位置 - 参考app.js结构
     */
    updateDronePosition(data) {
        if (!data.coordinates) return;
        
        const coords = data.coordinates;
        console.log('📍 位置更新:', coords);
        
        // 验证坐标数据有效性
        if (!coords || 
            !isFinite(coords.latitude) || !isFinite(coords.longitude) || !isFinite(coords.altitude)) {
            console.warn('接收到无效的坐标数据，跳过位置更新:', coords);
            return;
        }
        
        // 第一次接收到数据时隐藏加载动画
        if (!this.firstDataReceived) {
            this.firstDataReceived = true;
            this.hideLoading();
            console.log('✅ 首次接收到数据，隐藏加载动画');
        }
        
        this.currentDroneStatus.position = {
            latitude: coords.latitude,
            longitude: coords.longitude,
            altitude: coords.altitude
        };
        this.currentDroneStatus.attitude = {
            heading: isFinite(coords.heading) ? coords.heading : 0,
            pitch: isFinite(coords.pitch) ? coords.pitch : 0,
            roll: isFinite(coords.roll) ? coords.roll : 0
        };
        
        // 添加轨迹点
        this.addTrajectoryPoint();
        
        // 更新无人机位置显示
        this.updateDroneEntity();
        
        // 更新相机方向箭头
        this.updateCameraDirection();
        
        // 更新相机视锥
        this.updateCameraFrustum();
        
        // 不再自动更新相机视角，允许用户自由控制
        // this.updateCameraView();
        
        // 更新UI显示
        this.updateInfoPanel();
        
        console.log(`📍 位置更新完成: (${coords.latitude.toFixed(6)}, ${coords.longitude.toFixed(6)}, ${coords.altitude.toFixed(1)}m)`);
    }
    
    /**
     * 更新云台姿态 - 参考app.js实现
     */
    updateGimbalAttitude(data) {
        if (!data.gimbal_attitude) return;
        
        const gimbal = data.gimbal_attitude;
        console.log('📹 云台姿态更新:', gimbal);
        
        // 验证云台姿态数据有效性
        if (!gimbal) {
            console.warn('接收到空的云台姿态数据');
            return;
        }
        
        this.currentDroneStatus.gimbalAttitude = {
            pitch: isFinite(gimbal.pitch) ? gimbal.pitch : 0,
            roll: isFinite(gimbal.roll) ? gimbal.roll : 0,
            yaw: isFinite(gimbal.yaw) ? gimbal.yaw : 0
        };
        
        // 更新相机方向箭头
        this.updateCameraDirection();
        
        // 更新视锥投影
        this.updateCameraFrustum();
        
        const pitchValue = isFinite(gimbal.pitch) ? gimbal.pitch.toFixed(1) : '0.0';
        const yawValue = isFinite(gimbal.yaw) ? gimbal.yaw.toFixed(1) : '0.0';
        console.log(`📐 云台姿态更新完成: pitch=${pitchValue}°, yaw=${yawValue}°`);
    }
    
    /**
     * 更新视频帧
     */
    updateVideoFrame(data) {
        if (!data.frame) return;
        
        // 第一次接收到视频帧时自动定位相机到无人机附近
        if (!this.firstVideoFrameReceived) {
            this.firstVideoFrameReceived = true;
            console.log('✅ 首次接收到视频帧，检查是否需要自动定位相机');
            
            // 如果有有效的无人机位置，则自动定位相机
            const position = this.currentDroneStatus.position;
            if (position && 
                isFinite(position.latitude) && isFinite(position.longitude) && isFinite(position.altitude) &&
                !(position.latitude === 0 && position.longitude === 0)) {
                this.flyToInitialDronePosition(position);
                console.log('✅ 基于视频帧触发相机自动定位到无人机位置');
            }
        }
        
        this.currentVideoFrame = {
            data: data.frame,
            timestamp: data.timestamp,
            width: data.width,
            height: data.height,
            format: data.format
        };
        
        // 更新视频预览
        this.updateVideoPreview();
        
        // 更新视频投影
        this.updateVideoProjection();
        
        console.log(`🎥 视频帧更新: ${data.width}x${data.height}, ${data.frame.length} bytes`);
    }
    
    /**
     * 添加轨迹点
     */
    addTrajectoryPoint() {
        const position = this.currentDroneStatus.position;
        
        // 验证位置数据
        if (!position || 
            !isFinite(position.latitude) || !isFinite(position.longitude) || !isFinite(position.altitude) ||
            position.latitude === 0 && position.longitude === 0) {
            console.warn('跳过无效位置的轨迹点添加:', position);
            return;
        }
        
        const cartesian = Cesium.Cartesian3.fromDegrees(
            position.longitude,
            position.latitude,
            position.altitude
        );
        
        // 验证计算出的笛卡尔坐标
        if (!cartesian || !isFinite(cartesian.x) || !isFinite(cartesian.y) || !isFinite(cartesian.z)) {
            console.warn('跳过无效笛卡尔坐标的轨迹点:', cartesian);
            return;
        }
        
        this.trajectoryPoints.push(cartesian);
        
        // 限制轨迹点数量
        if (this.trajectoryPoints.length > this.config.trajectoryMaxPoints) {
            this.trajectoryPoints.shift();
            // 同时移除对应的位置标记
            if (this.positionMarkers.length > 0) {
                const oldMarker = this.positionMarkers.shift();
                this.viewer.entities.remove(oldMarker);
            }
        }
        
        // 创建位置标记
        const marker = this.viewer.entities.add({
            position: cartesian,
            point: {
                pixelSize: 8,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.DARKRED,
                outlineWidth: 2,
                heightReference: Cesium.HeightReference.NONE  // 使用绝对高度，与轨迹线保持一致
            }
        });
        this.positionMarkers.push(marker);
        
        // 更新轨迹线
        this.updateTrajectoryLine();
    }
    
    /**
     * 更新轨迹线
     */
    updateTrajectoryLine() {
        if (this.trajectoryPoints.length < 2) return;
        
        // 过滤掉无效的轨迹点
        const validTrajectoryPoints = this.trajectoryPoints.filter(point => {
            return point && isFinite(point.x) && isFinite(point.y) && isFinite(point.z);
        });
        
        if (validTrajectoryPoints.length < 2) {
            console.warn('有效轨迹点不足，跳过轨迹线更新');
            return;
        }
        
        if (this.trajectoryEntity) {
            this.viewer.entities.remove(this.trajectoryEntity);
        }
        
        try {
            this.trajectoryEntity = this.viewer.entities.add({
                polyline: {
                    positions: validTrajectoryPoints,
                    width: 3,
                    material: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.RED,
                        dashLength: 16.0,
                        dashPattern: 255
                    }),
                    clampToGround: false
                }
            });
        } catch (error) {
            console.error('创建轨迹线失败:', error);
        }
    }
    
    /**
     * 更新无人机实体
     */
    updateDroneEntity() {
        const position = this.currentDroneStatus.position;
        const attitude = this.currentDroneStatus.attitude;
        
        if (position.latitude === 0 && position.longitude === 0) return;
        
        const cartesian = Cesium.Cartesian3.fromDegrees(
            position.longitude,
            position.latitude,
            position.altitude
        );
        
        // 更新无人机位置
        this.droneEntity.position = cartesian;
        
        // 更新标签文本
        if (this.droneEntity.label) {
            this.droneEntity.label.text = `🚁 GIS小丸子一号`;
        }
        
        // 设置无人机姿态
        this.droneEntity.orientation = Cesium.Transforms.headingPitchRollQuaternion(
            cartesian,
            new Cesium.HeadingPitchRoll(
                Cesium.Math.toRadians(attitude.heading),
                Cesium.Math.toRadians(attitude.pitch),
                Cesium.Math.toRadians(attitude.roll)
            )
        );
    }

    /**
     * 更新相机方向箭头 - 参考trajectory-playback.js实现
     */
    updateCameraDirection() {
        if (!this.cameraDirection) return;
        
        const position = this.currentDroneStatus.position;
        const gimbalAttitude = this.currentDroneStatus.gimbalAttitude;
        
        if (position.latitude === 0 && position.longitude === 0) return;
        
        const droneCartesian = Cesium.Cartesian3.fromDegrees(
            position.longitude,
            position.latitude,
            position.altitude
        );

        const arrowLength = 15.0;
        
        // 获取云台的绝对姿态角度（转换为弧度）
        // NED坐标系：X轴指向北(Roll轴)，Y轴指向东(Pitch轴)，Z轴指向下(Yaw轴)
        const yaw = Cesium.Math.toRadians(gimbalAttitude.yaw || 0);     // 绕Z轴旋转（向下轴）
        const pitch = Cesium.Math.toRadians(gimbalAttitude.pitch || 0); // 绕Y轴旋转（向东轴）
        const roll = Cesium.Math.toRadians(gimbalAttitude.roll || 0);   // 绕X轴旋转（向北轴）

        // 在NED坐标系中，相机初始朝向为X轴正方向（向北）
        const nedForward = new Cesium.Cartesian3(arrowLength, 0, 0); // NED坐标系中的初始朝向（向北）

        // 创建NED坐标系的旋转矩阵：
        // 1. 先绕X轴旋转roll角（横滚）
        // 2. 再绕Y轴旋转pitch角（俯仰）
        // 3. 最后绕Z轴旋转yaw角（偏航）
        const rollMatrix = Cesium.Matrix3.fromRotationX(roll);
        const pitchMatrix = Cesium.Matrix3.fromRotationY(pitch);
        const yawMatrix = Cesium.Matrix3.fromRotationZ(yaw);

        // 组合旋转矩阵：按照Roll->Pitch->Yaw的顺序
        let rotationMatrix = Cesium.Matrix3.multiply(pitchMatrix, rollMatrix, new Cesium.Matrix3());
        rotationMatrix = Cesium.Matrix3.multiply(yawMatrix, rotationMatrix, rotationMatrix);

        // 应用旋转变换到相机朝向向量
        const rotatedNEDForward = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedForward, new Cesium.Cartesian3());

        // 将NED坐标系转换为ENU坐标系（Cesium使用的坐标系）
        // NED -> ENU: X(北) -> Y(北), Y(东) -> X(东), Z(下) -> -Z(上)
        const enuForward = new Cesium.Cartesian3(
            rotatedNEDForward.y,  // NED的Y(东) -> ENU的X(东)
            rotatedNEDForward.x,  // NED的X(北) -> ENU的Y(北)
            -rotatedNEDForward.z  // NED的Z(下) -> ENU的-Z(上)
        );

        // 转换到地球固定坐标系
        const transform = Cesium.Transforms.eastNorthUpToFixedFrame(droneCartesian);
        const worldDirection = Cesium.Matrix4.multiplyByPointAsVector(transform, enuForward, new Cesium.Cartesian3());

        // 计算箭头终点位置
        const endPosition = Cesium.Cartesian3.add(droneCartesian, worldDirection, new Cesium.Cartesian3());

        // 验证计算结果的有效性
        if (!endPosition || !isFinite(endPosition.x) || !isFinite(endPosition.y) || !isFinite(endPosition.z)) {
            console.warn('相机方向箭头终点坐标无效，跳过更新:', endPosition);
            return;
        }

        // 更新箭头位置
        try {
            this.cameraDirection.polyline.positions = [droneCartesian, endPosition];
        } catch (error) {
            console.error('更新相机方向箭头失败:', error);
        }
    }

    /**
     * 更新相机视锥 - 固定在25米距离的平面上
     */
    updateCameraFrustum() {
        if (!this.cameraFrustum) return;
        
        const position = this.currentDroneStatus.position;
        const gimbalAttitude = this.currentDroneStatus.gimbalAttitude;
        
        // 验证位置数据有效性
        if (!position || 
            !isFinite(position.latitude) || !isFinite(position.longitude) || !isFinite(position.altitude) ||
            position.latitude === 0 && position.longitude === 0) {
            console.warn('无效的位置数据，跳过视锥更新:', position);
            return;
        }
        
        // 验证云台姿态数据有效性
        if (!gimbalAttitude) {
            console.warn('缺少云台姿态数据，跳过视锥更新');
            return;
        }
        
        // 确保角度值有效，如果无效则使用默认值0
        const yawValue = isFinite(gimbalAttitude.yaw) ? gimbalAttitude.yaw : 0;
        const pitchValue = isFinite(gimbalAttitude.pitch) ? gimbalAttitude.pitch : 0;
        const rollValue = isFinite(gimbalAttitude.roll) ? gimbalAttitude.roll : 0;
        
        const droneCartesian = Cesium.Cartesian3.fromDegrees(
            position.longitude,
            position.latitude,
            position.altitude
        );

        // 验证计算出的笛卡尔坐标
        if (!droneCartesian || !isFinite(droneCartesian.x) || !isFinite(droneCartesian.y) || !isFinite(droneCartesian.z)) {
            console.warn('无效的无人机笛卡尔坐标，跳过视锥更新:', droneCartesian);
            return;
        }

        // 获取云台的绝对姿态角度（转换为弧度）
        const yaw = Cesium.Math.toRadians(yawValue);
        const pitch = Cesium.Math.toRadians(pitchValue);
        const roll = Cesium.Math.toRadians(rollValue);

        // 视锥参数
        const hfov = this.cameraParams.hfov || 84.0; // 默认水平视场角
        const vfov = this.cameraParams.vfov || 53.0; // 默认垂直视场角
        
        // 验证视场角参数
        if (!isFinite(hfov) || !isFinite(vfov) || hfov <= 0 || vfov <= 0) {
            console.warn('无效的视场角参数，跳过视锥更新:', { hfov, vfov });
            return;
        }
        
        const fovHorizontal = Cesium.Math.toRadians(hfov);
        const fovVertical = Cesium.Math.toRadians(vfov);
        const halfFovH = fovHorizontal / 2;
        const halfFovV = fovVertical / 2;
        
        // 验证计算出的角度值
        if (!isFinite(halfFovH) || !isFinite(halfFovV)) {
            console.warn('无效的半视场角计算结果，跳过视锥更新:', { halfFovH, halfFovV });
            return;
        }

        // 使用配置的投影距离
        const projectionDistance = this.cameraParams.projectionDistance || 25.0;

        // 在NED坐标系中定义视锥的四个方向向量（归一化）
        const nedTopLeft = new Cesium.Cartesian3(1, -Math.tan(halfFovH), -Math.tan(halfFovV));
        const nedTopRight = new Cesium.Cartesian3(1, Math.tan(halfFovH), -Math.tan(halfFovV));
        const nedBottomLeft = new Cesium.Cartesian3(1, -Math.tan(halfFovH), Math.tan(halfFovV));
        const nedBottomRight = new Cesium.Cartesian3(1, Math.tan(halfFovH), Math.tan(halfFovV));

        // 验证NED向量的有效性
        const nedVectors = [nedTopLeft, nedTopRight, nedBottomLeft, nedBottomRight];
        for (const vector of nedVectors) {
            if (!vector || !isFinite(vector.x) || !isFinite(vector.y) || !isFinite(vector.z)) {
                console.warn('无效的NED方向向量，跳过视锥更新:', vector);
                return;
            }
        }

        // 归一化方向向量
        Cesium.Cartesian3.normalize(nedTopLeft, nedTopLeft);
        Cesium.Cartesian3.normalize(nedTopRight, nedTopRight);
        Cesium.Cartesian3.normalize(nedBottomLeft, nedBottomLeft);
        Cesium.Cartesian3.normalize(nedBottomRight, nedBottomRight);
        
        // 验证归一化后的向量
        for (const vector of nedVectors) {
            if (!vector || !isFinite(vector.x) || !isFinite(vector.y) || !isFinite(vector.z)) {
                console.warn('归一化后的NED向量无效，跳过视锥更新:', vector);
                return;
            }
        }

        // 创建旋转矩阵
        const rollMatrix = Cesium.Matrix3.fromRotationX(roll);
        const pitchMatrix = Cesium.Matrix3.fromRotationY(pitch);
        const yawMatrix = Cesium.Matrix3.fromRotationZ(yaw);

        let rotationMatrix = Cesium.Matrix3.multiply(pitchMatrix, rollMatrix, new Cesium.Matrix3());
        rotationMatrix = Cesium.Matrix3.multiply(yawMatrix, rotationMatrix, rotationMatrix);

        // 验证旋转矩阵的有效性
        if (!rotationMatrix || rotationMatrix.toString().includes('NaN')) {
            console.warn('无效的旋转矩阵，跳过视锥更新:', rotationMatrix);
            return;
        }

        // 应用旋转到方向向量
        const rotatedTopLeft = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedTopLeft, new Cesium.Cartesian3());
        const rotatedTopRight = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedTopRight, new Cesium.Cartesian3());
        const rotatedBottomLeft = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedBottomLeft, new Cesium.Cartesian3());
        const rotatedBottomRight = Cesium.Matrix3.multiplyByVector(rotationMatrix, nedBottomRight, new Cesium.Cartesian3());

        // 验证旋转后的向量
        const rotatedVectors = [rotatedTopLeft, rotatedTopRight, rotatedBottomLeft, rotatedBottomRight];
        for (const vector of rotatedVectors) {
            if (!vector || !isFinite(vector.x) || !isFinite(vector.y) || !isFinite(vector.z)) {
                console.warn('旋转后的方向向量无效，跳过视锥更新:', vector);
                return;
            }
        }

        // 转换到ENU坐标系
        const enuTopLeft = new Cesium.Cartesian3(rotatedTopLeft.y, rotatedTopLeft.x, -rotatedTopLeft.z);
        const enuTopRight = new Cesium.Cartesian3(rotatedTopRight.y, rotatedTopRight.x, -rotatedTopRight.z);
        const enuBottomLeft = new Cesium.Cartesian3(rotatedBottomLeft.y, rotatedBottomLeft.x, -rotatedBottomLeft.z);
        const enuBottomRight = new Cesium.Cartesian3(rotatedBottomRight.y, rotatedBottomRight.x, -rotatedBottomRight.z);

        // 转换到地球固定坐标系
        const transform = Cesium.Transforms.eastNorthUpToFixedFrame(droneCartesian);
        
        const worldTopLeft = Cesium.Matrix4.multiplyByPointAsVector(transform, enuTopLeft, new Cesium.Cartesian3());
        const worldTopRight = Cesium.Matrix4.multiplyByPointAsVector(transform, enuTopRight, new Cesium.Cartesian3());
        const worldBottomLeft = Cesium.Matrix4.multiplyByPointAsVector(transform, enuBottomLeft, new Cesium.Cartesian3());
        const worldBottomRight = Cesium.Matrix4.multiplyByPointAsVector(transform, enuBottomRight, new Cesium.Cartesian3());

        // 验证世界坐标系向量的有效性
        const worldVectors = [worldTopLeft, worldTopRight, worldBottomLeft, worldBottomRight];
        for (const vector of worldVectors) {
            if (!vector || !isFinite(vector.x) || !isFinite(vector.y) || !isFinite(vector.z)) {
                console.warn('世界坐标系方向向量无效，跳过视锥更新:', vector);
                return;
            }
        }

        // 计算固定距离25米处的投影平面四个角点
        const projectionTopLeft = Cesium.Cartesian3.add(droneCartesian, 
            Cesium.Cartesian3.multiplyByScalar(worldTopLeft, projectionDistance, new Cesium.Cartesian3()), 
            new Cesium.Cartesian3());
        const projectionTopRight = Cesium.Cartesian3.add(droneCartesian, 
            Cesium.Cartesian3.multiplyByScalar(worldTopRight, projectionDistance, new Cesium.Cartesian3()), 
            new Cesium.Cartesian3());
        const projectionBottomLeft = Cesium.Cartesian3.add(droneCartesian, 
            Cesium.Cartesian3.multiplyByScalar(worldBottomLeft, projectionDistance, new Cesium.Cartesian3()), 
            new Cesium.Cartesian3());
        const projectionBottomRight = Cesium.Cartesian3.add(droneCartesian, 
            Cesium.Cartesian3.multiplyByScalar(worldBottomRight, projectionDistance, new Cesium.Cartesian3()), 
            new Cesium.Cartesian3());
            
        // 验证计算结果
        const frustumPoints = [projectionTopLeft, projectionTopRight, projectionBottomLeft, projectionBottomRight];
        for (const point of frustumPoints) {
            if (!point || !isFinite(point.x) || !isFinite(point.y) || !isFinite(point.z)) {
                console.warn('视锥投影平面计算结果包含无效坐标，跳过更新');
                return;
            }
        }

        // 创建视锥线框（从无人机到投影平面四个角点）
        const frustumLines = [
            // 从相机中心到投影平面四个角点的射线
            droneCartesian, projectionTopLeft,
            droneCartesian, projectionTopRight,
            droneCartesian, projectionBottomLeft,
            droneCartesian, projectionBottomRight,
            // 投影平面四条边
            projectionTopLeft, projectionTopRight,      // 顶边
            projectionTopRight, projectionBottomRight,  // 右边
            projectionBottomRight, projectionBottomLeft, // 底边
            projectionBottomLeft, projectionTopLeft     // 左边
        ];

        // 更新线框
        this.cameraFrustum.lines.polyline.positions = frustumLines;

        // 创建投影平面表面 - 按正确顺序排列顶点
        const frustumSurface = [
            projectionBottomLeft, projectionTopLeft, projectionTopRight, projectionBottomRight
        ];

        // 验证投影平面顶点的有效性
        for (const point of frustumSurface) {
            if (!point || !isFinite(point.x) || !isFinite(point.y) || !isFinite(point.z)) {
                console.warn('投影平面顶点无效，跳过表面更新:', point);
                return;
            }
        }

        // 更新表面
        this.cameraFrustum.surface.polygon.hierarchy = new Cesium.PolygonHierarchy(frustumSurface);
        
        console.log(`✅ 固定${projectionDistance}米距离投影平面视锥更新完成 - 顶点:`, frustumSurface.length);
    }



    /**
     * 更新视频帧投影到固定25米平面
     */
    updateVideoProjection() {
        if (!this.currentVideoFrame || !this.cameraFrustum || !this.cameraFrustum.surface) return;
        
        const position = this.currentDroneStatus.position;
        const gimbalAttitude = this.currentDroneStatus.gimbalAttitude;
        
        if (position.latitude === 0 && position.longitude === 0) return;
        
        try {
            // 直接使用base64数据，与视频预览相同的方式
            const imageDataURL = `data:image/jpeg;base64,${this.currentVideoFrame.data}`;
            
            // 创建临时图像对象来获取真实尺寸
            const img = new Image();
            img.onload = () => {
                // 计算图像的真实宽高比
                const imageAspectRatio = img.width / img.height;
                
                // 获取当前云台的yaw角度作为图片旋转角度
                const rotationAngle = Cesium.Math.toRadians(gimbalAttitude.yaw || 0);
                
                // 创建根据云台yaw角度旋转的图片
                this.createRotatedVideoImage(imageDataURL, img.width, img.height, rotationAngle)
                    .then(rotatedImageDataURL => {
                        // 获取当前材质
                        const currentMaterial = this.cameraFrustum.surface.polygon.material;
                        
                        // 检查是否已经存在ImageMaterialProperty材质
                        if (currentMaterial && currentMaterial instanceof Cesium.ImageMaterialProperty) {
                            // 复用现有材质，只更新图像属性
                            currentMaterial.image = rotatedImageDataURL;
                            console.log(`🔄 复用材质更新25米平面视频投影: ${img.width}x${img.height}, 宽高比: ${imageAspectRatio.toFixed(2)}, 旋转角度: ${(gimbalAttitude.yaw || 0).toFixed(1)}°`);
                        } else {
                            // 首次创建材质或材质类型不匹配时才创建新材质
                            const imageMaterial = new Cesium.ImageMaterialProperty({
                                image: rotatedImageDataURL,
                                transparent: false
                            });
                            this.cameraFrustum.surface.polygon.material = imageMaterial;
                            console.log(`� 首次创建材质: ${img.width}x${img.height}, 宽高比: ${imageAspectRatio.toFixed(2)}, 旋转角度: ${(gimbalAttitude.yaw || 0).toFixed(1)}°`);
                        }
                    })
                    .catch(error => {
                        console.error('创建旋转视频图像失败:', error);
                        // 如果旋转失败，直接使用原图更新材质
                        const currentMaterial = this.cameraFrustum.surface.polygon.material;
                        if (currentMaterial && currentMaterial instanceof Cesium.ImageMaterialProperty) {
                            // 复用现有材质，只更新图像
                            currentMaterial.image = imageDataURL;
                        } else {
                            // 创建新材质
                            const imageMaterial = new Cesium.ImageMaterialProperty({
                                image: imageDataURL,
                                transparent: false
                            });
                            this.cameraFrustum.surface.polygon.material = imageMaterial;
                        }
                    });
            };
            
            img.onerror = () => {
                console.error('视频帧图像加载失败');
                // 如果图像加载失败，使用半透明红色作为备用
                this.cameraFrustum.surface.polygon.material = Cesium.Color.RED.withAlpha(0.3);
            };
            
            img.src = imageDataURL;
            
        } catch (error) {
            console.error('25米平面视频投影处理失败:', error);
            // 如果处理失败，使用半透明红色作为备用
            if (this.cameraFrustum.surface) {
                this.cameraFrustum.surface.polygon.material = Cesium.Color.RED.withAlpha(0.3);
            }
        }
    }

    /**
     * 创建根据云台角度旋转的视频图像 - 参考trajectory-playback.js实现
     */
    createRotatedVideoImage(originalImageSrc, width, height, rotationAngle = 0) {
        return new Promise((resolve, reject) => {
            // 验证输入参数
            if (!originalImageSrc || typeof originalImageSrc !== 'string') {
                reject(new Error('无效的图像源'));
                return;
            }
            
            if (!isFinite(width) || !isFinite(height) || width <= 0 || height <= 0) {
                reject(new Error('无效的图像尺寸'));
                return;
            }
            
            if (!isFinite(rotationAngle)) {
                console.warn('旋转角度无效，使用默认值0');
                rotationAngle = 0;
            }

            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // 计算旋转后画布的尺寸
            const cos = Math.abs(Math.cos(rotationAngle));
            const sin = Math.abs(Math.sin(rotationAngle));
            const newWidth = width * cos + height * sin;
            const newHeight = width * sin + height * cos;
            
            // 验证计算结果的有效性
            if (!isFinite(newWidth) || !isFinite(newHeight) || newWidth <= 0 || newHeight <= 0) {
                reject(new Error('计算出的画布尺寸无效'));
                return;
            }
            
            canvas.width = newWidth;
            canvas.height = newHeight;
            
            // 创建图像对象
            const img = new Image();
            img.onload = () => {
                try {
                    // 清除画布
                    ctx.clearRect(0, 0, newWidth, newHeight);
                    
                    // 移动到画布中心
                    ctx.translate(newWidth / 2, newHeight / 2);
                    
                    // 应用旋转
                    ctx.rotate(rotationAngle);
                    
                    // 绘制图像（中心对齐）
                    ctx.drawImage(img, -width / 2, -height / 2, width, height);
                    
                    // 重置变换
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                    
                    // 将画布转换为数据URL
                    const rotatedImageDataURL = canvas.toDataURL('image/jpeg', 0.9);
                    
                    resolve(rotatedImageDataURL);
                } catch (error) {
                    reject(error);
                }
            };
            
            img.onerror = () => {
                reject(new Error('图像加载失败'));
            };
            
            img.src = originalImageSrc;
        });
    }

    /**
     * 更新相机视角
     */
    updateCameraView() {
        const position = this.currentDroneStatus.position;
        
        // 验证位置数据的有效性
        if (!position || 
            !isFinite(position.latitude) || !isFinite(position.longitude) || !isFinite(position.altitude) ||
            (position.latitude === 0 && position.longitude === 0)) {
            console.warn('updateCameraView: 无效的位置数据，跳过相机视角更新');
            return;
        }
        
        try {
            // 自动跟随无人机
            const droneCartesian = Cesium.Cartesian3.fromDegrees(
                position.longitude,
                position.latitude,
                position.altitude + 100 // 在无人机上方100米
            );
            
            // 验证计算结果
            if (!droneCartesian || !isFinite(droneCartesian.x) || !isFinite(droneCartesian.y) || !isFinite(droneCartesian.z)) {
                console.warn('updateCameraView: 无人机位置坐标转换结果无效');
                return;
            }
            
            this.viewer.camera.lookAt(
                droneCartesian,
                new Cesium.Cartesian3(0, 0, 50)
            );
        } catch (error) {
            console.error('updateCameraView: 相机视角更新失败:', error);
        }
    }

    /**
     * 首次收到位置数据时飞行到无人机位置
     */
    flyToInitialDronePosition(coords) {
        // 验证坐标数据
        if (!coords || 
            !isFinite(coords.latitude) || !isFinite(coords.longitude) || !isFinite(coords.altitude)) {
            console.warn('flyToInitialDronePosition: 无效的坐标数据', coords);
            return;
        }

        try {
            // 计算无人机位置
            const droneCartesian = Cesium.Cartesian3.fromDegrees(
                coords.longitude,
                coords.latitude,
                coords.altitude
            );

            // 验证计算结果
            if (!droneCartesian || !isFinite(droneCartesian.x) || !isFinite(droneCartesian.y) || !isFinite(droneCartesian.z)) {
                console.warn('flyToInitialDronePosition: 无人机位置坐标转换结果无效');
                return;
            }

            // 计算相机位置：在无人机西南方向500米，高度比无人机高200米
            const cameraDistance = 500; // 相机距离无人机的距离
            const cameraHeightOffset = 200; // 相机比无人机高的高度

            // 计算相机位置（西南方向，45度角）
            const heading = Cesium.Math.toRadians(225); // 西南方向
            const pitch = Cesium.Math.toRadians(-30); // 向下30度角看无人机

            const cameraPosition = Cesium.Cartesian3.fromDegrees(
                coords.longitude - 0.005, // 向西偏移约500米
                coords.latitude - 0.005, // 向南偏移约500米
                coords.altitude + cameraHeightOffset
            );

            // 使用flyTo平滑飞行到目标位置
            this.viewer.camera.flyTo({
                destination: cameraPosition,
                orientation: {
                    heading: heading,
                    pitch: pitch,
                    roll: 0
                },
                duration: 3.0, // 3秒飞行时间
                complete: () => {
                    console.log('✅ 相机已定位到无人机位置');
                    // 飞行完成后，让相机看向无人机
                    this.viewer.camera.lookAt(droneCartesian, new Cesium.Cartesian3(0, 0, 100));
                }
            });

            console.log(`📹 正在飞行到无人机位置: (${coords.latitude.toFixed(6)}, ${coords.longitude.toFixed(6)}, ${coords.altitude.toFixed(1)}m)`);

        } catch (error) {
            console.error('flyToInitialDronePosition: 飞行到无人机位置失败:', error);
        }
    }



    /**
     * 更新状态显示
     */
    updateStatusDisplay() {
        const statusElement = document.getElementById('statusDisplay');
        if (statusElement) {
            const status = this.currentDroneStatus;
            statusElement.textContent = status.isOnline ? 
                `📡 ${status.device_sn} 在线 | 电量: ${status.batteryLevel}%` :
                '📴 设备离线';
        }
    }

    /**
     * 更新信息面板
     */
    updateInfoPanel() {
        const position = this.currentDroneStatus.position;
        const attitude = this.currentDroneStatus.attitude;
        const gimbal = this.currentDroneStatus.gimbalAttitude;
        
        // 更新各个信息字段
        this.updateElement('latitude', position.latitude.toFixed(6) + '°');
        this.updateElement('longitude', position.longitude.toFixed(6) + '°');
        this.updateElement('altitude', position.altitude.toFixed(1) + 'm');
        this.updateElement('heading', attitude.heading.toFixed(1) + '°');
        this.updateElement('pitch', attitude.pitch.toFixed(1) + '°');
        this.updateElement('roll', attitude.roll.toFixed(1) + '°');
        this.updateElement('gimbalYaw', gimbal.yaw.toFixed(1) + '°');
        this.updateElement('gimbalPitch', gimbal.pitch.toFixed(1) + '°');
        this.updateElement('gimbalRoll', gimbal.roll.toFixed(1) + '°');
        this.updateElement('battery', this.currentDroneStatus.batteryLevel + '%');
    }

    /**
     * 更新视频预览
     */
    updateVideoPreview() {
        const videoFrame = document.getElementById('videoFrame');
        const videoPlaceholder = document.getElementById('videoPlaceholder');
        
        if (videoFrame && videoPlaceholder && this.currentVideoFrame) {
            videoFrame.src = 'data:image/jpeg;base64,' + this.currentVideoFrame.data;
            videoFrame.style.display = 'block';
            videoPlaceholder.style.display = 'none';
        }
    }

    /**
     * 更新元素内容
     */
    updateElement(id, value) {
        const element = document.getElementById(id);
        if (element) {
            element.textContent = value;
        }
    }

    /**
     * 更新连接状态
     */
    updateConnectionStatus(connected) {
        const statusElement = document.getElementById('connectionStatus');
        if (statusElement) {
            statusElement.textContent = connected ? '🟢 已连接' : '🔴 连接断开';
        }
    }

    /**
     * 安排重连
     */
    scheduleReconnect(type) {
        const key = `${type}ReconnectTimeout`;
        if (this[key]) {
            clearTimeout(this[key]);
        }
        
        this[key] = setTimeout(() => {
            console.log(`尝试重连 ${type}...`);
            if (type === 'status') {
                this.connectStatusWebSocket();
            } else if (type === 'video') {
                this.connectVideoWebSocket();
            }
        }, 3000);
    }

    /**
     * 设置UI
     */
    setupUI() {
        // 添加连接状态显示
        const statusDiv = document.createElement('div');
        statusDiv.id = 'connectionStatus';
        statusDiv.style.position = 'absolute';
        statusDiv.style.top = '10px';
        statusDiv.style.right = '10px';
        statusDiv.style.zIndex = '1000';
        statusDiv.style.color = 'white';
        statusDiv.style.background = 'rgba(0,0,0,0.7)';
        statusDiv.style.padding = '5px 10px';
        statusDiv.style.borderRadius = '5px';
        document.body.appendChild(statusDiv);
    }

    /**
     * 隐藏加载界面
     */
    hideLoading() {
        const loading = document.getElementById('loadingIndicator');
        if (loading) {
            loading.style.display = 'none';
        }
    }

    /**
     * 显示错误信息
     */
    showError(message) {
        console.error('错误:', message);
        alert('错误: ' + message);
    }

    /**
     * 清理资源
     */
    cleanup() {
        if (this.statusSocket) {
            this.statusSocket.close();
        }
        if (this.videoSocket) {
            this.videoSocket.close();
        }
        if (this.statusReconnectTimeout) {
            clearTimeout(this.statusReconnectTimeout);
        }
        if (this.videoReconnectTimeout) {
            clearTimeout(this.videoReconnectTimeout);
        }
        if (this.viewer) {
            this.viewer.destroy();
        }
    }
}

// 全局变量
let realTimeViewer = null;

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', async () => {
    try {
        realTimeViewer = new RealTimeTrajectoryViewer();
        await realTimeViewer.init();
    } catch (error) {
        console.error('系统启动失败:', error);
    }
});

// 页面卸载时清理资源
window.addEventListener('beforeunload', () => {
    if (realTimeViewer) {
        realTimeViewer.cleanup();
    }
});