{% extends "base.html" %}
{% block content %}
<h1>TXproducts Mail Merge</h1>
<p class="sub">Conference follow-ups &mdash; check who gets a message, pick a template, generate or send.</p>

{% if error %}<div class="warning">{{ error }}</div>{% endif %}

<form method="post">
  <div style="display:flex; gap:20px; align-items:flex-start;">
  <div class="card" style="flex:1; min-width:0;">
    <h2>Contacts <span class="sub" style="font-weight:400;">({{ contacts|length }} total)</span></h2>
    <div style="margin-bottom:10px;">
      <button type="button" onclick="document.querySelectorAll('.contact-check').forEach(c=>c.checked=true); refreshSelectedList();">Select All</button>
      <button type="button" class="secondary" onclick="document.querySelectorAll('.contact-check').forEach(c=>c.checked=false); refreshSelectedList();">Select None</button>
      <a href="/" style="margin-left:8px; font-size:0.85rem;">Refresh from Excel</a>
    </div>
    <input type="text" id="contact-search" placeholder="Search by name..." style="margin-bottom:10px; max-width:300px;">
    <div class="contact-list-scroll">
    {% set ns = namespace(found=false) %}
    {% for c in contacts %}
      {% set is_preselected = preselect_email and c.email|lower == preselect_email %}
      {% if is_preselected %}{% set ns.found = true %}{% endif %}
      <div class="contact-row {% if c.sent %}disabled{% endif %}" data-name="{{ (c.first ~ ' ' ~ c.last)|lower }}" data-email="{{ c.email }}" {% if is_preselected %}id="preselected-contact" style="background:#eef4fd;"{% endif %}>
        <input type="checkbox" class="contact-check" name="contacts" value="{{ c.email }}" {% if c.sent %}disabled{% endif %} {% if is_preselected %}checked{% endif %}>
        <span>{{ c.first }} {{ c.last }}</span>
        {% if c.company %}<span class="meta">&mdash; {{ c.company }}</span>{% endif %}
      </div>
    {% else %}
      <p class="sub">No contacts in the sheet yet.</p>
    {% endfor %}
    </div>
    {% if preselect_email and not ns.found %}
      <p class="warning" style="margin-top:10px;">No contact with email {{ preselect_email }} found in the sheet yet &mdash; add them first.</p>
    {% endif %}
  </div>
  <div class="card" style="flex:1; min-width:0;">
    <h2>Selected <span class="sub" style="font-weight:400;" id="selected-count">(0)</span></h2>
    <div class="contact-list-scroll" id="selected-list">
      <p class="sub">No one selected yet.</p>
    </div>
  </div>
  </div>

  <div class="card">
    <h2>Message template</h2>
    <label>Standard message:
      <select name="template">
        {% for t in templates %}
          <option value="{{ t }}">{{ t }}</option>
        {% endfor %}
      </select>
    </label>

    <h2 style="margin-top:18px;">Attachments</h2>
    {% for a in attachments %}
      <label style="display:inline-flex; align-items:center; gap:6px; margin-right:16px;">
        <input type="checkbox" name="attachments" value="{{ a.path }}" {% if a.exists %}checked{% else %}disabled{% endif %}>
        {{ a.name }}{% if not a.exists %} (not found){% endif %}
      </label>
    {% endfor %}

    <h2 style="margin-top:18px;">From address</h2>
    <select name="from_address">
      {% for addr in from_addresses %}
        <option value="{{ addr }}" {% if addr == default_from %}selected{% endif %}>{{ addr }}</option>
      {% endfor %}
    </select>
  </div>

  <button type="submit" formaction="/open_in_mail">Open in Mail.app</button>
  <button type="submit" formaction="/generate">Generate Drafts</button>
  <button type="submit" formaction="/preview">Preview &amp; Send Batch</button>
  <button type="button" class="secondary" onclick="fetch('/open_folder', {method:'POST'})">Open Drafts Folder</button>
</form>
<script>
  // Prevent double-clicks/double-submits from firing the same action twice (e.g. writing
  // two draft files or opening two Mail.app windows for one click). Reset on pageshow so a
  // browser back-button restore (bfcache) doesn't leave every button permanently disabled
  // from whatever was clicked before navigating away.
  document.querySelector("form").addEventListener("submit", function (e) {
    if (e.target.dataset.submitted) {
      e.preventDefault();
      return;
    }
    e.target.dataset.submitted = "true";
    document.querySelectorAll("form button[type=submit]").forEach(function (btn) {
      btn.disabled = true;
    });
  });

  window.addEventListener("pageshow", function () {
    var form = document.querySelector("form");
    delete form.dataset.submitted;
    document.querySelectorAll("form button[type=submit]").forEach(function (btn) {
      btn.disabled = false;
    });
  });

  var preselected = document.getElementById("preselected-contact");
  if (preselected) { preselected.scrollIntoView({ block: "center" }); }

  document.getElementById("contact-search").addEventListener("input", function (e) {
    var q = e.target.value.trim().toLowerCase();
    document.querySelectorAll(".contact-row[data-name]").forEach(function (row) {
      row.classList.toggle("no-match", q !== "" && row.dataset.name.indexOf(q) === -1);
    });
  });

  // Mirrors exactly who's currently checked, using the same row markup as the contact
  // list itself, so there's never a mismatch between "what it says" and "who's selected".
  function refreshSelectedList() {
    var selectedList = document.getElementById("selected-list");
    var selectedCount = document.getElementById("selected-count");
    var checked = Array.from(document.querySelectorAll(".contact-check:checked"));
    selectedCount.textContent = "(" + checked.length + ")";
    if (!checked.length) {
      selectedList.innerHTML = "<p class=\"sub\">No one selected yet.</p>";
      return;
    }
    selectedList.innerHTML = "";
    checked.forEach(function (cb) {
      var row = cb.closest(".contact-row");
      var clone = row.cloneNode(true);
      clone.removeAttribute("id");
      var checkbox = clone.querySelector("input[type=checkbox]");
      if (checkbox) { checkbox.remove(); }
      selectedList.appendChild(clone);
    });
  }

  document.querySelectorAll(".contact-check").forEach(function (cb) {
    cb.addEventListener("change", refreshSelectedList);
  });

  refreshSelectedList();
</script>
{% endblock %}