{% load i18n %}
{% load documents_tags document_viewer_tags %}

<div class="card mb-3" id="asset-documents-card">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{% translate "Documents associés" %}</h5>
        {% if asset %}
        <button type="button"
                class="btn btn-sm btn-outline-primary d-none"
                id="addDocumentBtn"
                data-edit-mode-only="true"
                data-bs-toggle="modal"
                data-bs-target="#uploadDocModal">
            <i class="bi bi-plus-lg me-1"></i>{% translate "Ajouter" %}
        </button>
        {% endif %}
    </div>
    <div class="card-body">
        <div id="documentUploadAlert" class="alert d-none mb-2" role="alert"></div>
        <div id="documents-list">
            {% render_document_viewer documents modal_id="assetDocViewerModal" allow_delete=True show_tags=True %}
        </div>
    </div>
</div>

{% if asset %}
{# ─── Upload modal ─── #}
<div class="modal fade" id="uploadDocModal" tabindex="-1"
     aria-labelledby="uploadDocModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadDocModalLabel">
                    <i class="bi bi-file-earmark-plus me-2"></i>{% translate "Ajouter des documents" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">

                {# Hidden file input – triggered automatically when modal opens #}
                <input type="file" id="documentUploadInput" class="d-none" multiple
                       accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.svg,.zip,.txt,.csv">

                {# Instruction shown before files are selected #}
                <div id="uploadEmptyHint" class="text-center text-muted py-3">
                    <i class="bi bi-folder2-open" style="font-size:2rem;"></i>
                    <p class="mt-2 mb-1">{% translate "Sélectionnez un ou plusieurs fichiers pour continuer." %}</p>
                    <button type="button" class="btn btn-outline-secondary btn-sm mt-1" id="uploadPickBtn">
                        <i class="bi bi-plus-lg me-1"></i>{% translate "Choisir des fichiers" %}
                    </button>
                </div>

                {# File × tag table – shown after files are selected #}
                <div id="uploadTableSection" class="d-none">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span id="uploadFilesCount" class="text-muted small"></span>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="uploadChangeFilesBtn">
                            <i class="bi bi-pencil me-1"></i>{% translate "Changer les fichiers" %}
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0" id="uploadTagTable">
                            <thead class="table-light">
                                <tr id="uploadTagTableHead">
                                    <th style="min-width:120px;">{% translate "Tag" %}</th>
                                    {# File columns injected by JS #}
                                </tr>
                            </thead>
                            <tbody id="uploadTagTableBody">
                                {# Tag rows injected by JS #}
                            </tbody>
                        </table>
                    </div>
                    {% if not available_tags %}
                    <p class="text-muted small mt-2 mb-0">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Aucun tag disponible pour cette thématique." %}
                    </p>
                    {% endif %}
                </div>

                <div id="uploadModalAlert" class="alert d-none mt-3 mb-0" role="alert"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="button" class="btn btn-primary" id="uploadDocSubmitBtn" disabled>
                    <i class="bi bi-upload me-1"></i>{% translate "Uploader" %}
                </button>
            </div>
        </div>
    </div>
</div>

{# Tags JSON for JS (safe – no user content, only DB-managed strings) #}
<script id="uploadTagsData" type="application/json">{{ available_tags_json|safe }}</script>

<script>
(function () {
    'use strict';

    var assetContainer = document.getElementById('asset-detail-container');
    if (!assetContainer) return;
    var assetModel = assetContainer.dataset.assetModel;
    var assetId    = assetContainer.dataset.assetId;

    var uploadInput       = document.getElementById('documentUploadInput');
    var submitBtn         = document.getElementById('uploadDocSubmitBtn');
    var modalEl           = document.getElementById('uploadDocModal');
    var emptyHint         = document.getElementById('uploadEmptyHint');
    var tableSection      = document.getElementById('uploadTableSection');
    var tableHead         = document.getElementById('uploadTagTableHead');
    var tableBody         = document.getElementById('uploadTagTableBody');
    var filesCountEl      = document.getElementById('uploadFilesCount');
    var pickBtn           = document.getElementById('uploadPickBtn');
    var changeFilesBtn    = document.getElementById('uploadChangeFilesBtn');

    // Parse available tags from the embedded JSON
    var availableTags = [];
    try {
        var tagDataEl = document.getElementById('uploadTagsData');
        if (tagDataEl) availableTags = JSON.parse(tagDataEl.textContent || '[]');
    } catch (_) {}

    // ── Open file picker on these triggers ──
    [pickBtn, changeFilesBtn].forEach(function (btn) {
        if (btn) btn.addEventListener('click', function () { uploadInput.click(); });
    });

    // ── Auto-open file picker when modal becomes visible (first time) ──
    var _firstOpen = true;
    if (modalEl) {
        modalEl.addEventListener('shown.bs.modal', function () {
            if (_firstOpen) {
                _firstOpen = false;
                uploadInput.click();
            }
        });

        // ── Full reset when modal is closed ──
        modalEl.addEventListener('hidden.bs.modal', function () {
            _firstOpen = true;
            uploadInput.value = '';
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="bi bi-upload me-1"></i>' + gettext('Uploader');
            emptyHint.classList.remove('d-none');
            tableSection.classList.add('d-none');
            tableHead.innerHTML = '<th style="min-width:120px;">' + gettext('Tag') + '</th>';
            tableBody.innerHTML = '';
            var alertEl = document.getElementById('uploadModalAlert');
            if (alertEl) { alertEl.className = 'alert d-none mt-3 mb-0'; alertEl.textContent = ''; }
        });
    }

    // ── Build file × tag table when files are chosen ──
    if (uploadInput) {
        uploadInput.addEventListener('change', function () {
            var files = Array.from(this.files);
            if (!files.length) return;

            // Build header: fixed "Tag" label column + one column per file
            tableHead.innerHTML = '<th style="min-width:120px;">' + gettext('Tag') + '</th>';
            files.forEach(function (file) {
                var th = document.createElement('th');
                th.className = 'text-center';
                th.style.minWidth = '120px';
                th.style.maxWidth = '200px';
                var span = document.createElement('span');
                span.className = 'text-truncate d-inline-block';
                span.style.maxWidth = '100%';
                span.title = file.name;
                span.textContent = file.name;
                th.appendChild(span);
                tableHead.appendChild(th);
            });

            // Build rows: one per tag
            tableBody.innerHTML = '';
            availableTags.forEach(function (tag) {
                var tr = document.createElement('tr');

                // Tag name cell
                var tdTag = document.createElement('td');
                tdTag.className = 'fw-medium';
                tdTag.textContent = tag.name;
                tr.appendChild(tdTag);

                // One checkbox cell per file
                files.forEach(function (file, idx) {
                    var td = document.createElement('td');
                    td.className = 'text-center';
                    var cb = document.createElement('input');
                    cb.type = 'checkbox';
                    cb.className = 'form-check-input upload-tag-cb';
                    cb.dataset.fileIdx = idx;
                    cb.dataset.tagId = tag.id;
                    td.appendChild(cb);
                    tr.appendChild(td);
                });

                tableBody.appendChild(tr);
            });

            // Show count and table, hide hint
            var n = files.length;
            filesCountEl.textContent = n + ' ' + (n === 1 ? gettext('fichier sélectionné') : gettext('fichiers sélectionnés'));
            emptyHint.classList.add('d-none');
            tableSection.classList.remove('d-none');
            submitBtn.disabled = false;
        });
    }

    // ── Submit: upload each file with its own tag selection ──
    if (submitBtn) {
        submitBtn.addEventListener('click', async function () {
            var files = Array.from(uploadInput.files);
            if (!files.length) return;

            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>' + gettext('Envoi…');

            var total = files.length;
            var done = 0;
            var errors = [];

            for (var i = 0; i < files.length; i++) {
                var file = files[i];

                // Collect tag IDs checked for this file's row
                var tagIds = Array.from(
                    tableBody.querySelectorAll('.upload-tag-cb[data-file-idx="' + i + '"]:checked')
                ).map(function (cb) { return cb.dataset.tagId; });

                var formData = new FormData();
                formData.append('file', file);
                formData.append('title', file.name.replace(/\.[^.]+$/, ''));
                tagIds.forEach(function (id) { formData.append('tag_ids', id); });

                try {
                    var resp = await fetch('/assets/' + assetModel + '/' + assetId + '/documents/add/', {
                        method: 'POST',
                        headers: { 'X-CSRFToken': getCsrfToken() },
                        body: formData,
                    });
                    var data = await resp.json();
                    if (!resp.ok || !data.success) throw new Error(data.error || 'Erreur');
                    done++;
                } catch (e) {
                    errors.push(file.name + ': ' + e.message);
                }
            }

            if (errors.length) {
                var alertEl = document.getElementById('uploadModalAlert');
                if (alertEl) {
                    alertEl.className = 'alert alert-danger mt-3 mb-0';
                    alertEl.textContent = errors.join(' | ');
                    alertEl.classList.remove('d-none');
                }
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="bi bi-upload me-1"></i>' + gettext('Uploader');
                if (done > 0) await refreshDocumentList();
            } else {
                var bsModal = bootstrap.Modal.getInstance(modalEl);
                if (bsModal) bsModal.hide();
                showDocAlert('success',
                    total === 1 ? gettext('Document ajouté') : total + ' ' + gettext('documents ajoutés'));
                await refreshDocumentList();
            }
        });
    }

    // ── Refresh #documents-list via AJAX without a full page reload ──
    async function refreshDocumentList() {
        try {
            var resp = await fetch('/assets/' + assetModel + '/' + assetId + '/documents/', {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
            });
            if (!resp.ok) return;
            var html = await resp.text();

            var container = document.getElementById('documents-list');
            if (!container) return;

            container.querySelectorAll('[id]').forEach(function (el) {
                try { var c = bootstrap.Carousel.getInstance(el); if (c) c.dispose(); } catch (_) {}
                try { var m = bootstrap.Modal.getInstance(el); if (m) m.dispose(); } catch (_) {}
            });

            container.innerHTML = html;

            container.querySelectorAll('script').forEach(function (old) {
                var s = document.createElement('script');
                s.textContent = old.textContent;
                old.replaceWith(s);
            });
        } catch (_) {}
    }

    // ── Delete (event-delegated) ──
    document.getElementById('asset-documents-card').addEventListener('click', async function (e) {
        var btn = e.target.closest('.document-delete-btn');
        if (!btn) return;
        if (!confirm(gettext('Supprimer ce document ?'))) return;

        var documentId = btn.dataset.documentId;
        try {
            var resp = await fetch(
                '/assets/' + assetModel + '/' + assetId + '/documents/' + documentId + '/delete/', {
                method: 'POST',
                headers: { 'X-CSRFToken': getCsrfToken(), 'Content-Type': 'application/json' },
            });
            var data = await resp.json();
            if (!resp.ok || !data.success) throw new Error(data.error || 'Erreur');

            var thumb = document.getElementById('doc-thumb-' + documentId);
            if (thumb) thumb.remove();

            var grid = document.getElementById('assetDocViewerModal-grid');
            var remaining = grid ? grid.querySelectorAll('[id^="doc-thumb-"]') : [];
            if (!remaining.length) {
                var list = document.getElementById('documents-list');
                if (list) {
                    list.innerHTML = '<p class="text-muted mb-0">' +
                        gettext('Aucun document associé') + '</p>';
                }
            }
        } catch (e) {
            showDocAlert('danger', e.message);
        }
    });

    function showDocAlert(type, msg) {
        var el = document.getElementById('documentUploadAlert');
        if (!el) return;
        el.className = 'alert alert-' + type;
        el.textContent = msg;
        el.classList.remove('d-none');
        if (type !== 'info') setTimeout(function () { el.classList.add('d-none'); }, 4000);
    }

    function getCsrfToken() {
        var m = document.cookie.match(/csrftoken=([^;]+)/);
        return m ? m[1] : '';
    }
})();
</script>
{% endif %}