{% extends "base.html" %}
{% load static %}

{% block title %}DICOM Upload{% endblock %}

{% block css %}
<style>
.upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone.dragover {
    border-color: #007bff;
    background: #e3f2fd;
}

.upload-zone:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.file-list {
    max-height: 400px;
    overflow-y: auto;
}

.file-item {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    background: white;
}

.file-item.processing {
    background: #fff3cd;
    border-color: #ffeaa7;
}

.file-item.success {
    background: #d4edda;
    border-color: #c3e6cb;
}

.file-item.error {
    background: #f8d7da;
    border-color: #f5c6cb;
}

.progress-container {
    margin-top: 10px;
}

.dicom-info {
    font-size: 0.875rem;
    color: #6c757d;
}

.upload-stats {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}
</style>
{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-3">
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'radiology:dashboard' %}">Radiology</a></li>
            <li class="breadcrumb-item active">DICOM Upload</li>
        </ol>
        <h1 class="page-header mb-0">DICOM Upload</h1>
    </div>
    <div class="ms-auto">
        <button type="button" class="btn btn-outline-secondary me-2" data-bs-toggle="modal" data-bs-target="#settingsModal">
            <i class="fas fa-cog me-1"></i>Settings
        </button>
        <button type="button" class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#helpModal">
            <i class="fas fa-question-circle me-1"></i>Help
        </button>
    </div>
</div>

<!-- Upload Statistics -->
<div class="upload-stats">
    <div class="row text-center">
        <div class="col-md-3">
            <div class="h4 text-primary mb-1" id="totalFiles">0</div>
            <div class="text-muted">Total Files</div>
        </div>
        <div class="col-md-3">
            <div class="h4 text-success mb-1" id="successfulUploads">0</div>
            <div class="text-muted">Successful</div>
        </div>
        <div class="col-md-3">
            <div class="h4 text-warning mb-1" id="processingFiles">0</div>
            <div class="text-muted">Processing</div>
        </div>
        <div class="col-md-3">
            <div class="h4 text-danger mb-1" id="failedUploads">0</div>
            <div class="text-muted">Failed</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-8">
        <!-- Upload Zone -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="fas fa-cloud-upload-alt me-2"></i>
                    Upload DICOM Files
                </h4>
                <div class="card-toolbar">
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectFiles()">
                        <i class="fas fa-folder-open me-1"></i>Browse Files
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="upload-zone" id="uploadZone" onclick="selectFiles()">
                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Drag and drop DICOM files here</h5>
                    <p class="text-muted mb-3">or click to browse and select files</p>
                    <div class="text-muted small">
                        Supported formats: .dcm, .dicom, .ima<br>
                        Maximum file size: 100MB per file
                    </div>
                </div>
                
                <input type="file" id="fileInput" multiple accept=".dcm,.dicom,.ima" style="display: none;">
                
                <!-- Upload Controls -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <button type="button" class="btn btn-primary" id="uploadBtn" onclick="startUpload()" disabled>
                            <i class="fas fa-upload me-2"></i>Start Upload
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="pauseBtn" onclick="pauseUpload()" disabled>
                            <i class="fas fa-pause me-2"></i>Pause
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="cancelBtn" onclick="cancelUpload()" disabled>
                            <i class="fas fa-times me-2"></i>Cancel
                        </button>
                    </div>
                    <div>
                        <button type="button" class="btn btn-outline-warning" onclick="clearCompleted()">
                            <i class="fas fa-broom me-2"></i>Clear Completed
                        </button>
                        <button type="button" class="btn btn-outline-danger" onclick="clearAll()">
                            <i class="fas fa-trash me-2"></i>Clear All
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- File List -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="fas fa-list me-2"></i>
                    Upload Queue
                </h4>
                <div class="card-toolbar">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" onclick="filterFiles('all')">All</button>
                        <button type="button" class="btn btn-outline-warning" onclick="filterFiles('processing')">Processing</button>
                        <button type="button" class="btn btn-outline-success" onclick="filterFiles('success')">Success</button>
                        <button type="button" class="btn btn-outline-danger" onclick="filterFiles('error')">Failed</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="file-list" id="fileList">
                    <div class="text-center text-muted py-5" id="emptyState">
                        <i class="fas fa-file-medical fa-3x mb-3"></i>
                        <h5>No files selected</h5>
                        <p>Select DICOM files to begin uploading</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <!-- Upload Progress -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="card-title">Upload Progress</h4>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <span>Overall Progress</span>
                        <span id="overallProgress">0%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" id="overallProgressBar" style="width: 0%"></div>
                    </div>
                </div>

                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <span>Current File</span>
                        <span id="currentFileProgress">0%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-info" id="currentFileProgressBar" style="width: 0%"></div>
                    </div>
                </div>

                <div class="row text-center">
                    <div class="col-6">
                        <div class="text-muted small">Upload Speed</div>
                        <div class="fw-bold" id="uploadSpeed">0 MB/s</div>
                    </div>
                    <div class="col-6">
                        <div class="text-muted small">Time Remaining</div>
                        <div class="fw-bold" id="timeRemaining">--:--</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- DICOM Validation -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="card-title">Validation Settings</h4>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="validateDicom" checked>
                        <label class="form-check-label" for="validateDicom">
                            Validate DICOM format
                        </label>
                    </div>
                    <div class="form-text">Check file format and structure</div>
                </div>

                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="checkDuplicates" checked>
                        <label class="form-check-label" for="checkDuplicates">
                            Check for duplicates
                        </label>
                    </div>
                    <div class="form-text">Prevent duplicate uploads</div>
                </div>

                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="autoAssignStudy">
                        <label class="form-check-label" for="autoAssignStudy">
                            Auto-assign to study
                        </label>
                    </div>
                    <div class="form-text">Automatically match to existing studies</div>
                </div>

                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="generateThumbnails" checked>
                        <label class="form-check-label" for="generateThumbnails">
                            Generate thumbnails
                        </label>
                    </div>
                    <div class="form-text">Create preview images</div>
                </div>
            </div>
        </div>

        <!-- Recent Uploads -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Recent Uploads</h4>
            </div>
            <div class="card-body">
                <div id="recentUploads">
                    {% for upload in recent_uploads %}
                    <div class="d-flex align-items-center mb-2">
                        <div class="flex-shrink-0">
                            <i class="fas fa-file-medical text-primary"></i>
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <div class="small fw-bold">{{ upload.filename|truncatechars:20 }}</div>
                            <div class="small text-muted">{{ upload.uploaded_at|timesince }} ago</div>
                        </div>
                        <div class="flex-shrink-0">
                            <span class="badge bg-success">Success</span>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center text-muted">
                        <i class="fas fa-history fa-2x mb-2"></i>
                        <div>No recent uploads</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Upload Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Concurrent Uploads</label>
                    <select class="form-select" id="concurrentUploads">
                        <option value="1">1 (Sequential)</option>
                        <option value="2" selected>2</option>
                        <option value="3">3</option>
                        <option value="5">5</option>
                    </select>
                    <div class="form-text">Number of files to upload simultaneously</div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Chunk Size (MB)</label>
                    <select class="form-select" id="chunkSize">
                        <option value="1">1 MB</option>
                        <option value="5" selected>5 MB</option>
                        <option value="10">10 MB</option>
                        <option value="20">20 MB</option>
                    </select>
                    <div class="form-text">Size of upload chunks for large files</div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Retry Attempts</label>
                    <select class="form-select" id="retryAttempts">
                        <option value="0">No retries</option>
                        <option value="1">1 retry</option>
                        <option value="3" selected>3 retries</option>
                        <option value="5">5 retries</option>
                    </select>
                </div>

                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="pauseOnError">
                        <label class="form-check-label" for="pauseOnError">
                            Pause upload on error
                        </label>
                    </div>
                </div>

                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="showNotifications" checked>
                        <label class="form-check-label" for="showNotifications">
                            Show desktop notifications
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveSettings()">Save Settings</button>
            </div>
        </div>
    </div>
</div>

<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">DICOM Upload Help</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Supported Formats</h6>
                        <ul>
                            <li>.dcm - Standard DICOM files</li>
                            <li>.dicom - DICOM files</li>
                            <li>.ima - Image files</li>
                        </ul>

                        <h6>File Requirements</h6>
                        <ul>
                            <li>Maximum file size: 100MB</li>
                            <li>Valid DICOM header required</li>
                            <li>Patient information must be present</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Upload Process</h6>
                        <ol>
                            <li>Select or drag DICOM files</li>
                            <li>Files are validated automatically</li>
                            <li>Click "Start Upload" to begin</li>
                            <li>Monitor progress in real-time</li>
                            <li>Review results and handle errors</li>
                        </ol>

                        <h6>Troubleshooting</h6>
                        <ul>
                            <li>Check file format if validation fails</li>
                            <li>Ensure stable internet connection</li>
                            <li>Contact IT support for persistent issues</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
let uploadQueue = [];
let isUploading = false;
let isPaused = false;
let currentUploadIndex = 0;
let uploadStats = {
    total: 0,
    successful: 0,
    processing: 0,
    failed: 0
};

document.addEventListener('DOMContentLoaded', function() {
    setupEventListeners();
    loadSettings();
});

function setupEventListeners() {
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');

    // Drag and drop events
    uploadZone.addEventListener('dragover', handleDragOver);
    uploadZone.addEventListener('dragleave', handleDragLeave);
    uploadZone.addEventListener('drop', handleDrop);

    // File input change
    fileInput.addEventListener('change', handleFileSelect);
}

function handleDragOver(e) {
    e.preventDefault();
    e.currentTarget.classList.add('dragover');
}

function handleDragLeave(e) {
    e.preventDefault();
    e.currentTarget.classList.remove('dragover');
}

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

function selectFiles() {
    document.getElementById('fileInput').click();
}

function handleFileSelect(e) {
    const files = Array.from(e.target.files);
    addFilesToQueue(files);
}

function addFilesToQueue(files) {
    const validFiles = files.filter(file => {
        const validExtensions = ['.dcm', '.dicom', '.ima'];
        const extension = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
        return validExtensions.includes(extension) && file.size <= 100 * 1024 * 1024; // 100MB limit
    });

    validFiles.forEach(file => {
        const fileItem = {
            id: Date.now() + Math.random(),
            file: file,
            status: 'pending',
            progress: 0,
            error: null,
            dicomInfo: null
        };
        
        uploadQueue.push(fileItem);
        addFileToList(fileItem);
    });

    updateStats();
    updateUI();
    
    // Hide empty state
    document.getElementById('emptyState').style.display = 'none';
}

function addFileToList(fileItem) {
    const fileList = document.getElementById('fileList');
    
    const fileDiv = document.createElement('div');
    fileDiv.className = 'file-item';
    fileDiv.id = `file-${fileItem.id}`;
    
    fileDiv.innerHTML = `
        <div class="d-flex align-items-center justify-content-between">
            <div class="flex-grow-1">
                <div class="fw-bold">${fileItem.file.name}</div>
                <div class="small text-muted">
                    ${formatFileSize(fileItem.file.size)} • 
                    <span class="status-text">Pending</span>
                </div>
                <div class="dicom-info" id="dicom-info-${fileItem.id}"></div>
            </div>
            <div class="flex-shrink-0">
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFile('${fileItem.id}')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="progress-container" style="display: none;">
            <div class="progress">
                <div class="progress-bar" id="progress-${fileItem.id}" style="width: 0%"></div>
            </div>
        </div>
    `;
    
    fileList.appendChild(fileDiv);
    
    // Validate DICOM file
    if (document.getElementById('validateDicom').checked) {
        validateDicomFile(fileItem);
    }
}

function validateDicomFile(fileItem) {
    const reader = new FileReader();
    reader.onload = function(e) {
        try {
            // Basic DICOM validation (check for DICM magic number)
            const arrayBuffer = e.target.result;
            const view = new DataView(arrayBuffer);
            
            // Check for DICM at offset 128
            if (arrayBuffer.byteLength > 132) {
                const dicm = String.fromCharCode(
                    view.getUint8(128),
                    view.getUint8(129),
                    view.getUint8(130),
                    view.getUint8(131)
                );
                
                if (dicm === 'DICM') {
                    fileItem.status = 'validated';
                    updateFileStatus(fileItem.id, 'Validated', 'success');
                    
                    // Extract basic DICOM info (simplified)
                    extractDicomInfo(fileItem, arrayBuffer);
                } else {
                    fileItem.status = 'invalid';
                    fileItem.error = 'Invalid DICOM format';
                    updateFileStatus(fileItem.id, 'Invalid DICOM', 'error');
                }
            } else {
                fileItem.status = 'invalid';
                fileItem.error = 'File too small to be valid DICOM';
                updateFileStatus(fileItem.id, 'Invalid file', 'error');
            }
        } catch (error) {
            fileItem.status = 'invalid';
            fileItem.error = 'Validation error';
            updateFileStatus(fileItem.id, 'Validation failed', 'error');
        }
    };
    
    reader.readAsArrayBuffer(fileItem.file.slice(0, 1024)); // Read first 1KB for validation
}

function extractDicomInfo(fileItem, arrayBuffer) {
    // Simplified DICOM info extraction
    // In a real implementation, you would use a proper DICOM parser
    const infoDiv = document.getElementById(`dicom-info-${fileItem.id}`);
    infoDiv.innerHTML = `
        <small class="text-success">
            <i class="fas fa-check-circle me-1"></i>
            Valid DICOM file • Modality: Unknown • Patient: Unknown
        </small>
    `;
}

function updateFileStatus(fileId, statusText, statusClass) {
    const fileDiv = document.getElementById(`file-${fileId}`);
    if (fileDiv) {
        fileDiv.className = `file-item ${statusClass}`;
        fileDiv.querySelector('.status-text').textContent = statusText;
    }
}

function removeFile(fileId) {
    uploadQueue = uploadQueue.filter(item => item.id !== fileId);
    document.getElementById(`file-${fileId}`).remove();
    
    updateStats();
    updateUI();
    
    if (uploadQueue.length === 0) {
        document.getElementById('emptyState').style.display = 'block';
    }
}

function startUpload() {
    if (uploadQueue.length === 0) return;
    
    isUploading = true;
    isPaused = false;
    currentUploadIndex = 0;
    
    updateUI();
    processUploadQueue();
}

function pauseUpload() {
    isPaused = true;
    updateUI();
}

function cancelUpload() {
    isUploading = false;
    isPaused = false;
    
    // Reset all pending/processing files
    uploadQueue.forEach(item => {
        if (item.status === 'processing' || item.status === 'pending') {
            item.status = 'cancelled';
            updateFileStatus(item.id, 'Cancelled', 'error');
        }
    });
    
    updateStats();
    updateUI();
}

function processUploadQueue() {
    if (!isUploading || isPaused) return;
    
    const concurrentUploads = parseInt(document.getElementById('concurrentUploads').value);
    const processingFiles = uploadQueue.filter(item => item.status === 'processing');
    
    if (processingFiles.length < concurrentUploads) {
        const nextFile = uploadQueue.find(item => item.status === 'validated' || item.status === 'pending');
        if (nextFile) {
            uploadFile(nextFile);
        }
    }
    
    // Check if all uploads are complete
    const remainingFiles = uploadQueue.filter(item => 
        item.status === 'pending' || item.status === 'processing' || item.status === 'validated'
    );
    
    if (remainingFiles.length === 0) {
        isUploading = false;
        updateUI();
        showNotification('Upload complete!', 'All files have been processed.');
    } else {
        setTimeout(processUploadQueue, 1000);
    }
}

function uploadFile(fileItem) {
    fileItem.status = 'processing';
    updateFileStatus(fileItem.id, 'Uploading...', 'processing');
    
    const progressDiv = document.querySelector(`#file-${fileItem.id} .progress-container`);
    progressDiv.style.display = 'block';
    
    // Simulate file upload with progress
    simulateUpload(fileItem);
}

function simulateUpload(fileItem) {
    let progress = 0;
    const interval = setInterval(() => {
        if (isPaused) return;
        
        progress += Math.random() * 10;
        if (progress > 100) progress = 100;
        
        fileItem.progress = progress;
        updateFileProgress(fileItem.id, progress);
        
        if (progress >= 100) {
            clearInterval(interval);
            
            // Simulate success/failure
            if (Math.random() > 0.1) { // 90% success rate
                fileItem.status = 'success';
                updateFileStatus(fileItem.id, 'Upload complete', 'success');
                uploadStats.successful++;
            } else {
                fileItem.status = 'error';
                fileItem.error = 'Upload failed';
                updateFileStatus(fileItem.id, 'Upload failed', 'error');
                uploadStats.failed++;
            }
            
            uploadStats.processing--;
            updateStats();
            updateOverallProgress();
        }
    }, 200);
}

function updateFileProgress(fileId, progress) {
    const progressBar = document.getElementById(`progress-${fileId}`);
    if (progressBar) {
        progressBar.style.width = `${progress}%`;
    }
}

function updateStats() {
    uploadStats.total = uploadQueue.length;
    uploadStats.processing = uploadQueue.filter(item => item.status === 'processing').length;
    uploadStats.successful = uploadQueue.filter(item => item.status === 'success').length;
    uploadStats.failed = uploadQueue.filter(item => item.status === 'error' || item.status === 'invalid').length;
    
    document.getElementById('totalFiles').textContent = uploadStats.total;
    document.getElementById('successfulUploads').textContent = uploadStats.successful;
    document.getElementById('processingFiles').textContent = uploadStats.processing;
    document.getElementById('failedUploads').textContent = uploadStats.failed;
}

function updateOverallProgress() {
    const completedFiles = uploadStats.successful + uploadStats.failed;
    const progress = uploadStats.total > 0 ? (completedFiles / uploadStats.total) * 100 : 0;
    
    document.getElementById('overallProgress').textContent = `${Math.round(progress)}%`;
    document.getElementById('overallProgressBar').style.width = `${progress}%`;
}

function updateUI() {
    const hasFiles = uploadQueue.length > 0;
    const canUpload = hasFiles && !isUploading && uploadQueue.some(item => 
        item.status === 'validated' || item.status === 'pending'
    );
    
    document.getElementById('uploadBtn').disabled = !canUpload;
    document.getElementById('pauseBtn').disabled = !isUploading || isPaused;
    document.getElementById('cancelBtn').disabled = !isUploading;
}

function clearCompleted() {
    const completedFiles = uploadQueue.filter(item => 
        item.status === 'success' || item.status === 'error' || item.status === 'invalid'
    );
    
    completedFiles.forEach(item => {
        document.getElementById(`file-${item.id}`).remove();
    });
    
    uploadQueue = uploadQueue.filter(item => 
        item.status !== 'success' && item.status !== 'error' && item.status !== 'invalid'
    );
    
    updateStats();
    updateUI();
    
    if (uploadQueue.length === 0) {
        document.getElementById('emptyState').style.display = 'block';
    }
}

function clearAll() {
    if (confirm('Clear all files from the upload queue?')) {
        uploadQueue = [];
        document.getElementById('fileList').innerHTML = `
            <div class="text-center text-muted py-5" id="emptyState">
                <i class="fas fa-file-medical fa-3x mb-3"></i>
                <h5>No files selected</h5>
                <p>Select DICOM files to begin uploading</p>
            </div>
        `;
        
        updateStats();
        updateUI();
    }
}

function filterFiles(status) {
    const fileItems = document.querySelectorAll('.file-item');
    
    fileItems.forEach(item => {
        if (status === 'all') {
            item.style.display = 'block';
        } else {
            item.style.display = item.classList.contains(status) ? 'block' : 'none';
        }
    });
}

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

function saveSettings() {
    const settings = {
        concurrentUploads: document.getElementById('concurrentUploads').value,
        chunkSize: document.getElementById('chunkSize').value,
        retryAttempts: document.getElementById('retryAttempts').value,
        pauseOnError: document.getElementById('pauseOnError').checked,
        showNotifications: document.getElementById('showNotifications').checked
    };
    
    localStorage.setItem('dicomUploadSettings', JSON.stringify(settings));
    
    const modal = bootstrap.Modal.getInstance(document.getElementById('settingsModal'));
    modal.hide();
}

function loadSettings() {
    const settings = localStorage.getItem('dicomUploadSettings');
    if (settings) {
        const parsed = JSON.parse(settings);
        
        document.getElementById('concurrentUploads').value = parsed.concurrentUploads || '2';
        document.getElementById('chunkSize').value = parsed.chunkSize || '5';
        document.getElementById('retryAttempts').value = parsed.retryAttempts || '3';
        document.getElementById('pauseOnError').checked = parsed.pauseOnError || false;
        document.getElementById('showNotifications').checked = parsed.showNotifications !== false;
    }
}

function showNotification(title, message) {
    if (document.getElementById('showNotifications').checked && 'Notification' in window) {
        if (Notification.permission === 'granted') {
            new Notification(title, { body: message });
        } else if (Notification.permission !== 'denied') {
            Notification.requestPermission().then(permission => {
                if (permission === 'granted') {
                    new Notification(title, { body: message });
                }
            });
        }
    }
}
</script>
{% endblock %}