{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}Email Builder{% endblock %}
{% block content_title %}<h1>Email Builder — Sending to {{ user_count }} recipient{{ user_count|pluralize }}</h1>{% endblock %}

{% block extrahead %}
{{ block.super }}
<style>
  #email-builder-iframe {
    width: 100%;
    height: calc(100vh - 180px);
    min-height: 600px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .builder-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    gap: 10px;
  }
  .builder-toolbar button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  .btn-send {
    background: #417690;
    color: #fff;
  }
  .btn-send:hover {
    background: #205067;
  }
  .btn-cancel {
    background: #ddd;
    color: #333;
  }
  .error-banner {
    background: #ffeaea;
    border: 1px solid #e5c4c4;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 12px;
  }
</style>
{% endblock %}

{% block content %}
{% if error %}
  <div class="error-banner">{{ error }}</div>
  <a href="{% url 'admin:auth_user_changelist' %}" class="btn-cancel" style="text-decoration:none; padding:8px 16px;">Back to Users</a>
{% else %}
  <div class="builder-toolbar">
    <a href="{% url 'admin:auth_user_changelist' %}"><button type="button" class="btn-cancel">Cancel</button></a>
    <button type="button" class="btn-send" id="btn-send-email">
      Send to {{ user_count }} user{{ user_count|pluralize }}
    </button>
  </div>

  <iframe
    id="email-builder-iframe"
    src="{{ builder_url }}"
    allow="clipboard-write"
  ></iframe>

  <form id="confirm-form" method="post" action="{{ confirm_url }}" style="display:none;">
    {% csrf_token %}
    <input type="hidden" name="template_json" id="template-json-input">
    <input type="hidden" name="template_html" id="template-html-input">
  </form>

  <script>
    (function() {
      const iframe = document.getElementById('email-builder-iframe');
      const btnSend = document.getElementById('btn-send-email');
      const form = document.getElementById('confirm-form');
      const builderOrigin = '{{ builder_origin }}';
      let builderReady = false;

      window.addEventListener('message', function(event) {
        if (event.origin !== builderOrigin) return;
        const data = event.data;
        if (!data || data.source !== 'mailcraft') return;

        if (data.type === 'MAILCRAFT_READY') {
          builderReady = true;
        }

        if (data.type === 'MAILCRAFT_SAVE' && data.payload) {
          document.getElementById('template-json-input').value = JSON.stringify(data.payload.json);
          document.getElementById('template-html-input').value = data.payload.html || '';
          form.submit();
        }
      });

      btnSend.addEventListener('click', function() {
        if (!builderReady) {
          alert('Builder is still loading. Please wait.');
          return;
        }
        iframe.contentWindow.postMessage(
          { source: 'mailcraft-host', type: 'MAILCRAFT_REQUEST_SAVE' },
          builderOrigin
        );
      });
    })();
  </script>
{% endif %}
{% endblock %}