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

{% block title %}Confirm Send{% endblock %}
{% block content_title %}<h1>Confirm Email — {{ user_count }} recipient{{ user_count|pluralize }}</h1>{% endblock %}

{% block extrahead %}
{{ block.super }}
<style>
  .confirm-section { margin-bottom: 20px; }
  .confirm-section label { display: block; font-weight: bold; margin-bottom: 4px; }
  .confirm-section input[type="text"] {
    width: 100%;
    max-width: 500px;
    padding: 8px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    font-size: 14px;
    background: var(--body-bg, #fff);
    color: var(--body-fg, #333);
  }
  .recipient-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    padding: 8px;
    background: var(--body-bg, #fff);
    color: var(--body-fg, #333);
    font-size: 13px;
  }
  .recipient-list div { padding: 2px 0; }
  .preview-frame {
    width: 100%;
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .confirm-toolbar {
    display: flex;
    gap: 10px;
    padding: 16px 0;
  }
  .confirm-toolbar button {
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  .btn-confirm { background: #417690; color: #fff; }
  .btn-confirm:hover { background: #205067; }
  .btn-confirm:disabled { background: #999; cursor: not-allowed; }
  .btn-back { background: #ddd; color: #333; }
  .result-banner {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    display: none;
  }
  .result-success { background: #e6f9e6; border: 1px solid #b3e6b3; color: #1a5e1a; }
  .result-error { background: #ffeaea; border: 1px solid #e5c4c4; color: #8b1a1a; }
</style>
{% endblock %}

{% block content %}
<div id="result-banner" class="result-banner"></div>

<div id="send-form-container">
  <div class="confirm-section">
    <label for="subject-input">Subject Line</label>
    <input type="text" id="subject-input" placeholder="Enter email subject..." autofocus>
  </div>

  <div class="confirm-section">
    <label>Recipients ({{ user_count }})</label>
    <div class="recipient-list">
      {% for user in users %}
        <div>{{ user.get_full_name|default:user.username }} &lt;{{ user.email }}&gt;</div>
      {% endfor %}
    </div>
  </div>

  <div class="confirm-section">
    <label>Preview</label>
    <iframe class="preview-frame" sandbox srcdoc="{{ template_html|escape }}"></iframe>
  </div>

  <div class="confirm-toolbar">
    <button type="button" class="btn-back" onclick="history.back()">Back</button>
    <button type="button" class="btn-confirm" id="btn-confirm-send">
      Confirm Send to {{ user_count }} user{{ user_count|pluralize }}
    </button>
  </div>
</div>

<script>
  (function() {
    const btn = document.getElementById('btn-confirm-send');
    const banner = document.getElementById('result-banner');
    const templateJson = {{ template_json|safe }};

    btn.addEventListener('click', function() {
      const subject = document.getElementById('subject-input').value.trim();
      if (!subject) {
        alert('Please enter a subject line.');
        return;
      }

      btn.disabled = true;
      btn.textContent = 'Sending...';

      const formData = new FormData();
      formData.append('subject', subject);
      formData.append('template_json', JSON.stringify(templateJson));
      formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

      fetch('{{ send_url }}', {
        method: 'POST',
        body: formData,
      })
      .then(resp => resp.json())
      .then(data => {
        if (data.error) {
          banner.className = 'result-banner result-error';
          banner.textContent = data.error;
          banner.style.display = 'block';
          btn.disabled = false;
          btn.textContent = 'Confirm Send to {{ user_count }} user{{ user_count|pluralize }}';
        } else {
          document.getElementById('send-form-container').style.display = 'none';
          banner.className = 'result-banner result-success';
          let msg = 'Successfully sent ' + data.sent + ' email(s).';
          if (data.failed > 0) msg += ' ' + data.failed + ' failed.';
          banner.textContent = msg;
          banner.style.display = 'block';
        }
      })
      .catch(err => {
        banner.className = 'result-banner result-error';
        banner.textContent = 'An error occurred: ' + err.message;
        banner.style.display = 'block';
        btn.disabled = false;
        btn.textContent = 'Confirm Send to {{ user_count }} user{{ user_count|pluralize }}';
      });
    });
  })();
</script>
{% endblock %}