{% extends "base.html" %}

{% block title %}Upload File - HM QC{% endblock %}

{% block extra_head %}
<style>
    .upload-zone {
        border: 3px dashed #ccc;
        border-radius: 8px;
        padding: 60px 20px;
        text-align: center;
        transition: all 0.3s;
        cursor: pointer;
    }

    .upload-zone:hover, .upload-zone.dragover {
        border-color: var(--hm-yellow);
        background-color: #fffef0;
    }

    .upload-icon {
        font-size: 4rem;
        color: var(--hm-yellow);
    }

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

    .file-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid #eee;
    }

    .file-list-item:last-child {
        border-bottom: none;
    }

    .file-count-badge {
        font-size: 1.1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2><i class="bi bi-upload me-2"></i>Upload Files</h2>
    <p class="text-muted">Upload PDF or image files for quality control validation (up to 100 files)</p>

    <div class="row mt-4">
        <div class="col-md-8 offset-md-2">
            <div class="upload-zone" id="uploadZone">
                <i class="bi bi-cloud-arrow-up upload-icon"></i>
                <h4 class="mt-3">Drag & Drop Files Here</h4>
                <p class="text-muted">or click to browse</p>
                <p><small>Supported: PDF, JPG, PNG, PSD (max 500 MB total, up to 100 files)</small></p>
                <input type="file" id="fileInput" style="display: none;"
                       accept=".pdf,.jpg,.jpeg,.png,.psd" multiple>
            </div>

            <!-- Selected Files List -->
            <div id="fileListContainer" class="mt-3" style="display: none;">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span>
                            <i class="bi bi-files me-2"></i>Selected Files
                            <span class="badge bg-primary file-count-badge ms-2" id="fileCount">0</span>
                        </span>
                        <button class="btn btn-sm btn-outline-danger" id="clearFilesBtn">
                            <i class="bi bi-x-circle me-1"></i>Clear
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="file-list" id="fileList"></div>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-hm-primary w-100" id="uploadBtn">
                            <i class="bi bi-cloud-upload me-2"></i>
                            <span id="uploadBtnText">Upload Files</span>
                            <span id="uploadSpinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Upload Progress -->
            <div id="uploadProgress" class="mt-4" style="display: none;">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated"
                         id="uploadProgressBar" style="width: 0%"></div>
                </div>
                <p class="text-center mt-2" id="uploadStatus">Uploading...</p>
            </div>

            <!-- Validation Error -->
            <div id="validationError" class="alert alert-warning mt-3" style="display: none;">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <span id="validationMessage"></span>
            </div>
        </div>
    </div>

    <!-- Recent QC Reports -->
    {% if recent_reports %}
    <div class="row mt-5">
        <div class="col-md-8 offset-md-2">
            <h4><i class="bi bi-clock-history me-2"></i>Recent QC Reports</h4>
            <div class="table-responsive">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th>Filename</th>
                            <th>Job #</th>
                            <th>Score</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for report in recent_reports %}
                        <tr>
                            <td>{{ report.filename }}</td>
                            <td>{{ report.job_number or '-' }}</td>
                            <td>
                                {% if report.score is not none %}
                                    <strong>{{ '%.0f' % report.score }}</strong>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge bg-{{ 'success' if report.status == 'passed' else 'warning' if report.status == 'warning' else 'danger' }}">
                                    {{ report.status }}
                                </span>
                            </td>
                            <td>{{ report.created_at.strftime('%Y-%m-%d %H:%M') if report.created_at }}</td>
                            <td class="text-nowrap">
                                <a href="{{ url_for('hm_qc.view_report', report_id=report.id) }}" class="btn btn-sm btn-outline-primary" title="View">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ url_for('hm_qc.download_report', report_id=report.id) }}" class="btn btn-sm btn-outline-secondary" title="Download">
                                    <i class="bi bi-download"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');
    const fileListContainer = document.getElementById('fileListContainer');
    const fileList = document.getElementById('fileList');
    const fileCount = document.getElementById('fileCount');
    const uploadProgress = document.getElementById('uploadProgress');
    const uploadProgressBar = document.getElementById('uploadProgressBar');
    const uploadStatus = document.getElementById('uploadStatus');
    const uploadBtn = document.getElementById('uploadBtn');
    const uploadBtnText = document.getElementById('uploadBtnText');
    const uploadSpinner = document.getElementById('uploadSpinner');
    const validationError = document.getElementById('validationError');
    const validationMessage = document.getElementById('validationMessage');

    const MAX_FILES = 100;
    const ALLOWED_EXTENSIONS = ['pdf', 'jpg', 'jpeg', 'png', 'psd'];
    let selectedFiles = [];

    // Click to select files
    uploadZone.addEventListener('click', () => fileInput.click());

    // Drag and drop
    uploadZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadZone.classList.add('dragover');
    });

    uploadZone.addEventListener('dragleave', () => {
        uploadZone.classList.remove('dragover');
    });

    uploadZone.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadZone.classList.remove('dragover');

        if (e.dataTransfer.files.length > 0) {
            addFiles(Array.from(e.dataTransfer.files));
        }
    });

    // File input change
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            addFiles(Array.from(e.target.files));
        }
    });

    // Clear files
    document.getElementById('clearFilesBtn').addEventListener('click', () => {
        selectedFiles = [];
        updateFileList();
        fileListContainer.style.display = 'none';
        uploadZone.style.display = 'block';
        fileInput.value = '';
        hideValidation();
    });

    // Upload button
    uploadBtn.addEventListener('click', () => handleUpload());

    function addFiles(files) {
        hideValidation();

        // Filter valid files
        const validFiles = files.filter(f => {
            const ext = f.name.split('.').pop().toLowerCase();
            return ALLOWED_EXTENSIONS.includes(ext);
        });

        const invalidCount = files.length - validFiles.length;
        if (invalidCount > 0) {
            showValidation(`${invalidCount} file(s) skipped (unsupported format)`);
        }

        // Add to selection (dedup by name)
        const existingNames = new Set(selectedFiles.map(f => f.name));
        for (const f of validFiles) {
            if (!existingNames.has(f.name)) {
                selectedFiles.push(f);
                existingNames.add(f.name);
            }
        }

        // Enforce max
        if (selectedFiles.length > MAX_FILES) {
            selectedFiles = selectedFiles.slice(0, MAX_FILES);
            showValidation(`Maximum ${MAX_FILES} files allowed. Extra files removed.`);
        }

        updateFileList();

        if (selectedFiles.length > 0) {
            fileListContainer.style.display = 'block';
        }
    }

    function updateFileList() {
        fileList.innerHTML = '';
        fileCount.textContent = selectedFiles.length;

        selectedFiles.forEach((file, idx) => {
            const item = document.createElement('div');
            item.className = 'file-list-item';
            const ext = file.name.split('.').pop().toLowerCase();
            const icon = ext === 'pdf' ? 'bi-file-earmark-pdf' : 'bi-file-earmark-image';
            const size = (file.size / 1024 / 1024).toFixed(1);

            item.innerHTML = `
                <div>
                    <i class="bi ${icon} me-2"></i>
                    <span>${file.name}</span>
                    <small class="text-muted ms-2">${size} MB</small>
                </div>
                <button class="btn btn-sm btn-outline-secondary remove-file-btn" data-idx="${idx}">
                    <i class="bi bi-x"></i>
                </button>
            `;
            fileList.appendChild(item);
        });

        // Attach remove handlers
        document.querySelectorAll('.remove-file-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const idx = parseInt(this.dataset.idx);
                selectedFiles.splice(idx, 1);
                updateFileList();
                if (selectedFiles.length === 0) {
                    fileListContainer.style.display = 'none';
                    uploadZone.style.display = 'block';
                }
            });
        });

        // Update button text
        if (selectedFiles.length === 1) {
            uploadBtnText.textContent = 'Upload File';
        } else {
            uploadBtnText.textContent = `Upload ${selectedFiles.length} Files`;
        }
    }

    function showValidation(msg) {
        validationMessage.textContent = msg;
        validationError.style.display = 'block';
    }

    function hideValidation() {
        validationError.style.display = 'none';
    }

    async function handleUpload() {
        if (selectedFiles.length === 0) return;

        // Show progress
        uploadBtn.disabled = true;
        uploadSpinner.style.display = 'inline-block';
        uploadProgress.style.display = 'block';
        uploadZone.style.display = 'none';

        const formData = new FormData();

        if (selectedFiles.length === 1) {
            // Single file upload (original endpoint)
            formData.append('file', selectedFiles[0]);
        } else {
            // Multi-file upload
            for (const file of selectedFiles) {
                formData.append('files', file);
            }
        }

        try {
            const response = await fetch(`${BASE_URL}/hm-qc/upload`, {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                uploadProgressBar.style.width = '100%';
                uploadProgressBar.classList.remove('progress-bar-animated');
                uploadProgressBar.classList.add('bg-success');
                uploadStatus.textContent = 'Upload complete! Redirecting...';

                setTimeout(() => {
                    window.location.href = `${BASE_URL}/hm-qc/configure/${data.session_id}`;
                }, 1000);
            } else {
                throw new Error(data.error || 'Upload failed');
            }
        } catch (error) {
            uploadProgressBar.classList.add('bg-danger');
            uploadStatus.textContent = `Error: ${error.message}`;
            showNotification(error.message, 'error');

            setTimeout(() => {
                uploadProgress.style.display = 'none';
                uploadZone.style.display = 'block';
                uploadBtn.disabled = false;
                uploadSpinner.style.display = 'none';
                uploadProgressBar.style.width = '0%';
                uploadProgressBar.classList.remove('bg-danger');
            }, 3000);
        }
    }
</script>
{% endblock %}