{% extends "admin/layout.html" %}
{% block title %}Payments & Revenue – Admin{% endblock %}
{% block body %}

<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-payments">
            <i class="fa fa-chart-line mr-2 text-indigo-500"></i>Payments &amp; Revenue
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">All Stripe and manual payments in one view.</p>
    </div>
    <a href="{{ full_url('/admin/payments/export-csv?' ~ request.query_string.decode()) }}"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-all shadow-lg shadow-indigo-500/20"
       data-testid="btn-export-csv">
        <i class="fa fa-download"></i> Export CSV
    </a>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Summary Cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Total Revenue</div>
        <div class="text-2xl font-black text-gray-900 dark:text-white">${{ '%.2f'|format(total_revenue) }}</div>
        <div class="text-xs text-gray-400 mt-1">{{ total }} transaction(s)</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">This Month</div>
        <div class="text-2xl font-black text-indigo-600 dark:text-indigo-400">${{ '%.2f'|format(revenue_this_month) }}</div>
        <div class="text-xs text-gray-400 mt-1">Current month</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">This Year</div>
        <div class="text-2xl font-black text-violet-600 dark:text-violet-400">${{ '%.2f'|format(revenue_this_year) }}</div>
        <div class="text-xs text-gray-400 mt-1">Year to date</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Showing</div>
        <div class="text-2xl font-black text-gray-700 dark:text-gray-300">{{ total }}</div>
        <div class="text-xs text-gray-400 mt-1">
            {% if filter_year %}{{ filter_year }}{% if filter_month %}-{{ filter_month }}{% endif %}{% else %}All time{% endif %}
            · {{ filter_source|title }}
        </div>
    </div>
</div>

<!-- Filters -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 mb-4">
    <form method="GET" action="{{ full_url('/admin/payments') }}" class="flex flex-wrap items-end gap-3">
        <div>
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Source</label>
            <select name="source" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" data-testid="filter-source">
                <option value="all" {% if filter_source == 'all' %}selected{% endif %}>All Sources</option>
                <option value="stripe" {% if filter_source == 'stripe' %}selected{% endif %}>Stripe Only</option>
                <option value="manual" {% if filter_source == 'manual' %}selected{% endif %}>Manual Only</option>
            </select>
        </div>
        <div>
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Year</label>
            <select name="year" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" data-testid="filter-year">
                <option value="">All Years</option>
                {% for y in years %}
                <option value="{{ y }}" {% if filter_year == y %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Month</label>
            <select name="month" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400" data-testid="filter-month">
                <option value="">All Months</option>
                {% for m, mname in [('01','January'),('02','February'),('03','March'),('04','April'),('05','May'),('06','June'),('07','July'),('08','August'),('09','September'),('10','October'),('11','November'),('12','December')] %}
                <option value="{{ m }}" {% if filter_month == m %}selected{% endif %}>{{ mname }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="flex gap-2">
            <button type="submit" class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-all" data-testid="btn-apply-filter">
                <i class="fa fa-filter mr-1"></i> Apply
            </button>
            <a href="{{ full_url('/admin/payments') }}" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-clear-filter">
                Clear
            </a>
        </div>
    </form>
</div>

<!-- Payments Table -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <h3 class="font-semibold text-gray-900 dark:text-white">
            <i class="fa fa-list mr-2 text-indigo-500"></i>Payment Records
        </h3>
        <span class="text-xs text-gray-400">{{ total }} total</span>
    </div>

    {% if payments %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm" data-testid="table-payments">
            <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">User</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Plan / Description</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Amount</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden md:table-cell">Method</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Source</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for p in payments %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-payment">
                    <td class="px-4 py-3">
                        {% if p.username %}
                        <div class="font-medium text-gray-800 dark:text-gray-200">{{ p.username }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ p.email or '' }}</div>
                        {% else %}
                        <span class="text-gray-400 text-xs italic">Deleted user</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-700 dark:text-gray-300 max-w-[200px] truncate" title="{{ p.description or p.plan_name or '' }}">
                        {{ p.plan_name or p.description or '—' }}
                        {% if p.notes %}
                        <div class="text-xs text-gray-400 truncate" title="{{ p.notes }}">{{ p.notes }}</div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 font-bold text-gray-900 dark:text-white whitespace-nowrap">
                        ${{ '%.2f'|format(p.display_amount) }}
                        <span class="text-xs text-gray-400 font-normal">{{ (p.currency or 'USD')|upper }}</span>
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell">
                        {% set m = p.method|lower if p.method else '' %}
                        <span class="px-2 py-0.5 rounded text-xs font-medium capitalize
                            {% if 'stripe' in m or 'online' in m %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300
                            {% elif 'cash' in m %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300
                            {% elif 'bank' in m %}bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
                            {% elif 'crypto' in m %}bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300
                            {% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400{% endif %}">
                            {{ (p.method or '—')|replace('_',' ') }}
                        </span>
                    </td>
                    <td class="px-4 py-3">
                        {% if p.source == 'stripe' %}
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-semibold">
                            <i class="fab fa-stripe-s text-[10px]"></i> Stripe
                        </span>
                        {% else %}
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-semibold">
                            <i class="fa fa-hand-holding-dollar text-[10px]"></i> Manual
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                            {% if p.status == 'paid' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% elif p.status == 'failed' %}bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400
                            {% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400{% endif %}">
                            {{ (p.status or 'paid')|capitalize }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {{ (p.created_at or '')[:10] }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if total_pages > 1 %}
    <div class="px-5 py-3 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <span class="text-sm text-gray-500 dark:text-gray-400">Page {{ page }} of {{ total_pages }}</span>
        <div class="flex gap-2">
            {% if page > 1 %}
            <a href="?{{ request.query_string.decode()|replace('page=' ~ page, 'page=' ~ (page-1)) }}&page={{ page-1 }}"
               class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">Previous</a>
            {% endif %}
            {% if page < total_pages %}
            <a href="?{{ request.query_string.decode() }}&page={{ page+1 }}"
               class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">Next</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="px-6 py-16 text-center text-gray-400 dark:text-gray-500" data-testid="text-no-payments">
        <i class="fa fa-money-bill-transfer text-4xl mb-3 block opacity-40"></i>
        <p class="font-medium">No payment records found.</p>
        <p class="text-sm mt-1">Try adjusting your filters.</p>
    </div>
    {% endif %}
</div>

{% endblock %}