{% extends "admin/_admin_base.html" %}
{% from "components/pagination.html" import render_pagination %}

{% block title %}Payments · Admin · CampusCart{% endblock %}

{% macro metric(label, value, icon, color, sub=None, col='col-6 col-md-4 col-xl-3') %}
  <div class="{{ col }}">
    <div class="card admin-metric-card h-100 border-0 shadow-sm">
      <div class="card-body">
        <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
        <div class="admin-metric-value">{{ value }}</div>
        <div class="admin-metric-label">{{ label }}</div>
        {% if sub %}<div class="admin-metric-sub text-muted small">{{ sub }}</div>{% endif %}
      </div>
    </div>
  </div>
{% endmacro %}

{% macro money(v) %}{{ currency }}{{ '{:,.0f}'.format(v|float) }}{% endmacro %}

{% block admin_header %}
<header class="ad-hero">
  <div class="ad-hero-left">
    <span class="ad-hero-ico" aria-hidden="true"><i class="bi bi-credit-card-2-front-fill"></i></span>
    <div class="ad-hero-copy">
      <h1 class="ad-hero-title">Payments</h1>
      <p class="ad-hero-sub">Revenue, premium purchases and payment activity across Student Bazaar.</p>
    </div>
  </div>
  <div class="ad-hero-actions">
    <a class="btn btn-outline-primary ad-hero-btn"
       href="{{ url_for('admin.payments_export', **filter_args) }}">
      <i class="bi bi-filetype-csv me-1"></i> Export CSV
    </a>
  </div>
</header>
{% endblock admin_header %}

{% block admin_content %}
{% set has_filters = q or status or provider or plan or amount_min or amount_max or date_from or date_to %}
{% set has_payments = kpis.total_payments > 0 %}

{# ---------------- KPI cards ----------------
   Refunds are handled in the Razorpay Dashboard (external) and only synced in, so
   they are intentionally not surfaced as an admin metric. The remaining seven
   cards are laid out as a balanced 4 + 3 grid (no empty gaps). #}
<section aria-label="Payment key figures">
  <div class="row g-3 mb-3">
    {{ metric('Total Revenue', money(kpis.total_revenue), 'bi-cash-stack', 'success', col='col-6 col-xl-3') }}
    {{ metric('Revenue This Month', money(kpis.revenue_month), 'bi-calendar2-week', 'primary', col='col-6 col-xl-3') }}
    {{ metric('Active Premium Subscribers', '{:,}'.format(kpis.active_subscribers), 'bi-star-fill', 'warning', col='col-6 col-xl-3') }}
    {{ metric('Payment Success Rate', '%.1f%%'|format(kpis.success_rate), 'bi-graph-up-arrow', 'info', col='col-6 col-xl-3') }}
  </div>
  <div class="row g-3 mb-4">
    {{ metric('Successful Payments', '{:,}'.format(kpis.successful), 'bi-check-circle-fill', 'success', col='col-12 col-md-4') }}
    {{ metric('Failed Payments', '{:,}'.format(kpis.failed), 'bi-x-circle-fill', 'danger', col='col-12 col-md-4') }}
    {{ metric('Pending Payments', '{:,}'.format(kpis.pending), 'bi-hourglass-split', 'warning', col='col-12 col-md-4') }}
  </div>
</section>

{# ---------------- Revenue analytics ---------------- #}
{% if has_payments %}
<section aria-label="Revenue analytics" class="mb-4">
  <div class="row g-4">
    <div class="col-xl-8">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
        <h2 class="h6 mb-3">Revenue over time <span class="text-muted fw-normal">· last 30 days</span></h2>
        <div class="chart-container chart-container-md">
          <canvas id="chartRevenue" role="img"
                  aria-label="Line chart of daily captured revenue over the last 30 days."></canvas>
        </div>
        <p class="visually-hidden">Total captured revenue in the last 30 days: {{ money(kpis.revenue_month) }} this month.</p>
      </div></div>
    </div>
    <div class="col-xl-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
        <h2 class="h6 mb-3">Payment status</h2>
        <div class="chart-container chart-container-sm">
          <canvas id="chartStatus" role="img"
                  aria-label="Doughnut chart of payment status distribution: {{ kpis.successful }} successful, {{ kpis.failed }} failed, {{ kpis.pending }} pending."></canvas>
        </div>
      </div></div>
    </div>
    <div class="col-xl-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
        <h2 class="h6 mb-3">Revenue by plan</h2>
        <div class="chart-container chart-container-sm">
          <canvas id="chartByPlan" role="img" aria-label="Bar chart of captured revenue by premium plan."></canvas>
        </div>
      </div></div>
    </div>
    <div class="col-xl-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
        <h2 class="h6 mb-3">Payment provider</h2>
        <div class="chart-container chart-container-sm">
          <canvas id="chartProvider" role="img" aria-label="Doughnut chart of successful payments by provider (online gateways and offline)."></canvas>
        </div>
      </div></div>
    </div>
    <div class="col-xl-4">
      <div class="card border-0 shadow-sm h-100"><div class="card-body p-4">
        <h2 class="h6 mb-3">Premium conversions <span class="text-muted fw-normal">· last 30 days</span></h2>
        <div class="chart-container chart-container-sm">
          <canvas id="chartConversion" role="img" aria-label="Bar chart of new premium subscriptions per day over the last 30 days."></canvas>
        </div>
      </div></div>
    </div>
  </div>
</section>
{% endif %}

{# ---------------- Filters ---------------- #}
<form method="get" role="search" class="ad-filter-form mb-3">
  <div class="ad-filter-field ad-filter-field--search">
    <label class="form-label" for="f-q">Search</label>
    <div class="ad-search-field">
      <i class="bi bi-search" aria-hidden="true"></i>
      <input id="f-q" class="form-control" type="search" name="q" value="{{ q }}"
             placeholder="User name, email, order or payment ID…">
    </div>
  </div>
  <div class="ad-filter-grid">
    <div class="ad-filter-field">
      <label class="form-label" for="f-status">Status</label>
      <select id="f-status" class="form-select" name="status">
        <option value="">All statuses</option>
        {% for value, label in status_options %}
          <option value="{{ value }}" {{ 'selected' if status == value }}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="ad-filter-field">
      <label class="form-label" for="f-provider">Provider</label>
      <select id="f-provider" class="form-select" name="provider">
        <option value="">All providers</option>
        {% for value, label in provider_options %}
          <option value="{{ value }}" {{ 'selected' if provider == value }}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="ad-filter-field">
      <label class="form-label" for="f-plan">Plan</label>
      <select id="f-plan" class="form-select" name="plan">
        <option value="">All plans</option>
        {% for name in plan_names %}
          <option value="{{ name }}" {{ 'selected' if plan == name }}>{{ name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="ad-filter-field">
      <label class="form-label" for="f-amin">Min amount</label>
      <input id="f-amin" class="form-control" type="number" min="0" step="1" name="amount_min"
             value="{{ amount_min }}" placeholder="Any">
    </div>
    <div class="ad-filter-field">
      <label class="form-label" for="f-amax">Max amount</label>
      <input id="f-amax" class="form-control" type="number" min="0" step="1" name="amount_max"
             value="{{ amount_max }}" placeholder="Any">
    </div>
  </div>
  <div class="ad-filter-grid ad-filter-grid--trio">
    <div class="ad-filter-field">
      <label class="form-label" for="f-from">From date</label>
      <input id="f-from" class="form-control" type="date" name="date_from" value="{{ date_from }}">
    </div>
    <div class="ad-filter-field">
      <label class="form-label" for="f-to">To date</label>
      <input id="f-to" class="form-control" type="date" name="date_to" value="{{ date_to }}">
    </div>
    <div class="ad-filter-field">
      <label class="form-label" for="f-sort">Sort</label>
      <select id="f-sort" class="form-select" name="sort">
        {% for value, label in sort_options %}
          <option value="{{ value }}" {{ 'selected' if sort == value }}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="ad-filter-actions">
    <button type="submit" class="btn btn-primary"><i class="bi bi-funnel me-1"></i> Apply</button>
    {% if has_filters %}
      <a class="btn btn-outline-secondary" href="{{ url_for('admin.payments_dashboard') }}">Clear</a>
    {% endif %}
  </div>
</form>

{# ---------------- Table / empty states ---------------- #}
{% if pagination.items %}
<div class="table-responsive">
  <table class="table admin-table align-middle">
    <caption class="visually-hidden">Payments, most recent first</caption>
    <thead>
      <tr>
        <th scope="col">User</th>
        <th scope="col">Plan</th>
        <th scope="col" class="text-end">Amount</th>
        <th scope="col">Status</th>
        <th scope="col">Provider</th>
        <th scope="col">Order ID</th>
        <th scope="col">Created</th>
        <th scope="col" class="text-end">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for p in pagination.items %}
        {% set u = p.user %}
        {% set name = (u.profile.full_name if u and u.profile else (u.email if u else '—')) %}
        {% set m = meta(p) %}
        <tr data-pay-row
            data-name="{{ name }}"
            data-email="{{ u.email if u else '—' }}"
            data-plan="{{ p.plan_name }}"
            data-amount="{{ currency }}{{ '{:,.2f}'.format(p.amount|float) }}"
            data-currency="{{ p.currency }}"
            data-status="{{ p.status.value }}"
            data-provider="{{ p.provider|title }}"
            data-order="{{ p.provider_order_id or '' }}"
            data-payment="{{ p.provider_payment_id or '' }}"
            data-created="{{ p.created_at.strftime('%d %b %Y, %H:%M') if p.created_at else '—' }}"
            data-paid="{{ p.paid_at.strftime('%d %b %Y, %H:%M') if p.paid_at else '' }}"
            data-webhook="{{ m.webhook_status }}"
            data-verified="{{ 'yes' if m.signature_verified else 'no' }}"
            data-receipt="{{ url_for('payments.receipt', public_id=p.public_id) }}">
          <td>
            <div class="fw-semibold">{{ name }}</div>
            <div class="small text-muted text-truncate" style="max-width: 220px;">{{ u.email if u else '' }}</div>
          </td>
          <td>{{ p.plan_name }}</td>
          <td class="text-end fw-semibold">{{ currency }}{{ '{:,.2f}'.format(p.amount|float) }}</td>
          <td><span class="pay-badge pay-badge--{{ p.status.value }}">{{ p.status.value|title }}</span></td>
          <td>{{ p.provider|title }}</td>
          <td><code class="small">{{ p.provider_order_id or '—' }}</code></td>
          <td class="small text-muted">{{ p.created_at.strftime('%d %b %Y') if p.created_at else '—' }}</td>
          <td class="text-end">
            <button type="button" class="btn btn-sm btn-outline-secondary" data-drawer-trigger>
              <i class="bi bi-eye me-1" aria-hidden="true"></i> View
            </button>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="mt-3">{{ render_pagination(pagination, 'admin.payments_dashboard', filter_args) }}</div>

{% else %}
  {# Polished empty states (Phase 11). #}
  <div class="admin-empty text-center py-5">
    {% if has_filters %}
      <i class="bi bi-search admin-empty-ico" aria-hidden="true"></i>
      <h2 class="h5 mt-3">No payments match your filters</h2>
      <p class="text-muted">Try clearing some filters to see more results.</p>
      <a class="btn btn-outline-secondary" href="{{ url_for('admin.payments_dashboard') }}">Clear filters</a>
    {% else %}
      <i class="bi bi-credit-card admin-empty-ico" aria-hidden="true"></i>
      <h2 class="h5 mt-3">No payments yet</h2>
      <p class="text-muted">Premium purchases will appear here once students upgrade online.
        Offline activations are handled from the Premium requests console.</p>
    {% endif %}
  </div>
{% endif %}

{# ---------------- Details drawer (populated from the clicked row) ---------------- #}
<div class="ad-drawer" data-pay-drawer aria-hidden="true">
  <div class="ad-drawer-scrim" data-drawer-close></div>
  <aside class="ad-drawer-panel" role="dialog" aria-modal="true" aria-labelledby="payDrawerTitle" tabindex="-1">
    <header class="ad-drawer-head">
      <span class="ad-drawer-eyebrow">Payment details</span>
      <button type="button" class="ad-drawer-x" data-drawer-close aria-label="Close details"><i class="bi bi-x-lg"></i></button>
    </header>
    <div class="ad-drawer-body">
      <h2 class="ad-drawer-title" id="payDrawerTitle" data-d="name">—</h2>
      <div class="ad-drawer-badges">
        <span class="pay-badge" data-d="statusBadge">—</span>
        <span class="ad-tag" data-d="providerBadge">—</span>
      </div>

      <div class="ad-drawer-metrics">
        <div class="ad-drawer-metric"><span data-d="amount">—</span><small>Amount</small></div>
        <div class="ad-drawer-metric"><span data-d="plan">—</span><small>Plan</small></div>
        <div class="ad-drawer-metric"><span data-d="currency">—</span><small>Currency</small></div>
      </div>

      <dl class="ad-drawer-meta">
        <div><dt>User</dt><dd data-d="email">—</dd></div>
        <div class="ad-drawer-meta-full"><dt>Razorpay Order ID</dt>
          <dd class="pay-copy"><code data-d="order">—</code>
            <button type="button" class="pay-copy-btn" data-copy="order" aria-label="Copy order ID"><i class="bi bi-clipboard"></i></button></dd></div>
        <div class="ad-drawer-meta-full"><dt>Razorpay Payment ID</dt>
          <dd class="pay-copy"><code data-d="payment">—</code>
            <button type="button" class="pay-copy-btn" data-copy="payment" aria-label="Copy payment ID"><i class="bi bi-clipboard"></i></button></dd></div>
        <div><dt>Created</dt><dd data-d="created">—</dd></div>
        <div><dt>Paid</dt><dd data-d="paid">—</dd></div>
        <div><dt>Provider</dt><dd data-d="provider">—</dd></div>
        <div><dt>Webhook status</dt><dd data-d="webhook">—</dd></div>
        <div><dt>Signature verified</dt><dd data-d="verified">—</dd></div>
      </dl>

      <div class="ad-drawer-timeline">
        <h3 class="ad-drawer-subhead">Timeline</h3>
        <ol class="ad-timeline" data-d="timeline" aria-label="Payment lifecycle"></ol>
      </div>
    </div>
    <footer class="ad-drawer-actions">
      <a class="btn btn-outline-secondary" data-d="receipt" target="_blank" rel="noopener">
        <i class="bi bi-receipt me-1"></i> View receipt</a>
    </footer>
  </aside>
</div>
{% endblock admin_content %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
  (function () {
    var C = {{ charts|tojson }};
    function draw() {
      if (!window.createChart) return;
      window.createChart('chartRevenue', {
        type: 'line',
        data: { labels: C.revenue_over_time.labels,
                datasets: [{ label: 'Revenue', data: C.revenue_over_time.values,
                             borderColor: '#16a34a', backgroundColor: 'rgba(22,163,74,.12)', fill: true, tension: .3 }] }
      });
      window.createChart('chartStatus', {
        type: 'doughnut',
        data: { labels: C.status_distribution.labels,
                datasets: [{ data: C.status_distribution.values,
                             backgroundColor: ['#16a34a', '#dc3545', '#f59e0b'] }] }
      });
      window.createChart('chartByPlan', {
        type: 'bar',
        data: { labels: C.revenue_by_plan.labels,
                datasets: [{ label: 'Revenue', data: C.revenue_by_plan.values, backgroundColor: '#2563eb' }] },
        options: { plugins: { legend: { display: false } } }
      });
      window.createChart('chartProvider', {
        type: 'doughnut',
        data: { labels: C.provider_breakdown.labels,
                datasets: [{ data: C.provider_breakdown.values,
                             backgroundColor: ['#004ac6', '#8b5cf6', '#0ea5e9', '#f59e0b'] }] }
      });
      window.createChart('chartConversion', {
        type: 'bar',
        data: { labels: C.conversion_trend.labels,
                datasets: [{ label: 'New subscriptions', data: C.conversion_trend.values, backgroundColor: '#f59e0b' }] },
        options: { plugins: { legend: { display: false } } }
      });
    }
    if (document.readyState !== 'loading') draw(); else document.addEventListener('DOMContentLoaded', draw);
  })();
</script>
<script>
  // ---- Payment details drawer (populated from the clicked row) -------------
  (function () {
    var drawer = document.querySelector('[data-pay-drawer]');
    if (!drawer) return;
    var panel = drawer.querySelector('.ad-drawer-panel');
    var lastFocus = null;
    var d = function (name) { return drawer.querySelector('[data-d="' + name + '"]'); };
    function set(name, text) { var el = d(name); if (el) el.textContent = text; }

    function timelineSteps(status, created, paid) {
      var steps = [{ label: 'Order created', at: created, done: true }];
      if (status === 'failed') { steps.push({ label: 'Payment failed', at: '', done: true }); return steps; }
      var captured = status === 'captured' || status === 'refunded';
      steps.push({ label: 'Payment captured', at: paid, done: captured });
      steps.push({ label: 'Premium activated', at: paid, done: captured });
      steps.push({ label: 'Notification sent', at: paid, done: captured });
      if (status === 'refunded') {
        steps.push({ label: 'Refund processed', at: '', done: true });
        steps.push({ label: 'Premium revoked', at: '', done: true });
      }
      return steps;
    }

    function open(tr) {
      var s = tr.dataset;
      set('name', s.name);
      set('email', s.email);
      set('amount', s.amount);
      set('plan', s.plan);
      set('currency', s.currency);
      set('order', s.order || '—');
      set('payment', s.payment || '—');
      set('created', s.created);
      set('paid', s.paid || 'Not captured');
      set('provider', s.provider);
      set('webhook', s.webhook);
      set('verified', s.verified === 'yes' ? 'Verified' : 'Not verified');

      var sb = d('statusBadge');
      if (sb) { sb.textContent = s.status.charAt(0).toUpperCase() + s.status.slice(1); sb.className = 'pay-badge pay-badge--' + s.status; }
      var pb = d('providerBadge'); if (pb) pb.textContent = s.provider;
      var rc = d('receipt'); if (rc) rc.setAttribute('href', s.receipt);

      var tl = d('timeline');
      if (tl) {
        tl.innerHTML = '';
        timelineSteps(s.status, s.created, s.paid).forEach(function (step) {
          var li = document.createElement('li');
          li.className = 'ad-timeline-item ' + (step.done ? 'is-done' : '');
          li.innerHTML = '<span class="ad-timeline-label">' + step.label + '</span>' +
            (step.at ? '<span class="ad-timeline-at">' + step.at + '</span>' : '');
          tl.appendChild(li);
        });
      }

      lastFocus = document.activeElement;
      drawer.classList.add('is-open');
      drawer.setAttribute('aria-hidden', 'false');
      document.body.classList.add('ad-drawer-lock');
      document.addEventListener('keydown', onKeydown);
      if (panel) panel.focus();
    }

    function close() {
      drawer.classList.remove('is-open');
      drawer.setAttribute('aria-hidden', 'true');
      document.body.classList.remove('ad-drawer-lock');
      document.removeEventListener('keydown', onKeydown);
      if (lastFocus) lastFocus.focus();
    }

    function onKeydown(e) {
      if (e.key === 'Escape') { close(); return; }
      if (e.key !== 'Tab') return;
      var f = panel.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
      if (!f.length) return;
      var first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    }

    document.querySelectorAll('[data-pay-row]').forEach(function (tr) {
      tr.querySelector('[data-drawer-trigger]').addEventListener('click', function () { open(tr); });
    });
    drawer.querySelectorAll('[data-drawer-close]').forEach(function (el) {
      el.addEventListener('click', close);
    });

    // Copy-to-clipboard for order/payment ids.
    drawer.querySelectorAll('[data-copy]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var el = d(btn.getAttribute('data-copy'));
        var text = el ? el.textContent : '';
        if (!text || text === '—' || !navigator.clipboard) return;
        navigator.clipboard.writeText(text).then(function () {
          var ico = btn.querySelector('i');
          if (ico) { ico.className = 'bi bi-check2'; setTimeout(function () { ico.className = 'bi bi-clipboard'; }, 1200); }
        });
      });
    });
  })();
</script>
{% endblock scripts %}