{% extends "base.html" %}
{% block title %}{{ BRAND_NAME }} · Settings{% endblock %}

{% block main %}
<section class="panel" style="grid-column: 1 / -1; max-width: 760px; margin: 0 auto;">
  <div class="panel-header">
    <span class="title">Settings</span>
    <span class="meta">your account &middot; client-only data unchanged</span>
  </div>
  <div class="panel-body" style="padding: 18px clamp(16px, 4vw, 32px) 24px;">

    {% if not user %}
      <div class="empty">no per-user settings (admin bearer-token session)</div>
    {% else %}

    <div class="settings-row">
      <div class="settings-row__label">Email</div>
      <div class="settings-row__value">{{ user.email }}</div>
    </div>

    <div class="settings-row">
      <div class="settings-row__label">Tier</div>
      <div class="settings-row__value">
        <span class="badge {% if paid and paid.active %}badge--ok{% else %}badge--ver{% endif %}">
          {{ user.tier }}{% if paid and paid.active and paid.source == "credit" %} · credit{% endif %}
        </span>
        {% if paid and paid.active %}
          {% if paid.source == "credit" %}
            <span class="settings-row__hint">
              Paid features active via credit · {{ paid.days_remaining }} day(s) remaining
              (expires {{ paid.expires_at.strftime("%Y-%m-%d") }}).
            </span>
          {% else %}
            <span class="settings-row__hint">Paid subscription active.</span>
          {% endif %}
        {% else %}
          <span class="settings-row__hint">Paid features unlock with Paddle (D.3) or invite credits.</span>
        {% endif %}
      </div>
    </div>

    {# --- Referral block ---------------------------------------------- #}
    <div class="settings-section">
      <div class="settings-section__head">Invite a friend</div>
      <p class="settings-section__lede">
        Share your invite link. When your friend subscribes, you and
        they each get <strong>50% off for 3 months</strong>.
      </p>

      <div class="invite-block">
        <label class="invite-block__label">Your code</label>
        <div class="invite-block__code">{{ user.referral_code }}</div>

        <label class="invite-block__label">Invite link</label>
        <div class="invite-block__link">
          <input type="text" id="invite-url" readonly value="{{ invite_url }}">
          <button type="button" id="invite-copy">Copy</button>
        </div>
      </div>

      <div class="invite-stats">
        <div>
          <div class="invite-stats__label">Pending signups</div>
          <div class="invite-stats__value">{{ pending_count }}</div>
        </div>
        <div>
          <div class="invite-stats__label">Converted (paid)</div>
          <div class="invite-stats__value">{{ converted_count }}</div>
        </div>
        <div>
          <div class="invite-stats__label">Active credits</div>
          <div class="invite-stats__value settings-row__hint">— (D.3)</div>
        </div>
      </div>
    </div>

    {# Future: Paddle subscription block, AI-spend ledger summary, etc. #}

    {% endif %}

  </div>
</section>

<script>
(function () {
  var btn = document.getElementById('invite-copy');
  var fld = document.getElementById('invite-url');
  if (!btn || !fld) return;
  btn.addEventListener('click', async function () {
    try {
      await navigator.clipboard.writeText(fld.value);
      var orig = btn.textContent;
      btn.textContent = 'Copied';
      setTimeout(function () { btn.textContent = orig; }, 1500);
    } catch (e) {
      // Fallback for older browsers: select the input.
      fld.select();
    }
  });
})();
</script>
{% endblock %}