{% extends "base.html" %}

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

<div class="admin-container">
    <div class="admin-content">
        <div class="admin-card">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-cog"></i>
                    <h3>赞赏设置</h3>
                </div>
            </div>
            <form onsubmit="submitDonateSettings(event)" class="admin-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="switch-label">
                        <span>赞赏功能</span>
                        <label class="switch">
                            <input type="checkbox" id="donate-enabled" name="donate_enabled" 
                                   {% if settings.donate_enabled == '1' %}checked{% endif %}>
                            <span class="slider round"></span>
                        </label>
                    </label>
                </div>
                
                <div class="form-group">
                    <label for="donate-text">赞赏文字</label>
                    <input type="text" id="donate-text" name="donate_text" 
                           value="{{ settings.donate_text }}" required>
                </div>
                
                <div class="form-group">
                    <label for="donate-image">赞赏二维码</label>
                    <div class="file-input-wrapper">
                        <input type="file" id="donate-image" name="donate_image" accept="image/*">
                        <label for="donate-image" class="file-input-label">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>选择文件</span>
                        </label>
                    </div>
                    {% if settings.donate_image %}
                    <div class="current-image">
                        <img src="{{ settings.donate_image }}" alt="当前赞赏二维码">
                    </div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="donate-note">赞赏说明</label>
                    <input type="text" id="donate-note" name="donate_note" 
                           value="{{ settings.donate_note }}" placeholder="显示在二维码下方的说明文字">
                </div>
                
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save"></i> 保存设置
                </button>
            </form>
        </div>

        <!-- 添加赞赏人卡片 -->
        <div class="admin-card">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-user-plus"></i>
                    <h3>添加赞赏人</h3>
                </div>
            </div>
            <form onsubmit="submitDonor(event)" class="admin-form">
                <div class="form-group">
                    <label for="donor-name">赞赏人</label>
                    <input type="text" id="donor-name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="donor-amount">赞赏金额</label>
                    <input type="text" id="donor-amount" name="amount" required>
                </div>
                <div class="form-group">
                    <label for="donor-link">个人链接</label>
                    <input type="url" id="donor-link" name="link" placeholder="http://...">
                </div>
                <div class="form-group">
                    <label for="donor-message">留言</label>
                    <textarea id="donor-message" name="message" rows="3" placeholder="赞赏留言..."></textarea>
                </div>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-plus"></i> 添加赞赏人
                </button>
            </form>
        </div>

        <!-- 赞赏人列表卡片 -->
        <div class="admin-card">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-list"></i>
                    <h3>赞赏人列表</h3>
                    <div class="search-box">
                        <input type="text" id="donor-search" placeholder="搜索赞赏人...">
                    </div>
                </div>
                <div class="header-right">
                    <div class="total-amount">
                        总金额：<span>¥{{ total_amount|default('0.00') }}</span>
                    </div>
                </div>
            </div>
            <div class="donors-list">
                {% for donor in donors %}
                <div class="donor-item" data-donor-id="{{ donor.id }}">
                    <div class="donor-info">
                        <span class="donor-name">{{ donor.name }}</span>
                        <span class="donor-amount">{{ donor.amount }}</span>
                        {% if donor.message %}
                        <span class="donor-message">{{ donor.message }}</span>
                        {% endif %}
                        {% if donor.link %}
                        <span class="donor-link">
                            <a href="{{ donor.link }}" target="_blank">
                                <i class="fas fa-link"></i>
                            </a>
                        </span>
                        {% endif %}
                    </div>
                    <div class="donor-controls">
                        <button onclick="editDonor({{ donor.id }})" class="btn-edit">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button onclick="deleteDonor({{ donor.id }})" class="btn-delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- 添加编辑模态框 -->
<div id="edit-donor-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>编辑赞赏人</h3>
            <span class="close">&times;</span>
        </div>
        <form id="edit-donor-form" class="admin-form">
            <input type="hidden" id="edit-donor-id">
            <div class="form-group">
                <label for="edit-donor-name">赞赏人</label>
                <input type="text" id="edit-donor-name" name="name" required>
            </div>
            <div class="form-group">
                <label for="edit-donor-amount">赞赏金额</label>
                <input type="text" id="edit-donor-amount" name="amount" required>
            </div>
            <div class="form-group">
                <label for="edit-donor-link">个人链接</label>
                <input type="url" id="edit-donor-link" name="link" placeholder="http://...">
            </div>
            <div class="form-group">
                <label for="edit-donor-message">留言</label>
                <textarea id="edit-donor-message" name="message" rows="3"></textarea>
            </div>
            <button type="submit" class="btn-primary">
                <i class="fas fa-save"></i> 保存修改
            </button>
        </form>
    </div>
</div>

<script>
function submitDonateSettings(event) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    
    // 添加开关状态
    formData.set('donate_enabled', form.querySelector('#donate-enabled').checked ? '1' : '0');
    
    fetch('{{ url_for("update_donate_settings") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('设置已更新', 'success');
        } else {
            showNotification(data.error || '更新失败', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('更新失败，请重试', 'error');
    });
}

function updatePreview(text, imageUrl) {
    const preview = document.querySelector('.donate-preview');
    preview.querySelector('.donate-text').textContent = text;
    if (imageUrl) {
        let img = preview.querySelector('.donate-qr');
        if (!img) {
            img = document.createElement('img');
            img.className = 'donate-qr';
            preview.appendChild(img);
        }
        img.src = imageUrl;
        img.alt = '赞赏二维码';
    }
}

function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    
    // 添加图标
    const icon = document.createElement('i');
    icon.className = type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
    notification.appendChild(icon);
    
    // 添加消息文本
    const text = document.createElement('span');
    text.textContent = message;
    notification.appendChild(text);
    
    // 添加关闭按钮
    const closeBtn = document.createElement('i');
    closeBtn.className = 'fas fa-times close-notification';
    closeBtn.onclick = () => closeNotification(notification);
    notification.appendChild(closeBtn);
    
    document.body.appendChild(notification);
    
    // 确保动画正常执行
    notification.style.opacity = '0';
    notification.style.transform = 'translateY(20px)';
    
    // 强制重排，确保动画生效
    notification.offsetHeight;
    
    // 显示通知
    notification.style.opacity = '1';
    notification.style.transform = 'translateY(0)';
    
    // 延迟关闭通知
    const timer = setTimeout(() => {
        closeNotification(notification);
    }, 2000);
    
    // 鼠标悬停时暂停关闭计时
    notification.addEventListener('mouseenter', () => {
        clearTimeout(timer);
    });
    
    // 鼠标离开时重新开始计时
    notification.addEventListener('mouseleave', () => {
        setTimeout(() => {
            closeNotification(notification);
        }, 1000);
    });
}

// 修改关闭通知函数
function closeNotification(notification) {
    // 添加关闭动画
    notification.style.opacity = '0';
    notification.style.transform = 'translateY(20px)';
    
    // 等待动画完成后移除元素
    setTimeout(() => {
        if (notification && notification.parentElement) {
            notification.remove();
        }
    }, 300);
}

// 添加赞赏人
function submitDonor(event) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    
    fetch('{{ url_for("add_donor") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('赞赏人添加成功', 'success');
            form.reset();
            location.reload();
        } else {
            showNotification(data.error || '添加失败', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('添加失败，请重试', 'error');
    });
}

// 删除赞赏人
function deleteDonor(id) {
    if (confirm('确定要删除这条赞赏记录吗？')) {
        fetch(`{{ url_for('delete_donor', donor_id=0) }}`.replace('0', id), {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('赞赏记录已删除', 'success');
                location.reload();
            } else {
                showNotification(data.error || '删除失败', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('删除失败，请重试', 'error');
        });
    }
}

function updateDonateEnabled(enabled) {
    fetch('{{ url_for("update_donate_settings") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `donate_enabled=${enabled ? '1' : '0'}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('设置已更新', 'success');
        } else {
            showNotification(data.error || '更新失败', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('更新失败，请重试', 'error');
    });
}

// 搜索功能
document.getElementById('donor-search').addEventListener('input', function(e) {
    const searchText = e.target.value.toLowerCase();
    const donors = document.querySelectorAll('.donor-item');
    
    donors.forEach(donor => {
        const name = donor.querySelector('.donor-name').textContent.toLowerCase();
        const message = donor.querySelector('.donor-message')?.textContent.toLowerCase() || '';
        
        if (name.includes(searchText) || message.includes(searchText)) {
            donor.style.display = '';
        } else {
            donor.style.display = 'none';
        }
    });
});

// 编辑功能
function editDonor(id) {
    const modal = document.getElementById('edit-donor-modal');
    const donorItem = document.querySelector(`.donor-item[data-donor-id="${id}"]`);
    
    // 填充表单
    document.getElementById('edit-donor-id').value = id;
    document.getElementById('edit-donor-name').value = donorItem.querySelector('.donor-name').textContent;
    document.getElementById('edit-donor-amount').value = donorItem.querySelector('.donor-amount').textContent;
    document.getElementById('edit-donor-link').value = donorItem.querySelector('.donor-link a')?.href || '';
    document.getElementById('edit-donor-message').value = donorItem.querySelector('.donor-message')?.textContent || '';
    
    modal.style.display = 'block';
}

// 关闭模态框
document.querySelector('.close').addEventListener('click', function() {
    document.getElementById('edit-donor-modal').style.display = 'none';
});

// 提交编辑表单
document.getElementById('edit-donor-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const id = document.getElementById('edit-donor-id').value;
    const formData = new FormData(this);
    
    fetch(`/admin/edit_donor/${id}`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('赞赏信息已更新', 'success');
            document.getElementById('edit-donor-modal').style.display = 'none';
            location.reload();
        } else {
            showNotification(data.error || '修改失败', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('修改失败，请重试', 'error');
    });
});
</script>

<style>
.donate-layout {
    display: flex;
    gap: 40px;  /* 增加间距 */
    align-items: flex-start;
    margin: 0 auto;  /* 居中布局 */
    max-width: 1000px;  /* 限制最大宽度 */
}

.donate-form-section {
    width: 50%;  /* 固定宽度为50% */
    padding-right: 20px;  /* 添加右内边距 */
    border-right: 1px solid #e0e0e0;  /* 添加分隔线 */
}

.preview-section {
    width: 50%;  /* 固定宽度为50% */
    padding-left: 20px;  /* 添加左内边距 */
}

.preview-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 14px;
    text-align: center;  /* 居中标题 */
}

.donate-preview {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 添加阴影 */
}

.donate-text {
    margin-bottom: 15px;
    color: #333;
    font-size: 14px;
}

.donate-qr {
    max-width: 150px;  /* 调整二维码尺寸 */
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}

.admin-form input[type="text"],
.admin-form input[type="url"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 14px;
}

.admin-form input:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
}

.file-input-wrapper {
    margin-bottom: 10px;
}

.file-input-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f5f5f7;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-input-label:hover {
    background: #e5e5e7;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .donate-layout {
        flex-direction: column;
        gap: 20px;
    }
    
    .donate-form-section,
    .preview-section {
        width: 100%;
        padding: 0;
        border: none;
    }
    
    .preview-section {
        margin-top: 20px;
        border-top: 1px solid #e0e0e0;
        padding-top: 20px;
    }
}

/* 添加赞赏人列表样式 */
.donors-list {
    margin-top: 20px;
}

.donor-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.donor-info {
    flex: 1;
    margin-right: 15px;
    min-width: 0;
    overflow: hidden;
}

.donor-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.donor-amount {
    font-size: 14px;
    color: #007AFF;
    margin-bottom: 4px;
}

.donor-message {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.donor-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-self: flex-start;
}

.btn-edit, .btn-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: all 0.3s ease;
}

.btn-edit {
    color: #007AFF;
}

.btn-delete {
    color: #ff3b30;
}

.btn-edit:hover {
    color: #0056b3;
}

.btn-delete:hover {
    color: #dc3545;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .donor-item {
        padding: 10px;
    }
    
    .donor-info {
        margin-right: 12px;
    }
    
    .donor-name, .donor-amount {
        font-size: 13px;
    }
    
    .donor-message {
        font-size: 12px;
        line-height: 1.3;
    }
    
    .donor-controls {
        gap: 6px;
    }
    
    .btn-edit, .btn-delete {
        padding: 3px;
    }
}

/* 开关样式 */
.switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

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

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

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

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

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* 当前图片预览 */
.current-image {
    margin-top: 10px;
    max-width: 200px;
}

.current-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-left h3 {
    margin: 0;
    font-size: 16px;
}

.search-box {
    margin: 0 0 0 20px;  /* 调整左边距 */
}

.search-box input {
    padding: 6px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 14px;
    width: 200px;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
}

.total-amount {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.total-amount span {
    color: #007AFF;
    margin-left: 5px;
}

textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
}

textarea:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
}

.donor-message {
    color: #666;
    font-size: 13px;
    font-style: italic;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .donor-info {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    
    .donor-message {
        max-width: 100%;
    }
    
    .total-amount {
        font-size: 14px;
    }
    
    .header-left {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .search-box {
        margin: 0;
        width: 100%;
        order: 2;  /* 在移动端将搜索框放到下一行 */
    }
    
    .search-box input {
        width: 100%;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .header-right {
        width: 100%;
    }
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal-content {
    position: relative;
    background: white;
    margin: 10% auto;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.close {
    font-size: 24px;
    color: #666;
    cursor: pointer;
}

.close:hover {
    color: #333;
}

/* 添加提示框样式 */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 280px;
    max-width: 400px;
    pointer-events: auto;
    will-change: transform, opacity;
}

.notification.success {
    background: #4CAF50;
}

.notification.error {
    background: #f44336;
}

.notification i {
    font-size: 16px;
}

.notification .close-notification {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    padding: 4px;
}

.notification .close-notification:hover {
    opacity: 1;
}

/* 添加悬停效果 */
.notification:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* 确保动画在移动端也正常工作 */
@media (max-width: 768px) {
    .notification {
        width: calc(100% - 32px);
        right: 16px;
        min-width: 0;
    }
}
</style>
{% endblock %}