/**
 * DJI无人机监控前端应用
 */
class DroneMonitorApp {
    constructor() {
        this.ws = null;  // 控制/状态WebSocket
        this.videoWs = null;  // 视频流WebSocket
        this.isConnected = false;
        this.isVideoConnected = false;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        this.reconnectInterval = 3000;
        
        // 状态数据
        this.droneStatus = {
            device_sn: '',
            is_online: false,
            is_live: false,
            battery_level: 0,
            flight_mode: 'unknown',
            coordinates: {
                latitude: 0,
                longitude: 0,
                altitude: 0,
                heading: 0,
                pitch: 0,
                roll: 0
            },
            gimbal_attitude: {  // 云台姿态数据 - 参考DJI Demo
                pitch: 0,
                roll: 0,
                yaw: 0
            }
        };
        
        // 视频相关
        this.videoStats = {
            fps: 0,
            frameCount: 0,
            lastFrameTime: 0,
            latency: 0
        };
        
        // DOM元素
        this.elements = {};
        
        this.init();
    }

    init() {
        console.log('🚀 初始化DJI无人机监控系统');
        this.initElements();
        this.connectWebSocket();
        this.connectVideoWebSocket();  // 连接视频流WebSocket
        this.setupEventListeners();
    }

    initElements() {
        // 状态指示器
        this.elements.wsStatus = document.getElementById('wsStatus');
        this.elements.wsStatusText = document.getElementById('wsStatusText');
        this.elements.mqttStatus = document.getElementById('mqttStatus');
        this.elements.mqttStatusText = document.getElementById('mqttStatusText');
        this.elements.videoStatus = document.getElementById('videoStatus');
        this.elements.videoStatusText = document.getElementById('videoStatusText');
        
        // 设备信息
        this.elements.deviceSn = document.getElementById('deviceSn');
        this.elements.battery = document.getElementById('battery');
        this.elements.flightMode = document.getElementById('flightMode');
        
        // 坐标数据
        this.elements.latitude = document.getElementById('latitude');
        this.elements.longitude = document.getElementById('longitude');
        this.elements.altitude = document.getElementById('altitude');
        this.elements.heading = document.getElementById('heading');
        this.elements.pitch = document.getElementById('pitch');
        this.elements.roll = document.getElementById('roll');
        
        // 云台姿态数据 - 参考DJI Demo
        this.elements.gimbalPitch = document.getElementById('gimbalPitch');
        this.elements.gimbalRoll = document.getElementById('gimbalRoll');
        this.elements.gimbalYaw = document.getElementById('gimbalYaw');
        this.elements.cameraStatus = document.getElementById('cameraStatus');
        
        // 视频相关
        this.elements.videoPlaceholder = document.getElementById('videoPlaceholder');
        this.elements.videoDisplay = document.getElementById('videoDisplay');
        this.elements.videoOverlay = document.getElementById('videoOverlay');
        this.elements.fps = document.getElementById('fps');
        this.elements.latency = document.getElementById('latency');
        
        // 控制按钮
        this.elements.startStreamBtn = document.getElementById('startStreamBtn');
        this.elements.stopStreamBtn = document.getElementById('stopStreamBtn');
    }

    setupEventListeners() {
        // 页面可见性变化
            document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                console.log('页面隐藏，暂停某些功能');
            } else {
                console.log('页面显示，恢复功能');
                if (!this.isConnected) {
                    this.connectWebSocket();
                }
                if (!this.isVideoConnected) {
                    this.connectVideoWebSocket();
                }
            }
        });

        // 窗口关闭前
        window.addEventListener('beforeunload', () => {
            if (this.ws) {
                this.ws.close();
            }
            if (this.videoWs) {
                this.videoWs.close();
            }
        });
    }

    connectWebSocket() {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            console.log('控制WebSocket已连接，跳过重复连接');
            return;
        }

        const wsUrl = `ws://${window.location.hostname}:8765`;
        console.log(`🔌 连接控制WebSocket: ${wsUrl}`);
        
        this.updateWSStatus('connecting', 'WebSocket连接中...');

        try {
            this.ws = new WebSocket(wsUrl);
            
            this.ws.onopen = () => {
                console.log('✅ 控制WebSocket连接成功');
                this.isConnected = true;
                this.reconnectAttempts = 0;
                this.updateWSStatus('online', 'WebSocket已连接');
                this.showMessage('控制WebSocket连接成功', 'success');
            };

            this.ws.onmessage = (event) => {
                try {
                    const message = JSON.parse(event.data);
                    console.log('📨 收到控制WebSocket消息:', message.type, '数据大小:', event.data.length);
                    this.handleMessage(message);
                } catch (error) {
                    console.error('解析控制WebSocket消息失败:', error);
                    console.error('原始消息:', event.data.substring(0, 200) + '...');
                }
            };

            this.ws.onclose = (event) => {
                console.log('❌ 控制WebSocket连接关闭', event.code, event.reason);
                this.isConnected = false;
                this.updateWSStatus('offline', 'WebSocket已断开');
                
                if (!event.wasClean) {
                    this.attemptReconnect();
                }
            };

            this.ws.onerror = (error) => {
                console.error('控制WebSocket连接错误:', error);
                this.updateWSStatus('offline', 'WebSocket连接失败');
                this.showMessage('控制WebSocket连接失败', 'error');
            };

        } catch (error) {
            console.error('创建控制WebSocket连接失败:', error);
            this.updateWSStatus('offline', 'WebSocket创建失败');
            this.showMessage('控制WebSocket创建失败', 'error');
        }
    }

    connectVideoWebSocket() {
        if (this.videoWs && this.videoWs.readyState === WebSocket.OPEN) {
            console.log('视频WebSocket已连接，跳过重复连接');
            return;
        }

        const videoWsUrl = `ws://${window.location.hostname}:8766`;
        console.log(`🔌 连接视频WebSocket: ${videoWsUrl}`);

        try {
            this.videoWs = new WebSocket(videoWsUrl);
            
            this.videoWs.onopen = () => {
                console.log('✅ 视频WebSocket连接成功');
                this.isVideoConnected = true;
                this.showMessage('视频WebSocket连接成功', 'success');
            };

            this.videoWs.onmessage = (event) => {
                try {
                    const message = JSON.parse(event.data);
                    console.log('📨 收到视频WebSocket消息:', message.type);
                    this.handleVideoMessage(message);
                } catch (error) {
                    console.error('解析视频WebSocket消息失败:', error);
                }
            };

            this.videoWs.onclose = (event) => {
                console.log('❌ 视频WebSocket连接关闭', event.code, event.reason);
                this.isVideoConnected = false;
                
                if (!event.wasClean) {
                    this.attemptVideoReconnect();
                }
            };

            this.videoWs.onerror = (error) => {
                console.error('视频WebSocket连接错误:', error);
                this.showMessage('视频WebSocket连接失败', 'error');
            };

        } catch (error) {
            console.error('创建视频WebSocket连接失败:', error);
            this.showMessage('视频WebSocket创建失败', 'error');
        }
    }

    attemptVideoReconnect() {
        console.log('🔄 尝试重连视频WebSocket');
        setTimeout(() => {
            this.connectVideoWebSocket();
        }, this.reconnectInterval);
    }    attemptReconnect() {
        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
            console.log('达到最大重连次数，停止重连');
            this.showMessage('连接失败，请手动重新连接', 'error');
            return;
        }

        this.reconnectAttempts++;
        console.log(`🔄 尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
        
        setTimeout(() => {
            this.connectWebSocket();
        }, this.reconnectInterval);
    }

    handleMessage(message) {
        console.log('📨 处理控制消息:', message.type, message.data ? Object.keys(message.data) : 'no data');

        switch (message.type) {
            case 'connection_status':
                this.handleConnectionStatus(message.data);
                break;
            case 'drone_status':
                this.handleDroneStatus(message.data);
                break;
            case 'coordinates':
                this.handleCoordinates(message.data);
                break;
            case 'gimbal_attitude':  // 云台姿态消息处理 - 参考DJI Demo
                this.handleGimbalAttitude(message.data);
                break;
            case 'error':
                this.handleError(message.data);
                break;
            default:
                console.log('未知控制消息类型:', message.type);
        }
    }

    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.handleVideoFrame(message.data);
                break;
            case 'connection_established':
                console.log('✅ 视频服务器连接已建立');
                break;
            case 'stats':
                console.log('📊 视频服务器统计:', message.data);
                break;
            default:
                console.log('未知视频消息类型:', message.type);
        }
    }

    handleConnectionStatus(data) {
        console.log('连接状态更新:', data);
        if (data.status === 'connected') {
            this.showMessage(data.message, 'success');
        }
    }

    handleDroneStatus(data) {
        console.log('无人机状态更新:', data);
        this.droneStatus = { ...this.droneStatus, ...data };
        this.updateDroneStatusDisplay();
    }

    handleCoordinates(data) {
        if (data.coordinates) {
            this.droneStatus.coordinates = { ...this.droneStatus.coordinates, ...data.coordinates };
            this.updateCoordinatesDisplay();
        }
    }

    handleGimbalAttitude(data) {
        console.log('📹 云台姿态更新:', data);
        if (data.gimbal_attitude) {
            this.droneStatus.gimbal_attitude = { ...this.droneStatus.gimbal_attitude, ...data.gimbal_attitude };
            this.updateGimbalAttitudeDisplay();
            
            // 更新相机视锥投影 - 调用index.html中的函数
            if (window.updateGimbalData) {
                window.updateGimbalData(
                    this.droneStatus.gimbal_attitude.pitch,
                    this.droneStatus.gimbal_attitude.roll,
                    this.droneStatus.gimbal_attitude.yaw
                );
            }
        }
    }

    handleVideoFrame(data) {
        console.log('🎬 处理视频帧:', {
            device_sn: data.device_sn,
            frameSize: data.frame ? data.frame.length : 'no frame',
            timestamp: data.timestamp,
            width: data.width,
            height: data.height
        });
        
        if (!data.frame) {
            console.error('❌ 视频帧数据为空');
            return;
        }
        
        // 更新视频帧
        const frameData = `data:image/jpeg;base64,${data.frame}`;
        this.elements.videoDisplay.src = frameData;
        
        // 显示视频
        this.elements.videoPlaceholder.style.display = 'none';
        this.elements.videoDisplay.style.display = 'block';
        this.elements.videoOverlay.style.display = 'block';
        
        // 更新视频状态
        this.updateVideoStatus('online', '视频正常');
        
        // 计算FPS和延迟
        this.updateVideoStats(data.timestamp);
        
        console.log('✅ 视频帧更新完成');
    }

    handleError(data) {
        console.error('服务器错误:', data.error);
        this.showMessage(data.error, 'error');
    }

    updateDroneStatusDisplay() {
        // 更新设备信息
        this.elements.deviceSn.textContent = this.droneStatus.device_sn || '-';
        this.elements.battery.textContent = this.droneStatus.battery_level ? 
            `${this.droneStatus.battery_level}%` : '-';
        this.elements.flightMode.textContent = this.droneStatus.flight_mode || '-';
        
        // 更新MQTT状态
        if (this.droneStatus.is_online) {
            this.updateMQTTStatus('online', 'MQTT在线');
        } else {
            this.updateMQTTStatus('offline', 'MQTT离线');
        }
        
        // 更新按钮状态
        this.updateControlButtons();
    }

    updateCoordinatesDisplay() {
        const coords = this.droneStatus.coordinates;
        this.elements.latitude.textContent = coords.latitude ? coords.latitude.toFixed(6) : '-';
        this.elements.longitude.textContent = coords.longitude ? coords.longitude.toFixed(6) : '-';
        this.elements.altitude.textContent = coords.altitude ? `${coords.altitude.toFixed(1)}m` : '-';
        this.elements.heading.textContent = coords.heading ? `${coords.heading.toFixed(1)}°` : '-';
        this.elements.pitch.textContent = coords.pitch ? `${coords.pitch.toFixed(1)}°` : '-';
        this.elements.roll.textContent = coords.roll ? `${coords.roll.toFixed(1)}°` : '-';
    }

    updateGimbalAttitudeDisplay() {
        // 更新云台姿态显示 - 参考DJI Demo实现
        const gimbal = this.droneStatus.gimbal_attitude;
        if (this.elements.gimbalPitch) {
            this.elements.gimbalPitch.textContent = gimbal.pitch ? `${gimbal.pitch.toFixed(1)}°` : '-';
        }
        if (this.elements.gimbalRoll) {
            this.elements.gimbalRoll.textContent = gimbal.roll ? `${gimbal.roll.toFixed(1)}°` : '-';
        }
        if (this.elements.gimbalYaw) {
            this.elements.gimbalYaw.textContent = gimbal.yaw ? `${gimbal.yaw.toFixed(1)}°` : '-';
        }
    }

    updateVideoStats(frameTimestamp) {
        const now = Date.now();
        
        // 计算延迟
        this.videoStats.latency = now - (frameTimestamp * 1000);
        
        // 计算FPS
        if (this.videoStats.lastFrameTime > 0) {
            const timeDiff = (now - this.videoStats.lastFrameTime) / 1000;
            this.videoStats.fps = 1 / timeDiff;
        }
        this.videoStats.lastFrameTime = now;
        this.videoStats.frameCount++;
        
        // 更新显示
        this.elements.fps.textContent = this.videoStats.fps.toFixed(1);
        this.elements.latency.textContent = this.videoStats.latency.toFixed(0);
    }

    updateControlButtons() {
        const isOnline = this.droneStatus.is_online;
        const isLive = this.droneStatus.is_live;
        
        this.elements.startStreamBtn.disabled = !isOnline || isLive;
        this.elements.stopStreamBtn.disabled = !isOnline || !isLive;
    }

    updateWSStatus(status, text) {
        this.elements.wsStatus.className = `status-indicator status-${status}`;
        this.elements.wsStatusText.textContent = text;
    }

    updateMQTTStatus(status, text) {
        this.elements.mqttStatus.className = `status-indicator status-${status}`;
        this.elements.mqttStatusText.textContent = text;
    }

    updateVideoStatus(status, text) {
        this.elements.videoStatus.className = `status-indicator status-${status}`;
        this.elements.videoStatusText.textContent = text;
    }

    showMessage(text, type = 'info') {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${type}`;
        messageDiv.textContent = text;
        
        document.getElementById('messageContainer').appendChild(messageDiv);
        
        // 显示消息
        setTimeout(() => messageDiv.classList.add('show'), 100);
        
        // 自动隐藏
        setTimeout(() => {
            messageDiv.classList.remove('show');
            setTimeout(() => messageDiv.remove(), 300);
        }, 3000);
    }

    sendMessage(type, data = {}) {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
            const message = {
                type: type,
                data: data,
                timestamp: Date.now() / 1000
            };
            this.ws.send(JSON.stringify(message));
            return true;
        } else {
            console.error('WebSocket未连接，无法发送消息');
            this.showMessage('WebSocket未连接', 'error');
            return false;
        }
    }
}

// 全局函数
let app;

window.onload = function() {
    app = new DroneMonitorApp();
};

function reconnectWebSocket() {
    console.log('🔄 手动重新连接WebSocket');
    app.reconnectAttempts = 0;
    app.connectWebSocket();
    app.connectVideoWebSocket();
}

function startStream() {
    console.log('▶️ 开始直播');
    app.sendMessage('start_stream');
    app.showMessage('正在启动直播...', 'info');
}

function stopStream() {
    console.log('⏹️ 停止直播');
    app.sendMessage('stop_stream');
    app.showMessage('正在停止直播...', 'info');
    
    // 隐藏视频
    app.elements.videoDisplay.style.display = 'none';
    app.elements.videoOverlay.style.display = 'none';
    app.elements.videoPlaceholder.style.display = 'block';
    app.updateVideoStatus('offline', '视频离线');
}

function toggleFullscreen() {
    const videoContainer = document.querySelector('.video-container');
    
    if (!document.fullscreenElement) {
        videoContainer.requestFullscreen().catch(err => {
            console.error('进入全屏失败:', err);
            app.showMessage('全屏功能不可用', 'error');
        });
    } else {
        document.exitFullscreen();
    }
}