{% extends "base.html" %}

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

<div class="admin-container">
    <div class="admin-content">
        <!-- 标签页导航 -->
        <div class="tab-nav">
            <button class="tab-btn active" onclick="switchTab('unnotified')">
                <i class="fas fa-bell-slash"></i>
                未通知应用
            </button>
            <button class="tab-btn" onclick="switchTab('notified')">
                <i class="fas fa-bell"></i>
                已通知应用
            </button>
        </div>

        <!-- 未通知应用 -->
        <div class="admin-card" id="unnotified-tab">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-bell-slash"></i>
                    <h3>未通知应用</h3>
                </div>
                <div class="filter-sort">
                    <select class="sort-select" onchange="sortTable(this, 'unnotified')">
                        <option value="last_added_desc">最近添加时间 ↓</option>
                        <option value="last_added_asc">最近添加时间 ↑</option>
                        <option value="count_desc">关注人数 ↓</option>
                        <option value="count_asc">关注人数 ↑</option>
                    </select>
                    <div class="search-box">
                        <input type="text" class="search-input" 
                               placeholder="搜索未通知应用..." 
                               onkeyup="filterTable(this, 'unnotified')">
                        <i class="fas fa-search"></i>
                    </div>
                </div>
            </div>

            <div class="wishlist-stats">
                <table class="wishlist-table">
                    <thead>
                        <tr>
                            <th>应用名称</th>
                            <th>关注人数</th>
                            <th>最早添加时间</th>
                            <th>最近添加时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in wishlist_items %}
                            {% if not item.notified %}
                        <tr class="wishlist-row">
                            <td class="app-name">{{ item.app_name }}</td>
                            <td>{{ item.count }}</td>
                            <td>{{ item.first_added }}</td>
                            <td>{{ item.last_added }}</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn-view" onclick="viewUsers('{{ item.app_name }}')" title="查看用户">
                                        <i class="fas fa-users"></i>
                                    </button>
                                    <button class="btn-notify large" onclick="notifyUsers('{{ item.app_name }}')" title="发送通知">
                                        <i class="fas fa-envelope"></i>
                                        <span>发送通知</span>
                                    </button>
                                    <button class="btn-delete" onclick="deleteWishlistItem('{{ item.app_name }}')" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 已通知应用 -->
        <div class="admin-card" id="notified-tab" style="display: none;">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-bell"></i>
                    <h3>已通知应用</h3>
                </div>
                <div class="filter-sort">
                    <select class="sort-select" onchange="sortTable(this, 'notified')">
                        <option value="last_added_desc">最近添加时间 ↓</option>
                        <option value="last_added_asc">最近添加时间 ↑</option>
                        <option value="count_desc">关注人数 ↓</option>
                        <option value="count_asc">关注人数 ↑</option>
                    </select>
                    <div class="search-box">
                        <input type="text" class="search-input" 
                               placeholder="搜索已通知应用..." 
                               onkeyup="filterTable(this, 'notified')">
                        <i class="fas fa-search"></i>
                    </div>
                </div>
            </div>

            <div class="wishlist-stats">
                <table class="wishlist-table notified">
                    <thead>
                        <tr>
                            <th>应用名称</th>
                            <th>关注人数</th>
                            <th>最早添加时间</th>
                            <th>最近添加时间</th>
                            <th>通知时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in wishlist_items %}
                            {% if item.notified %}
                        <tr class="wishlist-row">
                            <td class="app-name">{{ item.app_name }}</td>
                            <td>{{ item.count }}</td>
                            <td>{{ item.first_added }}</td>
                            <td>{{ item.last_added }}</td>
                            <td>{{ item.notified_at }}</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn-view" onclick="viewUsers('{{ item.app_name }}')" title="查看用户">
                                        <i class="fas fa-users"></i>
                                    </button>
                                    <button class="btn-notify" onclick="notifyUsers('{{ item.app_name }}')" title="重新发送通知">
                                        <i class="fas fa-paper-plane"></i>
                                        <span>重新发送</span>
                                    </button>
                                    <button class="btn-delete" onclick="deleteWishlistItem('{{ item.app_name }}')" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 用户列表弹窗 -->
<div id="usersModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>关注用户列表</h3>
            <button class="close-btn" onclick="closeUsersModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div id="usersList" class="users-list"></div>
    </div>
</div>

<!-- Toast 容器 -->
<div id="toast" class="toast"></div>

<style>
.wishlist-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.wishlist-table th,
.wishlist-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.wishlist-table th {
    background: #f5f5f5;
    font-weight: 600;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-view,
.btn-notify,
.btn-delete {
    padding: 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-view {
    background: #1890ff;
    color: white;
}

.btn-notify {
    background: #52c41a;
    color: white;
}

.btn-notify:hover {
    background: #73d13d;
}

.btn-delete {
    background: #ff4d4f;
    color: white;
}

.btn-view:hover {
    background: #40a9ff;
}

.btn-delete:hover {
    background: #ff7875;
}

.users-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.user-email {
    font-size: 12px;
    color: #666;
}

/* 暗色模式适配 */
[data-theme="dark"] .wishlist-table th {
    background: #1f1f1f;
}

[data-theme="dark"] .wishlist-table td {
    border-color: #333;
}

[data-theme="dark"] .user-item {
    border-color: #333;
}

[data-theme="dark"] .user-email {
    color: #999;
}

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

.modal-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .modal-content {
    background: #242424;
}

.admin-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.search-box {
    position: relative;
    width: 300px;
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    padding-right: 35px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
    outline: none;
}

.search-box i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* 暗色模式适配 */
[data-theme="dark"] .admin-card {
    background: #242424;
}

[data-theme="dark"] .card-header {
    border-color: #333;
}

[data-theme="dark"] .search-input {
    background: #333;
    border-color: #444;
    color: #fff;
}

[data-theme="dark"] .search-input:focus {
    border-color: #177ddc;
    box-shadow: 0 0 0 2px rgba(23,125,220,0.2);
}

[data-theme="dark"] .search-box i {
    color: #666;
}

/* 标签页样式 */
.tab-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background: white;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tab-btn.active {
    background: #1890ff !important;
    color: white !important;
}

.tab-btn:hover:not(.active) {
    background: #f5f5f5;
}

/* 暗色模式适配 */
[data-theme="dark"] .tab-btn {
    background: #242424;
    color: #999;
}

[data-theme="dark"] .tab-btn.active {
    background: #177ddc !important;
    color: white !important;
}

[data-theme="dark"] .tab-btn:hover:not(.active) {
    background: #333;
}

/* Toast 样式 */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    z-index: 1000;
    display: none;
    animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* 暗色模式适配 */
[data-theme="dark"] .toast {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

/* Add styles for filter and sort */
.filter-sort {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-select,
.sort-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:hover,
.sort-select:hover {
    border-color: #40a9ff;
}

.filter-select:focus,
.sort-select:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
    outline: none;
}

/* Dark mode styles for filter and sort */
[data-theme="dark"] .filter-select,
[data-theme="dark"] .sort-select {
    background: #333;
    border-color: #444;
    color: #fff;
}

[data-theme="dark"] .filter-select:hover,
[data-theme="dark"] .sort-select:hover {
    border-color: #177ddc;
}

[data-theme="dark"] .filter-select:focus,
[data-theme="dark"] .sort-select:focus {
    border-color: #177ddc;
    box-shadow: 0 0 0 2px rgba(23,125,220,0.2);
}
</style>

<script>
function viewUsers(appName) {
    fetch(`/admin/wishlist/users/${encodeURIComponent(appName)}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const usersList = document.getElementById('usersList');
                usersList.innerHTML = data.users.map(user => `
                    <div class="user-item">
                        <img src="${user.avatar || '/static/images/default-avatar.png'}" 
                             alt="${user.name}" 
                             class="user-avatar">
                        <div class="user-info">
                            <div class="user-name">${user.name}</div>
                            <div class="user-email">${user.email || '未设置邮箱'}</div>
                        </div>
                    </div>
                `).join('');
                
                document.getElementById('usersModal').style.display = 'flex';
            } else {
                showToast(data.error || '获取用户列表失败');
            }
        })
        .catch(error => {
            console.error('Failed to get users:', error);
            showToast('获取用户列表失败');
        });
}

function closeUsersModal() {
    document.getElementById('usersModal').style.display = 'none';
}

function deleteWishlistItem(appName) {
    if (!confirm(`确定要删除应用"${appName}"的所有心愿记录吗？`)) return;
    
    fetch(`/admin/wishlist/delete/${encodeURIComponent(appName)}`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showToast(data.error || '删除失败');
        }
    })
    .catch(error => {
        console.error('Delete failed:', error);
        showToast('删除失败，请稍后重试');
    });
}

function notifyUsers(appName) {
    const row = event.target.closest('tr');
    const isNotified = row.closest('table').classList.contains('notified');
    const message = isNotified ? 
        `确定要重新发送通知给所有关注"${appName}"的用户吗？` :
        `确定要通知所有关注"${appName}"的用户吗？`;
    
    if (!confirm(message)) return;
    
    fetch(`/admin/wishlist/notify/${encodeURIComponent(appName)}`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message || '通知发送成功');
            // 移动行到已通知表格
            if (!isNotified) {
                const notifiedTable = document.querySelector('.wishlist-table.notified tbody');
                const newRow = row.cloneNode(true);
                
                // 修改按钮样式和文本
                const notifyBtn = newRow.querySelector('.btn-notify');
                notifyBtn.classList.remove('large');
                notifyBtn.innerHTML = '<i class="fas fa-paper-plane"></i><span>重新发送</span>';
                
                // 添加通知时间列
                const timeCell = document.createElement('td');
                timeCell.textContent = new Date().toLocaleString();
                newRow.insertBefore(timeCell, newRow.lastElementChild);
                
                notifiedTable.insertBefore(newRow, notifiedTable.firstChild);
                row.remove();
                
                // 如果未通知列表为空，自动切换到已通知标签页
                const unnotifiedRows = document.querySelector('.wishlist-table:not(.notified) tbody').children.length;
                if (unnotifiedRows === 0) {
                    switchTab('notified');
                }
            }
        } else {
            showToast(data.error || '发送失败');
        }
    })
    .catch(error => {
        console.error('Notification failed:', error);
        showToast('发送失败，请稍后重试');
    });
}

// 点击遮罩层关闭弹窗
document.getElementById('usersModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeUsersModal();
    }
});

function filterTable(input, type) {
    const searchText = input.value.toLowerCase();
    const table = type === 'notified' ? 
        document.querySelector('.wishlist-table.notified') :
        document.querySelector('.wishlist-table:not(.notified)');
    
    const rows = table.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const appName = row.querySelector('.app-name').textContent.toLowerCase();
        const matchesSearch = appName.includes(searchText);
        row.style.display = matchesSearch ? '' : 'none';
    });
}

function switchTab(tabId) {
    // 更新标签按钮状态
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    // 获取当前点击的按钮
    const activeBtn = document.querySelector(`.tab-btn[onclick*="${tabId}"]`);
    activeBtn.classList.add('active');
    
    // 切换内容显示
    document.getElementById('unnotified-tab').style.display = tabId === 'unnotified' ? 'block' : 'none';
    document.getElementById('notified-tab').style.display = tabId === 'notified' ? 'block' : 'none';
}

// Toast 通知函数
function showToast(message, duration = 3000) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.style.display = 'block';
    
    // 重置动画
    toast.style.animation = 'none';
    toast.offsetHeight; // 触发重排
    toast.style.animation = 'fadeInOut 3s ease';
    
    setTimeout(() => {
        toast.style.display = 'none';
    }, duration);
}

function sortTable(select, type) {
    const sortBy = select.value;
    const table = type === 'notified' ? 
        document.querySelector('.wishlist-table.notified') :
        document.querySelector('.wishlist-table:not(.notified)');
    
    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    
    rows.sort((a, b) => {
        let aValue, bValue;
        
        if (sortBy.startsWith('count')) {
            aValue = parseInt(a.querySelectorAll('td')[1].textContent);
            bValue = parseInt(b.querySelectorAll('td')[1].textContent);
        } else if (sortBy.startsWith('last_added')) {
            const aIndex = type === 'notified' ? 3 : 3;
            const bIndex = type === 'notified' ? 3 : 3;
            aValue = new Date(a.querySelectorAll('td')[aIndex].textContent);
            bValue = new Date(b.querySelectorAll('td')[bIndex].textContent);
        }
        
        if (sortBy.endsWith('asc')) {
            return aValue - bValue;
        } else {
            return bValue - aValue;
        }
    });
    
    rows.forEach(row => tbody.appendChild(row));
}
</script>
{% endblock %}