{% extends "base.html" %}

{% block nav_config %}nav-item-active{% endblock %}
{% block page_title %}配置管理{% endblock %}

{% block content %}
<div class="config-container">
    <!-- 基础配置 -->
    <div class="card">
        <div class="card-header">
            <i class="win-icon win-icon-Settings"></i>
            <h3>基础配置</h3>
        </div>
        <div class="card-content">
            <form id="configForm">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="target_group">目标QQ群号</label>
                        <input type="text" id="target_group" name="target_group" 
                               placeholder="请输入QQ群号" class="form-input">
                        <small class="form-help">设置要同步的QQ群号码</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="napcat_ws">NapCat WebSocket地址</label>
                        <input type="text" id="napcat_ws" name="napcat_ws" 
                               placeholder="ws://127.0.0.1:3001" class="form-input">
                        <small class="form-help">NapCat WebSocket服务地址</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="access_token">访问令牌</label>
                        <input type="password" id="access_token" name="access_token" 
                               placeholder="可选：NapCat访问令牌" class="form-input">
                        <small class="form-help">NapCat API访问令牌（如有设置）</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="chat_count_limit">聊天频率限制</label>
                        <input type="number" id="chat_count_limit" name="chat_count_limit" 
                               placeholder="20" class="form-input" min="1" max="100">
                        <small class="form-help">单位时间内允许的最大消息数量</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="chat_ban_time">聊天封禁时间</label>
                        <input type="number" id="chat_ban_time" name="chat_ban_time" 
                               placeholder="300" class="form-input" min="10" max="3600">
                        <small class="form-help">违规后的封禁时间（秒）</small>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 功能开关 -->
    <div class="card">
        <div class="card-header">
            <i class="win-icon win-icon-ToggleLeft"></i>
            <h3>功能开关</h3>
        </div>
        <div class="card-content">
            <div class="switch-grid">
                <div class="switch-item">
                    <div class="switch-info">
                        <h4>QQ到游戏消息同步</h4>
                        <p>将QQ群消息同步到游戏内</p>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="enable_qq_to_game" name="enable_qq_to_game">
                        <span class="switch-slider"></span>
                    </label>
                </div>
                
                <div class="switch-item">
                    <div class="switch-info">
                        <h4>游戏到QQ消息同步</h4>
                        <p>将游戏内聊天同步到QQ群</p>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="enable_game_to_qq" name="enable_game_to_qq">
                        <span class="switch-slider"></span>
                    </label>
                </div>
                
                <div class="switch-item">
                    <div class="switch-info">
                        <h4>强制绑定QQ</h4>
                        <p>是否要求玩家必须绑定QQ才能游戏</p>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="force_bind_qq" name="force_bind_qq">
                        <span class="switch-slider"></span>
                    </label>
                </div>
                
                <div class="switch-item">
                    <div class="switch-info">
                        <h4>同步群名片</h4>
                        <p>使用QQ群名片作为游戏内显示名称</p>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="sync_group_card" name="sync_group_card">
                        <span class="switch-slider"></span>
                    </label>
                </div>
                
                <div class="switch-item">
                    <div class="switch-info">
                        <h4>检查群成员</h4>
                        <p>验证玩家是否在指定QQ群中</p>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="check_group_member" name="check_group_member">
                        <span class="switch-slider"></span>
                    </label>
                </div>
                
                <div class="switch-item">
                    <div class="switch-info">
                        <h4>启用QQ API</h4>
                        <p>启用QQ API相关功能</p>
                    </div>
                    <label class="switch">
                        <input type="checkbox" id="api_qq_enable" name="api_qq_enable">
                        <span class="switch-slider"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- 配置文件操作 -->
    <div class="card">
        <div class="card-header">
            <i class="win-icon win-icon-Document"></i>
            <h3>配置文件操作</h3>
        </div>
        <div class="card-content">
            <div class="action-buttons">
                <button class="button button-warning" onclick="resetConfig()">
                    <i class="icons10-recycling"></i>
                    重置配置
                </button>
                <button class="button button-accent" onclick="reloadConfig()">
                    <i class="icons10-refresh"></i>
                    重载配置
                </button>
                <button class="button button-primary save-config-btn" onclick="saveConfig()">
                    <i class="icons10-save"></i>
                    <span class="save-text">保存配置</span>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentConfig = {};

// 页面加载时获取配置
document.addEventListener('DOMContentLoaded', function() {
    loadConfig();
});

async function loadConfig() {
    try {
        const response = await fetch('/api/config');
        const config = await response.json();
        currentConfig = config;
        
        // 填充表单
        Object.keys(config).forEach(key => {
            const element = document.getElementById(key);
            if (element) {
                if (element.type === 'checkbox') {
                    element.checked = config[key];
                } else {
                    element.value = config[key] || '';
                }
            }
        });
        
    } catch (error) {
        showNotification('加载配置失败', 'error');
    }
}

async function saveConfig() {
    const saveBtn = document.querySelector('.save-config-btn');
    const saveText = document.querySelector('.save-text');
    
    try {
        // 显示保存状态
        saveBtn.classList.add('saving');
        saveText.textContent = '保存中...';
        
        const formData = new FormData(document.getElementById('configForm'));
        const config = {};
        
        // 收集所有配置项
        for (let [key, value] of formData.entries()) {
            config[key] = value;
        }
        
        // 收集开关状态
        const switches = document.querySelectorAll('input[type="checkbox"]');
        switches.forEach(sw => {
            config[sw.name] = sw.checked;
        });
        
        const response = await fetch('/api/config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        });
        
        const result = await response.json();
        
        if (result.success) {
            showNotification('配置已保存', 'success');
            currentConfig = config;
            
            // 显示成功状态
            saveBtn.classList.remove('saving');
            saveText.textContent = '保存成功';
            
            // 2秒后恢复原状
            setTimeout(() => {
                saveText.textContent = '保存配置';
            }, 2000);
            
            // 重新加载配置以确保界面显示最新状态
            await loadConfig();
        } else {
            saveBtn.classList.remove('saving');
            saveText.textContent = '保存配置';
            showNotification('保存失败: ' + result.error, 'error');
        }
        
    } catch (error) {
        saveBtn.classList.remove('saving');
        saveText.textContent = '保存配置';
        showNotification('保存配置失败', 'error');
    }
}

function resetConfig() {
    if (confirm('确定要重置为默认配置吗？这将清空所有自定义设置。')) {
        // 重置为默认值
        const defaultConfig = {
            "napcat_ws": "ws://127.0.0.1:3001",
            "access_token": "",
            "target_group": 712523104,
            "admins": ["2899659758"],
            "enable_qq_to_game": True,
            "enable_game_to_qq": True,
            "force_bind_qq": True,
            "sync_group_card": True,
            "check_group_member": True,
            "chat_count_limit": 20,
            "chat_ban_time": 300,
            "api_qq_enable": False
        };
        
        currentConfig = defaultConfig;
        
        // 填充表单
        Object.keys(defaultConfig).forEach(key => {
            const element = document.getElementById(key);
            if (element) {
                if (element.type === 'checkbox') {
                    element.checked = defaultConfig[key];
                } else {
                    element.value = defaultConfig[key] || '';
                }
            }
        });
        
        showNotification('已重置为默认配置，请保存以应用', 'info');
    }
}

function reloadConfig() {
    if (confirm('确定要重新加载配置吗？未保存的更改将丢失。')) {
        loadConfig();
        showNotification('配置已重新加载', 'success');
    }
}
</script>

<style>
.config-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.form-input, .form-select {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.form-help {
    color: var(--text-secondary);
    font-size: 12px;
}

.switch-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.switch-info h4 {
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.switch-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 28px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.switch input:checked + .switch-slider {
    background-color: var(--primary-color);
}

.switch input:checked + .switch-slider:before {
    transform: translateX(22px);
}

.button-warning {
    background-color: var(--warning-color);
    color: white;
}

.button-warning:hover {
    background-color: #e07b00;
}

/* 保存配置按钮增强样式 */
.save-config-btn {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
    transition: all 0.3s ease;
}

.save-config-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
    transform: translateY(-1px);
}

.save-config-btn .save-icon {
    font-size: 16px;
    font-weight: bold;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 如果图标不清楚，增强文字显示 */
.save-config-btn .save-text {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 保存按钮加载状态 */
.save-config-btn.saving {
    opacity: 0.7;
    cursor: not-allowed;
}

.save-config-btn.saving .save-icon::before {
    content: "⟳";
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>
{% endblock %}