<!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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f8f9fa;
            margin-bottom: 50px;
        }
        .container {
            max-width: 900px;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .card-header {
            background-color: #343a40;
            color: white;
            font-weight: bold;
            padding: 15px 20px;
        }
        .card-body {
            padding: 25px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .btn-primary {
            background-color: #007bff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }
        .btn-secondary {
            background-color: #6c757d;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
        }
        .btn-secondary:hover {
            background-color: #545b62;
        }
        .alert {
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .status-card {
            background-color: #e9ecef;
        }
        .status-item {
            margin-bottom: 10px;
            padding: 10px;
            background-color: white;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .status-label {
            font-weight: bold;
            color: #495057;
        }
        .status-value {
            color: #007bff;
        }
        .status-warn {
            color: #ffc107;
        }
        .status-error {
            color: #dc3545;
        }
        .status-success {
            color: #28a745;
        }
        .section-title {
            color: #495057;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #dee2e6;
        }
        .email-tips {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #6c757d;
            margin-top: 10px;
            font-size: 14px;
            color: #6c757d;
        }
        .input-group-text {
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="text-center mb-5">
            <h1>自动重启服务</h1>
            <p class="text-muted">系统配置中心</p>
        </div>

        <!-- 消息提示 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'success' if category == 'success' else 'danger' }} alert-dismissible fade show">
                        {{ message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- 服务状态卡片 -->
        <div class="card status-card">
            <div class="card-header">
                服务状态
            </div>
            <div class="card-body">
                <div class="status-item">
                    <span class="status-label">当前状态：</span>
                    <span class="status-value {% if status.status == '正常运行' %}status-success{% elif status.status == '等待重启' %}status-warn{% else %}status-error{% endif %}">
                        {{ status.status }}
                    </span>
                </div>
                <div class="status-item">
                    <span class="status-label">上次启动时间：</span>
                    <span class="status-value">{{ status.last_boot_time }}</span>
                </div>
                <div class="status-item">
                    <span class="status-label">下次重启时间：</span>
                    <span class="status-value {% if status.time_left == '已到期' %}status-error{% endif %}">{{ status.next_reboot_time }}</span>
                </div>
                <div class="status-item">
                    <span class="status-label">剩余时间：</span>
                    <span class="status-value {% if status.time_left == '已到期' %}status-error{% elif '小时' in status.time_left and '天' not in status.time_left %}status-warn{% endif %}">{{ status.time_left }}</span>
                </div>
            </div>
        </div>

        <!-- 配置表单 -->
        <div class="card">
            <div class="card-header">
                系统配置
            </div>
            <div class="card-body">
                <form id="config-form" action="/save" method="post">
                    <!-- 邮箱服务器设置 -->
                    <div class="mb-4">
                        <h4 class="section-title">邮箱服务器设置</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="smtp_server">SMTP服务器</label>
                                    <input type="text" class="form-control" id="smtp_server" name="smtp_server" 
                                           value="{{ config.email.smtp_server }}" placeholder="例如：smtp.qq.com" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="smtp_port">SMTP端口</label>
                                    <input type="number" class="form-control" id="smtp_port" name="smtp_port" 
                                           value="{{ config.email.smtp_port }}" min="1" max="65535" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" 
                                   value="{{ config.email.username }}" placeholder="您的邮箱地址" required>
                        </div>
                        <div class="form-group">
                            <label for="password">密码/授权码</label>
                            <input type="password" class="form-control" id="password" name="password" 
                                   value="{{ config.email.password }}" placeholder="邮箱密码或授权码" required>
                        </div>
                        <div class="email-tips">
                            <strong>提示：</strong><br>
                            - QQ邮箱需要使用授权码而非登录密码<br>
                            - 网易163邮箱需要开启SMTP服务并获取授权码<br>
                            - Gmail需要开启两步验证并生成应用专用密码
                        </div>
                    </div>

                    <!-- 邮件接收设置 -->
                    <div class="mb-4">
                        <h4 class="section-title">邮件接收设置</h4>
                        <div class="form-group">
                            <label for="sender">发件人邮箱</label>
                            <input type="email" class="form-control" id="sender" name="sender" 
                                   value="{{ config.email.sender }}" placeholder="发送通知的邮箱地址" required>
                        </div>
                        <div class="form-group">
                            <label for="recipients">收件人邮箱 <span class="text-info">(支持多个收件人)</span></label>
                            <input type="text" class="form-control" id="recipients" name="recipients" 
                                   value="{{ recipients_str }}" placeholder="请输入收件人邮箱，多个邮箱用逗号分隔 (例如: user1@example.com, user2@example.com)" required>
                            <small class="form-text text-muted">重启前将发送通知到所有列出的收件人邮箱地址</small>
                            <div id="recipients-count" class="mt-1 text-sm text-secondary">
                                当前设置: {{ recipients_str.split(',')|length }} 个收件人
                            </div>
                        </div>
                        <button type="button" id="test-email-btn" class="btn btn-secondary btn-sm">测试邮件发送</button>
                        <div id="test-result" class="mt-2"></div>
                    </div>

                    <!-- 重启时间设置 -->
                    <div class="mb-4">
                        <h4 class="section-title">重启时间设置</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="reboot_interval_days">重启间隔天数</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="reboot_interval_days" name="reboot_interval_days" 
                                               value="{{ config.reboot_interval_days }}" min="1" max="365" required>
                                        <div class="input-group-append">
                                            <span class="input-group-text">天</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 警告时间设置 -->
                    <div class="mb-4">
                        <h4 class="section-title">警告时间设置</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="reboot_warning_hours">首次警告时间</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="reboot_warning_hours" name="reboot_warning_hours" 
                                               value="{{ config.reboot_warning_hours }}" min="1" max="168" required>
                                        <div class="input-group-append">
                                            <span class="input-group-text">小时前</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="reboot_warning_minutes">最终警告时间</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="reboot_warning_minutes" name="reboot_warning_minutes" 
                                               value="{{ config.reboot_warning_minutes }}" min="1" max="1440" required>
                                        <div class="input-group-append">
                                            <span class="input-group-text">分钟前</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 检查间隔设置 -->
                    <div class="mb-4">
                        <h4 class="section-title">系统设置</h4>
                        <div class="form-group">
                            <label for="check_interval_seconds">检查间隔</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="check_interval_seconds" name="check_interval_seconds" 
                                       value="{{ config.check_interval_seconds }}" min="60" max="86400" required>
                                <div class="input-group-append">
                                    <span class="input-group-text">秒</span>
                                </div>
                            </div>
                            <small class="form-text text-muted">建议设置为3600秒（1小时）</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="reboot_interval_days">重启间隔天数</label>
                            <input type="number" class="form-control" id="reboot_interval_days" name="reboot_interval_days" 
                                   value="{{ config.reboot_interval_days }}" min="1" max="365" required>
                            <small class="form-text text-muted">系统自动重启的周期，以天为单位</small>
                          </div>
                        </div>

                    <!-- 提交按钮 -->
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">保存配置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 实时更新收件人数量
        const recipientsInput = document.getElementById('recipients');
        const recipientsCount = document.getElementById('recipients-count');
        
        function updateRecipientsCount() {
            const value = recipientsInput.value.trim();
            if (!value) {
                recipientsCount.textContent = '当前设置: 0 个收件人';
            } else {
                // 分割并过滤空值
                const count = value.split(',').filter(email => email.trim().length > 0).length;
                recipientsCount.textContent = `当前设置: ${count} 个收件人`;
            }
        }
        
        // 添加事件监听器
        if (recipientsInput && recipientsCount) {
            recipientsInput.addEventListener('input', updateRecipientsCount);
            // 初始化时更新一次
            updateRecipientsCount();
        }
        
        // 测试邮件发送功能
        document.getElementById('test-email-btn').addEventListener('click', function() {
            const resultDiv = document.getElementById('test-result');
            resultDiv.innerHTML = '<div class="alert alert-info">正在发送测试邮件...</div>';
            
            fetch('/test-email', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    resultDiv.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
                } else {
                    resultDiv.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
                }
                
                // 3秒后清除消息
                setTimeout(() => {
                    resultDiv.innerHTML = '';
                }, 5000);
            })
            .catch(error => {
                resultDiv.innerHTML = '<div class="alert alert-danger">请求失败，请稍后重试</div>';
            });
        });

        // 自动刷新状态（每分钟）
        function refreshStatus() {
            fetch('/status')
            .then(response => response.json())
            .then(data => {
                // 更新状态显示
                const statusElements = document.querySelectorAll('.status-value');
                if (statusElements.length >= 4) {
                    // 更新状态文本
                    statusElements[0].textContent = data.status;
                    statusElements[0].className = 'status-value ' + 
                        (data.status === '正常运行' ? 'status-success' : 
                         data.status === '等待重启' ? 'status-warn' : 'status-error');
                    
                    statusElements[1].textContent = data.last_boot_time;
                    statusElements[2].textContent = data.next_reboot_time;
                    statusElements[2].className = 'status-value ' + 
                        (data.time_left === '已到期' ? 'status-error' : '');
                    
                    statusElements[3].textContent = data.time_left;
                    statusElements[3].className = 'status-value ' + 
                        (data.time_left === '已到期' ? 'status-error' : 
                         data.time_left.includes('小时') && !data.time_left.includes('天') ? 'status-warn' : '');
                }
            });
        }
        
        // 每分钟刷新一次状态
        setInterval(refreshStatus, 60000);
    </script>
</body>
</html>