{% extends '@App/partials/base.html.twig' %}

{% block content %}

<div class="body-wrapper">
  <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">
              <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-editor" rows="12" name="bodyHtmlTemplate" id="bodyHtmlTemplate">{{ 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>
</div>

  <script id="email-template-tinymce-lib" src="{{ asset('assets/libs/tinymce/tinymce.min.js') }}"></script>
<script>
  (function () {
    const logoUrl = {{ 'https://fundup.fr/wp-content/uploads/2025/11/Logo-principal-scaled.png'|json_encode|raw }};
    const signatureImageUrl = {{ 'https://fundup.fr/wp-content/uploads/2025/11/Logo-principal-scaled.png'|json_encode|raw }};
    const signatureImageTag = {{ ('<img src="https://fundup.fr/wp-content/uploads/2025/11/Logo-principal-scaled.png" alt="Logo FundUp" style="max-width:180px;width:100%;height:auto;" />')|json_encode|raw }};
    const starterTemplate = {{ starterHtmlTemplate|json_encode|raw }};

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

      if (!previewFrame || !bodyTextarea) return;

      let html = bodyTextarea.value;
      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*societe_name[^}]*\\}\\}', 'g'), 'Festival Horizon');
      html = html.replace(new RegExp('\\{\\{\\s*company_name[^}]*\\}\\}', 'g'), 'FundUp');
      html = html.replace(new RegExp('\\{\\{\\s*document_name[^}]*\\}\\}', 'g'), 'Convention de partenariat');
      html = html.replace(new RegExp('\\{\\{\\s*app_name[^}]*\\}\\}', 'g'), 'FundUp');
      html = html.replace(new RegExp('\\{\\{\\s*support_email[^}]*\\}\\}', 'g'), 'support@fundup.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);

      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;}
    .header{background-color:#fafafa;padding:20px;text-align:center;}
    .header img{max-width:140px;height:auto;}
    .content{padding:10px;font-size:15px;line-height:1.6;}
    .content h1{font-size:22px;color:#0d9488;margin-top:0;}
    .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 src="${logoUrl}" alt="Logo"></div>
    <div class="content">${html}</div>
    <div class="footer"><strong>FundUp</strong><br/>Ceci est un email automatique, merci de ne pas y répondre.<br/>support@fundup.fr</div>
  </div>
</body>
</html>`;
      } else if (!hasFullHtml) {
        html = `<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8" /></head><body style="margin:0;padding:0;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', updatePreviewFromTextarea);
        bodyTextarea.dataset.previewBound = '1';
      }

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

      updatePreviewFromTextarea();
    }

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

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

      tinymce.init({
        selector: '#bodyHtmlTemplate',
        language: 'fr_FR',
        plugins: 'image fullscreen table lists',
        height: 350,
        setup: function (editor) {
          editor.on('init', function () {
            bodyTextarea.value = editor.getContent();
            updatePreviewFromTextarea();
          });

          editor.on('keyup change', function () {
            bodyTextarea.value = editor.getContent();
            updatePreviewFromTextarea();
          });
        }
      });
    }

    function boot() {
      bindPreview();

      if (typeof tinymce !== 'undefined') {
        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 %}