{% extends "base.html" %}

{% block title %}系统设置 - ProxyAuto Pro{% endblock %}

{% block content %}
<div class="page-header">
    <h1>系统设置</h1>
</div>

<form id="settings-form" class="form-card">
    <section class="form-section">
        <h2 class="section-title">AWS 凭证</h2>
        <div class="form-grid">
            <div class="form-group">
                <label for="aws_access_key">AWS Access Key</label>
                {% if config.aws_access_key %}
                <div class="current-value">当前: {{ mask_secret(config.aws_access_key) }}</div>
                {% endif %}
                <input type="text" id="aws_access_key" name="aws_access_key"
                       placeholder="输入新的 Access Key">
                <small class="form-hint">留空则保持原值不变</small>
            </div>
            <div class="form-group">
                <label for="aws_secret_key">AWS Secret Key</label>
                {% if config.aws_secret_key %}
                <div class="current-value">当前: {{ mask_secret(config.aws_secret_key) }}</div>
                {% endif %}
                <input type="password" id="aws_secret_key" name="aws_secret_key"
                       placeholder="输入新的 Secret Key">
                <small class="form-hint">留空则保持原值不变</small>
            </div>
        </div>

        <div class="form-group" style="margin-top: 1rem;">
            <label class="checkbox-label">
                <input type="checkbox" id="release_old_eip" name="release_old_eip"
                       {% if config.release_old_eip %}checked{% endif %}>
                <span class="checkbox-text">自动释放旧 Elastic IP</span>
                <small class="form-hint" style="display: block; margin-left: 1.5rem;">建议开启，避免产生闲置 IP 费用</small>
            </label>
        </div>
    </section>

    <div class="form-divider"></div>

    <section class="form-section">
        <h2 class="section-title">Cloudflare 认证</h2>
        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">
            Cloudflare 凭证用于更新 DNS 记录。每台机器的域名绑定请在<a href="{{ url_for('machines') }}">节点管理</a>中配置。
        </p>

        <div class="form-group">
            <label>认证方式</label>
            <div class="segmented-control">
                <input type="radio" id="auth_api_token" name="cloudflare_auth_type" value="api_token"
                       {% if config.cloudflare_auth_type != 'global_key' %}checked{% endif %}>
                <label for="auth_api_token">API Token</label>
                <input type="radio" id="auth_global_key" name="cloudflare_auth_type" value="global_key"
                       {% if config.cloudflare_auth_type == 'global_key' %}checked{% endif %}>
                <label for="auth_global_key">Global API Key</label>
            </div>
        </div>

        <div id="api-token-fields" class="auth-fields" style="{% if config.cloudflare_auth_type == 'global_key' %}display: none;{% endif %}">
            <div class="form-group">
                <label for="cf_api_token">API Token</label>
                {% if config.cf_api_token %}
                <div class="current-value">当前: {{ mask_secret(config.cf_api_token) }}</div>
                {% endif %}
                <input type="password" id="cf_api_token" name="cf_api_token"
                       placeholder="输入新的 API Token">
                <small class="form-hint">留空则保持原值不变</small>
            </div>
        </div>

        <div id="global-key-fields" class="auth-fields" style="{% if config.cloudflare_auth_type != 'global_key' %}display: none;{% endif %}">
            <div class="form-grid">
                <div class="form-group">
                    <label for="cf_email">Cloudflare Email</label>
                    {% if config.cf_email %}
                    <div class="current-value">当前: {{ config.cf_email }}</div>
                    {% endif %}
                    <input type="email" id="cf_email" name="cf_email" value="{{ config.cf_email or '' }}"
                           placeholder="输入 Cloudflare 账户邮箱">
                </div>
                <div class="form-group">
                    <label for="cf_api_key">Global API Key</label>
                    {% if config.cf_api_key %}
                    <div class="current-value">当前: {{ mask_secret(config.cf_api_key) }}</div>
                    {% endif %}
                    <input type="password" id="cf_api_key" name="cf_api_key"
                           placeholder="输入新的 Global API Key">
                    <small class="form-hint">留空则保持原值不变</small>
                </div>
            </div>
        </div>
    </section>

    <div class="form-divider"></div>

    <section class="form-section">
        <h2 class="section-title">邮件通知设置</h2>
        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">
            配置 SMTP 服务器用于发送流量预警邮件通知。
        </p>

        <div class="form-grid">
            <div class="form-group">
                <label for="smtp_host">SMTP 服务器</label>
                <input type="text" id="smtp_host" name="smtp_host" value="{{ config.smtp_host or '' }}"
                       placeholder="例如: smtp.gmail.com">
            </div>
            <div class="form-group">
                <label for="smtp_port">端口</label>
                <input type="number" id="smtp_port" name="smtp_port" value="{{ config.smtp_port or 587 }}"
                       placeholder="587">
            </div>
        </div>
        <div class="form-grid">
            <div class="form-group">
                <label for="smtp_user">SMTP 用户名</label>
                <input type="text" id="smtp_user" name="smtp_user" value="{{ config.smtp_user or '' }}"
                       placeholder="发件邮箱地址">
            </div>
            <div class="form-group">
                <label for="smtp_password">SMTP 密码</label>
                {% if config.smtp_password %}
                <div class="current-value">当前: {{ mask_secret(config.smtp_password) }}</div>
                {% endif %}
                <input type="password" id="smtp_password" name="smtp_password"
                       placeholder="输入新密码 (留空保持原值)">
            </div>
        </div>
        <div class="form-grid">
            <div class="form-group">
                <label for="alert_email">预警接收邮箱</label>
                <input type="email" id="alert_email" name="alert_email" value="{{ config.alert_email or '' }}"
                       placeholder="接收预警通知的邮箱">
            </div>
            <div class="form-group" style="display: flex; align-items: center; padding-top: 1.5rem;">
                <label class="checkbox-label">
                    <input type="checkbox" id="smtp_use_tls" name="smtp_use_tls"
                           {% if config.smtp_use_tls %}checked{% endif %}>
                    <span class="checkbox-text">使用 STARTTLS</span>
                </label>
            </div>
        </div>
        <div class="form-group" style="margin-top: 0.5rem;">
            <button type="button" class="btn btn-secondary btn-sm" onclick="testEmail()">
                <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    <polyline points="22,6 12,13 2,6"/>
                </svg>
                发送测试邮件
            </button>
        </div>
    </section>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary btn-lg">
            <span class="btn-text">保存系统配置</span>
            <span class="btn-loading" style="display: none;">
                <svg class="spinner" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="32" stroke-linecap="round"/>
                </svg>
                保存中...
            </span>
        </button>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
// 切换认证方式
document.querySelectorAll('input[name="cloudflare_auth_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        document.getElementById('api-token-fields').style.display =
            this.value === 'api_token' ? 'block' : 'none';
        document.getElementById('global-key-fields').style.display =
            this.value === 'global_key' ? 'block' : 'none';
    });
});

// 提交表单
document.getElementById('settings-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const btn = this.querySelector('button[type="submit"]');
    const btnText = btn.querySelector('.btn-text');
    const btnLoading = btn.querySelector('.btn-loading');

    btn.disabled = true;
    btnText.style.display = 'none';
    btnLoading.style.display = 'flex';

    const formData = {
        aws_access_key: document.getElementById('aws_access_key').value,
        aws_secret_key: document.getElementById('aws_secret_key').value,
        cloudflare_auth_type: document.querySelector('input[name="cloudflare_auth_type"]:checked').value,
        cf_api_token: document.getElementById('cf_api_token').value,
        cf_email: document.getElementById('cf_email').value,
        cf_api_key: document.getElementById('cf_api_key').value,
        release_old_eip: document.getElementById('release_old_eip').checked,
        smtp_host: document.getElementById('smtp_host').value,
        smtp_port: parseInt(document.getElementById('smtp_port').value) || 587,
        smtp_user: document.getElementById('smtp_user').value,
        smtp_password: document.getElementById('smtp_password').value,
        smtp_use_tls: document.getElementById('smtp_use_tls').checked,
        alert_email: document.getElementById('alert_email').value,
    };

    try {
        const response = await fetch('/api/settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        });
        const result = await response.json();

        if (result.ok) {
            showToast('success', '配置已更新！');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast('error', result.message);
        }
    } catch (error) {
        showToast('error', `保存失败: ${error.message}`);
    } finally {
        btn.disabled = false;
        btnText.style.display = 'inline';
        btnLoading.style.display = 'none';
    }
});

// 测试邮件发送
async function testEmail() {
    const smtpHost = document.getElementById('smtp_host').value;
    const alertEmail = document.getElementById('alert_email').value;

    if (!smtpHost || !alertEmail) {
        showToast('error', '请先填写 SMTP 服务器和接收邮箱');
        return;
    }

    try {
        const response = await fetch('/api/test-email', { method: 'POST' });
        const result = await response.json();
        if (result.ok) {
            showToast('success', '测试邮件发送成功，请检查收件箱');
        } else {
            showToast('error', result.message);
        }
    } catch (error) {
        showToast('error', `发送失败: ${error.message}`);
    }
}
</script>
{% endblock %}