{% extends "base.html" %}

{% block title %}Upload Dataset{% endblock %}

{% block content %}
<div class="container" style="padding-top: 24px;">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">📂 Upload Dataset</h1>
            <p style="color: var(--text-muted); margin-top: 4px;">Upload any CSV file to start automated analysis</p>
        </div>
    </div>

    <div class="glass-card" style="margin-top: 24px;">
        <!-- BULLETPROOF: The entire upload zone is a <label> for the file input.
             This opens the file picker NATIVELY even if every line of JS fails. -->
        <label for="file-input" class="upload-zone" id="upload-zone" style="display: block; cursor: pointer;">
            <input type="file" id="file-input" name="file" accept=".csv" style="position: absolute; opacity: 0; width: 0.1px; height: 0.1px; overflow: hidden; z-index: -1;">
            
            <div style="text-align: center; padding: 60px 20px;">
                <div style="font-size: 4rem; margin-bottom: 16px;">📥</div>
                <h3 style="margin-bottom: 8px; font-size: 1.3rem;">Drag & Drop your CSV file here</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">
                    or click to browse • Supports any CSV format • Max 500MB
                </p>
            </div>
        </label>

        <div class="upload-progress" id="upload-progress" style="display: none; margin-top: 16px;">
            <div style="background: var(--glass-bg); border-radius: 8px; height: 8px; overflow: hidden;">
                <div class="progress-fill" id="progress-fill" style="height: 100%; width: 0%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 8px; transition: width 0.3s ease;"></div>
            </div>
            <p style="text-align: center; margin-top: 8px; color: var(--text-muted); font-size: 0.85rem;">Uploading...</p>
        </div>

        <div id="upload-preview" style="margin-top: 24px;"></div>
    </div>
</div>

<script>
// Inline upload handler — runs independently even if main.js is broken
(function() {
    var uploadZone = document.getElementById('upload-zone');
    var fileInput = document.getElementById('file-input');
    var progressBar = document.getElementById('upload-progress');
    var progressFill = document.getElementById('progress-fill');
    var previewContainer = document.getElementById('upload-preview');

    if (!uploadZone || !fileInput) return;

    // Drag & drop visual feedback
    uploadZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadZone.style.borderColor = '#667eea';
        uploadZone.style.background = 'rgba(102, 126, 234, 0.05)';
    });

    uploadZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        uploadZone.style.borderColor = '';
        uploadZone.style.background = '';
    });

    uploadZone.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadZone.style.borderColor = '';
        uploadZone.style.background = '';
        var files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFile(files[0]);
        }
    });

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

    function handleFile(file) {
        if (!file.name.toLowerCase().endsWith('.csv')) {
            alert('Please upload a CSV file');
            return;
        }

        var formData = new FormData();
        formData.append('file', file);

        if (progressBar) progressBar.style.display = 'block';
        var progress = 0;
        var interval = setInterval(function() {
            progress += Math.random() * 15;
            if (progress > 90) progress = 90;
            if (progressFill) progressFill.style.width = progress + '%';
        }, 200);

        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            clearInterval(interval);
            if (progressFill) progressFill.style.width = '100%';
            setTimeout(function() {
                if (progressBar) progressBar.style.display = 'none';
                if (progressFill) progressFill.style.width = '0%';
                if (data.success) {
                    previewContainer.innerHTML = '<div class="glass-card" style="border-left: 4px solid #28a745;"><h3 style="color: #28a745; margin-bottom: 8px;">✓ ' + data.message + '</h3><p>Redirecting to dashboard...</p></div>';
                    setTimeout(function() { window.location.href = '/dashboard'; }, 1200);
                } else {
                    previewContainer.innerHTML = '<div class="glass-card" style="border-left: 4px solid #dc3545; color: #ff6b6b;"><h3>✕ Upload Failed</h3><p>' + (data.error || 'Unknown error') + '</p></div>';
                }
            }, 500);
        })
        .catch(function(err) {
            clearInterval(interval);
            if (progressBar) progressBar.style.display = 'none';
            previewContainer.innerHTML = '<div class="glass-card" style="border-left: 4px solid #dc3545; color: #ff6b6b;"><h3>✕ Network Error</h3><p>' + err.message + '</p></div>';
        });
    }
})();
</script>
{% endblock %}