<!-- Add this button to the top of module_manager.html, right after the dashboard-header -->

<div class="upload-section">
    <button class="btn btn-primary btn-lg" onclick="openUploadModal()">
        <i class="fas fa-upload"></i> Upload New Module
    </button>
</div>

<!-- Upload Modal -->
<div id="upload-modal" class="upload-modal" style="display: none;">
    <div class="upload-modal-overlay" onclick="closeUploadModal()"></div>
    <div class="upload-modal-content">
        <div class="upload-modal-header">
            <h2><i class="fas fa-upload"></i> Upload Module Package</h2>
            <button class="close-btn" onclick="closeUploadModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="upload-modal-body">
            <!-- Drag & Drop Zone -->
            <div id="drop-zone" class="drop-zone">
                <div class="drop-zone-content">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h3>Drag & Drop Module ZIP</h3>
                    <p>or</p>
                    <label for="file-input" class="btn btn-secondary">
                        <i class="fas fa-folder-open"></i> Browse Files
                    </label>
                    <input type="file" id="file-input" accept=".zip" style="display: none;">
                    <p class="file-requirements">
                        <small>
                            <strong>Requirements:</strong><br>
                            • ZIP file containing module folder<br>
                            • Must include manifest.json<br>
                            • Module key must be unique
                        </small>
                    </p>
                </div>
            </div>

            <!-- Upload Progress (hidden by default) -->
            <div id="upload-progress" class="upload-progress" style="display: none;">
                <div class="progress-info">
                    <span id="upload-filename"></span>
                    <span id="upload-status">Uploading...</span>
                </div>
                <div class="progress-bar-container">
                    <div id="progress-bar" class="progress-bar"></div>
                </div>
                <div class="progress-percentage">
                    <span id="progress-text">0%</span>
                </div>
            </div>

            <!-- Upload Result (hidden by default) -->
            <div id="upload-result" class="upload-result" style="display: none;">
                <div id="result-icon"></div>
                <h3 id="result-title"></h3>
                <p id="result-message"></p>
                <button class="btn btn-primary" onclick="closeUploadModalAndReload()">
                    Close & Refresh
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Upload Section */
.upload-section {
    margin: var(--space-lg) 0;
    text-align: center;
}

/* Upload Modal */
.upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.upload-modal-content {
    position: relative;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.upload-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.upload-modal-header h2 {
    margin: 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-sm);
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: var(--text-color);
}

.upload-modal-body {
    padding: var(--space-xl);
}

/* Drop Zone */
.drop-zone {
    border: 3px dashed var(--border-color);
    border-radius: 12px;
    padding: var(--space-xl);
    text-align: center;
    transition: all 0.3s;
    background: var(--bg-secondary);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone:hover {
    border-color: var(--primary-color);
    background: rgba(0, 188, 212, 0.05);
}

.drop-zone.drag-over {
    border-color: var(--primary-color);
    background: rgba(0, 188, 212, 0.1);
    transform: scale(1.02);
}

.drop-zone-content {
    width: 100%;
}

.drop-zone-content i {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: var(--space-md);
}

.drop-zone-content h3 {
    margin: var(--space-md) 0;
    color: var(--text-color);
}

.drop-zone-content p {
    color: var(--text-muted);
    margin: var(--space-sm) 0;
}

.file-requirements {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

/* Upload Progress */
.upload-progress {
    text-align: center;
    padding: var(--space-xl);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    color: var(--text-color);
}

.progress-bar-container {
    width: 100%;
    height: 30px;
    background: var(--bg-secondary);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.progress-percentage {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* Upload Result */
.upload-result {
    text-align: center;
    padding: var(--space-xl);
}

.upload-result i {
    font-size: 5rem;
    margin-bottom: var(--space-lg);
}

.upload-result.success i {
    color: var(--success-color);
}

.upload-result.error i {
    color: var(--danger-color);
}

.upload-result h3 {
    margin: var(--space-md) 0;
    color: var(--text-color);
}

.upload-result p {
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}
</style>

<script>
// Upload Modal Functions
function openUploadModal() {
    document.getElementById('upload-modal').style.display = 'flex';
    resetUploadModal();
}

function closeUploadModal() {
    document.getElementById('upload-modal').style.display = 'none';
    resetUploadModal();
}

function closeUploadModalAndReload() {
    closeUploadModal();
    location.reload();
}

function resetUploadModal() {
    document.getElementById('drop-zone').style.display = 'flex';
    document.getElementById('upload-progress').style.display = 'none';
    document.getElementById('upload-result').style.display = 'none';
    document.getElementById('file-input').value = '';
}

// Drag and Drop Handlers
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('drag-over');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        handleFileUpload(files[0]);
    }
});

fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        handleFileUpload(e.target.files[0]);
    }
});

// Handle File Upload
function handleFileUpload(file) {
    // Validate file type
    if (!file.name.endsWith('.zip')) {
        showUploadResult(false, 'Invalid File Type', 'Please upload a ZIP file containing your module.');
        return;
    }

    // Show progress
    document.getElementById('drop-zone').style.display = 'none';
    document.getElementById('upload-progress').style.display = 'block';
    document.getElementById('upload-filename').textContent = file.name;

    // Create FormData
    const formData = new FormData();
    formData.append('module_file', file);

    // Upload with progress
    const xhr = new XMLHttpRequest();

    xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
            const percentComplete = Math.round((e.loaded / e.total) * 100);
            updateProgress(percentComplete);
        }
    });

    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.success) {
                showUploadResult(true, 'Upload Successful!', response.message);
            } else {
                showUploadResult(false, 'Upload Failed', response.message);
            }
        } else {
            showUploadResult(false, 'Upload Failed', 'Server error: ' + xhr.status);
        }
    });

    xhr.addEventListener('error', () => {
        showUploadResult(false, 'Upload Failed', 'Network error occurred');
    });

    xhr.open('POST', '/admin/modules/upload', true);
    xhr.send(formData);
}

function updateProgress(percent) {
    document.getElementById('progress-bar').style.width = percent + '%';
    document.getElementById('progress-text').textContent = percent + '%';
    
    if (percent === 100) {
        document.getElementById('upload-status').textContent = 'Processing...';
    }
}

function showUploadResult(success, title, message) {
    document.getElementById('upload-progress').style.display = 'none';
    
    const resultDiv = document.getElementById('upload-result');
    resultDiv.style.display = 'block';
    resultDiv.className = 'upload-result ' + (success ? 'success' : 'error');
    
    const icon = success 
        ? '<i class="fas fa-check-circle"></i>' 
        : '<i class="fas fa-exclamation-circle"></i>';
    
    document.getElementById('result-icon').innerHTML = icon;
    document.getElementById('result-title').textContent = title;
    document.getElementById('result-message').textContent = message;
}
</script>
