{% extends 'br_compensations/base.html' %}
{% load humanize %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Mail Templates" %}{% endblock %}

{% block extra_css %}
<link href="/static/br_compensations/css/style.css" rel="stylesheet">
<link href="/static/br_compensations/css/template-manager.css" rel="stylesheet">
<link href="/static/br_compensations/css/template-editor.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3>{% trans "Шаблоны ингейм писем" %}</h3>
        <a href="/br_compensations/dashboard/" class="btn btn-outline-secondary">
            <i class="fa-solid fa-arrow-left"></i> {% trans "Назад к дашборду" %}
        </a>
    </div>

    <!-- Available Variables Reference -->
    <div class="card mb-4">
        <div class="card-header" data-bs-toggle="collapse" data-bs-target="#variablesHelp" style="cursor: pointer;">
            <i class="fa-solid fa-circle-info"></i>
            {% trans "Доступные переменные" %}
            <i class="fa-solid fa-chevron-down float-end"></i>
        </div>
        <div id="variablesHelp" class="collapse">
            <div class="card-body">
                <p class="text-muted mb-2">{% trans "Используйте <code>{{ variable_name }}</code> для подстановки данных. Все переменные автоматически заменяются при отправке." %}</p>
                <div class="table-responsive">
                    <table class="table table-sm table-striped" id="variablesTable">
                        <thead>
                            <tr>
                                <th>{% trans "Переменная" %}</th>
                                <th>{% trans "Описание" %}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- System Defaults (read-only) -->
    <h5 class="mb-3">{% trans "Системные шаблоны (только чтение)" %}</h5>
    <div class="row mb-4">
        {% for tpl in default_templates %}
        <div class="col-md-6 mb-3">
            <div class="card template-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>
                        {% if tpl.template_type == 'APPROVE' %}
                            <span class="badge bg-success">APPROVE</span>
                        {% else %}
                            <span class="badge bg-warning text-dark">REJECT</span>
                        {% endif %}
                        {{ tpl.name }}
                    </span>
                    <span class="badge bg-secondary">Default</span>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <strong>{% trans "Тема:" %}</strong> {{ tpl.subject }}
                    </div>
                    <div class="mail-preview-body bg-dark text-light p-3 rounded" style="max-height: 150px; overflow-y: auto; font-size: 0.8rem;">
                        {{ tpl.body|safe }}
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col">
            <p class="text-muted">{% trans "Системные шаблоны не найдены." %}</p>
        </div>
        {% endfor %}
    </div>

    <!-- User Templates -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5>{% trans "Мои шаблоны" %}</h5>
        <button class="btn btn-primary" id="btnCreateTemplate">
            <i class="fa-solid fa-plus"></i> {% trans "Создать шаблон" %}
        </button>
    </div>

    <div class="row" id="userTemplates">
        {% for tpl in templates %}
        <div class="col-md-6 mb-3" id="template-card-{{ tpl.id }}">
            <div class="card template-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>
                        {% if tpl.template_type == 'APPROVE' %}
                            <span class="badge bg-success">APPROVE</span>
                        {% else %}
                            <span class="badge bg-warning text-dark">REJECT</span>
                        {% endif %}
                        {{ tpl.name }}
                    </span>
                    <div>
                        <button class="btn btn-sm btn-outline-primary btn-edit-template" data-id="{{ tpl.id }}" title="{% trans "Редактировать" %}">
                            <i class="fa-solid fa-pen"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger btn-delete-template" data-id="{{ tpl.id }}" title="{% trans "Удалить" %}">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <strong>{% trans "Тема:" %}</strong> {{ tpl.subject }}
                    </div>
                    <div class="mail-preview-body bg-dark text-light p-3 rounded" style="max-height: 150px; overflow-y: auto; font-size: 0.8rem;">
                        {{ tpl.body|safe }}
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col">
            <div class="alert alert-info">
                {% trans "У вас пока нет пользовательских шаблонов. Нажмите \"Создать шаблон\" чтобы начать." %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Create/Edit Modal -->
<div class="modal fade" id="templateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="templateModalTitle">{% trans "Создать шаблон" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="templateId">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="templateName" class="form-label">{% trans "Название" %}</label>
                        <input type="text" class="form-control" id="templateName" maxlength="200" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="templateType" class="form-label">{% trans "Тип" %}</label>
                        <select class="form-select" id="templateType">
                            <option value="APPROVE">{% trans "Одобрение компенсации" %}</option>
                            <option value="REJECT">{% trans "Отказ в компенсации" %}</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="templateSubject" class="form-label">{% trans "Тема письма" %}</label>
                    <input type="text" class="form-control" id="templateSubject" maxlength="500" required>
                    <div class="form-text">{% trans "Используйте {{ variable }} для подстановки данных" %}</div>
                </div>
                <div class="mb-3">
                    <label for="templateBody" class="form-label">{% trans "Тело письма (HTML)" %}</label>
                    <div class="template-editor-grid" id="templateEditorGrid">
                        <!-- Variable panel is inserted here by template-editor.js -->
                        <div class="editor-main">
                            <!-- Link creator toolbar is inserted here by template-editor.js -->
                            <textarea class="form-control template-editor-textarea" id="templateBody" rows="12" required></textarea>
                            <div class="form-text">{% trans "Поддерживается HTML разметка EVE: &lt;a href=&quot;showinfo:1377//ID&quot;&gt;Name&lt;/a&gt;. Используйте Tab для отступов." %}</div>
                        </div>
                    </div>
                </div>
                <!-- Live Preview -->
                <div class="mb-3">
                    <label class="form-label">{% trans "Предпросмотр" %}</label>
                    <div class="card bg-dark text-light">
                        <div class="card-body">
                            <div class="mb-2">
                                <strong>{% trans "Тема:" %}</strong>
                                <span id="modalPreviewSubject" class="text-info"></span>
                            </div>
                            <hr class="border-secondary">
                            <div id="modalPreviewBody" class="mail-preview-body" style="max-height: 200px; overflow-y: auto;"></div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="btnRefreshPreview">
                        <i class="fa-solid fa-rotate"></i> {% trans "Обновить предпросмотр" %}
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Отмена" %}</button>
                <button type="button" class="btn btn-primary" id="btnSaveTemplate">{% trans "Сохранить" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script src="/static/br_compensations/js/template-editor.js" type="text/javascript"></script>
{% verbatim %}<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load variables table
    loadVariablesTable();

    // Create button
    document.getElementById('btnCreateTemplate').addEventListener('click', function() {
        resetModal();
        document.getElementById('templateModalTitle').textContent = '{% trans "Создать шаблон" %}';
        new bootstrap.Modal(document.getElementById('templateModal')).show();
    });

    // Edit buttons
    document.querySelectorAll('.btn-edit-template').forEach(btn => {
        btn.addEventListener('click', function() {
            loadTemplateForEdit(this.dataset.id);
        });
    });

    // Delete buttons
    document.querySelectorAll('.btn-delete-template').forEach(btn => {
        btn.addEventListener('click', function() {
            deleteTemplate(this.dataset.id);
        });
    });

    // Save button
    document.getElementById('btnSaveTemplate').addEventListener('click', saveTemplate);

    // Live preview
    ['templateSubject', 'templateBody'].forEach(id => {
        document.getElementById(id).addEventListener('input', updateModalPreview);
    });
    document.getElementById('btnRefreshPreview').addEventListener('click', updateModalPreview);
});

function loadVariablesTable() {
    fetch('/br_compensations/api/mail-templates/available-variables/', {
        headers: { 'X-CSRFToken': csrfToken }
    })
    .then(r => r.json())
    .then(data => {
        const tbody = document.querySelector('#variablesTable tbody');
        data.forEach(v => {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td><code>{{ ${v.name} }}</code></td><td>${v.description}</td>`;
            tbody.appendChild(tr);
        });
    });
}

function resetModal() {
    document.getElementById('templateId').value = '';
    document.getElementById('templateName').value = '';
    document.getElementById('templateType').value = 'APPROVE';
    document.getElementById('templateSubject').value = '';
    document.getElementById('templateBody').value = '';
    document.getElementById('modalPreviewSubject').textContent = '';
    document.getElementById('modalPreviewBody').innerHTML = '';
}

function loadTemplateForEdit(id) {
    fetch(`/br_compensations/api/mail-templates/${id}/`, {
        headers: { 'X-CSRFToken': csrfToken }
    })
    .then(r => r.json())
    .then(data => {
        document.getElementById('templateId').value = data.id;
        document.getElementById('templateName').value = data.name;
        document.getElementById('templateType').value = data.template_type;
        document.getElementById('templateSubject').value = data.subject;
        document.getElementById('templateBody').value = data.body;
        document.getElementById('templateModalTitle').textContent = '{% trans "Редактировать шаблон" %}';
        updateModalPreview();
        new bootstrap.Modal(document.getElementById('templateModal')).show();
    });
}

function saveTemplate() {
    const id = document.getElementById('templateId').value;
    const payload = {
        name: document.getElementById('templateName').value.trim(),
        template_type: document.getElementById('templateType').value,
        subject: document.getElementById('templateSubject').value,
        body: document.getElementById('templateBody').value,
    };

    if (!payload.name || !payload.subject || !payload.body) {
        showAlert('{% trans "Заполните все обязательные поля" %}');
        return;
    }

    const url = id ? `/br_compensations/api/mail-templates/${id}/` : '/br_compensations/api/mail-templates/';
    const method = id ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken,
        },
        body: JSON.stringify(payload)
    })
    .then(r => {
        if (!r.ok) return r.json().then(err => { throw err; });
        return r.json();
    })
    .then(data => {
        bootstrap.Modal.getInstance(document.getElementById('templateModal')).hide();
        window.location.reload();
    })
    .catch(error => {
        const msg = error.detail || error.name || JSON.stringify(error);
        showAlert('{% trans "Ошибка:" %} ' + msg);
    });
}

function deleteTemplate(id) {
    showConfirm('{% trans "Удалить этот шаблон?" %}').then(function(data) {
        if (!data || !data.result) return;

        fetch(`/br_compensations/api/mail-templates/${id}/`, {
            method: 'DELETE',
            headers: { 'X-CSRFToken': csrfToken }
        })
        .then(r => {
            if (r.ok || r.status === 204) {
                const card = document.getElementById(`template-card-${id}`);
                if (card) card.remove();
            } else {
                return r.json().then(err => { throw err; });
            }
        })
        .catch(error => {
            showAlert('{% trans "Ошибка удаления:" %} ' + (error.detail || JSON.stringify(error)));
        });
    });
}

function updateModalPreview() {
    const subject = document.getElementById('templateSubject').value;
    const body = document.getElementById('templateBody').value;

    if (!subject && !body) {
        document.getElementById('modalPreviewSubject').textContent = '';
        document.getElementById('modalPreviewBody').innerHTML = '';
        return;
    }

    fetch('/br_compensations/api/mail-templates/preview/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken,
        },
        body: JSON.stringify({ subject: subject, body: body })
    })
    .then(r => r.json())
    .then(data => {
        document.getElementById('modalPreviewSubject').textContent = data.subject || '';
        document.getElementById('modalPreviewBody').innerHTML = data.body || '';
    });
}
</script>{% endverbatim %}
{% endblock %}