{% extends "base.html" %}
{% block title %}Brevo — {{ club.name }}{% endblock %}

{% block content %}
{% include "club_ribbon.html" %}

{% if not club.brevo_api_key %}
  {# Not connected yet — paste an API key #}
  <div class="card mb-4">
    <div class="card-header">Connect Brevo</div>
    <div class="card-body">
      <p class="text-muted">
        Connect your club's Brevo account to automatically keep a contact list in sync with your
        members. Member details, renewal links, barcodes, and lifecycle tags are pushed one way
        (this site &rarr; Brevo) so you can build automations and segmented campaigns.
      </p>
      <form method="post" action="{% url 'brevo_connect' club.slug %}">
        {% csrf_token %}
        <ol class="text-muted small mb-3">
          <li>Open your Brevo
            <a href="https://app.brevo.com/settings/keys/api" target="_blank" rel="noopener">API Keys page</a>
            (in Brevo: <strong>Settings &rarr; SMTP &amp; API &rarr; API Keys</strong>). You'll need to be logged
            in to the Brevo account you want to sync into.</li>
          <li>Click <strong>Generate a new API key</strong> (v3), give it a name like &ldquo;{{ club.name }} sync&rdquo;,
            and copy the key &mdash; it starts with <span class="text-warning">xkeysib-</span>.</li>
          <li>Paste it below and click <strong>Connect Brevo</strong>.</li>
        </ol>
        <div class="mb-3">
          <label for="brevo-api-key" class="form-label">Brevo API key (v3)</label>
          <input type="password" class="form-control" id="brevo-api-key" name="api_key"
                 placeholder="xkeysib-&hellip;" autocomplete="new-password" required>
          <div class="form-text">Your key is stored encrypted and only used to sync your members.</div>
        </div>
        <button type="submit" class="btn btn-primary"><i class="bi bi-send"></i> Connect Brevo</button>
      </form>
      <div class="alert alert-light border small mt-3 mb-0">
        <i class="bi bi-shield-lock"></i>
        If your Brevo account restricts API access by IP
        (<a href="https://help.brevo.com/hc/en-us/articles/5740111683858" target="_blank" rel="noopener">Authorized IPs</a>),
        also add this server's outbound IP{% if server_ip %} &mdash; <strong>{{ server_ip }}</strong>{% endif %}
        to the allow-list. If a key is rejected for that reason, we'll show the exact IP Brevo blocked.
      </div>
    </div>
  </div>

{% elif not club.brevo_list_id %}
  {# Connected, but no list chosen #}
  <div class="card mb-4">
    <div class="card-header">Choose a list</div>
    <div class="card-body">
      <p class="text-muted">
        Pick the Brevo list your {{ in_scope_count }} member(s) should sync into, or create a
        new one named &ldquo;{{ club.name }} Members&rdquo;.
      </p>
      <form method="post" action="{% url 'brevo_select_list' club.slug %}">
        {% csrf_token %}
        <div class="list-group mb-3">
          {% for list in lists %}
          <label class="list-group-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio" name="list_id" value="{{ list.id }}"
                   {% if forloop.first %}checked{% endif %}>
            <span>{{ list.name }}</span>
          </label>
          {% endfor %}
          <label class="list-group-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio" name="list_id" value="__new__"
                   {% if not lists %}checked{% endif %}>
            <span>Create a new list: &ldquo;{{ club.name }} Members&rdquo;</span>
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Use this list</button>
      </form>
      <form method="post" action="{% url 'brevo_disconnect' club.slug %}" class="mt-2">
        {% csrf_token %}
        <button type="submit" class="btn btn-link text-danger px-0">Cancel / disconnect</button>
      </form>
    </div>
  </div>

{% else %}
  {# Fully connected #}
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span>Brevo connection</span>
      <span class="badge bg-success"><i class="bi bi-check-circle-fill"></i> Connected</span>
    </div>
    <div class="card-body">
      <dl class="row mb-0">
        <dt class="col-sm-4">List</dt>
        <dd class="col-sm-8">{{ club.brevo_list_name|default:club.brevo_list_id }}</dd>
        <dt class="col-sm-4">Members in scope</dt>
        <dd class="col-sm-8">
          {{ in_scope_count }}
          {% if not_synced_count %}
            &mdash; <a href="{% url 'club_admin' club.slug %}?query=nonbrevo">{{ not_synced_count }} not yet synced</a>
          {% endif %}
        </dd>
        <dt class="col-sm-4">Subscribed</dt>
        <dd class="col-sm-8">{{ subscribed_count }}</dd>
        <dt class="col-sm-4">Unsubscribed / cleaned</dt>
        <dd class="col-sm-8">{{ unsubscribed_count }}</dd>
        <dt class="col-sm-4">Last sync</dt>
        <dd class="col-sm-8">{{ club.brevo_last_sync|default:"—" }}</dd>
      </dl>
      <p class="text-muted small mt-3 mb-0">
        <i class="bi bi-info-circle"></i>
        Members are synced automatically whenever their record is saved, and again each night.
      </p>
      {% if club.brevo_last_error %}
        <div class="alert alert-danger mt-3 mb-0 small">
          <i class="bi bi-exclamation-triangle"></i> Last error: {{ club.brevo_last_error }}
        </div>
      {% endif %}
      {% if has_emails_enabled %}
        <div class="alert alert-info mt-3 mb-0 small">
          <i class="bi bi-lightbulb"></i>
          You have outgoing emails enabled. Now that Brevo is connected you may want to turn those off
          and send membership emails (welcome, renewal, expiry reminders) through Brevo instead &mdash;
          for example, using an <strong>Automation</strong> that filters on the
          <span class="text-warning">MEMBER_TAGS</span> attribute (e.g. contains
          <span class="text-warning">new-member</span> or <span class="text-warning">expiring-soon</span>).
          <a href="{% url 'club_email_settings' club.slug %}">Manage email settings</a>
        </div>
      {% endif %}
    </div>
    <div class="card-footer">
      <form method="post" action="{% url 'brevo_sync_now' club.slug %}" class="d-inline">
        {% csrf_token %}
        <button type="submit" class="btn btn-secondary btn-sm">
          <i class="bi bi-arrow-clockwise"></i> Sync all now
        </button>
      </form>
      <form method="post" action="{% url 'brevo_disconnect' club.slug %}" class="d-inline"
            onsubmit="return confirm('Disconnect Brevo? Your list stays in Brevo, but syncing will stop.');">
        {% csrf_token %}
        <button type="submit" class="btn btn-outline-danger btn-sm">
          <i class="bi bi-x-circle"></i> Disconnect
        </button>
      </form>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">Tags &amp; attributes</div>
    <div class="card-body">
      <p class="text-muted small mb-2">
        Each member is tagged automatically based on their membership status, activity, and location.
        Because Brevo has no native tags, the active tags are written to the
        <span class="text-warning">MEMBER_TAGS</span> attribute &mdash; build a segment with
        &ldquo;MEMBER_TAGS contains <em>tag</em>&rdquo; to target each group.
      </p>
      <table class="table table-sm mb-3">
        <tbody>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">expiring-soon</span></td>
            <td class="text-muted small">Membership expires within 30 days</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">expired</span></td>
            <td class="text-muted small">Membership has expired</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">new-member</span></td>
            <td class="text-muted small">Joined within the last 6 months</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">long-term-member</span></td>
            <td class="text-muted small">Member for 5 or more years</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">admin</span></td>
            <td class="text-muted small">Has club admin access</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">nearby</span></td>
            <td class="text-muted small">Within 10 miles of the club</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">medium-distance</span></td>
            <td class="text-muted small">10–30 miles from the club</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">long-distance</span></td>
            <td class="text-muted small">More than 30 miles away</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">power-seller</span></td>
            <td class="text-muted small">Sold over $1,000 in lots</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">power-buyer</span></td>
            <td class="text-muted small">Bought over $1,000 in lots</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">auction-checkin</span></td>
            <td class="text-muted small">Has checked in to at least one auction</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">discord-connected</span></td>
            <td class="text-muted small">Discord account linked</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-info text-dark">probably-inactive</span></td>
            <td class="text-muted small">No club activity in the last 6 months</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="badge bg-secondary">CATEGORIES</span></td>
            <td class="text-muted small">Up to 5 categories the member is most interested in, based on their buying and selling history</td>
          </tr>
        </tbody>
      </table>
      <hr class="my-3">
      <p class="text-muted small mb-2">Attributes available for personalization in campaigns (e.g. <span class="text-warning">{% templatetag openvariable %} contact.FIRSTNAME {% templatetag closevariable %}</span>):</p>
      <table class="table table-sm mb-0">
        <tbody>
          <tr>
            <td class="text-nowrap"><span class="text-warning">FIRSTNAME</span></td>
            <td class="text-muted small">First name</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">LASTNAME</span></td>
            <td class="text-muted small">Last name</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">MEMBERNO</span></td>
            <td class="text-muted small">Membership number</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">EXPIRES</span></td>
            <td class="text-muted small">Membership expiration date</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">RENEW</span></td>
            <td class="text-muted small">Link to renew or manage membership</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">BARCODE</span></td>
            <td class="text-muted small">Membership barcode image</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">PHONE</span></td>
            <td class="text-muted small">Phone number</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">ADDRESS</span></td>
            <td class="text-muted small">Mailing address</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">MEMBER_TAGS</span></td>
            <td class="text-muted small">Pipe-separated lifecycle tags (for segmenting)</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">CATEGORIES</span></td>
            <td class="text-muted small">Pipe-separated top categories of interest</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">CLUBUNSUB</span></td>
            <td class="text-muted small">Link to unsubscribe from club emails</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">RESUB</span></td>
            <td class="text-muted small">Link to resubscribe</td>
          </tr>
          <tr>
            <td class="text-nowrap"><span class="text-warning">NOCOMM</span></td>
            <td class="text-muted small">Link to stop all contact</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
{% endif %}

{% endblock %}