{% extends "django_pymissive/base_preview.html" %}
{% load static i18n %}

{% block preview_stylesheet %}
<link rel="stylesheet" href="{% static 'django_pymissive/css/letter_page.css' %}">
<link rel="stylesheet" href="{% static 'django_pymissive/css/postal_preview.css' %}">
{% endblock %}

{% block preview_content %}
<div class="postal-preview">

    <div class="postal-recipient-picker-bar no-print">
        {% include "django_pymissive/includes/postal_recipient_preview_nav.html" %}
    </div>

    <div class="envelope">
        <div class="address-block sender-block">
            <div class="address-label">{% trans "Sender" %}</div>
            {% if sender.name %}<div class="address-name">{{ sender.name }}</div>{% endif %}
            {% for line in sender_address.text_3lines %}
            <div class="address-line">{{ line|join:" " }}</div>
            {% empty %}
            <div class="address-empty">{% trans "Not filled in" %}</div>
            {% endfor %}
        </div>
        {% if delivery_mode_display or priority_display or acknowledgement_display %}
        <div class="postal-meta">
            {% if delivery_mode_display %}
            <span class="meta-badge meta-delivery">{{ delivery_mode_display }}<small>{% trans "Delivery Mode" %}</small></span>
            {% endif %}
            {% if priority_display %}
            <span class="meta-badge meta-priority">{{ priority_display }}<small>{% trans "Priority" %}</small></span>
            {% endif %}
            {% if acknowledgement_display %}
            <span class="meta-badge meta-ack">{{ acknowledgement_display }}<small>{% trans "Acknowledgement Level" %}</small></span>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <div class="postal-preview-actions no-print">
        {% if campaign %}
        <a href="{% url 'django_pymissive:download_pdf' 'campaign' campaign.pk %}?type={{ campaign_preview_kind|urlencode }}"
           class="postal-preview-actions__link">
            {% trans "Download PDF" %}
        </a>
        {% elif postal_letter_recipient_pk %}
        <a href="{% url 'django_pymissive:download_pdf_recipient' 'missive' missive.pk postal_letter_recipient_pk %}"
           class="postal-preview-actions__link">
            {% trans "Download PDF" %}
        </a>
        {% else %}
        <a href="{% url 'django_pymissive:download_pdf' 'missive' missive.pk %}"
           class="postal-preview-actions__link">
            {% trans "Download PDF" %}
        </a>
        {% endif %}
    </div>

    {% if missive.pk %}
        {% comment %}
        Saved missive: render every PDF physical attachment in priority order
        (first_document at priority 0 comes first, then the user's attachments).
        Non-PDF attachments are intentionally skipped — no preview, no link.
        {% endcomment %}
        {% for doc in missive.attachments_physical %}
            {% if doc.is_pdf %}
                <div class="pdf-attachment" data-pdf-url="{{ doc.attachment_download_url }}?v={{ doc.updated_at|date:'U' }}">
                    <div class="pdf-attachment-label">
                        <span aria-hidden="true">&#128196;</span>
                        <span class="pdf-attachment-name">
                            {% if doc.is_first_document %}{% trans "Letter (first page)" %}{% else %}{{ doc.filename|default:"unnamed" }}{% endif %}
                        </span>
                    </div>
                    <div class="pdf-pages">
                        <div class="pdf-loading">{% trans "Loading…" %}</div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    {% else %}
        {# Unsaved missive (campaign preview): fall back to inline HTML letter page. #}
        {% include "django_pymissive/includes/postal_a4_letter_page.html" %}
    {% endif %}

</div>
{% endblock %}

{% block preview_scripts %}
{% trans "PDF.js unavailable." as pdfjs_msg_unavailable %}
{% trans "Open attachment" as pdfjs_msg_open %}
{% trans "Could not render document" as pdfjs_msg_error %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
(function () {
    var MSG_UNAVAILABLE = '{{ pdfjs_msg_unavailable|escapejs }}';
    var MSG_OPEN        = '{{ pdfjs_msg_open|escapejs }}';
    var MSG_ERROR       = '{{ pdfjs_msg_error|escapejs }}';

    function fallbackLink(url) {
        return '<a href="' + url + '" target="_blank" rel="noopener">' + MSG_OPEN + '</a>';
    }

    if (typeof pdfjsLib === 'undefined') {
        document.querySelectorAll('.pdf-attachment[data-pdf-url]').forEach(function (w) {
            w.querySelector('.pdf-pages').innerHTML =
                '<p class="pdf-error">' + MSG_UNAVAILABLE + ' ' + fallbackLink(w.dataset.pdfUrl) + '</p>';
        });
        return;
    }

    pdfjsLib.GlobalWorkerOptions.workerSrc =
        'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    async function renderAttachment(wrapper) {
        var url = wrapper.dataset.pdfUrl;
        var pagesEl = wrapper.querySelector('.pdf-pages');

        try {
            var resp = await fetch(url, { credentials: 'include' });
            if (!resp.ok) throw new Error('HTTP ' + resp.status + ' ' + resp.statusText);
            var buffer = await resp.arrayBuffer();

            var pdf = await pdfjsLib.getDocument({ data: buffer }).promise;
            pagesEl.innerHTML = '';

            // High-DPI rendering: canvas backing store is rendered at devicePixelRatio
            // resolution; CSS keeps it displayed at its visual size. Without this on
            // Retina/4K screens the canvas would be visibly blurry compared to the
            // downloaded PDF (which renders at native screen resolution).
            var dpr = Math.max(window.devicePixelRatio || 1, 1);

            for (var n = 1; n <= pdf.numPages; n++) {
                var page = await pdf.getPage(n);
                var unscaled = page.getViewport({ scale: 1 });
                var cssScale = (pagesEl.clientWidth || 794) / unscaled.width;
                var renderVp = page.getViewport({ scale: cssScale * dpr });

                var canvas = document.createElement('canvas');
                canvas.className = 'pdf-page';
                canvas.width = renderVp.width;
                canvas.height = renderVp.height;
                canvas.style.width = (renderVp.width / dpr) + 'px';
                canvas.style.height = (renderVp.height / dpr) + 'px';
                pagesEl.appendChild(canvas);

                await page.render({
                    canvasContext: canvas.getContext('2d'),
                    viewport: renderVp,
                }).promise;
            }
        } catch (err) {
            pagesEl.innerHTML =
                '<p class="pdf-error">' + MSG_ERROR + ': ' + err.message +
                ' \u2014 ' + fallbackLink(url) + '</p>';
        }
    }

    document.querySelectorAll('.pdf-attachment[data-pdf-url]').forEach(renderAttachment);
})();
</script>
{% endblock %}