{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block title %}{% translate "Autoresponders" %} - Eenos{% endblock %}
{% block extra_css %}
    <link href="{% get_static_prefix %}{{ theme }}/css/flatpickr.min.css"
          rel="stylesheet"
          type="text/css">
{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Autoresponders" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Send an automatic reply when a message arrives at one of your email accounts." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Email" %}</span>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current">{% translate "Autoresponders" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Email Autoresponders" %}</h2>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="reply"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="autorespondersTable"
                   class="table align-middle w-100"
                   data-status-enabled="{% translate 'Enabled' %}"
                   data-status-disabled="{% translate 'Disabled' %}">
                <thead>
                    <tr>
                        <th>{% translate "Email Account" %}</th>
                        <th>{% translate "Autoresponder Status" %}</th>
                        <th>{% translate "Reply Subject" %}</th>
                        <th>{% translate "Actions" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post"
          id="autoresponderEditorForm"
          class="eenos-form"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="save_autoresponder" value="yes">
        <input type="hidden" name="email" id="autoresponderEmail">
        <div class="modal fade"
             id="autoresponderEditorModal"
             tabindex="-1"
             aria-labelledby="autoresponderEditorTitle"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h2 class="modal-title fs-5 d-flex align-items-center gap-2"
                                id="autoresponderEditorTitle">
                                <i data-lucide="reply"></i><span id="autoresponderEditorTitleText"></span>
                            </h2>
                            <div class="small text-muted mt-1" id="autoresponderEditorAddress"></div>
                        </div>
                        <button type="button"
                                class="btn-close"
                                data-bs-dismiss="modal"
                                aria-label="{% translate 'Close' %}"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="autoresponderSubject" class="form-label">{% translate "Reply Subject" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="autoresponderSubject"
                                   name="subject"
                                   maxlength="255"
                                   required
                                   data-parsley-required-message="{% translate 'Please enter a reply subject.' %}"
                                   placeholder="{% translate 'For example: Out of office' %}">
                        </div>
                        <div class="mb-3">
                            <label for="autoresponderFromName" class="form-label">{% translate "Sender Name" %}</label>
                            <input type="text"
                                   class="form-control"
                                   id="autoresponderFromName"
                                   name="from_name"
                                   maxlength="255"
                                   placeholder="{% translate 'For example: Customer Support' %}">
                            <div class="form-text">{% translate "Optional name displayed with the email account in the automatic reply." %}</div>
                        </div>
                        <div class="mb-3">
                            <label for="autoresponderBody" class="form-label">{% translate "Automatic Reply Message" %}</label>
                            <textarea class="form-control"
                                      id="autoresponderBody"
                                      name="body"
                                      rows="9"
                                      maxlength="262144"
                                      required
                                      data-parsley-required-message="{% translate 'Please enter an autoresponder message.' %}"
                                      placeholder="{% translate 'Enter the message that senders will receive.' %}"></textarea>
                            <div class="form-text">{% translate "The reply is sent as plain text. Do not include passwords or other sensitive information." %}</div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label for="autoresponderStartAt"
                                       id="autoresponderStartAtLabel"
                                       class="form-label">{% translate "Start Date and Time" %}</label>
                                <div class="input-group eenos-datetime-picker">
                                    <input type="text"
                                           class="form-control eenos-datetime-control"
                                           id="autoresponderStartAt"
                                           name="start_at"
                                           autocomplete="off"
                                           placeholder="{% translate 'Select start date and time' %}"
                                           data-parsley-errors-container="#autoresponderStartAtErrors">
                                    <button type="button"
                                            class="btn btn-outline-secondary eenos-datetime-trigger"
                                            id="autoresponderStartAtTrigger"
                                            title="{% translate 'Open start date and time picker' %}"
                                            aria-label="{% translate 'Open start date and time picker' %}">
                                        <i data-lucide="calendar-clock"></i>
                                    </button>
                                </div>
                                <div id="autoresponderStartAtErrors"></div>
                                <div class="form-text">{% translate "Leave empty to start immediately." %}</div>
                            </div>
                            <div class="col-md-6">
                                <label for="autoresponderEndAt"
                                       id="autoresponderEndAtLabel"
                                       class="form-label">{% translate "End Date and Time" %}</label>
                                <div class="input-group eenos-datetime-picker">
                                    <input type="text"
                                           class="form-control eenos-datetime-control"
                                           id="autoresponderEndAt"
                                           name="end_at"
                                           autocomplete="off"
                                           placeholder="{% translate 'Select end date and time' %}"
                                           data-parsley-errors-container="#autoresponderEndAtErrors">
                                    <button type="button"
                                            class="btn btn-outline-secondary eenos-datetime-trigger"
                                            id="autoresponderEndAtTrigger"
                                            title="{% translate 'Open end date and time picker' %}"
                                            aria-label="{% translate 'Open end date and time picker' %}">
                                        <i data-lucide="calendar-clock"></i>
                                    </button>
                                </div>
                                <div id="autoresponderEndAtErrors"></div>
                                <div class="form-text">{% translate "Leave empty to keep responding until disabled." %}</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="autoresponderIntervalHours" class="form-label">{% translate "Reply Interval" %}</label>
                            <div class="input-group">
                                <input type="number"
                                       class="form-control"
                                       id="autoresponderIntervalHours"
                                       name="interval_hours"
                                       min="0"
                                       max="8760"
                                       value="24"
                                       required
                                       data-parsley-required-message="{% translate 'Please enter the reply interval in hours.' %}"
                                       data-parsley-min-message="{% translate 'The reply interval cannot be negative.' %}">
                                <span class="input-group-text">{% translate "hours" %}</span>
                            </div>
                            <div class="form-text">{% translate "Number of hours to wait before replying to the same sender again. Enter zero to always respond." %}</div>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input"
                                   type="checkbox"
                                   role="switch"
                                   id="autoresponderEnabled"
                                   name="enabled">
                            <label class="form-check-label" for="autoresponderEnabled">{% translate "Enable this autoresponder after saving" %}</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-outline-secondary"
                                data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button>
                        <button type="submit" class="btn btn-primary"><i data-lucide="save"></i>{% translate "Save Autoresponder" %}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <form method="post" id="autoresponderActionForm">
        {% csrf_token %}
        <input type="hidden" name="autoresponder_action" value="yes">
        <input type="hidden" name="email" id="autoresponderActionEmail">
        <input type="hidden" name="action" id="autoresponderActionName">
        <div class="modal fade"
             id="autoresponderActionModal"
             tabindex="-1"
             aria-labelledby="autoresponderActionTitle"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h2 class="modal-title fs-5 d-flex align-items-center gap-2"
                                id="autoresponderActionTitle">
                                <i id="autoresponderActionIcon" data-lucide="circle-alert"></i><span id="autoresponderActionTitleText"></span>
                            </h2>
                            <div class="small text-muted mt-1" id="autoresponderActionAddress"></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-0"
                             id="autoresponderActionNotice">
                            <i data-lucide="triangle-alert"></i>
                            <div id="autoresponderActionMessage"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-outline-secondary"
                                data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button>
                        <button type="submit" class="btn" id="confirmAutoresponderAction">
                            <i data-lucide="check"></i><span id="confirmAutoresponderActionText"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
{% block extra_js %}
    <script src="{% get_static_prefix %}{{ theme }}/js/flatpickr.min.js"></script>
    <script>
(function ($) {
"use strict";
$(function () {
    const editorElement = document.getElementById("autoresponderEditorModal");
    const actionElement = document.getElementById("autoresponderActionModal");
    const editorModal = bootstrap.Modal.getOrCreateInstance(editorElement);
    const actionModal = bootstrap.Modal.getOrCreateInstance(actionElement);
    const editorForm = $("#autoresponderEditorForm").parsley();
    const pickerOptions = prefix => ({
        enableTime: true,
        time_24hr: false,
        minuteIncrement: 5,
        allowInput: true,
        disableMobile: true,
        dateFormat: "Y-m-d\\TH:i",
        altInput: true,
        altFormat: "M j, Y at h:i K",
        onReady: function (dates, value, instance) {
            instance.calendarContainer.classList.add("eenos-flatpickr");
            instance.altInput.setAttribute("autocomplete", "off");
            instance.altInput.id = prefix + "Display";
            const labelId = prefix === "autoresponderStartPicker" ? "autoresponderStartAtLabel" : "autoresponderEndAtLabel";
            const label = document.getElementById(labelId);
            label.htmlFor = instance.altInput.id;
            instance.altInput.setAttribute("aria-labelledby", labelId);
            instance.calendarContainer.querySelectorAll("input:not([id]):not([name]), select:not([id]):not([name]), textarea:not([id]):not([name])").forEach(function (field, index) {
                field.id = prefix + "Control" + (index + 1);
            });
            const footer = document.createElement("div");
            footer.className = "eenos-flatpickr-footer";
            const done = document.createElement("button");
            done.type = "button";
            done.className = "btn btn-sm btn-primary";
            done.innerHTML = '<i data-lucide="check"></i><span>{% translate "Done" %}</span>';
            done.addEventListener("click", function () { instance.close(); });
            footer.appendChild(done);
            instance.calendarContainer.appendChild(footer);
        }
    });
    const startPicker = flatpickr("#autoresponderStartAt", pickerOptions("autoresponderStartPicker"));
    const endPicker = flatpickr("#autoresponderEndAt", pickerOptions("autoresponderEndPicker"));
    document.getElementById("autoresponderStartAtTrigger").addEventListener("click", function () { startPicker.open(); });
    document.getElementById("autoresponderEndAtTrigger").addEventListener("click", function () { endPicker.open(); });
    lucide.createIcons();
    const esc = value => $("<div>").text(value == null ? "" : value).html();
    const encodeRow = row => encodeURIComponent(JSON.stringify(row));
    const statusLabels = {
        enabled: document.getElementById("autorespondersTable").dataset.statusEnabled,
        disabled: document.getElementById("autorespondersTable").dataset.statusDisabled
    };
    const localDateTime = value => {
        if (!value) return "";
        const date = new Date(value);
        if (Number.isNaN(date.getTime())) return "";
        const pad = number => String(number).padStart(2, "0");
        return date.getFullYear() + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate()) + "T" + pad(date.getHours()) + ":" + pad(date.getMinutes());
    };
    const iconButton = (icon, title, action, row, color) => '<button type="button" class="btn btn-sm btn-outline-' + color + ' autoresponder-action" data-action="' + action + '" data-row="' + encodeRow(row) + '" title="' + esc(title) + '" aria-label="' + esc(title) + '"><i data-lucide="' + icon + '"></i></button>';

    const table = $("#autorespondersTable").DataTable({
        processing: true,
        autoWidth: false,
        ajax: {url: "{% url 'email_autoresponders_data' %}", dataSrc: "data"},
        pageLength: 25,
        order: [[0, "asc"]],
        language: {
            lengthMenu: "{% translate '_MENU_ Rows per page' %}",
            loadingRecords: "&nbsp;",
            processing: "{% translate 'Loading...' %}",
            emptyTable: "{% translate 'No email accounts are available.' %}",
            zeroRecords: "{% translate 'No matching email accounts found.' %}"
        },
        responsive: {details: {renderer: DataTable.Responsive.renderer.listHiddenNodes()}},
        columns: [
            {data: "email", responsivePriority: 1, className: "text-nowrap", render: (value, type, row) => type === "display" ? '<div class="d-flex align-items-center gap-2"><i data-lucide="mail"></i><div><div>' + esc(value) + '</div>' + (row.is_suspended ? '<span class="badge eenos-badge-warning mt-1">{% translate "Mailbox suspended" %}</span>' : '') + '</div></div>' : value},
            {data: "enabled", responsivePriority: 2, className: "text-nowrap", render: (value, type, row) => {if (type !== "display") return value ? 2 : row.configured ? 1 : 0; if (!row.configured) return '<span class="badge eenos-badge-neutral">{% translate "Not configured" %}</span>'; const state = value ? "{% translate 'Enabled' %}" : "{% translate 'Disabled' %>"; return '<div class="d-inline-flex align-items-center gap-2"><div class="form-check form-switch mb-0"><input id="autoresponderToggle' + row.id + '" class="form-check-input autoresponder-toggle" type="checkbox" role="switch" data-row="' + encodeRow(row) + '" aria-label="' + esc(state) + '"' + (value ? ' checked' : '') + '></div><span class="badge ' + (value ? 'eenos-badge-success' : 'eenos-badge-warning') + '">' + state + '</span></div>'; }},
            {data: "subject", responsivePriority: 3, render: (value, type, row) => type === "display" ? (row.configured ? '<span class="text-break">' + esc(value) + '</span>' : '<span class="text-muted">—</span>') : value},
            {data: null, orderable: false, searchable: false, responsivePriority: 1, className: "text-nowrap", render: (data, type, row) => {if (type !== "display") return ""; let buttons = '<div class="eenos-dt-actions">'; buttons += iconButton(row.configured ? "pencil" : "plus", row.configured ? "{% translate 'Edit autoresponder' %}" : "{% translate 'Add autoresponder' %}", "edit", row, "secondary"); if (row.configured) buttons += iconButton("trash-2", "{% translate 'Delete autoresponder' %}", "delete", row, "danger"); return buttons + '</div>';}}
        ],
        drawCallback: function () {
            document.querySelectorAll("#autorespondersTable .autoresponder-toggle").forEach(function (toggle) {
                const label = toggle.checked ? statusLabels.enabled : statusLabels.disabled;
                toggle.setAttribute("aria-label", label);
                const badge = toggle.closest(".d-inline-flex").querySelector(".badge");
                if (badge) badge.textContent = label;
            });
            lucide.createIcons();
        }
    });
    table.on("responsive-display", () => lucide.createIcons());

    function resetEditorForm() {
        const formElement = document.getElementById("autoresponderEditorForm");
        const $form = $(formElement);

        formElement.reset();
        startPicker.clear();
        endPicker.clear();
        $form.find("input, textarea, select").each(function () {
            const field = $(this).data("Parsley");
            if (field) field.reset();
        });
        editorForm.reset();

        $form.find(".parsley-error, .parsley-success, .is-invalid, .is-valid")
            .removeClass("parsley-error parsley-success is-invalid is-valid")
            .removeAttr("aria-invalid aria-describedby");
        $form.find(".parsley-errors-list").remove();
        $form.find(".invalid-feedback").remove();
        $form.find("[data-parsley-errors-container]").each(function () {
            const container = this.getAttribute("data-parsley-errors-container");
            if (container) $(container).empty();
        });
    }

    function openAction(row, action) {
        const settings = {
            enable: ["{% translate 'Enable Autoresponder' %}", "{% translate 'Enable' %}", "{% translate 'Automatic replies will resume for this email account.' %}", "btn-success"],
            disable: ["{% translate 'Disable Autoresponder' %}", "{% translate 'Disable' %}", "{% translate 'The saved subject and message will be retained, but automatic replies will stop.' %}", "btn-warning"],
            delete: ["{% translate 'Delete Autoresponder' %}", "{% translate 'Delete' %}", "{% translate 'This permanently removes the saved subject and reply message.' %}", "btn-danger"]
        }[action];
        $("#autoresponderActionEmail").val(row.email);
        $("#autoresponderActionName").val(action);
        $("#autoresponderActionTitleText").text(settings[0]);
        $("#autoresponderActionAddress").text(row.email);
        $("#autoresponderActionMessage").text(settings[2]);
        $("#confirmAutoresponderActionText").text(settings[1]);
        $("#confirmAutoresponderAction").removeClass("btn-success btn-warning btn-danger").addClass(settings[3]);
        $("#autoresponderActionNotice").toggleClass("eenos-notice-danger", action === "delete").toggleClass("eenos-notice-warning", action !== "delete");
        actionModal.show();
        lucide.createIcons();
    }

    $(document).on("change", ".autoresponder-toggle", function () {
        const row = JSON.parse(decodeURIComponent(this.dataset.row));
        this.checked = row.enabled;
        openAction(row, row.enabled ? "disable" : "enable");
    });

    $(document).on("click", ".autoresponder-action", function () {
        const row = JSON.parse(decodeURIComponent(this.dataset.row));
        const action = this.dataset.action;
        if (action === "edit") {
            resetEditorForm();
            $("#autoresponderEmail").val(row.email);
            $("#autoresponderSubject").val(row.subject || "");
            $("#autoresponderBody").val(row.body || "");
            $("#autoresponderFromName").val(row.from_name || "");
            const startValue = localDateTime(row.start_at);
            const endValue = localDateTime(row.end_at);
            startValue ? startPicker.setDate(startValue, false, "Y-m-d\\TH:i") : startPicker.clear();
            endValue ? endPicker.setDate(endValue, false, "Y-m-d\\TH:i") : endPicker.clear();
            $("#autoresponderIntervalHours").val(row.configured ? row.interval_hours : 24);
            $("#autoresponderEnabled").prop("checked", row.configured ? row.enabled : true);
            $("#autoresponderEditorTitleText").text(row.configured ? "{% translate 'Edit Autoresponder' %}" : "{% translate 'Add Autoresponder' %}");
            $("#autoresponderEditorAddress").text(row.email);
            editorModal.show();
            return;
        }
        openAction(row, action);
    });

    editorElement.addEventListener("hidden.bs.modal", function () {
        resetEditorForm();
    });
});
})(jQuery);
    </script>
{% endblock %}