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

{% block page_header %}{% endblock %}

{% block content %}

  <div class="container-fluid">

    <div class="card card-body py-3 mb-3">
      <div class="d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Template: {{ typeLabel }}</h4>
        <a href="{{ path('app_email_templates_index') }}" class="btn btn-sm btn-outline-secondary">Retour</a>
      </div>
    </div> 

    <div class="row g-3">
      <div class="col-12 col-lg-8">
        <div class="card">
          <div class="card-body">
            <form method="post" data-turbo="false" data-controller="email-template-editor" data-action="submit->email-template-editor#flush">
              <input type="hidden" name="_token" value="{{ csrf_token('email_template_' ~ type) }}">
              <div class="mb-2">
                <label class="form-label">Nom</label>
                <input class="form-control" name="name" value="{{ template.name }}">
              </div>
              <div class="mb-2">
                <label class="form-label">Sujet (Twig)</label>
                <input class="form-control" name="subjectTemplate" value="{{ template.subjectTemplate }}">
              </div>
              <div class="mb-2">
                <div class="d-flex justify-content-between align-items-center">
                  <label class="form-label mb-0">Corps HTML (Twig)</label>
                  <button type="button" class="btn btn-sm btn-outline-success" id="insertStarterTemplate">Insérer modèle design</button>
                </div>
                <textarea
                  class="form-control tinymce tinymce-editor"
                  rows="12"
                  name="bodyHtmlTemplate"
                  id="bodyHtmlTemplate"
                  data-controller="tinymce"
                  data-tinymce-script-src-value="{{ asset('vendor/matdash/libs/tinymce/tinymce.min.js') }}"
                  data-tinymce-base-url-value="{{ asset('vendor/matdash/libs/tinymce') }}"
                  data-email-template-editor-target="textarea">{{ template.bodyHtmlTemplate }}</textarea>
              </div>
              <div class="mb-2">
                <label class="form-label">Corps texte (Twig)</label>
                <textarea class="form-control" rows="6" name="bodyTextTemplate">{{ template.bodyTextTemplate }}</textarea>
              </div>
              <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" id="isEnabled" name="isEnabled" value="1" {% if template.isEnabled %}checked{% endif %}>
                <label class="form-check-label" for="isEnabled">Actif</label>
              </div>
              <button class="btn btn-primary">Enregistrer</button>
            </form>
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-4">
        <div class="card">
          <div class="card-body">
            <h6>Variables disponibles</h6>
            <ul class="mb-0">
              {% for v in variablesHelp %}<li><code>{{ v }}</code></li>{% endfor %}
            </ul>
          </div>
        </div>

        <div class="card mt-3">
          <div class="card-body">
            <h6>Aperçu du mail</h6>
            <p class="small text-muted mb-2"><strong>Sujet:</strong> <span id="previewSubject">{{ previewSubject }}</span></p>
            {% if previewError %}
              <div class="alert alert-warning py-2">{{ previewError }}</div>
            {% endif %}
            <iframe id="mailPreviewFrame" style="width:100%;height:520px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;" srcdoc="{{ previewHtml|e('html_attr') }}"></iframe>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script id="email-template-tinymce-lib" src="{{ asset('vendor/matdash/libs/tinymce/tinymce.min.js') }}"></script>
<script>
  (function () {
    const logoUrl = {{ ''|json_encode|raw }};
    const signatureImageUrl = {{ ''|json_encode|raw }};
    const signatureImageTag = {{ ''|json_encode|raw }};
    const starterTemplate = {{ starterHtmlTemplate|json_encode|raw }};

    function getEditorHtml(bodyTextarea) {
      if (window.tinymce && bodyTextarea && bodyTextarea.id) {
        const editor = window.tinymce.get(bodyTextarea.id);
        if (editor && !editor.removed) {
          editor.save();
          return editor.getContent({ format: 'raw' });
        }
      }

      return bodyTextarea ? bodyTextarea.value : '';
    }

    function updatePreviewFromEditor() {
      const bodyTextarea = document.getElementById('bodyHtmlTemplate');
      const previewFrame = document.getElementById('mailPreviewFrame');

      if (!previewFrame || !bodyTextarea) return;

      let html = getEditorHtml(bodyTextarea);
      html = html.replace(new RegExp('\\{\\{\\s*recipient_name[^}]*\\}\\}', 'g'), 'Marie Dubois');
      html = html.replace(new RegExp('\\{\\{\\s*partner_name[^}]*\\}\\}', 'g'), 'Novapulse');
      html = html.replace(new RegExp('\\{\\{\\s*project_name[^}]*\\}\\}', 'g'), 'Festival Horizon');
      html = html.replace(new RegExp('\\{\\{\\s*société_name[^}]*\\}\\}', 'g'), 'Festival Horizon');
      html = html.replace(new RegExp('\\{\\{\\s*company_name[^}]*\\}\\}', 'g'), 'Staffelia');
      html = html.replace(new RegExp('\\{\\{\\s*document_name[^}]*\\}\\}', 'g'), 'Convention de partenariat');
      html = html.replace(new RegExp('\\{\\{\\s*app_name[^}]*\\}\\}', 'g'), 'Staffelia');
      html = html.replace(new RegExp('\\{\\{\\s*support_email[^}]*\\}\\}', 'g'), 'support@staffelia.fr');
      html = html.replace(new RegExp('\\{\\{\\s*message[^}]*\\}\\}', 'g'), 'Votre document est disponible depuis votre espace partenaire.');
      html = html.replace(new RegExp('\\{\\{\\s*actionUrl[^}]*\\}\\}', 'g'), '#');
      html = html.replace(new RegExp('\\{\\{\\s*appLogoUrl[^}]*\\}\\}', 'g'), logoUrl);
      html = html.replace(new RegExp('\\{\\{\\s*signatureImageTag[^}]*\\}\\}', 'g'), signatureImageTag);
      html = html.replace(new RegExp('\\{\\{\\s*signatureImageUrl[^}]*\\}\\}', 'g'), signatureImageUrl);

      html = html.replace(/<img\b([^>]*)>/gi, function (match, attrs) {
        if (/class=["'][^"']*\bpreview-layout-logo\b/i.test(attrs)) {
          return match;
        }

        const hasStyle = /\sstyle=["'][^"']*["']/i.test(attrs);
        const hasWidth = /\swidth=["'][^"']*["']/i.test(attrs);
        const sizeStyle = 'max-width:180px;width:auto;height:auto;';
        let nextAttrs = attrs;

        if (hasStyle) {
          nextAttrs = nextAttrs.replace(/\sstyle=(["'])(.*?)\1/i, function (_, quote, style) {
            return ' style=' + quote + sizeStyle + style + quote;
          });
        } else {
          nextAttrs += ' style="' + sizeStyle + '"';
        }

        if (!hasWidth) {
          nextAttrs += ' width="180"';
        }
        return '<img' + nextAttrs + '>';
      });

      const hasFullHtml = /<html[\s>]/i.test(html);
      const hasEmailShell = /class=["'][^"']*email-container[^"']*["']/i.test(html)
        || /class=["'][^"']*header[^"']*["']/i.test(html)
        || /class=["'][^"']*footer[^"']*["']/i.test(html);

      if (!hasFullHtml && !hasEmailShell) {
        html = `<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <style>
    body{font-family:Arial,sans-serif;background-color:#f6f8fb;margin:0;padding:20px;color:#333;}
    .email-container{max-width:600px;margin:0 auto;background:#ffffff;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.05);}
    .header{background-color:#fafafa;padding:20px;text-align:center;}
    .header img{display:inline-block;max-width:140px;width:auto;height:auto;}
    .content{padding:30px;font-size:15px;line-height:1.6;}
    .content img{max-width:180px;width:auto;height:auto;}
    .banner img{display:block;width:100%;height:auto;max-height:220px;object-fit:cover;}
    .content h1{font-size:22px;color:#0d9488;margin-top:0;}
    .content a{color:#0d9488;}
    .footer{font-size:12px;color:#777;padding:20px;text-align:center;border-top:1px solid #e5e7eb;background:#fafafa;}
    .footer strong{color:#333;}
  </style>
</head>
<body>
  <div class="email-container">
    <div class="header"><img class="preview-layout-logo" src="${logoUrl}" alt="Logo" width="140" style="display:inline-block;max-width:140px;width:auto;height:auto;"></div>
    <div class="content">${html}</div>
    <div class="footer"><strong>Staffelia</strong><br/>Ceci est un email automatique, merci de ne pas y répondre.<br/>support@staffelia.fr</div>
  </div>
</body>
</html>`;
      } else if (!hasFullHtml) {
        html = `<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8" /><style>img{max-width:180px;width:auto;height:auto;}.header img{max-width:140px;}</style></head><body style="margin:0;padding:20px;background:#f6f8fb;">${html}</body></html>`;
      }

      previewFrame.srcdoc = html;
    }

    function bindPreview() {
      const subjectInput = document.querySelector('input[name="subjectTemplate"]');
      const bodyTextarea = document.getElementById('bodyHtmlTemplate');
      const previewSubject = document.getElementById('previewSubject');
      const starterBtn = document.getElementById('insertStarterTemplate');

      if (subjectInput && previewSubject && !subjectInput.dataset.previewBound) {
        subjectInput.addEventListener('input', function () {
          previewSubject.textContent = subjectInput.value;
        });
        subjectInput.dataset.previewBound = '1';
      }

      if (bodyTextarea && !bodyTextarea.dataset.previewBound) {
        bodyTextarea.addEventListener('input', updatePreviewFromEditor);
        bodyTextarea.dataset.previewBound = '1';
      }

      if (starterBtn && bodyTextarea && !starterBtn.dataset.previewBound) {
        starterBtn.addEventListener('click', function () {
          bodyTextarea.value = starterTemplate;
          if (window.tinymce) {
            const editor = window.tinymce.get(bodyTextarea.id);
            if (editor) {
              editor.setContent(starterTemplate);
              editor.save();
            }
          }
          updatePreviewFromEditor();
        });
        starterBtn.dataset.previewBound = '1';
      }

      updatePreviewFromEditor();
    }

    function initTinyMce() {
      const bodyTextarea = document.getElementById('bodyHtmlTemplate');
      if (!bodyTextarea || !window.tinymce) {
        return;
      }

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

      window.tinymce.init({
        selector: '#bodyHtmlTemplate',
        base_url: {{ asset('vendor/matdash/libs/tinymce')|json_encode|raw }},
        suffix: '.min',
        plugins: 'image fullscreen table lists code preview',
        height: 350,
        menubar: false,
        branding: false,
        promotion: false,
        convert_urls: false,
        relative_urls: false,
        remove_script_host: false,
        entity_encoding: 'raw',
        verify_html: false,
        valid_elements: '*[*]',
        extended_valid_elements: '*[*]',
        valid_children: '+body[style],+body[div],+div[style],+div[table],+td[style],+th[style],+table[style]',
        valid_styles: { '*': '*' },
        toolbar: 'undo redo | blocks | bold italic underline | bullist numlist | table image | preview fullscreen code',
        setup: function (editor) {
          editor.on('init', function () {
            editor.save();
            updatePreviewFromEditor();
          });

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

    function boot() {
      bindPreview();

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

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

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

{% endblock %}