{% extends "django_kie/base_ui.html" %}
{% load django_kie %}

{% block content_ui %}

    <div class="container-fluid m-0 p-5">
        <h1>Upload Files</h1>
        <hr class="my-4">
        <form
            id="upload-form"
            hx-post="{% url 'django_kie:upload_file' %}"
            hx-target="body"
            hx-swap="outerHTML"
            enctype="multipart/form-data"
        >
            <div class="my-4">
                <label for="file" class="form-label">Select files (PDF, TXT, MSG)</label>
                <div
                    id="drop-zone"
                    class="bg-light"
                    style="border: 2px dashed #ccc; border-radius: 8px; padding: 10vh 20vw; text-align: center; cursor: pointer; transition: border-color 0.2s, background-color 0.2s;"
                >
                    <p class="mb-0 text-muted" id="drop-zone-text">Drag &amp; drop files here or click to browse</p>
                    <input type="file" name="files" accept=".pdf,.txt,.msg" id="file" class="form-control" required multiple style="display: none;">
                </div>
                <ul id="file-list" class="list-group mt-2"></ul>
            </div>

            {% if document_types|length > 1 %}
            <div class="my-4">
                <label for="document_type" class="form-label">Document Type</label>
                <select name="document_type" id="document_type" class="form-select" required>
                    {% for dt in document_types %}
                        <option value="{{ dt.id }}" {% if dt.id|stringformat:"s" == last_document_type_id|stringformat:"s" %}selected{% endif %}>{{ dt.name }}</option>
                    {% endfor %}
                </select>
            </div>
            {% else %}
            <input type="hidden" name="document_type" value="{{ document_types.0.id }}">
            {% endif %}

            <button type="submit" class="btn btn-success">Upload</button>
        </form>
    </div>

    <script>
        (function() {
            const dropZone = document.getElementById('drop-zone');
            const fileInput = document.getElementById('file');
            const fileList = document.getElementById('file-list');
            const ACCEPTED = ['.pdf', '.txt', '.msg'];

            function filterFiles(files) {
                return Array.from(files).filter(f => ACCEPTED.some(ext => f.name.toLowerCase().endsWith(ext)));
            }

            function updateFileList() {
                fileList.innerHTML = '';
                Array.from(fileInput.files).forEach(f => {
                    const li = document.createElement('li');
                    li.className = 'list-group-item d-flex justify-content-between align-items-center py-1';
                    li.textContent = f.name;
                    const size = document.createElement('span');
                    size.className = 'badge bg-secondary';
                    size.textContent = f.size < 1024 ? f.size + ' B' : (f.size / 1024).toFixed(1) + ' KB';
                    li.appendChild(size);
                    fileList.appendChild(li);
                });
            }

            function setFiles(files) {
                const dt = new DataTransfer();
                files.forEach(f => dt.items.add(f));
                fileInput.files = dt.files;
                updateFileList();
            }

            dropZone.addEventListener('click', () => fileInput.click());

            dropZone.addEventListener('dragover', e => {
                e.preventDefault();
                dropZone.style.borderColor = '#0d6efd';
                dropZone.style.backgroundColor = '#f0f6ff';
            });

            dropZone.addEventListener('dragleave', e => {
                e.preventDefault();
                dropZone.style.borderColor = '#ccc';
                dropZone.style.backgroundColor = '';
            });

            dropZone.addEventListener('drop', e => {
                e.preventDefault();
                dropZone.style.borderColor = '#ccc';
                dropZone.style.backgroundColor = '';
                const accepted = filterFiles(e.dataTransfer.files);
                if (accepted.length) setFiles(accepted);
            });

            fileInput.addEventListener('change', updateFileList);
        })();
    </script>

{% endblock %}