{% extends "base.html" %}
{% set active_page = 'files' %}

{% block title %}Upload Files - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <a href="/portal/files" class="text-muted mb-md d-block">
        <i class="fas fa-arrow-left"></i> Back to File Registry
    </a>
    
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Upload Files</h1>
        <p class="page-subtitle">Upload sequencing files directly to your linked S3 bucket</p>
    </div>
    
    <!-- Upload Configuration -->
    <div class="card mb-lg">
        <h3 class="card-title"><i class="fas fa-cog"></i> Upload Configuration</h3>
        
        <div class="grid grid-2 gap-lg">
            <div class="form-group">
                <label class="form-label required">Destination Bucket</label>
                <select class="form-control form-select" id="upload-bucket" required onchange="updateDestinationPath()">
                    <option value="">-- Select a linked bucket --</option>
                    {% for bucket in buckets %}
                    <option value="{{ bucket.bucket_id }}" data-bucket-name="{{ bucket.bucket_name }}">
                        s3://{{ bucket.bucket_name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Destination Prefix</label>
                <input type="text" class="form-control" id="upload-prefix" 
                       placeholder="data/uploads/" onkeyup="updateDestinationPath()">
                <small class="form-text">Files will be uploaded to: <code id="destination-preview">s3://...</code></small>
            </div>
        </div>
        
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" id="auto-register" checked>
                Automatically register files after upload
            </label>
        </div>
    </div>
    
    <!-- Upload Zone -->
    <div class="card mb-lg">
        <h3 class="card-title"><i class="fas fa-cloud-upload-alt"></i> Select Files</h3>
        
        <div class="upload-zone" id="upload-zone" 
             ondrop="handleDrop(event)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)">
            <div class="upload-zone-content">
                <i class="fas fa-cloud-upload-alt"></i>
                <h4>Drag & drop files here</h4>
                <p>or</p>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('file-input').click()">
                    <i class="fas fa-folder-open"></i> Browse Files
                </button>
                <input type="file" id="file-input" multiple accept=".fastq,.fastq.gz,.fq,.fq.gz,.bam,.cram,.vcf,.vcf.gz" 
                       class="d-none" onchange="handleFileSelect(event)">
            </div>
            <p class="text-muted mt-md">Supported formats: FASTQ, BAM, CRAM, VCF (gzipped supported)</p>
        </div>
    </div>
    
    <!-- File Queue -->
    <div class="card mb-lg" id="file-queue-card" style="display: none;">
        <div class="d-flex justify-between align-center mb-lg">
            <h3 class="card-title mb-0"><i class="fas fa-list"></i> Upload Queue</h3>
            <div class="d-flex gap-sm">
                <span class="text-muted"><span id="queue-count">0</span> files (<span id="queue-size">0 B</span>)</span>
                <button class="btn btn-sm btn-outline" onclick="clearQueue()">Clear All</button>
            </div>
        </div>
        
        <div class="file-queue" id="file-queue">
            <!-- Files will be added here dynamically -->
        </div>
        
        <div class="d-flex justify-end gap-md mt-lg">
            <button class="btn btn-outline" onclick="clearQueue()">Cancel</button>
            <button class="btn btn-primary" id="start-upload-btn" onclick="startUpload()">
                <i class="fas fa-upload"></i> Start Upload
            </button>
        </div>
    </div>
    
    <!-- Upload Progress -->
    <div class="card mb-lg" id="upload-progress-card" style="display: none;">
        <div class="d-flex justify-between align-center mb-lg">
            <h3 class="card-title mb-0"><i class="fas fa-spinner fa-spin"></i> Upload Progress</h3>
            <span class="text-muted"><span id="progress-count">0</span> / <span id="progress-total">0</span> files</span>
        </div>
        
        <div class="overall-progress mb-lg">
            <div class="progress-bar">
                <div class="progress-fill" id="overall-progress-fill" style="width: 0%"></div>
            </div>
            <div class="d-flex justify-between mt-sm">
                <span class="text-muted" id="progress-status">Preparing...</span>
                <span class="text-muted" id="progress-speed">-- MB/s</span>
            </div>
        </div>
        
        <div class="file-progress-list" id="file-progress-list">
            <!-- Individual file progress will be shown here -->
        </div>
        
        <div class="d-flex justify-end gap-md mt-lg">
            <button class="btn btn-outline" id="cancel-upload-btn" onclick="cancelUpload()">
                <i class="fas fa-stop"></i> Cancel Upload
            </button>
        </div>
    </div>
    
    <!-- Upload Complete -->
    <div class="card mb-lg" id="upload-complete-card" style="display: none;">
        <div class="upload-complete-content">
            <div class="upload-complete-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h3>Upload Complete!</h3>
            <p class="text-muted"><span id="complete-count">0</span> files uploaded successfully</p>
            <div class="d-flex gap-md justify-center">
                <a href="/portal/files" class="btn btn-outline">View Files</a>
                <button class="btn btn-primary" onclick="resetUpload()">Upload More</button>
            </div>
        </div>
    </div>
</div>

<!-- Large File Warning Modal -->
<div class="modal-overlay" id="large-file-modal" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-header">
            <h3><i class="fas fa-exclamation-triangle text-warning"></i> Large File Warning</h3>
        </div>
        <div class="modal-body">
            <p>One or more files in your upload queue are larger than <strong>5 GB</strong>. Browser uploads for very large files may:</p>
            <ul class="modal-warning-list">
                <li>Take a very long time to complete</li>
                <li>Be interrupted by network issues</li>
                <li>Consume significant browser memory</li>
            </ul>
            <p>For better reliability, consider using the AWS CLI instead:</p>
            <div class="cli-command-wrapper">
                <label class="form-label">AWS CLI Command (click to copy):</label>
                <div class="cli-command-box" id="cli-command-box" onclick="copyCliCommand()">
                    <code id="cli-command-text"></code>
                    <button class="cli-copy-btn" type="button" title="Copy to clipboard">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
                <small class="form-text">Replace <code>/path/to/local/file</code> with your actual file path and <code>your-profile</code> with your AWS profile name.</small>
            </div>
            <div class="large-files-list mt-md">
                <label class="form-label">Large files detected:</label>
                <ul id="large-files-list" class="text-muted"></ul>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline" onclick="cancelLargeFileUpload()">Cancel Upload</button>
            <button class="btn btn-primary" onclick="continueUploadAnyway()">
                <i class="fas fa-upload"></i> Continue Upload Anyway
            </button>
        </div>
    </div>
</div>

<style>
.upload-zone { border: 2px dashed var(--color-gray-400); border-radius: var(--radius-lg); padding: var(--spacing-3xl); text-align: center; transition: all 0.2s; cursor: pointer; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--color-accent); background: var(--color-gray-100); }
.upload-zone-content i { font-size: 3rem; color: var(--color-gray-400); margin-bottom: var(--spacing-md); }
.upload-zone-content h4 { margin: 0 0 var(--spacing-sm); color: var(--color-gray-600); }
.upload-zone-content p { margin: 0 0 var(--spacing-md); color: var(--color-gray-500); }
.file-queue { max-height: 400px; overflow-y: auto; }
.file-queue-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); }
.file-queue-item:last-child { margin-bottom: 0; }
.file-queue-icon { width: 40px; height: 40px; background: var(--color-gray-100); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-accent); }
.file-queue-info { flex: 1; }
.file-queue-name { font-weight: 500; margin: 0; }
.file-queue-size { font-size: 0.85rem; color: var(--color-gray-500); }
.file-queue-remove { background: none; border: none; color: var(--color-gray-400); cursor: pointer; padding: var(--spacing-sm); }
.file-queue-remove:hover { color: var(--color-error); }
.progress-bar { height: 8px; background: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-accent); transition: width 0.3s; }
.file-progress-list { max-height: 300px; overflow-y: auto; }
.file-progress-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-gray-200); }
.file-progress-item:last-child { border-bottom: none; }
.file-progress-name { flex: 1; font-size: 0.9rem; }
.file-progress-status { width: 100px; text-align: right; font-size: 0.85rem; }
.file-progress-status.success { color: var(--color-success); }
.file-progress-status.error { color: var(--color-error); }
.file-progress-status.uploading { color: var(--color-accent); }
.upload-complete-content { text-align: center; padding: var(--spacing-2xl); }
.upload-complete-icon { font-size: 4rem; color: var(--color-success); margin-bottom: var(--spacing-lg); }
.upload-complete-content h3 { margin: 0 0 var(--spacing-sm); }
.checkbox-label { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
.checkbox-label input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.required::after { content: ' *'; color: var(--color-error); }
/* Large File Warning Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-dialog { background: var(--color-bg-primary); border-radius: var(--radius-lg); max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }
.modal-header { padding: var(--spacing-lg); border-bottom: 1px solid var(--color-gray-200); }
.modal-header h3 { margin: 0; display: flex; align-items: center; gap: var(--spacing-sm); }
.modal-body { padding: var(--spacing-lg); }
.modal-footer { padding: var(--spacing-lg); border-top: 1px solid var(--color-gray-200); display: flex; justify-content: flex-end; gap: var(--spacing-md); }
.modal-warning-list { margin: var(--spacing-md) 0; padding-left: var(--spacing-lg); color: var(--color-gray-600); }
.modal-warning-list li { margin-bottom: var(--spacing-xs); }
.cli-command-wrapper { margin: var(--spacing-md) 0; }
.cli-command-box { background: var(--color-gray-900); color: var(--color-gray-100); padding: var(--spacing-md); border-radius: var(--radius-md); font-family: monospace; font-size: 0.85rem; cursor: pointer; position: relative; display: flex; align-items: flex-start; gap: var(--spacing-md); word-break: break-all; }
.cli-command-box:hover { background: var(--color-gray-800); }
.cli-command-box code { flex: 1; white-space: pre-wrap; }
.cli-copy-btn { background: transparent; border: none; color: var(--color-gray-400); cursor: pointer; padding: var(--spacing-xs); flex-shrink: 0; }
.cli-copy-btn:hover { color: var(--color-gray-100); }
.large-files-list ul { margin: var(--spacing-sm) 0 0 0; padding-left: var(--spacing-lg); font-size: 0.9rem; }
.text-warning { color: #f59e0b; }
</style>
{% endblock %}

{% block extra_js %}
<script src="/static/js/file-registry.js?v={{ cache_bust | default('1') }}"></script>
<script>
console.log('Upload page JavaScript loaded - v3');

// Upload state
let uploadQueue = [];
let uploadInProgress = false;
let currentUploadIndex = 0;
let currentAbortController = null;  // Track the current upload's abort controller

function updateDestinationPath() {
    const bucket = document.getElementById('upload-bucket');
    const prefix = document.getElementById('upload-prefix').value || '';
    const preview = document.getElementById('destination-preview');

    if (bucket.value) {
        const bucketName = bucket.options[bucket.selectedIndex].dataset.bucketName;
        preview.textContent = `s3://${bucketName}/${prefix}`;
    } else {
        preview.textContent = 's3://...';
    }
}

function handleDragOver(e) {
    e.preventDefault();
    e.currentTarget.classList.add('drag-over');
}

function handleDragLeave(e) {
    e.currentTarget.classList.remove('drag-over');
}

function handleDrop(e) {
    e.preventDefault();
    e.currentTarget.classList.remove('drag-over');
    const files = Array.from(e.dataTransfer.files);
    addFilesToQueue(files);
}

function handleFileSelect(e) {
    const files = Array.from(e.target.files);
    addFilesToQueue(files);
    e.target.value = ''; // Reset input
}

function addFilesToQueue(files) {
    files.forEach(file => {
        if (!uploadQueue.find(f => f.name === file.name && f.size === file.size)) {
            uploadQueue.push(file);
        }
    });
    renderQueue();
}

function renderQueue() {
    const queueCard = document.getElementById('file-queue-card');
    const queueEl = document.getElementById('file-queue');
    const countEl = document.getElementById('queue-count');
    const sizeEl = document.getElementById('queue-size');

    if (uploadQueue.length === 0) {
        queueCard.style.display = 'none';
        return;
    }

    queueCard.style.display = 'block';
    countEl.textContent = uploadQueue.length;
    sizeEl.textContent = formatFileSize(uploadQueue.reduce((sum, f) => sum + f.size, 0));

    queueEl.innerHTML = uploadQueue.map((file, idx) => `
        <div class="file-queue-item">
            <div class="file-queue-icon"><i class="fas fa-file"></i></div>
            <div class="file-queue-info">
                <p class="file-queue-name">${file.name}</p>
                <span class="file-queue-size">${formatFileSize(file.size)}</span>
            </div>
            <button class="file-queue-remove" onclick="removeFromQueue(${idx})">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `).join('');
}

function removeFromQueue(idx) {
    uploadQueue.splice(idx, 1);
    renderQueue();
}

function clearQueue() {
    uploadQueue = [];
    renderQueue();
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

const LARGE_FILE_THRESHOLD = 5 * 1024 * 1024 * 1024; // 5 GB in bytes

async function startUpload() {
    console.log('startUpload() called');

    try {
        // Check for empty queue first
        if (uploadQueue.length === 0) {
            alert('Please add files to the upload queue first');
            return;
        }

        const bucket = document.getElementById('upload-bucket').value;
        if (!bucket) {
            alert('Please select a destination bucket');
            return;
        }

        // Check for large files (>5GB)
        const largeFiles = uploadQueue.filter(f => f.size > LARGE_FILE_THRESHOLD);
        console.log(`Found ${largeFiles.length} large files (>${LARGE_FILE_THRESHOLD} bytes) out of ${uploadQueue.length} total`);

        if (largeFiles.length > 0) {
            showLargeFileWarning(largeFiles);
            return;
        }

        // Proceed with upload
        await proceedWithUpload();
    } catch (error) {
        console.error('Error in startUpload:', error);
        alert('Error starting upload: ' + error.message);
    }
}

function showLargeFileWarning(largeFiles) {
    console.log('showLargeFileWarning() called with', largeFiles.length, 'files');

    try {
        const bucket = document.getElementById('upload-bucket');
        const bucketName = bucket.options[bucket.selectedIndex]?.dataset?.bucketName || 'unknown-bucket';
        const prefix = document.getElementById('upload-prefix').value || '';

        // Generate AWS CLI command for the first large file as an example
        const firstLargeFile = largeFiles[0];
        const fullPrefix = prefix ? (prefix.endsWith('/') ? prefix : prefix + '/') : '';
        const s3Path = `s3://${bucketName}/${fullPrefix}${firstLargeFile.name}`;
        const cliCommand = `aws s3 cp /path/to/local/${firstLargeFile.name} ${s3Path} --profile your-profile`;

        // Update modal content
        const cliTextEl = document.getElementById('cli-command-text');
        if (cliTextEl) {
            cliTextEl.textContent = cliCommand;
        }

        // Populate large files list
        const listEl = document.getElementById('large-files-list');
        if (listEl) {
            listEl.innerHTML = largeFiles.map(f =>
                `<li><strong>${f.name}</strong> (${formatFileSize(f.size)})</li>`
            ).join('');
        }

        // Show modal
        const modal = document.getElementById('large-file-modal');
        if (modal) {
            modal.style.display = 'flex';
            console.log('Large file modal displayed');
        } else {
            console.error('Modal element not found: large-file-modal');
            // Fallback: just proceed with upload
            if (confirm('Large files detected. Continue with browser upload anyway?')) {
                proceedWithUpload();
            }
        }
    } catch (error) {
        console.error('Error in showLargeFileWarning:', error);
        // Fallback: just proceed with upload
        if (confirm('Error showing warning. Continue with upload anyway?')) {
            proceedWithUpload();
        }
    }
}

function copyCliCommand() {
    const commandText = document.getElementById('cli-command-text').textContent;
    navigator.clipboard.writeText(commandText).then(() => {
        // Show brief feedback
        const copyBtn = document.querySelector('.cli-copy-btn i');
        copyBtn.className = 'fas fa-check';
        setTimeout(() => {
            copyBtn.className = 'fas fa-copy';
        }, 2000);

        if (typeof showToast === 'function') {
            showToast('Command copied to clipboard', 'success');
        }
    }).catch(err => {
        console.error('Failed to copy:', err);
        // Fallback: select the text
        const range = document.createRange();
        range.selectNode(document.getElementById('cli-command-text'));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    });
}

function cancelLargeFileUpload() {
    console.log('cancelLargeFileUpload() called');
    const modal = document.getElementById('large-file-modal');
    if (modal) {
        modal.style.display = 'none';
    }
    if (typeof showToast === 'function') {
        showToast('Upload cancelled', 'info');
    }
}

function continueUploadAnyway() {
    console.log('continueUploadAnyway() called');
    const modal = document.getElementById('large-file-modal');
    if (modal) {
        modal.style.display = 'none';
    }
    // Use setTimeout to ensure modal is hidden before starting upload
    // This also prevents any potential event bubbling issues
    setTimeout(() => {
        proceedWithUpload();
    }, 0);
}

async function proceedWithUpload() {
    console.log('proceedWithUpload() called');

    try {
        uploadInProgress = true;

        const queueCard = document.getElementById('file-queue-card');
        const progressCard = document.getElementById('upload-progress-card');
        const progressTotal = document.getElementById('progress-total');

        if (queueCard) queueCard.style.display = 'none';
        if (progressCard) progressCard.style.display = 'block';
        if (progressTotal) progressTotal.textContent = uploadQueue.length;

        console.log(`Starting upload of ${uploadQueue.length} files`);

        // Upload files sequentially (could be parallelized)
        for (let i = 0; i < uploadQueue.length; i++) {
            // Check if cancelled before starting next file
            if (!uploadInProgress) {
                console.log('Upload cancelled by user');
                break;
            }
            currentUploadIndex = i;
            const progressCount = document.getElementById('progress-count');
            if (progressCount) progressCount.textContent = i + 1;
            console.log(`Starting upload ${i + 1}/${uploadQueue.length}: ${uploadQueue[i].name}`);
            await uploadFile(uploadQueue[i], i);
            console.log(`Completed upload ${i + 1}/${uploadQueue.length}: ${uploadQueue[i].name}`);
        }

        // Only show complete if not cancelled
        if (uploadInProgress) {
            uploadInProgress = false;
            console.log('All uploads complete');
            showUploadComplete();
        }
    } catch (error) {
        console.error('Error in proceedWithUpload:', error);
        uploadInProgress = false;
        alert('Error during upload: ' + error.message);
    }
}

async function uploadFile(file, idx) {
    const bucketId = document.getElementById('upload-bucket').value;
    const prefix = document.getElementById('upload-prefix').value || '';

    const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
    const progressStatus = document.getElementById('progress-status');
    if (progressStatus) {
        progressStatus.textContent = `Uploading ${file.name} (${fileSizeMB} MB)...`;
    }

    try {
        // Create FormData for multipart upload
        const formData = new FormData();
        formData.append('bucket_id', bucketId);
        formData.append('prefix', prefix);
        const autoRegister = document.getElementById('auto-register');
        formData.append('auto_register', autoRegister && autoRegister.checked ? 'true' : 'false');
        formData.append('file', file);

        // Upload to server without timeout (large files can take a long time)
        // User can cancel manually if needed
        currentAbortController = new AbortController();

        const response = await fetch('/portal/files/upload', {
            method: 'POST',
            body: formData,
            signal: currentAbortController.signal,
        });

        currentAbortController = null;

        if (!response.ok) {
            let errorMsg = `Upload failed with status ${response.status}`;
            try {
                const error = await response.json();
                errorMsg = error.detail || errorMsg;
            } catch (e) {
                // Response wasn't JSON
            }
            throw new Error(errorMsg);
        }

        const result = await response.json();

        // Add to progress list
        const progressList = document.getElementById('file-progress-list');
        if (progressList) {
            const progressItem = document.createElement('div');
            progressItem.className = 'file-progress-item';
            progressItem.innerHTML = `
                <span class="file-progress-name">${file.name} (${fileSizeMB} MB)</span>
                <span class="file-progress-status success">✓ Uploaded</span>
            `;
            progressList.appendChild(progressItem);
        }

        // Update overall progress
        const progressFill = document.getElementById('overall-progress-fill');
        if (progressFill) {
            progressFill.style.width = `${((idx + 1) / uploadQueue.length) * 100}%`;
        }

        console.log(`Uploaded ${file.name} to s3://${result.bucket}/${result.key}`);

    } catch (error) {
        // Check if cancelled by user vs other error
        let errorMsg;
        if (error.name === 'AbortError') {
            errorMsg = 'Cancelled';
        } else {
            errorMsg = error.message;
        }
        console.error(`Upload failed for ${file.name}: ${errorMsg}`);

        // Only add error to progress list if not a user cancel
        if (uploadInProgress) {
            const progressList = document.getElementById('file-progress-list');
            if (progressList) {
                const progressItem = document.createElement('div');
                progressItem.className = 'file-progress-item';
                progressItem.innerHTML = `
                    <span class="file-progress-name">${file.name} (${fileSizeMB} MB)</span>
                    <span class="file-progress-status error">✗ ${errorMsg}</span>
                `;
                progressList.appendChild(progressItem);
            }

            // Update overall progress even on error
            const progressFill = document.getElementById('overall-progress-fill');
            if (progressFill) {
                progressFill.style.width = `${((idx + 1) / uploadQueue.length) * 100}%`;
            }
        }
    }
}

function showUploadComplete() {
    document.getElementById('upload-progress-card').style.display = 'none';
    document.getElementById('upload-complete-card').style.display = 'block';
    document.getElementById('complete-count').textContent = uploadQueue.length;
}

function resetUpload() {
    uploadQueue = [];
    document.getElementById('upload-complete-card').style.display = 'none';
    document.getElementById('file-queue-card').style.display = 'none';
    document.getElementById('upload-progress-card').style.display = 'none';
    document.getElementById('file-progress-list').innerHTML = '';
    document.getElementById('overall-progress-fill').style.width = '0%';
    document.getElementById('progress-status').textContent = 'Preparing...';
}

function cancelUpload() {
    console.log('Cancel upload requested');

    // Abort any in-progress upload
    if (currentAbortController) {
        currentAbortController.abort();
        currentAbortController = null;
        console.log('Aborted current upload');
    }

    // Stop the upload loop
    uploadInProgress = false;

    // Reset UI
    resetUpload();

    // Show toast notification
    if (typeof showToast === 'function') {
        showToast('Upload cancelled', 'info');
    }

    console.log('Upload cancelled successfully');
}
</script>
{% endblock %}