{% extends "base.html" %}
{% block title %}Contacts{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Contacts</h1>
  <p>{{ rows|length }} contact{% if rows|length != 1 %}s{% endif %} shown — click a row to mark as replied</p>
</div>

<div class="page-content">

  <!-- Filter bar -->
  <form method="GET" action="/contacts">
    <div class="filter-bar">
      <input type="text" name="q" class="form-control" placeholder="Search name, email, org…" value="{{ search }}">
      <select name="segment" class="form-control">
        <option value="">All Segments</option>
        {% for seg in segments %}
        <option value="{{ seg }}" {% if seg == segment_filter %}selected{% endif %}>{{ seg }}</option>
        {% endfor %}
      </select>
      <button type="submit" class="btn btn-outline">Filter</button>
      {% if search or segment_filter %}
      <a href="/contacts" class="btn btn-outline">Clear</a>
      {% endif %}
    </div>
  </form>

  <!-- Table -->
  <div class="card">
    <div class="card-body" style="padding:0;">
      <table class="data-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Organisation</th>
            <th>Email</th>
            <th>Segment</th>
            <th>Touch 1</th>
            <th>Touch 2</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for c in rows %}
          <tr class="{% if c._replied %}replied{% endif %}">
            <td style="font-weight:500;">{{ c.name }}</td>
            <td style="color:var(--text-muted);font-size:12px;">{{ c.organisation }}</td>
            <td style="font-size:12px;font-family:monospace;color:var(--parchment-dark);">{{ c.email }}</td>
            <td><span class="badge badge-muted">{{ c.segment }}</span></td>
            <td>
              {% if c._t1 == '✓' %}
                <span class="badge badge-gold" title="{{ c._t1_date }}">✓ {{ c._t1_date }}</span>
              {% else %}
                <span style="color:var(--text-muted);font-size:12px;">—</span>
              {% endif %}
            </td>
            <td>
              {% if c._t2 == '✓' %}
                <span class="badge badge-green" title="{{ c._t2_date }}">✓ {{ c._t2_date }}</span>
              {% else %}
                <span style="color:var(--text-muted);font-size:12px;">—</span>
              {% endif %}
            </td>
            <td>
              {% if c._replied %}
                <span class="badge badge-replied" title="{{ c._reply_note }}">Replied</span>
              {% elif c.skip == 'yes' %}
                <span class="badge badge-muted">Skip</span>
              {% elif c._t1 == '✓' %}
                <span style="color:var(--text-muted);font-size:11px;">Sent</span>
              {% else %}
                <span style="color:var(--text-muted);font-size:11px;">Pending</span>
              {% endif %}
            </td>
            <td>
              {% if c._replied %}
                <button class="btn btn-outline btn-sm" onclick="unmarkReplied('{{ c.email }}')">Unreply</button>
              {% else %}
                <button class="btn btn-outline btn-sm" onclick="openReplyModal('{{ c.email }}', '{{ c.name | replace("'", "\\'") }}')">Mark Replied</button>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Reply modal -->
<div class="modal-overlay" id="replyModal">
  <div class="modal">
    <h3>Mark as Replied</h3>
    <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;" id="replyModalName"></p>
    <div class="form-group">
      <label class="form-label">Note (optional)</label>
      <input type="text" id="replyNote" class="form-control" placeholder="e.g. Interested — wants press kit">
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" onclick="closeModal()">Cancel</button>
      <button class="btn btn-gold" onclick="submitReply()">Save</button>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
  let _replyEmail = '';

  function openReplyModal(email, name) {
    _replyEmail = email;
    document.getElementById('replyModalName').textContent = name + ' <' + email + '>';
    document.getElementById('replyNote').value = '';
    document.getElementById('replyModal').classList.add('open');
    document.getElementById('replyNote').focus();
  }

  function closeModal() {
    document.getElementById('replyModal').classList.remove('open');
  }

  function submitReply() {
    const note = document.getElementById('replyNote').value;
    fetch('/api/mark_replied', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({email: _replyEmail, note})
    }).then(() => location.reload());
  }

  function unmarkReplied(email) {
    if (!confirm('Remove replied status for ' + email + '?')) return;
    fetch('/api/unmark_replied', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({email})
    }).then(() => location.reload());
  }

  // Close modal on overlay click
  document.getElementById('replyModal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
  });

  // Enter key submits
  document.getElementById('replyNote').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') submitReply();
  });
</script>
{% endblock %}