{% extends "base.html" %}
{% from "components/empty_state.html" import empty_state %}

{% block title %}Payment History · CampusCart{% endblock %}

{% block content %}
<div class="container py-4" style="max-width: 900px;">

  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
    <div>
      <h1 class="h3 mb-1">Payments &amp; Subscription</h1>
      <p class="text-muted mb-0">Your current Premium subscription and payment history.</p>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('premium.index') }}">
      <i class="bi bi-arrow-left me-1"></i> Back to Premium
    </a>
  </div>

  {# ---------------- Current subscription ---------------- #}
  <section class="card border-0 shadow-sm mb-4" aria-label="Current subscription">
    <div class="card-body p-4">
      <h2 class="h6 text-muted text-uppercase mb-3">Current Premium Subscription</h2>
      {% if active_subscription %}
        <div class="row g-3">
          <div class="col-6 col-md-3">
            <div class="small text-muted">Status</div>
            <div><span class="pay-badge pay-badge--captured">Active</span></div>
          </div>
          <div class="col-6 col-md-3">
            <div class="small text-muted">Plan</div>
            <div class="fw-semibold">{{ active_subscription.plan_name|title }}</div>
          </div>
          <div class="col-6 col-md-3">
            <div class="small text-muted">Started</div>
            <div class="fw-semibold">{{ active_subscription.start_date.strftime('%d %b %Y') }}</div>
          </div>
          <div class="col-6 col-md-3">
            <div class="small text-muted">Expires</div>
            <div class="fw-semibold">{{ active_subscription.end_date.strftime('%d %b %Y') }}</div>
          </div>
        </div>
        <div class="mt-3">
          <span class="badge text-bg-warning-subtle text-warning-emphasis">
            <i class="bi bi-clock me-1" aria-hidden="true"></i>{{ days_left }} day{{ 's' if days_left != 1 }} remaining
          </span>
        </div>
      {% elif latest_subscription %}
        <p class="mb-2"><span class="pay-badge pay-badge--refunded">Expired</span></p>
        <p class="text-muted mb-3">Your Premium membership ended on
          {{ latest_subscription.end_date.strftime('%d %b %Y') }}.</p>
        <a class="btn btn-primary" href="{{ url_for('premium.index') }}"><i class="bi bi-star-fill me-1"></i> Renew Premium</a>
      {% else %}
        <p class="text-muted mb-3">You don't have a Premium subscription yet.</p>
        <a class="btn btn-primary" href="{{ url_for('premium.index') }}"><i class="bi bi-star-fill me-1"></i> Upgrade to Premium</a>
      {% endif %}
    </div>
  </section>

  {# ---------------- Payment history ---------------- #}
  <section aria-label="Payment history">
    <h2 class="h6 text-muted text-uppercase mb-3">Payment History</h2>
    {% if payments %}
      {% for p in payments %}
        <div class="pay-history-item">
          <div>
            <div class="pay-history-amount">{{ currency }}{{ '{:,.2f}'.format(p.amount|float) }}
              <span class="text-muted fw-normal small">· {{ p.plan_name|title }}</span></div>
            <div class="small text-muted">
              {{ p.created_at.strftime('%d %b %Y, %H:%M') }} · {{ p.provider|title }}
              {% if p.provider_payment_id %}· <code>{{ p.provider_payment_id }}</code>{% endif %}
            </div>
          </div>
          <div class="d-flex align-items-center gap-2">
            <span class="pay-badge pay-badge--{{ p.status.value }}">{{ p.status.value|title }}</span>
            {% if p.status.value in ('captured', 'refunded') %}
              <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('payments.receipt', public_id=p.public_id) }}">
                <i class="bi bi-receipt me-1" aria-hidden="true"></i> Receipt</a>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    {% else %}
      {{ empty_state('bi-receipt', 'No payments yet',
           'Your online Premium purchases will appear here.',
           cta_label='Explore Premium', cta_url=url_for('premium.index'), cta_icon='bi-star') }}
    {% endif %}
  </section>

</div>
{% endblock %}