{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Mail Queue Manager" %} - Eenos{% endblock %}
{% block extra_css %}
    <style>
      .mail-queue-stat-label { color: var(--eenos-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
      .mail-queue-stat-value { color: var(--eenos-text-primary); font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
      .mail-queue-stat-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 9px; color: var(--eenos-primary); background: var(--eenos-primary-light); }
      .mail-queue-stat-icon svg { width: 19px; height: 19px; }
    </style>
{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Mail Queue Manager" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Inspect queued Exim messages and manage delivery attempts." %}</div>
        </div>
        {% if exim_available %}
            <div class="d-grid col-12 col-sm-auto d-sm-flex gap-2">
                <button type="button"
                        class="btn btn-outline-secondary btn-sm text-nowrap"
                        id="createTestMessages"><i data-lucide="mail-plus"></i>{% translate "Create Test Messages" %}</button>
                {% if queue_running %}
                    <button type="button"
                            class="btn btn-outline-warning btn-sm text-nowrap"
                            disabled
                            title="{% translate 'An Exim queue run is already active.' %}"><i data-lucide="loader-circle"></i>{% translate "Queue Processing in Progress" %}</button>
                {% else %}
                    <button type="button" class="btn btn-primary btn-sm text-nowrap" id="runMailQueue"><i data-lucide="play"></i>{% translate "Run Queue" %}</button>
                {% endif %}
            </div>
        {% endif %}
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Mail Services" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'exim_settings' %}">Exim</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Mail Queue" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    {% if not exim_available %}
        <div class="eenos-card">
            <div class="eenos-notice eenos-notice-warning">
                <div class="eenos-notice-icon">
                    <i data-lucide="triangle-alert"></i>
                </div>
                <div class="eenos-notice-content">
                    <div class="eenos-notice-title">{% translate "Exim is unavailable" %}</div>
                    <div class="eenos-notice-text">{% translate "The Exim executable could not be found at /usr/sbin/exim. Queue management is unavailable." %}</div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row g-3 mb-4">
            <div class="col-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex justify-content-between gap-3"><div><div class="mail-queue-stat-label">{% translate "Queued Messages" %}</div><div class="mail-queue-stat-value mt-2" id="queueTotal">—</div></div><span class="mail-queue-stat-icon"><i data-lucide="mail"></i></span></div></div></div>
            <div class="col-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex justify-content-between gap-3"><div><div class="mail-queue-stat-label">{% translate "Frozen" %}</div><div class="mail-queue-stat-value mt-2" id="queueFrozen">—</div></div><span class="mail-queue-stat-icon"><i data-lucide="circle-pause"></i></span></div></div></div>
            <div class="col-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex justify-content-between gap-3"><div><div class="mail-queue-stat-label">{% translate "Queue Size" %}</div><div class="mail-queue-stat-value mt-2" id="queueSize">—</div></div><span class="mail-queue-stat-icon"><i data-lucide="database"></i></span></div></div></div>
            <div class="col-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex justify-content-between gap-3"><div><div class="mail-queue-stat-label">{% translate "Oldest Message" %}</div><div class="mail-queue-stat-value mt-2" id="queueOldest">—</div></div><span class="mail-queue-stat-icon"><i data-lucide="clock"></i></span></div></div></div>
        </div>
        <div class="eenos-card">
            <div class="mb-3">
                <div class="eenos-panel-title">{% translate "Queued Messages" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Select messages for bulk processing or use the row actions for an individual message." %}</div>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                <button type="button"
                        class="btn btn-sm btn-outline-primary bulk-queue-action"
                        data-action="retry"
                        disabled><i data-lucide="refresh-cw"></i>{% translate "Retry Selected" %}</button>
                <button type="button"
                        class="btn btn-sm btn-outline-warning bulk-queue-action"
                        data-action="freeze"
                        disabled><i data-lucide="circle-pause"></i>{% translate "Freeze Selected" %}</button>
                <button type="button"
                        class="btn btn-sm btn-outline-success bulk-queue-action"
                        data-action="thaw"
                        disabled><i data-lucide="play"></i>{% translate "Thaw Selected" %}</button>
                <button type="button"
                        class="btn btn-sm btn-outline-danger bulk-queue-action"
                        data-action="remove"
                        disabled><i data-lucide="trash-2"></i>{% translate "Delete Selected" %}</button>
            </div>
            <table id="mailQueueTable" class="table table-hover align-middle w-100 mb-0">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox"
                                   class="form-check-input mt-0 align-middle"
                                   id="selectAllQueue"
                                   aria-label="{% translate 'Select all queued messages' %}">
                        </th>
                        <th>{% translate "Message ID" %}</th>
                        <th>{% translate "Age" %}</th>
                        <th>{% translate "Size" %}</th>
                        <th>{% translate "Sender" %}</th>
                        <th>{% translate "Recipients" %}</th>
                        <th>{% translate "Status" %}</th>
                        <th class="text-end">{% translate "Actions" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
        <form method="post" id="singleQueueActionForm" class="d-none">
            {% csrf_token %}
            <input type="hidden" name="message_action" value="yes"><input type="hidden" name="message_id" id="singleQueueMessageId"><input type="hidden" name="action" id="singleQueueAction">
        </form>
        <form method="post" id="bulkQueueActionForm" class="d-none">
            {% csrf_token %}
            <input type="hidden" name="bulk_action" value="yes"><input type="hidden" name="message_ids" id="bulkQueueMessageIds"><input type="hidden" name="action" id="bulkQueueAction">
        </form>
        <form method="post" id="runQueueForm" class="d-none">
            {% csrf_token %}
            <input type="hidden" name="run_queue" value="yes">
        </form>
        <div class="modal fade"
             id="queueDetailsModal"
             tabindex="-1"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h2 class="modal-title fs-5">{% translate "Queued Message Details" %}</h2>
                            <div class="small text-muted font-monospace" id="queueDetailsId"></div>
                        </div>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="{% translate 'Close' %}"></button>
                    </div>
                    <div class="modal-body">
                        <div id="queueDetailsLoading" class="text-center text-muted py-4">{% translate "Loading message details…" %}</div>
                        <div id="queueDetailsContent" class="d-none">
                            <div class="eenos-panel-title fs-6 mb-2">{% translate "Message Headers" %}</div>
                            <pre class="eenos-code-view eenos-log-output mb-4" id="queueHeaders"></pre>
                            <div class="eenos-panel-title fs-6 mb-2">{% translate "Delivery Log" %}</div>
                            <pre class="eenos-code-view eenos-code-view-wrap eenos-log-output mb-0"
                                 id="queueDeliveryLog"></pre>
                        </div>
                        <div id="queueDetailsError"
                             class="eenos-notice eenos-notice-danger d-none">
                            <div class="eenos-notice-icon">
                                <i data-lucide="circle-x"></i>
                            </div>
                            <div class="eenos-notice-content">
                                <div class="eenos-notice-text"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-outline-secondary"
                                data-bs-dismiss="modal">{% translate "Close" %}</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade"
             id="queueConfirmModal"
             tabindex="-1"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="queueConfirmTitle"></h2>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="{% translate 'Close' %}"></button>
                    </div>
                    <div class="modal-body">
                        <div class="eenos-notice eenos-notice-warning">
                            <div class="eenos-notice-icon">
                                <i data-lucide="triangle-alert"></i>
                            </div>
                            <div class="eenos-notice-content">
                                <div class="eenos-notice-title" id="queueConfirmHeading"></div>
                                <div class="eenos-notice-text" id="queueConfirmText"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-outline-secondary"
                                data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmQueueAction"></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade"
             id="testMessagesModal"
             tabindex="-1"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <form method="post"
                          id="testMessagesForm"
                          class="eenos-form"
                          data-parsley-validate>
                        {% csrf_token %}
                        <input type="hidden" name="create_test_messages" value="yes">
                        <div class="modal-header">
                            <div>
                                <h2 class="modal-title fs-5">{% translate "Create Test Queue Messages" %}</h2>
                                <div class="small text-muted">{% translate "Add queue-only messages for testing the manager interface." %}</div>
                            </div>
                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="{% translate 'Close' %}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="eenos-notice eenos-notice-warning mb-4">
                                <div class="eenos-notice-icon">
                                    <i data-lucide="triangle-alert"></i>
                                </div>
                                <div class="eenos-notice-content">
                                    <div class="eenos-notice-text">{% translate "These are real queued messages. Use a controlled recipient and delete the messages after testing." %}</div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="testRecipient" class="form-label">{% translate "Recipient" %}</label>
                                <input type="email"
                                       class="form-control"
                                       id="testRecipient"
                                       name="recipient"
                                       autocomplete="off"
                                       required
                                       data-parsley-required-message="{% translate 'Enter the test recipient address.' %}"
                                       data-parsley-type-message="{% translate 'Enter a valid email address.' %}">
                            </div>
                            <div class="mb-3">
                                <label for="testSender" class="form-label">{% translate "Sender" %}</label>
                                <input type="email"
                                       class="form-control"
                                       id="testSender"
                                       name="sender"
                                       value="{{ test_sender }}"
                                       autocomplete="off"
                                       required
                                       data-parsley-required-message="{% translate 'Enter the test sender address.' %}"
                                       data-parsley-type-message="{% translate 'Enter a valid email address.' %}">
                            </div>
                            <div class="mb-3">
                                <label for="testSubject" class="form-label">{% translate "Subject" %}</label>
                                <input type="text"
                                       class="form-control"
                                       id="testSubject"
                                       name="subject"
                                       value="{% translate 'Eenos mail queue test' %}"
                                       maxlength="200"
                                       autocomplete="off"
                                       required
                                       data-parsley-required-message="{% translate 'Enter the test message subject.' %}">
                            </div>
                            <div>
                                <label for="testCount" class="form-label">{% translate "Number of Messages" %}</label>
                                <input type="number"
                                       class="form-control"
                                       id="testCount"
                                       name="count"
                                       value="3"
                                       min="1"
                                       max="25"
                                       autocomplete="off"
                                       required
                                       data-parsley-required-message="{% translate 'Enter the number of test messages.' %}"
                                       data-parsley-min-message="{% translate 'Create at least one test message.' %}"
                                       data-parsley-max-message="{% translate 'A maximum of 25 test messages can be created.' %}">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                                    class="btn btn-outline-secondary"
                                    data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="submitTestMessages"><i data-lucide="mail-plus"></i>{% translate "Create Messages" %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}
{% block extra_js %}
    {% if exim_available %}
        <script>
$(function(){const esc=v=>$('<div>').text(v==null?'':v).html(),selected=new Set(),detailsModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('queueDetailsModal')),confirmModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('queueConfirmModal')),testModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('testMessagesModal'));let pending=null;const bytes=value=>{let size=Number(value)||0;const units=['B','KB','MB','GB','TB'];let unit=0;while(size>=1024&&unit<units.length-1){size/=1024;unit++}return(size<10&&unit?size.toFixed(1):Math.round(size))+' '+units[unit]};const table=$('#mailQueueTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,language:{processing:'{% translate "Loading..." %}'},pageLength:25,ajax:{url:"{% url 'mail_queue_data' %}",dataSrc:function(response){const summary=response.summary||{};$('#queueTotal').text(summary.total??0);$('#queueFrozen').text(summary.frozen??0);$('#queueSize').text(bytes(summary.size_bytes));$('#queueOldest').text(summary.oldest_age||'—');return response.data||[]},error:function(){$('#queueTotal,#queueFrozen,#queueSize,#queueOldest').text('—')}},order:[[2,'desc']],columns:[{data:'message_id',orderable:false,searchable:false,width:'60px',className:'text-nowrap align-middle',responsivePriority:1,render:(d,t)=>t==='display'?'<input type="checkbox" class="form-check-input queue-row-select mt-0 align-middle" value="'+esc(d)+'" aria-label="{% translate "Select queued message" %}">':''},{data:'message_id',responsivePriority:1,className:'font-monospace text-nowrap',render:(d,t)=>t==='display'?'<span class="fw-semibold">'+esc(d)+'</span>':d},{data:'age',responsivePriority:2,className:'text-nowrap',render:(d,t,r)=>t==='sort'||t==='type'?Number(r.age_seconds)||0:d},{data:'size_bytes',responsivePriority:5,className:'text-nowrap',render:(d,t,r)=>t==='display'?esc(bytes(d)):r.size},{data:'sender',responsivePriority:2,render:(d,t)=>t==='display'?'<span class="text-break">'+esc(d)+'</span>':d},{data:'recipients',responsivePriority:4,render:(d,t,r)=>{if(t!=='display')return Array.isArray(d)?d.join(' '):d;const list=Array.isArray(d)?d:[];if(!list.length)return'—';return'<div class="text-break">'+esc(list[0])+'</div>'+(list.length>1?'<div class="small text-muted">+'+(list.length-1)+' {% translate "more" %}</div>':'')}},{data:'frozen',responsivePriority:2,className:'text-nowrap',render:(d,t)=>t!=='display'?d:(d?'<span class="eenos-status text-warning d-inline-flex align-items-center gap-2"><i data-lucide="circle-pause"></i>{% translate "Frozen" %}</span>':'<span class="eenos-status text-success d-inline-flex align-items-center gap-2"><i data-lucide="circle-check"></i>{% translate "Queued" %}</span>')},{data:null,orderable:false,searchable:false,width:'184px',responsivePriority:1,className:'text-end',render:(d,t,r)=>{if(t!=='display')return'';return'<div class="eenos-dt-actions d-flex justify-content-end gap-1"><button type="button" class="btn btn-sm btn-outline-secondary view-queue-message" data-id="'+esc(r.message_id)+'" title="{% translate "View details" %}" aria-label="{% translate "View details" %}"><i data-lucide="eye"></i></button><button type="button" class="btn btn-sm btn-outline-primary queue-row-action" data-action="retry" data-id="'+esc(r.message_id)+'" title="{% translate "Retry delivery" %}" aria-label="{% translate "Retry delivery" %}"><i data-lucide="refresh-cw"></i></button>'+(r.frozen?'<button type="button" class="btn btn-sm btn-outline-success queue-row-action" data-action="thaw" data-id="'+esc(r.message_id)+'" title="{% translate "Thaw message" %}" aria-label="{% translate "Thaw message" %}"><i data-lucide="play"></i></button>':'<button type="button" class="btn btn-sm btn-outline-warning queue-row-action" data-action="freeze" data-id="'+esc(r.message_id)+'" title="{% translate "Freeze message" %}" aria-label="{% translate "Freeze message" %}"><i data-lucide="circle-pause"></i></button>')+'<button type="button" class="btn btn-sm btn-outline-danger queue-row-action" data-action="remove" data-id="'+esc(r.message_id)+'" title="{% translate "Delete message" %}" aria-label="{% translate "Delete message" %}"><i data-lucide="trash-2"></i></button></div>'}}],drawCallback:function(){if(typeof lucide!=='undefined')lucide.createIcons();$('.queue-row-select').each(function(){$(this).prop('checked',selected.has(this.value))});}});table.on('responsive-display',()=>lucide.createIcons());const updateBulk=()=>$('.bulk-queue-action').prop('disabled',!selected.size);$(document).on('change','.queue-row-select',function(){this.checked?selected.add(this.value):selected.delete(this.value);updateBulk();});$('#selectAllQueue').on('change',function(){const checked=this.checked;table.rows({search:'applied'}).data().each(row=>checked?selected.add(row.message_id):selected.delete(row.message_id));table.draw(false);updateBulk();});const actionLabels={retry:"{% translate 'Retry Delivery' %}",freeze:"{% translate 'Freeze Messages' %}",thaw:"{% translate 'Thaw Messages' %}",remove:"{% translate 'Delete Messages' %}",run:"{% translate 'Run Mail Queue' %}"};function openConfirm(type,action,ids){pending={type,action,ids};const count=ids?ids.split(',').filter(Boolean).length:0,remove=action==='remove';$('#queueConfirmTitle').text(actionLabels[action]);$('#queueConfirmHeading').text(type==='run'?"{% translate 'Force a delivery attempt for the complete queue?' %}":count+' '+(count===1?"{% translate 'queued message' %}":"{% translate 'queued messages' %}"));$('#queueConfirmText').text(remove?"{% translate 'The selected messages will be permanently removed from the Exim queue.' %}":action==='freeze'?"{% translate 'Exim will stop delivery attempts for the selected messages.' %}":action==='thaw'?"{% translate 'Exim will allow delivery attempts to resume for the selected messages.' %}":type==='run'?"{% translate 'Exim will immediately process every eligible message in the queue.' %}":"{% translate 'Exim will immediately attempt delivery for the selected messages.' %}");$('#confirmQueueAction').text(actionLabels[action]).toggleClass('btn-danger',remove).toggleClass('btn-primary',!remove);confirmModal.show();}$(document).on('click','.queue-row-action',function(e){e.stopPropagation();openConfirm('single',$(this).data('action'),$(this).data('id'));});$('.bulk-queue-action').on('click',function(){openConfirm('bulk',$(this).data('action'),Array.from(selected).join(','));});$('#runMailQueue').on('click',()=>openConfirm('run','run',''));$('#confirmQueueAction').on('click',function(){if(!pending)return;if(pending.type==='run')document.getElementById('runQueueForm').submit();else if(pending.type==='single'){$('#singleQueueMessageId').val(pending.ids);$('#singleQueueAction').val(pending.action);document.getElementById('singleQueueActionForm').submit();}else{$('#bulkQueueMessageIds').val(pending.ids);$('#bulkQueueAction').val(pending.action);document.getElementById('bulkQueueActionForm').submit();}});$(document).on('click','.view-queue-message',function(e){e.stopPropagation();const id=$(this).data('id');$('#queueDetailsId').text(id);$('#queueDetailsLoading').removeClass('d-none');$('#queueDetailsContent,#queueDetailsError').addClass('d-none');detailsModal.show();$.get("{% url 'mail_queue_details' %}",{message_id:id}).done(response=>{$('#queueHeaders').text(response.data.headers||'');$('#queueDeliveryLog').text(response.data.delivery_log||'');$('#queueDetailsContent').removeClass('d-none')}).fail(xhr=>{$('#queueDetailsError .eenos-notice-text').text(xhr.responseJSON?.error||"{% translate 'Unable to load queued message details.' %}");$('#queueDetailsError').removeClass('d-none')}).always(()=>$('#queueDetailsLoading').addClass('d-none'));});$('#createTestMessages').on('click',()=>testModal.show());$('#submitTestMessages').on('click',function(){const parsley=$('#testMessagesForm').parsley();if(parsley.validate())document.getElementById('testMessagesForm').submit();});});
        </script>
    {% endif %}
{% endblock %}