{% extends "base.html" %}

{% block content %}
{% include 'admin_nav.html' %}

<div class="admin-container">
    <div class="admin-content">
        <div id="toast" class="toast">
            <span id="toastMessage"></span>
        </div>
        
        <div class="admin-card">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-envelope"></i>
                    <h3>邮件设置</h3>
                </div>
            </div>
            
            <form onsubmit="saveEmailSettings(event)" class="admin-form">
                <div class="form-group">
                    <label for="smtp-server">SMTP服务器</label>
                    <input type="text" id="smtp-server" name="smtp_server" 
                           value="{{ settings.get('smtp_server', '') }}" required>
                </div>
                
                <div class="form-group">
                    <label for="smtp-port">SMTP端口</label>
                    <input type="number" id="smtp-port" name="smtp_port" 
                           value="{{ settings.get('smtp_port', 465) }}" required>
                </div>
                
                <div class="form-group">
                    <label for="smtp-user">发件人邮箱</label>
                    <input type="email" id="smtp-user" name="smtp_user" 
                           value="{{ settings.get('smtp_user', '') }}" required>
                </div>
                
                <div class="form-group">
                    <label for="smtp-password">SMTP授权码</label>
                    <input type="password" id="smtp-password" name="smtp_password" 
                           value="{{ settings.get('smtp_password', '') }}" required>
                </div>
                
                <div class="form-group">
                    <label for="test-email">测试邮箱</label>
                    <input type="email" id="test-email" name="test_email" 
                           value="{{ settings.get('test_email', '') }}" 
                           placeholder="用于接收测试邮件的邮箱">
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save"></i> 保存设置
                    </button>
                    <button type="button" class="btn-secondary" onclick="testEmail()">
                        <i class="fas fa-paper-plane"></i> 发送测试邮件
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
/* Toast 提示样式 */
.toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    white-space: pre-wrap;
    max-width: calc(100% - 40px);
}

.toast.show {
    opacity: 1;
    visibility: visible;
    animation: toastIn 0.3s ease forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* 暗色模式适配 */
[data-theme="dark"] .toast {
    background: rgba(0, 0, 0, 0.8);
}
</style>

<script>
function showToast(message) {
    const toast = document.getElementById('toast');
    const toastMessage = document.getElementById('toastMessage');
    toastMessage.textContent = message;
    toast.classList.add('show');
    
    setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}

function saveEmailSettings(event) {
    event.preventDefault();
    const form = event.target;
    const data = new FormData(form);
    
    fetch('/admin/email/settings', {
        method: 'POST',
        body: data
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('保存成功');
        } else {
            showToast(data.error || '保存失败');
        }
    })
    .catch(error => {
        console.error('Save failed:', error);
        showToast('保存失败，请稍后重试');
    });
}

function testEmail() {
    fetch('/admin/email/test', {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('测试邮件已发送');
        } else {
            showToast(data.error || '发送失败');
        }
    })
    .catch(error => {
        console.error('Test failed:', error);
        showToast('发送失败，请稍后重试');
    });
}
</script>
{% endblock %}