<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCSManager服务器管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        danger: '#ef4444',
                        warning: '#f59e0b',
                        info: '#06b6d4',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .server-card {
                @apply bg-white rounded-lg shadow-md p-4 mb-4 transition-all duration-300 hover:shadow-lg;
            }
            .server-status {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
            .btn {
                @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50;
            }
            .btn-secondary {
                @apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50;
            }
            .btn-danger {
                @apply bg-danger text-white hover:bg-danger/90 focus:ring-danger/50;
            }
            .btn-warning {
                @apply bg-warning text-white hover:bg-warning/90 focus:ring-warning/50;
            }
            .btn-outline {
                @apply border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary/50;
            }
            .badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
            .badge-online {
                @apply bg-green-100 text-green-800;
            }
            .badge-offline {
                @apply bg-gray-100 text-gray-800;
            }
            .badge-starting {
                @apply bg-blue-100 text-blue-800;
            }
            .badge-stopping {
                @apply bg-yellow-100 text-yellow-800;
            }
            .console-line {
                @apply whitespace-pre font-mono text-sm;
            }
            .console-line-info {
                @apply text-gray-300;
            }
            .console-line-warning {
                @apply text-yellow-300;
            }
            .console-line-error {
                @apply text-red-400;
            }
            .console-line-command {
                @apply text-green-400;
            }
            .console-line-player {
                @apply text-blue-300;
            }
            .loading-overlay {
                @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
            }
            .notification {
                @apply fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-20 opacity-0;
            }
            .notification-visible {
                @apply translate-y-0 opacity-100;
            }
            .notification-success {
                @apply bg-green-500 text-white;
            }
            .notification-error {
                @apply bg-red-500 text-white;
            }
            .notification-info {
                @apply bg-blue-500 text-white;
            }
        }
            .hidden {
                display: none;
            }

    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-dark text-white shadow-lg">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-server text-primary text-2xl"></i>
                <h1 class="text-xl font-bold">MCSManager 服务器管理</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="flex items-center hover:text-primary transition-colors duration-200"><i class="fa fa-home mr-1"></i> 首页</a></li>
                    <li><a href="#" class="flex items-center hover:text-primary transition-colors duration-200"><i class="fa fa-server mr-1"></i> 服务器</a></li>
                    <li><a href="#" class="flex items-center hover:text-primary transition-colors duration-200"><i class="fa fa-cog mr-1"></i> 设置</a></li>
                    <li><a href="#" class="flex items-center hover:text-primary transition-colors duration-200"><i class="fa fa-question-circle mr-1"></i> 帮助</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 面包屑导航 -->
        <div class="mb-4 text-sm text-gray-500">
            <a href="#" class="hover:text-primary">首页</a> &gt; <a href="#" class="hover:text-primary">服务器列表</a> &gt; <span class="text-gray-700 font-medium" id="breadcrumb-server-name">生存服务器</span>
        </div>

        <!-- 服务器详情 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <!-- 服务器状态和基本信息 -->
            <div class="p-6 border-b">
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold" id="detail-server-name">生存服务器</h2>
                        <div class="flex items-center mt-2">
                            <span class="badge badge-online mr-3" id="detail-server-status">在线</span>
                            <span class="text-sm text-gray-500" id="detail-server-ip">127.0.0.1:25565</span>
                        </div>
                    </div>
                    <div class="mt-4 md:mt-0 flex space-x-3">
                        <button class="btn btn-danger" id="action-stop-server">
                            <i class="fa fa-stop mr-1"></i> 停止
                        </button>
                        <button class="btn btn-warning" id="action-restart-server">
                            <i class="fa fa-refresh mr-1"></i> 重启
                        </button>
                        <button class="btn btn-secondary" id="action-start-server">
                            <i class="fa fa-play mr-1"></i> 启动
                        </button>
                    </div>
                </div>
            </div>

            <!-- 服务器信息和性能 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 border-b">
                <div>
                    <h3 class="text-lg font-semibold mb-3">基本信息</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">UUID:</span>
                            <span class="font-medium" id="detail-uuid">5f8b4c2a-3d7e-4b1a-9c5d-6e7f8a9b0c1d</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">守护进程ID:</span>
                            <span class="font-medium" id="detail-daemonid">daemon-1</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">版本:</span>
                            <span class="font-medium" id="detail-version">1.19.2</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">运行时间:</span>
                            <span class="font-medium" id="detail-uptime">8小时24分钟</span>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-3">玩家信息</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">在线玩家:</span>
                            <span class="font-medium" id="detail-players">12/20</span>
                        </div>
                        <div class="space-y-1 mt-2" id="detail-player-list">
                            <div class="flex items-center justify-between">
                                <span class="text-sm">Player1</span>
                                <span class="text-xs text-gray-500">2小时前加入</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-sm">Player2</span>
                                <span class="text-xs text-gray-500">1小时前加入</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-sm">Player3</span>
                                <span class="text-xs text-gray-500">30分钟前加入</span>
                            </div>
                        </div>
                        <button class="text-primary text-sm mt-2 hover:underline" id="action-view-all-players">
                            查看全部 <i class="fa fa-angle-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-3">性能指标</h3>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm text-gray-600">内存使用</span>
                                <span class="text-sm font-medium" id="detail-memory">1536 MB / 2048 MB</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: 75%" id="detail-memory-bar"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm text-gray-600">CPU使用率</span>
                                <span class="text-sm font-medium" id="detail-cpu">24%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-green-600 h-2 rounded-full" style="width: 24%" id="detail-cpu-bar"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm text-gray-600">网络流量</span>
                                <span class="text-sm font-medium" id="detail-network">1.2 MB/s 入 / 0.8 MB/s 出</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-purple-600 h-2 rounded-full" style="width: 40%" id="detail-network-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 服务器控制台 -->
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">服务器控制台</h3>
                    <div class="flex space-x-2">
                        <button class="btn btn-outline text-sm" id="action-clear-console">
                            <i class="fa fa-trash mr-1"></i> 清空
                        </button>
                        <button class="btn btn-outline text-sm" id="action-refresh-console">
                            <i class="fa fa-refresh mr-1"></i> 刷新
                        </button>
                        <button class="btn btn-outline text-sm" id="action-expand-console">
                            <i class="fa fa-expand mr-1"></i> 全屏
                        </button>
                    </div>
                </div>

                <!-- 控制台输出 -->
                <div class="bg-gray-900 text-gray-100 rounded-t-md p-3 h-64 overflow-y-auto" id="server-console">
                    <pre class="font-mono text-sm">[CCSNetwork]: 正在获取终端 
                </div>

                <!-- 命令输入 -->
                <div class="flex bg-gray-800 rounded-b-md">
                    <div class="flex items-center px-3 text-gray-400">
                        <span class="font-mono">&gt;</span>
                    </div>
                    <input type="text" id="server-command-input" placeholder="输入命令..." class="flex-grow bg-gray-800 text-gray-100 px-2 py-3 focus:outline-none font-mono">
                    <button class="px-4 py-3 bg-primary text-white hover:bg-primary/90 transition-colors" id="action-send-command">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
            </div>

            <!-- 配置文件管理 -->
            <div class="p-6 border-t">
                <h3 class="text-lg font-semibold mb-4">配置文件管理</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文件名</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">修改时间</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <i class="fa fa-file-text-o text-blue-500 mr-2"></i>
                                        <span>server.properties</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.4 KB</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-07 12:30:45</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" onclick="editConfig('server.properties')">
                                        <i class="fa fa-edit mr-1"></i> 编辑
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700">
                                        <i class="fa fa-download mr-1"></i> 下载
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <i class="fa fa-file-text-o text-blue-500 mr-2"></i>
                                        <span>ops.json</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.5 KB</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-07 10:15:20</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" onclick="editConfig('ops.json')">
                                        <i class="fa fa-edit mr-1"></i> 编辑
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700">
                                        <i class="fa fa-download mr-1"></i> 下载
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <i class="fa fa-file-text-o text-blue-500 mr-2"></i>
                                        <span>whitelist.json</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2 KB</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-07 09:45:10</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3" onclick="editConfig('whitelist.json')">
                                        <i class="fa fa-edit mr-1"></i> 编辑
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700">
                                        <i class="fa fa-download mr-1"></i> 下载
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <button class="mt-4 btn btn-outline" onclick="uploadConfig()">
                    <i class="fa fa-upload mr-1"></i> 上传配置文件
                </button>
            </div>

            <!-- 备份管理 -->
            <div class="p-6 border-t">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">备份管理</h3>
                    <button class="btn btn-primary" id="action-create-backup">
                        <i class="fa fa-plus mr-1"></i> 创建备份
                    </button>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份名称</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <i class="fa fa-file-archive-o text-purple-500 mr-2"></i>
                                        <span>world_backup_20250607_1200</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">128 MB</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-07 12:00:00</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button class="text-secondary hover:text-secondary/80 mr-3" onclick="restoreBackup('world_backup_20250607_1200')">
                                        <i class="fa fa-undo mr-1"></i> 恢复
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700 mr-3">
                                        <i class="fa fa-download mr-1"></i> 下载
                                    </button>
                                    <button class="text-danger hover:text-danger/80" onclick="deleteBackup('world_backup_20250607_1200')">
                                        <i class="fa fa-trash mr-1"></i> 删除
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <i class="fa fa-file-archive-o text-purple-500 mr-2"></i>
                                        <span>world_backup_20250606_2359</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">126 MB</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-06 23:59:59</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button class="text-secondary hover:text-secondary/80 mr-3" onclick="restoreBackup('world_backup_20250606_2359')">
                                        <i class="fa fa-undo mr-1"></i> 恢复
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700 mr-3">
                                        <i class="fa fa-download mr-1"></i> 下载
                                    </button>
                                    <button class="text-danger hover:text-danger/80" onclick="deleteBackup('world_backup_20250606_2359')">
                                        <i class="fa fa-trash mr-1"></i> 删除
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <i class="fa fa-file-archive-o text-purple-500 mr-2"></i>
                                        <span>world_backup_20250606_1200</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">125 MB</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-06 12:00:00</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button class="text-secondary hover:text-secondary/80 mr-3" onclick="restoreBackup('world_backup_20250606_1200')">
                                        <i class="fa fa-undo mr-1"></i> 恢复
                                    </button>
                                    <button class="text-gray-500 hover:text-gray-700 mr-3">
                                        <i class="fa fa-download mr-1"></i> 下载
                                    </button>
                                    <button class="text-danger hover:text-danger/80" onclick="deleteBackup('world_backup_20250606_1200')">
                                        <i class="fa fa-trash mr-1"></i> 删除
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 text-sm text-gray-500">
                    <i class="fa fa-info-circle mr-1"></i> 自动备份计划: 每天凌晨2点执行全量备份
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container mx-auto px-4 text-center">
            <p>© 2025 MCSManager 服务器管理系统 | 版本 1.0.0</p>
        </div>
    </footer>

    <!-- 加载遮罩层 -->
    <div class="loading-overlay hidden" id="loading-overlay">
        <div class="bg-white p-6 rounded-lg shadow-xl flex flex-col items-center">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
            <p class="text-lg font-medium" id="loading-message">正在处理...</p>
        </div>
    </div>

    <!-- 通知组件 -->
    <div class="notification notification-info" id="notification">
        <p id="notification-message">这是一条通知消息</p>
    </div>

    <!-- 配置文件编辑模态框 -->
    <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden" id="config-modal">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[80vh] flex flex-col">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="text-lg font-semibold" id="config-modal-title">编辑配置文件</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeConfigModal()">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-4 flex-grow overflow-y-auto">
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700">文件名</label>
                    <input type="text" id="config-filename" class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm" readonly>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">文件内容</label>
                    <textarea id="config-content" rows="20" class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm font-mono text-sm"></textarea>
                </div>
            </div>
            <div class="p-4 border-t flex justify-end space-x-3">
                <button class="btn btn-outline" onclick="closeConfigModal()">取消</button>
                <button class="btn btn-primary" onclick="saveConfig()">保存</button>
            </div>
        </div>
    </div>

<script>
// DOM 元素
const serverStatusEl = document.getElementById('detail-server-status');
const serverNameEl = document.getElementById('detail-server-name');
const serverIpEl = document.getElementById('detail-server-ip');
const uuidEl = document.getElementById('detail-uuid');
const daemonIdEl = document.getElementById('detail-daemonid');
const versionEl = document.getElementById('detail-version');
const uptimeEl = document.getElementById('detail-uptime');
const playersEl = document.getElementById('detail-players');
const playerListEl = document.getElementById('detail-player-list');
const memoryEl = document.getElementById('detail-memory');
const memoryBarEl = document.getElementById('detail-memory-bar');
const cpuEl = document.getElementById('detail-cpu');
const cpuBarEl = document.getElementById('detail-cpu-bar');
const networkEl = document.getElementById('detail-network');
const networkBarEl = document.getElementById('detail-network-bar');
const serverConsoleEl = document.getElementById('server-console');
const serverCommandInputEl = document.getElementById('server-command-input');
const breadcrumbServerNameEl = document.getElementById('breadcrumb-server-name');

// 从URL获取参数
const urlParams = new URLSearchParams(window.location.search);
const uuid = urlParams.get('uuid') || '5f8b4c2a-3d7e-4b1a-9c5d-6e7f8a9b0c1d';
const daemonId = urlParams.get('daemonId') || 'daemon-1';

// 按钮
const startServerBtn = document.getElementById('action-start-server');
const stopServerBtn = document.getElementById('action-stop-server');
const restartServerBtn = document.getElementById('action-restart-server');
const sendCommandBtn = document.getElementById('action-send-command');
const clearConsoleBtn = document.getElementById('action-clear-console');
const refreshConsoleBtn = document.getElementById('action-refresh-console');
const expandConsoleBtn = document.getElementById('action-expand-console');

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    // 加载服务器详情
    loadServerDetails();
    
    // 添加事件监听器
    startServerBtn.addEventListener('click', startServer);
    stopServerBtn.addEventListener('click', stopServer);
    restartServerBtn.addEventListener('click', restartServer);
    sendCommandBtn.addEventListener('click', sendCommand);
    serverCommandInputEl.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendCommand();
        }
    });
    clearConsoleBtn.addEventListener('click', clearConsole);
    refreshConsoleBtn.addEventListener('click', refreshConsole);
    expandConsoleBtn.addEventListener('click', toggleFullscreenConsole);
    
    // 定时刷新服务器状态和控制台
    setInterval(loadServerDetails, 5000);
});

let isLoading = true; // 添加一个标志变量

function loadServerDetails() {
    if (!isLoading) return; // 如果不是第一次加载，直接返回

    showLoading("正在加载服务器信息...");
    isLoading = false; // 设置标志变量为false

    fetch(`proxy.php?path=instance&uuid=${uuid}&daemonId=${daemonId}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`请求失败，状态码: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('后端返回的数据:', data); // 打印返回的数据
            if (!data || !data.data) {
                throw new Error('无效的服务器数据');
            }
            
            const server = data.data;
            
            // 更新基本信息
            serverNameEl.textContent = server.config.nickname || '未知服务器';
            breadcrumbServerNameEl.textContent = serverNameEl.textContent;
            
            serverStatusEl.textContent = server.status === 1 ? '在线' : '离线';
            serverStatusEl.className = `badge ${server.status === 1 ? 'badge-online' : 'badge-offline'}`;
            
            serverIpEl.textContent = server.config.pingConfig.ip || '未知IP';
            uuidEl.textContent = server.instanceUuid || '未知UUID';
            daemonIdEl.textContent = daemonId;
            versionEl.textContent = server.info.version || '未知版本';
            uptimeEl.textContent = server.processInfo.elapsed || '未知运行时间';
            playersEl.textContent = `${server.info.currentPlayers || 0}/${server.info.maxPlayers || 0}`;
            
            hideLoading(); // 隐藏加载遮罩
            // 更新玩家列表
            updatePlayerList(server.info.playersChart || []);
            
            // 更新性能指标
            updatePerformanceMetrics(server);
            
            // 获取并更新控制台日志
            fetchConsoleLog();
            
            // 更新按钮状态
            updateButtonStates();
            
        })
        .catch(error => {
            console.error('获取服务器详情失败:', error);
            showNotification('获取服务器详情失败', 'error');
            hideLoading(); // 隐藏加载遮罩
        });
}

function updatePlayerList(players) {
    playerListEl.innerHTML = '';
    
    if (!players || players.length === 0) {
        const emptyEl = document.createElement('div');
        emptyEl.className = 'text-sm text-gray-500 italic';
        emptyEl.textContent = '没有在线玩家';
        playerListEl.appendChild(emptyEl);
        return;
    }
    
    players.forEach(player => {
        const playerEl = document.createElement('div');
        playerEl.className = 'flex items-center justify-between';
        playerEl.innerHTML = `
            <span class="text-sm">${player.name}</span>
            <span class="text-xs text-gray-500">${player.joinTime || '刚刚加入'}</span>
        `;
        playerListEl.appendChild(playerEl);
    });
}

function updatePerformanceMetrics(server) {
    const memoryUsed = server.processInfo.memory || 0;
    const memoryTotal = 1024; // 假设总内存为1024MB
    const memoryPercent = Math.round((memoryUsed / memoryTotal) * 100);
    
    memoryEl.textContent = `${memoryUsed} MB / ${memoryTotal} MB`;
    memoryBarEl.style.width = `${memoryPercent}%`;
    
    const cpuPercent = server.processInfo.cpu || 0;
    cpuEl.textContent = `${cpuPercent}%`;
    cpuBarEl.style.width = `${cpuPercent}%`;
    
    const networkIn = (server.processInfo.networkIn || 0).toFixed(1);
    const networkOut = (server.processInfo.networkOut || 0).toFixed(1);
    const networkPercent = Math.round(((networkIn + networkOut) / 10) * 100); // 假设最大10MB/s
    
    networkEl.textContent = `${networkIn} MB/s 入 / ${networkOut} MB/s 出`;
    networkBarEl.style.width = `${Math.min(100, networkPercent)}%`;
}

function updateButtonStates() {
    const isOnline = serverStatusEl.textContent.trim().toLowerCase() === '在线';
    
    startServerBtn.disabled = isOnline;
    stopServerBtn.disabled = !isOnline;
    restartServerBtn.disabled = !isOnline;
}

async function fetchConsoleLog() {
    try {
        const response = await fetch(`proxy.php?path=protected_instance/outputlog&uuid=${uuid}&daemonId=${daemonId}&size=4096`);
        if (!response.ok) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        const data = await response.json();
        if (data && data.data) {
            serverConsoleEl.innerHTML = '';
            
            const lines = data.data.split('\n');
            
            lines.forEach(line => {
                const lineEl = document.createElement('div');
                lineEl.className = 'console-line font-mono text-sm';
                
                if (line.includes('[INFO]')) {
                    lineEl.classList.add('text-gray-700');
                } else if (line.includes('[WARNING]')) {
                    lineEl.classList.add('text-yellow-600');
                } else if (line.includes('[ERROR]')) {
                    lineEl.classList.add('text-red-600');
                } else if (line.includes('issued server command')) {
                    lineEl.classList.add('text-blue-600');
                } else if (line.includes('joined the game') || line.includes('left the game')) {
                    lineEl.classList.add('text-green-600');
                }
                
                lineEl.textContent = line;
                serverConsoleEl.appendChild(lineEl);
            });
            
            serverConsoleEl.scrollTop = serverConsoleEl.scrollHeight;
        }
    } catch (error) {
        console.error('获取控制台日志失败:', error);
    }
}
function startServer() {
    showLoading("正在启动服务器...");
    
    fetch(`proxy.php?path=protected_instance/open&uuid=${uuid}&daemonId=${daemonId}`, {
        method: 'POST'
    })
        .then(response => response.json())
        .then(data => {
            // 获取并打印终端日志
            fetchConsoleLog();

            // 如果有终端输出，无论状态如何都打印
            console.log('服务器启动响应:', data); 

            if (data.code === 500) {
                // 处理服务器返回500错误的情况
                console.error('服务器返回错误: ', data.message);
                hideLoading();
            }

            showNotification('启动命令已发送', 'success');
            const checkInterval = setInterval(() => {
                fetch(`proxy.php?path=instance&uuid=${uuid}&daemonId=${daemonId}`)
                    .then(res => res.json())
                    .then(res => {
                        // 获取并打印终端日志
                        fetchConsoleLog();
                        hideLoading();
                        console.log('服务器状态响应:', res);

                        if (res.data?.status !== 2) { // 不是启动中状态
                            clearInterval(checkInterval);
                            loadServerDetails();
                            hideLoading();
                        }
                    });
            }, 2000);
        })
        .catch(error => {
            // 获取并打印终端日志
            fetchConsoleLog();

            console.error('启动失败错误:', error);
            showNotification(`启动失败: ${error.message}`, 'error');
            hideLoading();
        });
}


function stopServer() {
    if (!confirm('确定要停止服务器吗？')) return;
    
    showLoading("正在停止服务器...");
    
    fetch(`proxy.php?path=protected_instance/stop&uuid=${uuid}&daemonId=${daemonId}`, {
        method: 'POST'
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                showNotification('服务器停止请求已发送', 'success');
                setTimeout(loadServerDetails, 2000); // 延迟刷新状态
            } else {
                throw new Error(data.message || '停止失败');
            }
        })
        .catch(error => {
            console.error('停止服务器失败:', error);
            showNotification('停止服务器失败: ' + error.message, 'error');
            hideLoading();
        });
}

function restartServer() {
    if (!confirm('确定要重启服务器吗？')) return;
    
    showLoading("正在重启服务器...");
    
    fetch(`proxy.php?path=protected_instance/restart&uuid=${uuid}&daemonId=${daemonId}`, {
        method: 'POST'
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                showNotification('服务器重启请求已发送', 'success');
                setTimeout(loadServerDetails, 2000); // 延迟刷新状态
            } else {
                throw new Error(data.message || '重启失败');
            }
        })
        .catch(error => {
            console.error('重启服务器失败:', error);
            showNotification('重启服务器失败: ' + error.message, 'error');
            hideLoading();
        });
}

function sendCommand() {
    const command = serverCommandInputEl.value.trim();
    if (!command) return;
    
    showLoading("正在发送命令...");
    
    const formData = new FormData();
    formData.append('uuid', uuid);
    formData.append('daemonId', daemonId);
    formData.append('command', command);
    
    fetch(`proxy.php?path=protected_instance/command&uuid=${uuid}&daemonId=${daemonId}&command=${command}`, {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                serverCommandInputEl.value = '';
                showNotification('命令已发送', 'success');
                setTimeout(fetchConsoleLog, 500); // 延迟刷新控制台
            } else {
                throw new Error(data.message || '命令发送失败');
            }
        })
        .catch(error => {
            console.error('发送命令失败:', error);
            showNotification('发送命令失败: ' + error.message, 'error');
            hideLoading();
        });
}

function clearConsole() {
    serverConsoleEl.innerHTML = '';
}

function refreshConsole() {
    fetchConsoleLog();
}

function toggleFullscreenConsole() {
    const consoleContainer = serverConsoleEl.parentElement;
    consoleContainer.classList.toggle('fixed');
    consoleContainer.classList.toggle('inset-0');
    consoleContainer.classList.toggle('z-40');
    consoleContainer.classList.toggle('bg-gray-900');
    consoleContainer.classList.toggle('p-6');
    
    serverConsoleEl.classList.toggle('h-64');
    serverConsoleEl.classList.toggle('h-full');
    
    if (consoleContainer.classList.contains('fixed')) {
        expandConsoleBtn.innerHTML = '<i class="fa fa-compress mr-1"></i> 退出全屏';
    } else {
        expandConsoleBtn.innerHTML = '<i class="fa fa-expand mr-1"></i> 全屏';
    }
}

function showLoading(message) {
    const loadingOverlay = document.getElementById('loading-overlay');
    const loadingMessage = document.getElementById('loading-message');
    
    loadingMessage.textContent = message;
    loadingOverlay.classList.remove('hidden');
}

function hideLoading() {
    const loadingOverlay = document.getElementById('loading-overlay');
    loadingOverlay.classList.add('hidden');
}

function showNotification(message, type = 'info') {
    const notification = document.getElementById('notification');
    const notificationMessage = document.getElementById('notification-message');
    
    // 设置通知类型
    notification.className = 'notification fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 opacity-0 translate-y-4';
    notification.classList.add(`bg-${type === 'success' ? 'green' : type === 'error' ? 'red' : 'blue'}-500`, `text-white`);
    
    // 设置通知内容
    notificationMessage.textContent = message;
    
    // 显示通知
    setTimeout(() => {
        notification.classList.remove('opacity-0', 'translate-y-4');
    }, 10);
    
    // 3秒后隐藏通知
    setTimeout(() => {
        notification.classList.add('opacity-0', 'translate-y-4');
    }, 3000);
}
    </script>