<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 后台管理</title>
    <link rel="stylesheet" href="/css/admin.css">
    <link rel="icon" href="/img/favicon.png" type="image/png">
</head>
<body>
    <div class="admin-container">
        <header class="admin-header">
            <div class="header-left">
                <a href="/admin" class="back-link">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="15 18 9 12 15 6"/>
                    </svg>
                </a>
                <h1>系统设置</h1>
            </div>
            <div class="header-right">
                <span id="current-user"></span>
                <button id="logout-btn" class="btn btn-secondary">登出</button>
            </div>
        </header>

        <main class="admin-content">
            <div class="settings-container">
                <!-- 数据库设置 -->
                <section class="settings-section">
                    <div class="section-header">
                        <h2>数据库设置</h2>
                        <p class="section-description">管理数据库连接和配置</p>
                    </div>
                    <div class="settings-card">
                        <div class="database-info" id="database-info">
                            <div class="info-item">
                                <span class="info-label">数据库类型</span>
                                <span class="info-value" id="db-type">-</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">连接状态</span>
                                <span class="info-value status-badge" id="db-status">-</span>
                            </div>
                            <div class="info-item" id="db-file-item" style="display: none;">
                                <span class="info-label">数据库文件</span>
                                <span class="info-value" id="db-file">-</span>
                            </div>
                        </div>

                        <!-- 数据库密码修改（仅 MySQL） -->
                        <div class="database-password" id="database-password-section" style="display: none;">
                            <h3>修改数据库 Root 密码</h3>
                            <p class="password-warning">⚠️ 警告：修改密码后需要更新环境变量 DB_PASSWORD 并重启服务器！</p>
                            <form id="password-form" class="password-form">
                                <div class="form-group">
                                    <label>当前密码</label>
                                    <input type="password" id="current-password" class="form-input" required>
                                </div>
                                <div class="form-group">
                                    <label>新密码</label>
                                    <input type="password" id="new-password" class="form-input" required>
                                </div>
                                <div class="form-group">
                                    <label>确认新密码</label>
                                    <input type="password" id="confirm-password" class="form-input" required>
                                </div>
                                <button type="submit" class="btn btn-danger">更新密码</button>
                            </form>
                            <div id="password-result"></div>
                        </div>

                        <!-- 数据库转换 -->
                        <div class="database-convert">
                            <h3>数据库转换</h3>
                            <p class="convert-warning">⚠️ 警告：数据库转换会导出当前数据并导入到新数据库，请确保已备份数据！</p>
                            <div class="convert-form">
                                <select id="target-db-type">
                                    <option value="sqlite">SQLite</option>
                                    <option value="mysql">MySQL</option>
                                </select>
                                <button class="btn btn-danger" id="convert-db-btn">转换数据库</button>
                            </div>
                            <div id="convert-result"></div>
                        </div>
                    </div>
                </section>

                <!-- 系统信息 -->
                <section class="settings-section">
                    <div class="section-header">
                        <h2>系统信息</h2>
                        <p class="section-description">查看系统运行状态和统计信息</p>
                    </div>
                    <div class="settings-card">
                        <div class="system-stats" id="system-stats">
                            <div class="stat-item">
                                <span class="stat-label">用户总数</span>
                                <span class="stat-value" id="stat-users">-</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">路由总数</span>
                                <span class="stat-value" id="stat-routes">-</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">日志条目</span>
                                <span class="stat-value" id="stat-logs">-</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">服务器时间</span>
                                <span class="stat-value" id="stat-time">-</span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 操作系统信息 -->
                <section class="settings-section">
                    <div class="section-header">
                        <h2>运行环境</h2>
                        <p class="section-description">查看服务器运行环境信息</p>
                    </div>
                    <div class="settings-card">
                        <div class="os-info" id="os-info">
                            <div class="info-item">
                                <span class="info-label">操作系统</span>
                                <span class="info-value" id="os-type">-</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">系统架构</span>
                                <span class="info-value" id="os-arch">-</span>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <script src="/js/admin.js"></script>
    <script src="/js/settings.js"></script>
</body>
</html>
