{% 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-cloud-upload-alt"></i>
                    <h3>批量导入应用</h3>
                </div>
            </div>
            
            <form id="batch-import-form" class="admin-form">
                <div class="form-group">
                    <label for="category">选择分类</label>
                    <select id="category" name="category_id" required>
                        {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="icon-url">图标链接</label>
                    <input type="url" id="icon-url" name="icon_url" placeholder="http://example.com/icon.png" required>
                </div>
                <div class="form-group">
                    <label for="app-names">应用名称（用英文逗号分隔）</label>
                    <textarea id="app-names" name="app_names" rows="5" placeholder="输入应用名称，多个应用用英文逗号分隔" required></textarea>
                </div>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-cloud-upload-alt"></i> 批量导入
                </button>
            </form>
        </div>

        <!-- 导入列表 -->
        <div class="admin-card full-width">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-list"></i>
                    <h3>导入列表</h3>
                </div>
            </div>
            <div class="table-responsive">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>图标</th>
                            <th>名称</th>
                            <th>分类</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="import-list">
                        <!-- 导入的应用将在这里显示 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('batch-import-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const categoryId = document.getElementById('category').value;
    const iconUrl = document.getElementById('icon-url').value;
    const appNames = document.getElementById('app-names').value
        .split(',')
        .map(name => name.trim())
        .filter(name => name);
    
    if (!appNames.length) {
        showNotification('请输入至少一个应用名称', 'error');
        return;
    }
    
    // 清空现有列表
    document.getElementById('import-list').innerHTML = '';
    
    // 添加应用到列表
    appNames.forEach(name => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>
                <div class="app-icon-small">
                    <img src="${iconUrl}" alt="${name}" loading="lazy">
                </div>
            </td>
            <td>${name}</td>
            <td>${document.getElementById('category').options[document.getElementById('category').selectedIndex].text}</td>
            <td>
                <div class="action-buttons">
                    <a href="#" class="btn-delete" onclick="removeApp(this); return false;">
                        <i class="fas fa-trash"></i>
                    </a>
                </div>
            </td>
        `;
        document.getElementById('import-list').appendChild(tr);
    });
});

function removeApp(button) {
    const row = button.closest('tr');
    row.remove();
}

function importApps() {
    const rows = document.getElementById('import-list').getElementsByTagName('tr');
    const apps = Array.from(rows).map(row => ({
        name: row.cells[1].textContent,
        icon_url: row.querySelector('img').src,
        category_id: document.getElementById('category').value
    }));
    
    if (!apps.length) {
        showNotification('没有要导入的应用', 'error');
        return;
    }
    
    fetch('{{ url_for("admin_batch_import") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ apps: apps })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification(data.message, 'success');
            document.getElementById('batch-import-form').reset();
            document.getElementById('import-list').innerHTML = '';
        } else {
            showNotification(data.error, 'error');
        }
    })
    .catch(error => {
        showNotification('导入失败，请重试', 'error');
        console.error('Error:', error);
    });
}

// 添加导入按钮
const importButton = document.createElement('button');
importButton.className = 'btn-primary';
importButton.style.marginTop = '20px';
importButton.innerHTML = '<i class="fas fa-cloud-upload-alt"></i> 确认导入';
importButton.onclick = importApps;
document.querySelector('.admin-card.full-width').appendChild(importButton);
</script>

<style>
#app-names {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
}

.import-list {
    margin-top: 20px;
}

.btn-primary {
    margin-right: 10px;
}
</style>
{% endblock %}