{% extends '@App/app.html.twig' %}

{% block content %}
    <div class="container-fluid p-0">
        <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
            <div>
                <h3 class="mb-1">{{ template.name }}</h3>
                <p class="text-muted mb-0">{{ template.description }}</p>
            </div>
            <a class="btn btn-light" href="{{ path('app_organization_email_templates_index') }}">
                <i class="ti ti-arrow-left me-1"></i>Emails
            </a>
        </div>

        {% if errors is not empty %}
            <div class="alert alert-danger">
                {% for error in errors %}
                    <div>{{ error }}</div>
                {% endfor %}
            </div>
        {% endif %}

        <div class="row g-4" data-controller="email-template-editor">
            <div class="col-xl-8">
                <form method="post" action="{{ path('app_organization_email_templates_update', {code: template.type}) }}" class="card">
                    <input type="hidden" name="_token" value="{{ csrf_token('email_template_update_' ~ template.type) }}">
                    <div class="card-header bg-white d-flex align-items-center justify-content-between gap-3">
                        <div>
                            <h5 class="mb-1">Contenu du message</h5>
                            <div class="text-muted small">Le sujet, l'expéditeur, les pièces jointes et le gabarit global restent gérés par Staffelia.</div>
                        </div>
                        {% if override and override.active %}
                            <span class="badge bg-success-subtle text-success">Personnalisé</span>
                        {% else %}
                            <span class="badge bg-light text-muted">Défaut Staffelia</span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <div>
                            <textarea id="email-template-content" name="customContent" class="form-control tinymce" rows="18"
                                      data-email-template-editor-target="textarea"
                                      {% if not can_manage_settings %}readonly{% endif %}>{{ content }}</textarea>
                        </div>
                    </div>
                    <div class="card-footer bg-white d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <button class="btn btn-outline-primary" type="button"
                                id="email-template-preview-button">
                            <i class="ti ti-eye me-1"></i>Prévisualiser
                        </button>
                        {% if can_manage_settings %}
                            <button class="btn btn-primary" type="submit" data-action="click->email-template-editor#flush">
                                <i class="ti ti-device-floppy me-1"></i>Enregistrer
                            </button>
                        {% endif %}
                    </div>
                </form>

                <div class="card mt-4">
                    <div class="card-body d-flex flex-wrap align-items-end gap-3">
                        <form method="post" action="{{ path('app_organization_email_templates_send_test', {code: template.type}) }}" class="d-flex flex-wrap align-items-end gap-2">
                            <input type="hidden" name="_token" value="{{ csrf_token('email_template_test_' ~ template.type) }}">
                            <div>
                                <label class="form-label fw-semibold">Email de test</label>
                                <input class="form-control" type="email" name="email" value="{{ test_email }}" required {% if not can_manage_settings %}disabled{% endif %}>
                            </div>
                            <button class="btn btn-outline-primary" type="submit" {% if not can_manage_settings %}disabled{% endif %}>
                                <i class="ti ti-send me-1"></i>Envoyer un test
                            </button>
                        </form>

                        {% if override and override.active and can_manage_settings %}
                            <form method="post" action="{{ path('app_organization_email_templates_reset', {code: template.type}) }}" onsubmit="return confirm('Revenir au contenu par défaut Staffelia ?');" class="ms-auto">
                                <input type="hidden" name="_token" value="{{ csrf_token('email_template_reset_' ~ template.type) }}">
                                <button class="btn btn-light text-danger" type="submit">
                                    <i class="ti ti-restore me-1"></i>Réinitialiser
                                </button>
                            </form>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card position-sticky" style="top: 92px;">
                    <div class="card-header bg-white">
                        <h5 class="mb-1">Variables disponibles</h5>
                        <div class="text-muted small">Cliquez pour insérer une variable dans le message.</div>
                    </div>
                    <div class="card-body">
                        {% if required_variables is not empty %}
                            <div class="mb-4">
                                <div class="fw-semibold mb-2">Variables obligatoires</div>
                                <div class="d-flex flex-wrap gap-2">
                                    {% for group in required_variables %}
                                        {% if group is iterable %}
                                            {% for variable in group %}
                                                <button class="btn btn-sm btn-outline-primary" type="button" data-variable="{{ variable }}" data-action="click->email-template-editor#insertVariable">{{ '{{ ' ~ variable ~ ' }}' }}</button>
                                            {% endfor %}
                                        {% else %}
                                            <button class="btn btn-sm btn-outline-primary" type="button" data-variable="{{ group }}" data-action="click->email-template-editor#insertVariable">{{ '{{ ' ~ group ~ ' }}' }}</button>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}

                        <div class="fw-semibold mb-2">Toutes les variables</div>
                        <div class="d-flex flex-wrap gap-2">
                            {% for variable, label in available_variables %}
                                <button class="btn btn-sm btn-light" type="button" title="{{ label }}" data-variable="{{ variable }}" data-action="click->email-template-editor#insertVariable">{{ '{{ ' ~ variable ~ ' }}' }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script id="organization-email-template-tinymce-lib" src="{{ asset('vendor/matdash/libs/tinymce/tinymce.min.js') }}"></script>
    <script>
        (function () {
            function initTinyMce() {
                const textarea = document.getElementById('email-template-content');
                const canManageSettings = {{ can_manage_settings ? 'true' : 'false' }};
                if (!textarea || !window.tinymce) {
                    return;
                }

                if (window.tinymce.get(textarea.id)) {
                    return;
                }

                window.tinymce.init({
                    target: textarea,
                    base_url: {{ asset('vendor/matdash/libs/tinymce')|json_encode|raw }},
                    language: 'fr_FR',
                    language_url: {{ asset('vendor/matdash/libs/tinymce/langs/fr_FR.js')|json_encode|raw }},
                    suffix: '.min',
                    menubar: false,
                    branding: false,
                    height: 420,
                    plugins: 'lists link table image code fullscreen autoresize preview',
                    toolbar: 'undo redo | blocks | bold italic underline | bullist numlist | link table image | preview fullscreen code',
                    toolbar_mode: 'sliding',
                    promotion: false,
                    convert_urls: false,
                    relative_urls: false,
                    remove_script_host: false,
                    entity_encoding: 'raw',
                    verify_html: false,
                    valid_elements: '*[*]',
                    extended_valid_elements: '*[*]',
                    setup: function (editor) {
                        editor.on('init', function () {
                            if (!canManageSettings && editor.mode) {
                                editor.mode.set('readonly');
                            }
                        });

                        editor.on('init change keyup input undo redo setcontent paste', function () {
                            editor.save();
                        });
                    }
                });
            }

            function boot() {
                bindPreviewModal();

                if (window.tinymce) {
                    initTinyMce();
                    return;
                }

                const script = document.getElementById('organization-email-template-tinymce-lib');
                if (script && !script.dataset.loadBound) {
                    script.addEventListener('load', initTinyMce, { once: true });
                    script.dataset.loadBound = '1';
                }
            }

            function bindPreviewModal() {
                const button = document.getElementById('email-template-preview-button');
                if (!button || button.dataset.previewBound === '1') {
                    return;
                }

                button.addEventListener('click', function (event) {
                    event.preventDefault();
                    openPreviewModal();
                });
                button.dataset.previewBound = '1';
            }

            function openPreviewModal() {
                const textarea = document.getElementById('email-template-content');
                const frame = document.getElementById('frame_modal');
                const modal = document.getElementById('global-modal');
                if (!textarea || !frame || !modal) {
                    return;
                }

                const editor = window.tinymce ? window.tinymce.get(textarea.id) : null;
                if (editor) {
                    editor.save();
                }

                const formData = new FormData();
                formData.append('customContent', editor ? editor.getContent({ format: 'raw' }) : textarea.value);

                fetch({{ path('app_organization_email_templates_preview', {code: template.type})|json_encode|raw }}, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'text/html, application/xhtml+xml',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                })
                    .then(function (response) {
                        if (!response.ok) {
                            throw new Error('La prévisualisation ne peut pas être chargée.');
                        }

                        return response.text();
                    })
                    .then(function (html) {
                        const doc = new DOMParser().parseFromString(html, 'text/html');
                        const responseFrame = doc.getElementById('frame_modal');
                        frame.innerHTML = responseFrame ? responseFrame.innerHTML : html;
                        openGlobalModal(frame, modal);
                    })
                    .catch(function (error) {
                        frame.innerHTML = '<div data-modal-size="modal-lg"><div class="modal-header"><h5 class="modal-title">Prévisualisation</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button></div><div class="modal-body"><div class="alert alert-danger mb-0">' + error.message + '</div></div></div>';
                        openGlobalModal(frame, modal);
                    });
            }

            function openGlobalModal(frame, modal) {
                const dialog = modal.querySelector('.modal-dialog');
                const sizedContent = frame.querySelector('[data-modal-size]');
                const size = sizedContent ? sizedContent.dataset.modalSize : 'modal-lg';

                if (dialog) {
                    dialog.classList.remove('modal-sm', 'modal-lg', 'modal-xl', 'modal-fullscreen');
                    if (size) {
                        dialog.classList.add(size);
                    }
                }

                if (window.bootstrap && window.bootstrap.Modal) {
                    window.bootstrap.Modal.getOrCreateInstance(modal).show();
                }
            }

            document.addEventListener('DOMContentLoaded', boot);
            document.addEventListener('turbo:load', boot);
            document.addEventListener('turbo:frame-load', boot);
            boot();
        })();
    </script>
{% endblock %}