{% extends "base.html" %}

{% block title %}Upload Document - AI Study Tool{% endblock %}

{% block content %}
<div class="upload-section">
    <h2>📤 Upload Your Study Materials</h2>
    <p>Upload PDFs or text files to start generating summaries, questions, and flashcards.</p>
    
    <div class="upload-container">
        <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
            <div class="file-upload-area" id="fileUploadArea">
                <div class="upload-icon">📁</div>
                <h3>Choose a file or drag and drop</h3>
                <p>Supported: PDF, TXT files (max 50MB)</p>
                <input type="file" id="fileInput" name="file" accept=".pdf,.txt" required>
                <label for="fileInput" class="btn btn-primary">Select File</label>
            </div>
            
            <div class="file-info" id="fileInfo" style="display: none;">
                <h4>Selected File:</h4>
                <p id="fileName"></p>
                <p id="fileSize"></p>
            </div>
            
            <button type="submit" class="btn btn-success" id="uploadBtn" disabled>
                📤 Upload Document
            </button>
        </form>
        
        <div class="upload-progress" id="uploadProgress" style="display: none;">
            <h4>Uploading...</h4>
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <p id="progressText">0%</p>
        </div>
        
        <div class="upload-result" id="uploadResult" style="display: none;">
            <h4>Upload Complete! ✅</h4>
            <p>Your document has been processed successfully.</p>
            <div class="result-actions">
                <a href="/documents" class="btn btn-primary">View Documents</a>
                <button onclick="resetUpload()" class="btn btn-secondary">Upload Another</button>
            </div>
        </div>
    </div>
    
    <div class="upload-tips">
        <h3>💡 Tips for Best Results</h3>
        <ul>
            <li><strong>Clear text:</strong> Make sure your PDFs have selectable text (not scanned images)</li>
            <li><strong>Structured content:</strong> Lecture notes with clear headings work best</li>
            <li><strong>Reasonable length:</strong> 5-50 pages gives good results</li>
            <li><strong>Academic content:</strong> Designed for educational materials</li>
        </ul>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Simple file upload handling
document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileSize').textContent = `Size: ${(file.size / 1024 / 1024).toFixed(2)} MB`;
        document.getElementById('fileInfo').style.display = 'block';
        document.getElementById('uploadBtn').disabled = false;
    }
});

// Handle form submission
let isUploading = false; // Prevent duplicate submissions
document.getElementById('uploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // Prevent duplicate submissions
    if (isUploading) {
        console.log('Upload already in progress');
        return;
    }
    
    isUploading = true;
    document.getElementById('uploadBtn').disabled = true; // Disable button immediately
    
    const formData = new FormData(this);
    const progressDiv = document.getElementById('uploadProgress');
    const resultDiv = document.getElementById('uploadResult');
    
    try {
        // Show progress
        progressDiv.style.display = 'block';
        this.style.display = 'none';
        
        // Animate progress
        let progress = 0;
        const progressInterval = setInterval(() => {
            progress += 15;
            if (progress > 90) progress = 90; // Stop at 90% until response
            document.getElementById('progressFill').style.width = progress + '%';
            document.getElementById('progressText').textContent = progress + '%';
        }, 100);
        
        // Make actual API call
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        
        clearInterval(progressInterval);
        
        if (!response.ok) {
            throw new Error('Upload failed');
        }
        
        const result = await response.json();
        
        // Complete progress
        document.getElementById('progressFill').style.width = '100%';
        document.getElementById('progressText').textContent = '100%';
        
        // Show success after brief delay
        setTimeout(() => {
            progressDiv.style.display = 'none';
            resultDiv.style.display = 'block';
            
            // Update result message with document info
            const resultContent = resultDiv.querySelector('p');
            resultContent.textContent = `Document "${result.filename}" uploaded successfully! ${result.word_count} words processed.`;
        }, 500);
        
    } catch (error) {
        clearInterval(progressInterval);
        alert('Upload failed: ' + error.message);
        
        // Reset form
        progressDiv.style.display = 'none';
        this.style.display = 'block';
    } finally {
        // Always reset the upload flag
        isUploading = false;
    }
});

function resetUpload() {
    document.getElementById('uploadForm').style.display = 'block';
    document.getElementById('uploadProgress').style.display = 'none';
    document.getElementById('uploadResult').style.display = 'none';
    document.getElementById('fileInfo').style.display = 'none';
    document.getElementById('uploadForm').reset();
    document.getElementById('uploadBtn').disabled = true;
}

// Drag and drop functionality
const uploadArea = document.getElementById('fileUploadArea');

uploadArea.addEventListener('dragover', function(e) {
    e.preventDefault();
    uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', function(e) {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
});

uploadArea.addEventListener('drop', function(e) {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        document.getElementById('fileInput').files = files;
        document.getElementById('fileInput').dispatchEvent(new Event('change'));
    }
});
</script>
{% endblock %}