{% load i18n document_viewer_tags short_name %}
{% comment %}
  Reusable document thumbnail grid + carousel viewer.
  Rendered by: common/templatetags/document_viewer_tags.py → render_document_viewer

  Context variables:
    docs          – list of doc dicts, sorted by (tag.order, tag.name, doc.title)
    modal_id      – HTML id for the viewer modal
    carousel_id   – derived id for Bootstrap carousel
    thumbs_id     – derived id for bottom strip
    download_id   – derived id for download button
    fullpage_id   – derived id for open-in-new-tab button
    allow_delete  – show delete-overlay buttons (edit-mode)
    show_tags     – show tag badge on thumbnails and in carousel caption
    show_versions – show version number + history button on thumbnails
    location_id   – context-object PK emitted as data-location-id on history buttons
{% endcomment %}

{% if docs %}

{% if not modal_only %}
{# ═══════════════════════════ Thumbnail Grid ═══════════════════════════ #}
<div class="row g-2" id="{{ modal_id }}-grid">
    {% for doc in docs %}
    <div class="col-6 col-sm-4 col-md-3 col-lg-2" id="doc-thumb-{{ doc.doc_id }}" data-upload-date="{{ doc.attached_at|date:'c' }}">

        {# ── Card wrapper ── #}
        <div class="card h-100 shadow-sm position-relative">

            {# ── Delete overlay ── #}
            {% if doc.legacy_delete_url %}
            {# Legacy doc: always-visible delete button, triggers Bootstrap modal #}
            <button type="button"
                    class="btn btn-danger btn-sm position-absolute top-0 end-0"
                    data-bs-toggle="modal"
                    data-bs-target="#documentDeleteModal"
                    data-filename="{{ doc.filename }}"
                    data-delete-url="{{ doc.legacy_delete_url }}"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    title="{% translate 'Supprimer' %}"
                    style="z-index: 2; border-radius: 0 4px 0 6px; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-trash" style="font-size: 0.7rem;"></i>
            </button>
            {% elif allow_delete and delete_always_visible %}
            {# Always-visible delete button (e.g. intervention page) #}
            <button type="button"
                    class="btn btn-danger btn-sm position-absolute top-0 end-0 document-delete-btn delete-document-btn"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    title="{% translate 'Supprimer' %}"
                    style="z-index: 2; border-radius: 0 4px 0 6px; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-trash" style="font-size: 0.7rem;"></i>
            </button>
            {% elif allow_delete %}
            {# Managed doc: edit-mode only, hidden by default #}
            <button type="button"
                    class="btn btn-danger btn-sm position-absolute top-0 end-0 document-delete-btn delete-document-btn d-none"
                    data-edit-mode-only="true"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    title="{% translate 'Supprimer' %}"
                    style="z-index: 2; border-radius: 0 4px 0 6px; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-trash" style="font-size: 0.7rem;"></i>
            </button>
            {% endif %}

            {# ── Copy overlay ── #}
            {% if allow_copy %}
            <button type="button"
                    class="btn btn-secondary btn-sm position-absolute top-0 start-0 copy-document-btn"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    data-bs-toggle="modal"
                    data-bs-target="#copyDocumentModal"
                    title="{% translate 'Copier vers une localisation ou un asset' %}"
                    style="z-index: 2; border-radius: 4px 0 6px 0; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-copy" style="font-size: 0.7rem;"></i>
            </button>
            {% endif %}

            {# ── Card header: tag badges (when relevant) ── #}
            {% if show_tags and doc.tags_list %}
            <div class="card-header px-2 py-1 d-flex align-items-center justify-content-between"
                 style="background: transparent; border-bottom: 1px solid rgba(0,0,0,.08);">
                <div class="d-flex flex-wrap gap-1">
                    {% for t in doc.tags_list %}
                    <span class="badge text-bg-primary" style="font-size: 0.6rem;">{{ t.name }}{% if doc.unique_params.format %} ({{ doc.unique_params.format }}){% endif %}</span>
                    {% endfor %}
                </div>
                {% if show_versions and doc.tag_slug %}
                <button type="button"
                        class="btn btn-sm p-0 border-0 bg-transparent doc-viewer-history-btn ms-1"
                        data-bs-toggle="modal"
                        data-bs-target="#documentHistoryModal"
                        data-tag-slug="{{ doc.tag_slug }}"
                        data-location-id="{{ location_id }}"
                        data-use-managed="true"
                        data-unique-params="{{ doc.unique_params_json }}"
                        title="{% translate 'Historique des versions' %}">
                    <i class="bi bi-clock-history text-primary" style="font-size: 0.8rem;"></i>
                </button>
                {% endif %}
            </div>
            {% endif %}

            {# ── Clickable thumbnail (card-img area) ── #}
            <a href="#"
               class="d-block text-decoration-none doc-viewer-thumb"
               data-bs-toggle="modal"
               data-bs-target="#{{ modal_id }}"
               data-viewer-modal="{{ modal_id }}"
               data-doc-index="{{ doc.index }}"
               title="{{ doc.filename }}">
                <div class="overflow-hidden bg-light d-flex align-items-center justify-content-center"
                     style="height: 90px; border-radius: {% if show_tags and doc.tags_list %}0{% else %}calc(var(--bs-card-inner-border-radius) - 1px) calc(var(--bs-card-inner-border-radius) - 1px){% endif %} 0 0;">
                    {% if doc.thumbnail_url %}
                        <img src="{{ doc.thumbnail_url }}"
                             alt="{{ doc.title }}"
                             style="width: 100%; height: 100%; object-fit: cover;"
                             loading="lazy">
                    {% elif doc.is_image %}
                        <img src="{{ doc.file_url }}"
                             alt="{{ doc.title }}"
                             style="width: 100%; height: 100%; object-fit: cover;"
                             loading="lazy">
                    {% else %}
                        <i class="{{ doc.ext|file_icon_class }}" style="font-size: 2.5rem;"></i>
                    {% endif %}
                </div>
            </a>

            {# ── Card body: filename + metadata ── #}
            <div class="card-body px-2 pt-1 pb-2">
                <p class="text-truncate text-muted mb-0"
                   style="font-size: 0.75em; line-height: 1.3;"
                   title="{{ doc.filename }}">
                    {{ doc.filename }}
                </p>
                {% if doc.attached_at or doc.attached_by or show_versions and doc.version_number %}
                <p class="text-muted mb-0" style="font-size: 0.68em; line-height: 1.3;">
                    {% if doc.attached_at %}{{ doc.attached_at|date:"d/m/Y" }}{% endif %}{% if doc.attached_by %} · {{ doc.attached_by|short_name }}{% endif %}{% if show_versions and doc.version_number %} · <strong>v{{ doc.version_number }}</strong>{% endif %}
                </p>
                {% endif %}
                {# History button without tag (no header) #}
                {% if show_versions and doc.tag_slug and not show_tags %}
                <button type="button"
                        class="btn btn-sm p-0 border-0 bg-transparent mt-1 doc-viewer-history-btn"
                        data-bs-toggle="modal"
                        data-bs-target="#documentHistoryModal"
                        data-tag-slug="{{ doc.tag_slug }}"
                        data-location-id="{{ location_id }}"
                        data-use-managed="true"
                        data-unique-params="{{ doc.unique_params_json }}"
                        title="{% translate 'Historique des versions' %}">
                    <i class="bi bi-clock-history text-primary" style="font-size: 0.8rem;"></i>
                    <span class="text-muted" style="font-size: 0.7em;">{% translate "Historique" %}</span>
                </button>
                {% endif %}
            </div>

        </div>{# /card #}

    </div>
    {% endfor %}
</div>
{% endif %}


{% if not grid_only %}
{# ═══════════════════════════ Viewer Modal ════════════════════════════ #}
<div class="modal fade"
     id="{{ modal_id }}"
     tabindex="-1"
     aria-labelledby="{{ modal_id }}Label"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">

            {# ── Header ── #}
            <div class="modal-header py-2">
                <h5 class="modal-title" id="{{ modal_id }}Label">
                    {% translate "Visionneuse de documents" %}
                </h5>
                <div class="d-flex align-items-center ms-auto gap-2">
                    <a href="#"
                       id="{{ fullpage_id }}"
                       class="btn btn-sm btn-outline-secondary"
                       target="_blank"
                       rel="noopener noreferrer"
                       title="{% translate 'Ouvrir en pleine page' %}">
                        <i class="bi bi-box-arrow-up-right"></i>
                    </a>
                    <a href="#"
                       id="{{ download_id }}"
                       class="btn btn-sm btn-outline-primary"
                       download
                       title="{% translate 'Télécharger' %}">
                        <i class="bi bi-download me-1"></i>{% translate "Télécharger" %}
                    </a>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Fermer' %}"></button>
                </div>
            </div>

            {# ── Body: carousel ── #}
            <div class="modal-body p-0">
                <div id="{{ carousel_id }}" class="carousel slide" data-bs-ride="false">
                    <div class="carousel-inner">
                        {% for doc in docs %}
                        <div class="carousel-item {% if forloop.first %}active{% endif %}"
                             data-doc-url="{{ doc.file_url }}"
                             data-doc-filename="{{ doc.filename }}"
                             data-doc-title="{{ doc.title }}">
                            <div class="d-flex justify-content-center align-items-center"
                                 style="min-height: 60vh; background: #f8f9fa;">
                                {% if doc.is_pdf %}
                                    <iframe src="{{ doc.file_url }}"
                                            style="width: 100%; height: 70vh; border: none;"
                                            title="{{ doc.title }}"></iframe>
                                {% elif doc.is_image %}
                                    <img src="{{ doc.file_url }}"
                                         class="d-block"
                                         alt="{{ doc.title }}"
                                         style="max-height: 70vh; max-width: 100%; object-fit: contain;">
                                {% elif doc.text_preview %}
                                    <div class="w-100 p-3 overflow-auto" style="max-height: 70vh;">
                                        <pre class="bg-light border rounded p-3 mb-0" style="font-size:.85rem;white-space:pre-wrap;word-break:break-all;">{{ doc.text_preview }}</pre>
                                        {% if doc.text_truncated %}
                                            <p class="text-muted small mt-2 mb-0">{% translate "File truncated to the first 50 000 characters." %}</p>
                                        {% endif %}
                                    </div>
                                {% elif doc.tabular_rows %}
                                    <div class="w-100 px-2 overflow-auto" style="max-height: 70vh;">
                                        <table class="table table-sm table-bordered table-hover mb-0 align-top">
                                            <thead class="table-light sticky-top">
                                                <tr>{% for cell in doc.tabular_rows.0 %}<th scope="col">{{ cell }}</th>{% endfor %}</tr>
                                            </thead>
                                            <tbody>
                                                {% for row in doc.tabular_rows|slice:"1:" %}
                                                    <tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                        {% if doc.tabular_truncated %}
                                            <p class="text-muted small mt-2 mb-0">{% translate "Only the first 200 rows are shown." %}</p>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    {# Generic file: show icon + download prompt #}
                                    <div class="text-center p-5">
                                        <i class="{{ doc.ext|file_icon_class }}"
                                           style="font-size: 5rem;"></i>
                                        <p class="mt-3 fw-semibold text-truncate">
                                            {{ doc.filename }}
                                        </p>
                                        <a href="{{ doc.file_url }}"
                                           class="btn btn-primary mt-2"
                                           target="_blank"
                                           rel="noopener noreferrer">
                                            <i class="bi bi-download me-2"></i>
                                            {% translate "Télécharger" %}
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                            {# Caption bar #}
                            <div class="px-3 py-2 text-center text-white d-flex align-items-center justify-content-center flex-wrap gap-2"
                                 style="background: rgba(0,0,0,.65);">
                                {% if doc.phase_title %}
                                <span class="badge {{ doc.phase_badge_class }}" style="font-size: .8rem;">
                                    <i class="bi {{ doc.phase_icon }} me-1"></i>{{ doc.phase_title }}
                                </span>
                                {% endif %}
                                <strong>{{ doc.filename }}</strong>
                                {% if show_tags and doc.tags_list %}
                                {% for t in doc.tags_list %}
                                <span class="badge bg-primary ms-1" style="font-size: .7em; vertical-align: middle;">{{ t.name }}{% if doc.unique_params.format %} ({{ doc.unique_params.format }}){% endif %}</span>
                                {% endfor %}
                                {% endif %}
                                {% if show_versions and doc.version_number %}
                                <span class="ms-2 opacity-75" style="font-size: .85em;">v{{ doc.version_number }}</span>
                                {% endif %}
                                {% if doc.attached_at %}
                                <span class="ms-2 opacity-75" style="font-size: .85em;">
                                    {{ doc.attached_at|date:"d/m/Y H:i" }}
                                </span>
                                {% endif %}
                                {% if doc.attached_by %}
                                <span class="ms-1 opacity-75" style="font-size: .85em;">
                                    – {{ doc.attached_by|short_name }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    {# Prev / Next controls (only when multiple docs) #}
                    {% if docs|length > 1 %}
                    <button class="carousel-control-prev" type="button"
                            data-bs-target="#{{ carousel_id }}" data-bs-slide="prev"
                            style="width: auto; height: auto; top: 50%; bottom: auto; transform: translateY(-50%); padding: 0 4px;">
                        <span class="carousel-control-prev-icon"
                              style="background-color: rgba(0,0,0,.5); border-radius: 50%; padding: 18px;"
                              aria-hidden="true"></span>
                        <span class="visually-hidden">{% translate "Précédent" %}</span>
                    </button>
                    <button class="carousel-control-next" type="button"
                            data-bs-target="#{{ carousel_id }}" data-bs-slide="next"
                            style="width: auto; height: auto; top: 50%; bottom: auto; transform: translateY(-50%); padding: 0 4px;">
                        <span class="carousel-control-next-icon"
                              style="background-color: rgba(0,0,0,.5); border-radius: 50%; padding: 18px;"
                              aria-hidden="true"></span>
                        <span class="visually-hidden">{% translate "Suivant" %}</span>
                    </button>
                    {% endif %}
                </div>

                {# ── Bottom thumbnail strip (only when multiple docs) ── #}
                {% if docs|length > 1 %}
                <div class="p-2 border-top bg-light">
                    <div class="d-flex flex-wrap justify-content-center gap-2"
                         id="{{ thumbs_id }}">
                        {% for doc in docs %}
                        <button type="button"
                                class="doc-strip-thumb {% if forloop.first %}active{% endif %}"
                                data-bs-target="#{{ carousel_id }}"
                                data-bs-slide-to="{{ doc.index }}"
                                aria-label="{{ doc.title }}"
                                title="{% if doc.phase_title %}{{ doc.phase_title }} - {% endif %}{{ doc.filename }}"
                                style="border: 3px solid {% if forloop.first %}#0d6efd{% else %}transparent{% endif %};
                                       padding: 0; background: none; cursor: pointer;
                                       border-radius: 4px; transition: border-color .2s;">
                            {% if doc.thumbnail_url %}
                                <img src="{{ doc.thumbnail_url }}"
                                     alt="{{ doc.title }}"
                                     style="width: 60px; height: 60px; object-fit: cover;
                                            border-radius: 2px; display: block;"
                                     loading="lazy">
                            {% elif doc.is_image %}
                                <img src="{{ doc.file_url }}"
                                     alt="{{ doc.title }}"
                                     style="width: 60px; height: 60px; object-fit: cover;
                                            border-radius: 2px; display: block;"
                                     loading="lazy">
                            {% else %}
                                <div style="width: 60px; height: 60px; display: flex;
                                            align-items: center; justify-content: center;
                                            background: #e9ecef; border-radius: 2px;">
                                    <i class="{{ doc.ext|file_icon_class }}"
                                       style="font-size: 1.4rem;"></i>
                                </div>
                            {% endif %}
                        </button>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

            </div>{# /modal-body #}
        </div>{# /modal-content #}
    </div>{# /modal-dialog #}
</div>{# /modal #}
{% endif %}

{# ═══════════════════════════ Inline JS ══════════════════════════════ #}
<script>
(function () {
    'use strict';

    const modalId    = '{{ modal_id }}';
    const carouselId = '{{ carousel_id }}';
    const thumbsId   = '{{ thumbs_id }}';
    const downloadId = '{{ download_id }}';
    const fullpageId = '{{ fullpage_id }}';

    const modal       = document.getElementById(modalId);
    const carousel    = document.getElementById(carouselId);
    const downloadBtn = document.getElementById(downloadId);
    const fullpageBtn = document.getElementById(fullpageId);

    if (!modal || !carousel) return;

    /* ── Update download + fullpage buttons to reflect the active slide ── */
    function updateDownloadBtn() {
        const active = carousel.querySelector('.carousel-item.active');
        if (active) {
            const url = active.dataset.docUrl || '#';
            if (downloadBtn) {
                downloadBtn.href = url;
                downloadBtn.setAttribute('download', active.dataset.docFilename || '');
            }
            if (fullpageBtn) {
                fullpageBtn.href = url;
            }
        }
    }

    /* ── Click on a grid thumbnail → jump carousel to that index ── */
    document.querySelectorAll('[data-viewer-modal="' + modalId + '"]').forEach(function (thumb) {
        thumb.addEventListener('click', function (e) {
            e.preventDefault();
            const idx = parseInt(this.dataset.docIndex, 10);
            if (!isNaN(idx)) {
                bootstrap.Carousel.getOrCreateInstance(carousel).to(idx);
            }
        });
    });

    /* ── Keep strip thumbnail highlight in sync with carousel ── */
    carousel.addEventListener('slide.bs.carousel', function (e) {
        const stripThumbs = document.querySelectorAll('#' + thumbsId + ' .doc-strip-thumb');
        stripThumbs.forEach(function (btn, idx) {
            const active = idx === e.to;
            btn.style.borderColor = active ? '#0d6efd' : 'transparent';
            btn.classList.toggle('active', active);
        });
    });

    /* ── Update download button after each slide ── */
    carousel.addEventListener('slid.bs.carousel', updateDownloadBtn);

    /* ── Keyboard navigation while modal is open ── */
    modal.addEventListener('keydown', function (e) {
        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
        e.preventDefault();
        const bsCarousel = bootstrap.Carousel.getOrCreateInstance(carousel);
        e.key === 'ArrowLeft' ? bsCarousel.prev() : bsCarousel.next();
    });

    /* ── Initialise download button when modal becomes visible ── */
    modal.addEventListener('shown.bs.modal', updateDownloadBtn);

})();
</script>

{% else %}
<p class="text-muted mb-0" id="{{ modal_id }}-empty">
    {% translate "Aucun document associé" %}
</p>
{% endif %}