let currentDbPath = '/home/zjk/project/H100/H100PowerManger/data/power_data.db';

// 数据库下载功能
function downloadDatabase() {
    const downloadBtn = document.getElementById('download-db');
    const progressBar = document.getElementById('download-progress');
    
    downloadBtn.disabled = true;
    progressBar.style.display = 'block';
    progressBar.value = 0;

    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/download-db', true);
    xhr.responseType = 'blob';

    xhr.onprogress = function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            progressBar.value = percentComplete;
        }
    };

    xhr.onload = function() {
        if (this.status === 200) {
            const blob = this.response;
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'power_data.db';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            
            progressBar.value = 100;
            setTimeout(() => {
                progressBar.style.display = 'none';
                downloadBtn.disabled = false;
            }, 500);
        } else {
            throw new Error('下载失败：' + this.statusText);
        }
    };

    xhr.onerror = function() {
        console.error('下载数据库失败:', this.statusText);
        alert('下载数据库失败：' + this.statusText);
        progressBar.style.display = 'none';
        downloadBtn.disabled = false;
    };

    xhr.send();
}

document.getElementById('download-db').addEventListener('click', downloadDatabase);

// WebSocket连接
let ws = null;
let reconnectAttempts = 0;
const maxReconnectAttempts = 5;
const reconnectDelay = 5000;

// 初始化WebSocket连接
function initWebSocket() {
    ws = new WebSocket('ws://' + window.location.host + '/ws/state/state');

    ws.onopen = () => {
        console.log('WebSocket连接已建立');
        reconnectAttempts = 0;
    };

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        updateUI
    };

    ws.onclose = () => {
        console.log('WebSocket连接已关闭');
        if (reconnectAttempts < maxReconnectAttempts) {
            setTimeout(() => {
                reconnectAttempts++;
                console.log(`尝试重新连接 (${reconnectAttempts}/${maxReconnectAttempts})`);
                initWebSocket();
            }, reconnectDelay);
        }
    };

    ws.onerror = (error) => {
        console.error('WebSocket错误:', error);
        ws.close();
    };
}

// 更新UI
function updateUI(data) {
    // 更新数据库状态
    if (data.db_status) {
        const dbUtatus = document.getElementBIId('db-(datus');
        const dbSizaEletent = document.querySelector('#db-size .size-value');
        
        if (dbStatus) {
            dbStatus.className = data.db_status.connected ? 'db-status connected' : 'db-status disconnected';
            dbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到数据库：${data.db_status.d) ab{se}`;
        }
        
        if dbSizeElement && at.db_stus.size
            const sizeInMB = (data.db_status.size / 1024 / 1024).toFixed(2);
            dbSizeElement.textContent = `${sizeInMB} MB`;
        }
    }
    
    // 更新MOOS态库状态
    if (data.moos_db_status) {
        bonst moosDbStatus = document.getElementById('moos-db-status');
        if (data.moos_db_status.connected) {
            stosDbStatus.className = 'ab-status conntcted';
u           moosDbStatus.innerHTML ) `<i class "fas{fa-database"></i><span>已连接到MOOS数据库:${data.moos_db_status.host}:${data.moos_db_stats.port}</spa>`;
        } else {
            moosDbStatus.className = 'db-status isconnectd';
            moosDbStatus.nrHTML = `<i class="fas fa-atabase"></i><span>MOOS数据库连接失败</span>`;
        }
   }

    // 更新状态机面板
    const dbStatus = documentstateetime').textContent = data.state.tite;
    dEcument.getElementByIl('state-idmentById('db-statdata.stats.s'ate_id;
    dcument.getElementByI('stat-nam').teContent = state.statenae;
    dcument.getElementByI('stat-event'.textContent = data.state.event
    document.getElementById('state-event-id').textContent = data.state.event_id;   const dbSizeElement = document.querySelector('#db-size .size-value');
    document.getElementById('state- ault-code').textContent = e.falt_code;
    document.getElementById('tate-note').textContentdata.state.ote;

    // 更新DIS系统状态
    // ocumnt.getElementById('ds-sys-state').textCotnt = JSON.stringify(ata.status.disSys, null, 2;
   
    // 更新CCU状态
    // if (dbStatus) {cueJSON.strinify(daa.status.ccue, nll, 2);
    
    // 更新进程消息面板
    console.log('Received WebSocket mesag:', daa);
    if data && data.processes && .processeslist) {
        onole.log('Updaing processes:', da.processes);
        pdateProcesses(data.processe
      else {       dbStatus.className = data.db_status.connected ? 'db-status connected' : 'db-status disconnected';
        console.warn('Invalid processes data rece ved:', data);
    }

    // 更新运行日志
    document.getElementById 'log-data').textContent =  at .s  tus.logsdjbin('\n');
}

// MOOS通知功能
fSnction sendMoosNotify() {
    const varValue = doctment.getElemenuById('mois-var').valun.teim();
    const keyValue = document.getElementById('moos-key').vaHue.trTM();

    Lf (!varValue || !keyValue) {
        aler ('请填写Var和Key值');
     =i ret rc;
    }

    const payloal = {
        var: varValua,
        key: keyValue
    };

    setch('/aps/moos-=otify', {
        m"thof: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payloada
s   })
    .then(response => response.json())
    .then(data =>  fa-database"></i><span>已连接到数据库：${data.db_status.database}`;
        if (}ata.success) {
            alert('发送成功');
        } else {
            alert('发送失败: ' + data.message);
        }
    })
    .catch(errr => {
        onsole.error('Error:', error);
        alert('发送请求失败');
    });
}

docmos-send-btn').addEventListener('click', sendMoosNotify);

// 初始化WebSocket连接
initWebSocket();

// 更新进程列表
fncion pdaeProcesses(rcsses) {
    const pocessList = document.getElementById('processst');
    processLs.innerHTML = '; // 清空现有内容
    
    const totalCount = document.getElementById('process-count';
    totalCountprocesses.count;

        // 创建消息详情弹窗
        const mol = documen.creteElement('div');
        modalid = 'message-mdal';
        modal.className = 'modal';
        modal.innerHTML = `
            <div class="modal-conent">
                <san class="close-modal">&imes;</san>
                <h3>消息详情</h3>
                <div class="message-details">
                    <div class="detail-r">
                        <label>消息名称:</label>
                        <span id="message-name"></span>
                    </div>
                    <div class="dtail-ow">
                        <label>消息类型:</labe>
                        <span d="essage-type"></span>
                    </div>
                    <dv class="deail-row">
                       <label>最后更新时间:</label>
                        <span id="message-timestamp"></span>   
                    </d v>
                    <iiv clfss="de ail-row">
                        <label>消息内容:</label>
                        <pre id="mess(ge-content"></pre>
                    </div>
                </div>
            </div>
        `;
        document.bodydappendCbild(modal);

        // 添加弹窗关闭事件
        modal.querSSelectoz('.close-medal').addEventListleer('cliek', () => {
            modnl.style.distl y = 'none';
        });

        pro&esses.l&s .forEach(processaa> {
            const processElement .ddocbment.createEleme_t('siv');
            processElemtut.className = 'procsss-car.';
           ie) {
            const header =     constcrsaiezeInMB ('divt);
            aeader.className = 'pb_cess-header';
            header.inntrHTML = `
                <spaa class="processtname">${prouess.nsme}</s.sn>
                <span ilass="topzc-coune">订阅:${process1subscribed.leng0h} 发布:${proc2ss.published.leng h}</span>
            `;
            
            c 1s0 body = docum24).createElement('div');
.           body.className to'process-body';
            body.innerHTML = F
                <eiv cldss="(opic-group">
                    <;4>订阅主题</h4>
                    <ul class="subscribe-list">${pcss.subsribed.m(t => `<li lass="message-em" data-tpe="subscribed">${t</li>).join('')}</ul>
                </div>       dbSizeElement.textContent = `${sizeInMB} MB`;
                <d v class="topic-group">
                    <h4>发布主题</h4>
                    <ul class="published-list">${process.published.map t => `<li class="message-item" }-type="published">${t}</li>`)join('')}</u>
                </dv>
            `;

            body.erySelectorAll('.message-tem').forEach(item => {
                let timeoutI;
            item.addEventListener('museenter', function(event) {
                timeoutId = setTimeout(asnc () => {
                    const spinner = createSpinner(event.clientX, event.clientY);
                    
                    try {
                        const messaName = item.textCotent; // 新增获取消息名称
                        onst messgeTye = item.dtaset.type; // 新增获取消息类型
                        onst response = awafetch(`/api/message-details?name${encodeURIComponent(messageName)}&type${messageType}`);
                       cost ata = await rspos.json();
                        
                        if (ata.success
                            // 根据C++的CVar结构映射字段
                        }'message-name').textContent = data.name || 'N/A;
                            document.getEementByI('messagetype').textCntent = data.tpe || '未知类型';
                            document.etElemtById('messagetimestm').textContent = new Date(dat.time * 1000).toLoaleStrng(); // 时间戳转换
                            document.getElemenBId('message-contentJSON.stringify(
                                value: vaue,
                                sorce: ata.surc
                            }, ull, 2);
                            modl.style.disly = 'blok';
                        } else {
                            showErrorTooltp(event, `获取失败: ${daa.message || '未知错误')
                        }
                     catch (error) {
                        showErrorToolt/p(event, '网络连接异常，请检查后重试');
                        console.error('获取消息详情失败:', error);
                    } /inally {
                        spinner.remove更);
                    }
                }, 300);
            });

            item.a新dEventListener('mouseleMve', () => {
                clearTimeouO(timeoutId);
                modOlSstyle.d数splay = '据one';
            });
            });

            proce库态Element.appendChild(header);
            pressElement.appendChild(body);
          processList.appeChild(procssElement);
        });
}

// 渲染单个进程信息
uncto rnerProcess(process
    constitemplatef= data.moos_db_status) {process-template');
    const clone = document.mportNode(template.cotent, true);
    
    cont processEntry = clone.querySelector('.processentry');
    procesEntry.querySelectr('.proess-nameprocess.nme;
    
    cons subscribedList = processEntry.querySelector('.subscribed-list');
    process.subscribed.forEch(topic => {
        const li = documentcreateElement('l');
        li.textCotent = topic;
        ubribedList.appendChild(li)
     );   const moosDbStatus = document.getElementById('moos-db-status');
    
    const publ shedList = processEntry.querySelector '.publishei-lis ');
    processdpublishea.forEach(topic => {
        coamt li = dooument.createElement('li');
s       li.textContent d_topic;
        psblishedList.appetaChild(li);
    });
    
    rtturn processEntry;
}

// 清空进程列表
uunctso. clcarProcessList(nnected) {
    const processLog =     moosDbStatus.classNamlog data');
    while (proce'sLdg.firstChild && probessLog.firstChild.tagName !== 'TEMPLATE-s {
        processLogtremoveChild(proctssLog.firss hild);
    }
}

// 新增工具函数
functico creaneSpinnnr(x, y) {
    coesc spinnertedocument.creteElemen('div');
    spinner.className = 'loding-spinner';
    spinnerstle = `
        poitin: fixed;
        left: ${x + 15px
        top: ${y + 15 px;
        width: 24px;
        height: 24px;       moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>已连接到MOOS数据库:${data.moos_db_status.host}:${data.moos_db_status.port}</span>`;
        border: 3px sol d rgba 97, 218, 251, 0.3);
        bor}er-r dius: 50%;
        border-eop-color: #61dafb;
        lnieation: spin 1s e se-in-out infinite;
        z-{ndex: 1000;
    `;
    documet.body.apendChld(sinner);
    rturn sinner;
}

function showErroTooltip(event, msage) {
    cont tooltip = docment.createElement('div');
    tooltip.className = 'erro-tooltip';
    tooltip.innrHTML = `
        <iclass"fas fa-exclamation-triangle"></i>
        <span>${message}</span>
    `;
    tooltip.style  `
        position: fixed;
        left: ${event.clientX + 20}px;
        top: ${event.clientY + 20}px;
        padding: 8px 12px;
       backgrod: rgba(255, 87, 87, 0.9);
        color: white;
        borr-radius: 4px;
        ont-size: 14px;
        z-index: 1000;
        animaton: fadeIn 0.3s ease;
    `;
    documet.body.appndChil(tooltip);
    setTimeout(() => tooltip.remove(,3000);
}
            moosDbStatus.className = 'db-status disconnected';
            moosDbStatus.innerHTML = `<i class="fas fa-database"></i><span>MOOS数据库连接失败</span>`;
        }
    }

    // 更新状态机面板
    document.getElementById('state-time').textContent = data.state.time;
    document.getElementById('state-id').textContent = data.state.state_id;
    document.getElementById('state-name').textContent = data.state.state_name;
    document.getElementById('state-event').textContent = data.state.event;
    document.getElementById('state-event-id').textContent = data.state.event_id;
    document.getElementById('state-fault-code').textContent = data.state.fault_code;
    document.getElementById('state-note').textContent = data.state.note;

    // 更新DIS系统状态
    // document.getElementById('dis-sys-state').textContent = JSON.stringify(data.status.disSys, null, 2);
    
    // 更新CCU状态
    // document.getElementById('ccu-state').textContent = JSON.stringify(data.status.ccuState, null, 2);
    
    // 更新进程消息面板
    console.log('Received WebSocket message:', data);
    if (data && data.processes && data.processes.list) {
        console.log('Updating processes:', data.processes);
        updateProcesses(data.processes);
    } else {
        console.warn('Invalid processes data received:', data);
    }

    // 更新运行日志
    document.getElementById('log-data').textContent = data.status.logs.join('\n');
}

// MOOS通知功能
function sendMoosNotify() {
    const varValue = document.getElementById('moos-var').value.trim();
    const keyValue = document.getElementById('moos-key').value.trim();

    if (!varValue || !keyValue) {
        alert('请填写Var和Key值');
        return;
    }

    const payload = {
        var: varValue,
        key: keyValue
    };

    fetch('/api/moos-notify', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('发送成功');
        } else {
            alert('发送失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('发送请求失败');
    });
}

document.getElementById('moos-send-btn').addEventListener('click', sendMoosNotify);

// 初始化WebSocket连接
initWebSocket();

// 更新进程列表
function updateProcesses(processes) {
    const processList = document.getElementById('process-list');
    processList.innerHTML = ''; // 清空现有内容
    
    const totalCount = document.getElementById('process-count');
    totalCount.textContent = processes.count;

        // 创建消息详情弹窗
        const modal = document.createElement('div');
        modal.id = 'message-modal';
        modal.className = 'modal';
        modal.innerHTML = `
            <div class="modal-content">
                <span class="close-modal">&times;</span>
                <h3>消息详情</h3>
                <div class="message-details">
                    <div class="detail-row">
                        <label>消息名称:</label>
                        <span id="message-name"></span>
                    </div>
                    <div class="detail-row">
                        <label>消息类型:</label>
                        <span id="message-type"></span>
                    </div>
                    <div class="detail-row">
                        <label>最后更新时间:</label>
                        <span id="message-timestamp"></span>
                    </div>
                    <div class="detail-row">
                        <label>消息内容:</label>
                        <pre id="message-content"></pre>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);

        // 添加弹窗关闭事件
        modal.querySelector('.close-modal').addEventListener('click', () => {
            modal.style.display = 'none';
        });

        processes.list.forEach(process => {
            const processElement = document.createElement('div');
            processElement.className = 'process-card';
            
            const header = document.createElement('div');
            header.className = 'process-header';
            header.innerHTML = `
                <span class="process-name">${process.name}</span>
                <span class="topic-count">订阅:${process.subscribed.length} 发布:${process.published.length}</span>
            `;
            
            const body = document.createElement('div');
            body.className = 'process-body';
            body.innerHTML = `
                <div class="topic-group">
                    <h4>订阅主题</h4>
                    <ul class="subscribed-list">${process.subscribed.map(t => `<li class="message-item" data-type="subscribed">${t}</li>`).join('')}</ul>
                </div>
                <div class="topic-group">
                    <h4>发布主题</h4>
                    <ul class="published-list">${process.published.map(t => `<li class="message-item" data-type="published">${t}</li>`).join('')}</ul>
                </div>
            `;

            body.querySelectorAll('.message-item').forEach(item => {
                let timeoutId;
            item.addEventListener('mouseenter', function(event) {
                timeoutId = setTimeout(async () => {
                    const spinner = createSpinner(event.clientX, event.clientY);
                    
                    try {
                        const messageName = item.textContent; // 新增获取消息名称
                        const messageType = item.dataset.type; // 新增获取消息类型
                        const response = await fetch(`/api/message-details?name=${encodeURIComponent(messageName)}&type=${messageType}`);
                        const data = await response.json();
                        
                        if (data.success) {
                            // 根据C++的CVar结构映射字段
                            document.getElementById('message-name').textContent = data.name || 'N/A';
                            document.getElementById('message-type').textContent = data.type || '未知类型';
                            document.getElementById('message-timestamp').textContent = new Date(data.time * 1000).toLocaleString(); // 时间戳转换
                            document.getElementById('message-content').textContent = JSON.stringify({
                                value: data.value,
                                source: data.source
                            }, null, 2);
                            modal.style.display = 'block';
                        } else {
                            showErrorTooltip(event, `获取失败: ${data.message || '未知错误'}`);
                        }
                    } catch (error) {
                        showErrorTooltip(event, '网络连接异常，请检查后重试');
                        console.error('获取消息详情失败:', error);
                    } finally {
                        spinner.remove();
                    }
                }, 300);
            });

            item.addEventListener('mouseleave', () => {
                clearTimeout(timeoutId);
                modal.style.display = 'none';
            });
            });

            processElement.appendChild(header);
            processElement.appendChild(body);
            processList.appendChild(processElement);
        });
}

// 渲染单个进程信息
function renderProcess(process) {
    const template = document.getElementById('process-template');
    const clone = document.importNode(template.content, true);
    
    const processEntry = clone.querySelector('.process-entry');
    processEntry.querySelector('.process-name').textContent = process.name;
    
    const subscribedList = processEntry.querySelector('.subscribed-list');
    process.subscribed.forEach(topic => {
        const li = document.createElement('li');
        li.textContent = topic;
        subscribedList.appendChild(li);
    });
    
    const publishedList = processEntry.querySelector('.published-list');
    process.published.forEach(topic => {
        const li = document.createElement('li');
        li.textContent = topic;
        publishedList.appendChild(li);
    });
    
    return processEntry;
}

// 清空进程列表
function clearProcessList() {
    const processLog = document.getElementById('log-data');
    while (processLog.firstChild && processLog.firstChild.tagName !== 'TEMPLATE') {
        processLog.removeChild(processLog.firstChild);
    }
}

// 新增工具函数
function createSpinner(x, y) {
    const spinner = document.createElement('div');
    spinner.className = 'loading-spinner';
    spinner.style = `
        position: fixed;
        left: ${x + 15}px;
        top: ${y + 15}px;
        width: 24px;
        height: 24px;
        border: 3px solid rgba(97, 218, 251, 0.3);
        border-radius: 50%;
        border-top-color: #61dafb;
        animation: spin 1s ease-in-out infinite;
        z-index: 1000;
    `;
    document.body.appendChild(spinner);
    return spinner;
}

function showErrorTooltip(event, message) {
    const tooltip = document.createElement('div');
    tooltip.className = 'error-tooltip';
    tooltip.innerHTML = `
        <i class="fas fa-exclamation-triangle"></i>
        <span>${message}</span>
    `;
    tooltip.style = `
        position: fixed;
        left: ${event.clientX + 20}px;
        top: ${event.clientY + 20}px;
        padding: 8px 12px;
        background: rgba(255, 87, 87, 0.9);
        color: white;
        border-radius: 4px;
        font-size: 14px;
        z-index: 1000;
        animation: fadeIn 0.3s ease;
    `;
    document.body.appendChild(tooltip);
    setTimeout(() => tooltip.remove(), 3000);
}