{% extends "portal_base.html" %}
{% block title %}Campaigns · Portal{% endblock %}
{% block topbar_title %}Campaign composer{% endblock %}
{% block extra_head %}
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
<style>
  #email-editor-wrap {
    position: relative;
    overflow: visible;
    z-index: 1;
  }
  #email-editor {
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }
  .ql-toolbar.ql-snow {
    border-color: var(--monica-border);
    border-radius: 4px 4px 0 0;
    flex-shrink: 0;
  }
  .ql-container.ql-snow {
    border-color: var(--monica-border);
    border-radius: 0 0 4px 4px;
    background: #fff;
    height: auto !important;
    min-height: 160px;
    flex: 1;
    overflow: visible;
  }
  .ql-editor {
    min-height: 160px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
  }
  #preview-body img { max-width: 100%; height: auto; }
  #preview-body { line-height: 1.55; color: #212121; }
  #email-editor-wrap[hidden],
  #sms-body-wrap[hidden],
  #postcard-body-hint[hidden] { display: none !important; }
</style>
{% endblock %}
{% block portal_content %}
<div class="channel-tabs" id="compose-channel-tabs">
  <a class="active" href="#compose-email" data-channel="email">Email</a>
  <a href="#compose-sms" data-channel="sms">SMS</a>
</div>

<div class="split">
  <div class="panel">
    <div class="panel-h"><h2>Compose</h2></div>
    <div class="panel-b">
      {% if form_errors %}
      <ul class="portal-flash" style="margin:0 0 8px">
        {% for err in form_errors %}
        <li class="error">{{ err }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      <form method="post" action="{% url 'email_sms:campaign_list' %}" class="form-grid" id="campaign-compose">
        {% csrf_token %}
        <div class="field">
          <label for="id_name">Campaign name</label>
          <input id="id_name" name="name" type="text" required
                 placeholder="Spring seller tips" value="{{ form_data.name }}">
        </div>
        <div class="field" id="subject-field">
          <label for="id_subject">Subject</label>
          <input id="id_subject" name="subject" type="text"
                 placeholder="A quick tip for sellers this week"
                 value="{{ form_data.subject }}"
                 oninput="syncCampaignPreview()">
          <div class="hint">Email only — ignored for SMS</div>
        </div>
        <div class="field" id="email-editor-wrap">
          <label>Body</label>
          <div id="email-editor"></div>
          <textarea id="id_body" name="body" hidden>{{ form_data.body }}</textarea>
          <div class="hint">Bold, fonts, sizes, links, images · merge tags: <code>{% templatetag openvariable %}first_name{% templatetag closevariable %}</code>, <code>{% templatetag openvariable %}last_name{% templatetag closevariable %}</code></div>
        </div>
        <div class="field" id="sms-body-wrap" hidden>
          <label for="id_body_sms">Body</label>
          <textarea id="id_body_sms" style="min-height:140px"
                    placeholder="Hi {% templatetag openvariable %}first_name{% templatetag closevariable %}, …"
                    oninput="syncSmsBody()">{{ form_data.body }}</textarea>
          <div class="hint">Plain text for SMS · keep it short · merge tags: <code>{% templatetag openvariable %}first_name{% templatetag closevariable %}</code>, <code>{% templatetag openvariable %}last_name{% templatetag closevariable %}</code></div>
        </div>
        <div class="form-grid cols-2">
          <div class="field">
            <label for="id_audience">Recipients</label>
            <select id="id_audience" name="audience" required onchange="syncComposeChannel()">
              {% for value, label in audience_choices %}
              <option value="{{ value }}"{% if form_data.audience == value %} selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field">
            <label for="id_scheduled_for">Schedule <span class="muted">(optional)</span></label>
            <input id="id_scheduled_for" name="scheduled_for" type="datetime-local" step="60"
                   value="{{ form_data.scheduled_for }}">
            <div class="hint">Date &amp; time · leave blank to keep as unscheduled draft</div>
          </div>
        </div>
        <p class="hint-block">Saves a draft campaign and recipient stubs. Send from the campaign report when ready. You’ll get an email when the send finishes.</p>
        <button class="btn btn-primary" type="submit">Save draft</button>
      </form>
    </div>
  </div>
  <div class="panel">
    <div class="panel-h"><h2>Preview</h2></div>
    <div class="panel-b">
      <div class="preview-pane" id="campaign-preview">
        <div class="muted" id="preview-empty">Preview updates as you type.</div>
        <div id="preview-content" hidden>
          <div class="hint" id="preview-subject"></div>
          <div id="preview-body" style="margin-top:8px"></div>
        </div>
      </div>
      <p class="hint-block">After send → open the campaign report for delivery &amp; engagement.</p>
    </div>
  </div>
</div>

<div class="panel">
  <div class="panel-h"><h2>Recent campaigns</h2></div>
  <div class="panel-b" style="padding:0">
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Channel</th>
          <th>Status</th>
          <th>Scheduled</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for campaign in campaigns %}
        <tr>
          <td><a href="{% url 'email_sms:campaign_detail' campaign.pk %}">{{ campaign.name }}</a></td>
          <td>{{ campaign.get_channel_display }}</td>
          <td><span class="badge badge-{{ campaign.status }}">{{ campaign.get_status_display }}</span></td>
          <td>{% if campaign.scheduled_for %}{{ campaign.scheduled_for|date:"M j, g:i A" }}{% else %}—{% endif %}</td>
          <td><a href="{% url 'email_sms:campaign_detail' campaign.pk %}">Report</a></td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="empty-state">No campaigns yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
(function () {
  var uploadUrl = "{{ image_upload_url|escapejs }}";
  var csrfToken = (document.querySelector('#campaign-compose [name=csrfmiddlewaretoken]') || {}).value || '';
  var bodyField = document.getElementById('id_body');
  var smsField = document.getElementById('id_body_sms');
  var quill = null;

  function csrfHeader() {
    return { 'X-CSRFToken': csrfToken };
  }

  function syncBodyFromQuill() {
    if (!quill || !bodyField) return;
    var html = quill.root.innerHTML;
    if (html === '<p><br></p>' || html === '<p></p>') html = '';
    bodyField.value = html;
    syncCampaignPreview();
  }

  window.syncSmsBody = function () {
    if (smsField && bodyField) bodyField.value = smsField.value;
    syncCampaignPreview();
  };

  window.syncPostcardBody = function () {
    var pc = document.getElementById('id_body_pc');
    if (pc && bodyField) bodyField.value = pc.value;
    syncCampaignPreview();
  };

  window.syncCampaignPreview = function () {
    var subject = (document.getElementById('id_subject') || {}).value || '';
    var audience = (document.getElementById('id_audience') || {}).value || '';
    var isEmail = audience === 'email_opt_in';
    var isPostcard = audience === 'postcard_opt_in';
    var body = '';
    if (isEmail && quill) {
      body = quill.root.innerHTML;
      if (body === '<p><br></p>' || body === '<p></p>') body = '';
    } else if (isPostcard) {
      var tmpl = document.getElementById('id_template_id');
      var label = tmpl && tmpl.selectedIndex >= 0 ? tmpl.options[tmpl.selectedIndex].text : '';
      body = label && tmpl.value ? ('Postcard design: ' + label) : '';
      var note = (document.getElementById('id_body_pc') || {}).value || '';
      if (note) body = (body ? body + '\n\n' : '') + note;
    } else {
      body = (bodyField && bodyField.value) || '';
    }
    var empty = document.getElementById('preview-empty');
    var content = document.getElementById('preview-content');
    var subEl = document.getElementById('preview-subject');
    var bodyEl = document.getElementById('preview-body');
    if (!empty || !content) return;
    if (!subject && !body) {
      empty.hidden = false;
      content.hidden = true;
      return;
    }
    empty.hidden = true;
    content.hidden = false;
    subEl.textContent = subject ? ('Subject: ' + subject) : (isPostcard ? 'Postcard mailing' : '');
    if (isEmail) {
      bodyEl.style.whiteSpace = 'normal';
      bodyEl.innerHTML = body;
    } else {
      bodyEl.style.whiteSpace = 'pre-wrap';
      bodyEl.textContent = body;
    }
  };

  window.syncComposeChannel = function () {
    var audience = (document.getElementById('id_audience') || {}).value || '';
    var isPostcard = audience === 'postcard_opt_in';
    var isSms = audience === 'sms_opt_in';
    var isEmail = audience === 'email_opt_in';
    var tmplField = document.getElementById('postcard-template-field');
    var emailWrap = document.getElementById('email-editor-wrap');
    var smsWrap = document.getElementById('sms-body-wrap');
    var pcHint = document.getElementById('postcard-body-hint');
    var subjectField = document.getElementById('subject-field');
    if (tmplField) tmplField.style.display = isPostcard ? '' : 'none';
    if (subjectField) subjectField.style.display = isEmail ? '' : 'none';
    if (emailWrap) emailWrap.hidden = !isEmail;
    if (smsWrap) smsWrap.hidden = !isSms;
    if (pcHint) pcHint.hidden = !isPostcard;
    if (isEmail && quill) {
      syncBodyFromQuill();
    } else if (isSms && smsField && bodyField) {
      if (smsField.value === '' && bodyField.value && bodyField.value.indexOf('<') === -1) {
        smsField.value = bodyField.value;
      }
      bodyField.value = smsField.value;
      bodyField.removeAttribute('required');
    } else if (isPostcard && bodyField) {
      var pc = document.getElementById('id_body_pc');
      bodyField.value = pc ? pc.value : '';
      bodyField.removeAttribute('required');
    }
    document.querySelectorAll('#compose-channel-tabs a[data-channel]').forEach(function (a) {
      var ch = a.getAttribute('data-channel');
      var active = (ch === 'email' && isEmail) || (ch === 'sms' && isSms) || (ch === 'postcard' && isPostcard);
      a.classList.toggle('active', active);
    });
    syncCampaignPreview();
  };

  function initQuill() {
    var initial = (bodyField && bodyField.value) || '';
    quill = new Quill('#email-editor', {
      theme: 'snow',
      placeholder: 'Hi {first_name}, …',
      modules: {
        toolbar: {
          container: [
            [{ font: [] }, { size: ['small', false, 'large', 'huge'] }],
            ['bold', 'italic', 'underline'],
            [{ color: [] }, { background: [] }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image'],
            ['clean']
          ],
          handlers: {
            image: function () {
              var input = document.createElement('input');
              input.setAttribute('type', 'file');
              input.setAttribute('accept', 'image/png,image/jpeg,image/gif,image/webp');
              input.click();
              input.onchange = function () {
                var file = input.files && input.files[0];
                if (!file) return;
                var data = new FormData();
                data.append('image', file);
                fetch(uploadUrl, {
                  method: 'POST',
                  headers: csrfHeader(),
                  body: data,
                  credentials: 'same-origin'
                }).then(function (res) {
                  return res.json().then(function (json) {
                    if (!res.ok) throw new Error(json.error || 'Upload failed');
                    return json;
                  });
                }).then(function (json) {
                  var range = quill.getSelection(true);
                  quill.insertEmbed(range.index, 'image', json.url, 'user');
                  quill.setSelection(range.index + 1);
                  syncBodyFromQuill();
                }).catch(function (err) {
                  alert(err.message || 'Image upload failed');
                });
              };
            }
          }
        }
      }
    });
    if (initial && initial.indexOf('<') !== -1) {
      quill.root.innerHTML = initial;
    } else if (initial) {
      quill.setText(initial);
    }
    quill.on('text-change', syncBodyFromQuill);
    document.getElementById('campaign-compose').addEventListener('submit', function () {
      var audience = (document.getElementById('id_audience') || {}).value || '';
      if (audience === 'email_opt_in') syncBodyFromQuill();
      else if (audience === 'sms_opt_in' && smsField) bodyField.value = smsField.value;
      else if (audience === 'postcard_opt_in') {
        var pc = document.getElementById('id_body_pc');
        bodyField.value = pc ? pc.value : '';
      }
    });
  }

  document.querySelectorAll('#compose-channel-tabs a[data-channel]').forEach(function (a) {
    a.addEventListener('click', function (e) {
      e.preventDefault();
      var ch = a.getAttribute('data-channel');
      var audience = document.getElementById('id_audience');
      if (!audience) return;
      if (ch === 'sms') audience.value = 'sms_opt_in';
      else if (ch === 'postcard') audience.value = 'postcard_opt_in';
      else audience.value = 'email_opt_in';
      syncComposeChannel();
    });
  });

  var tmplSelect = document.getElementById('id_template_id');
  if (tmplSelect) tmplSelect.addEventListener('change', syncCampaignPreview);

  initQuill();
  syncComposeChannel();
})();
</script>
{% endblock %}