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

{% block title %}Compose Email{% endblock %}
{% block content_title %}<h1>Compose Email</h1>{% endblock %}

{% block extrahead %}
{{ block.super }}
<style>
  .compose-container { max-width: 800px; }
  .recipient-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .recipient-controls input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    font-size: 13px;
    min-width: 250px;
    background: var(--body-bg, #fff);
    color: var(--body-fg, #333);
  }
  .recipient-controls label {
    font-size: 13px;
    cursor: pointer;
    user-select: none;
  }
  .user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .user-table th, .user-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
  }
  .user-table th {
    background: var(--darkened-bg, #f8f8f8);
    color: var(--body-fg, #333);
    font-weight: 600;
    position: sticky;
    top: 0;
  }
  .user-table td { color: var(--body-fg, #333); }
  .user-table tr:hover { background: var(--darkened-bg, #f5f8ff); }
  .user-table-wrap {
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 16px;
  }
  .compose-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
  }
  .selected-count { font-size: 14px; color: #666; }
  .btn-compose {
    padding: 10px 24px;
    background: #417690;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  .btn-compose:hover { background: #205067; }
  .btn-compose:disabled { background: #999; cursor: not-allowed; }
  .empty-state {
    text-align: center;
    padding: 40px;
    color: #999;
  }
</style>
{% endblock %}

{% block content %}
<div class="compose-container">
  <p style="color:#666; margin-bottom:16px;">Select recipients, then compose your email in the visual builder.</p>

  <form method="post" action="{% url 'admin:email_builder:builder' %}" id="compose-form">
    {% csrf_token %}

    <div class="recipient-controls">
      <input type="text" id="search-input" placeholder="Search by name or email..." autocomplete="off">
      <label><input type="checkbox" id="select-all"> Select all visible</label>
    </div>

    <div class="user-table-wrap">
      <table class="user-table">
        <thead>
          <tr>
            <th style="width:40px;"></th>
            <th>Name</th>
            <th>Email</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody id="user-tbody">
          {% for user in users %}
          <tr data-search="{{ user.first_name|lower }} {{ user.last_name|lower }} {{ user.email|lower }} {{ user.username|lower }}">
            <td><input type="checkbox" name="user_ids" value="{{ user.pk }}" class="user-check"></td>
            <td>{{ user.get_full_name|default:"-" }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.username }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="empty-state">No active users found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="compose-toolbar">
      <span class="selected-count" id="selected-count">0 recipients selected</span>
      <button type="submit" class="btn-compose" id="btn-compose" disabled>
        Open Email Builder
      </button>
    </div>
  </form>
</div>

<script>
(function() {
  const searchInput = document.getElementById('search-input');
  const selectAll = document.getElementById('select-all');
  const tbody = document.getElementById('user-tbody');
  const countEl = document.getElementById('selected-count');
  const btn = document.getElementById('btn-compose');

  function updateCount() {
    const checked = tbody.querySelectorAll('.user-check:checked').length;
    countEl.textContent = checked + ' recipient' + (checked !== 1 ? 's' : '') + ' selected';
    btn.disabled = checked === 0;
  }

  searchInput.addEventListener('input', function() {
    const q = this.value.toLowerCase();
    tbody.querySelectorAll('tr').forEach(function(row) {
      const text = row.getAttribute('data-search') || '';
      row.style.display = text.includes(q) ? '' : 'none';
    });
    selectAll.checked = false;
  });

  selectAll.addEventListener('change', function() {
    const checked = this.checked;
    tbody.querySelectorAll('tr').forEach(function(row) {
      if (row.style.display !== 'none') {
        const cb = row.querySelector('.user-check');
        if (cb) cb.checked = checked;
      }
    });
    updateCount();
  });

  tbody.addEventListener('change', updateCount);
})();
</script>
{% endblock %}