{% extends 'paxalia/base.html' %}
{% load static %}{% load i18n %}

{% block title %}{% trans "Billing" %} – Paxalia Analytics{% endblock %}
{% block page_title %}Billing{% endblock %}
{% block page_subtitle %}Revenue, subscriptions, and transactions{% endblock %}

{% block filter_bar %}
    {% include 'paxalia/includes/filter_bar.html' %}
{% endblock %}

{% block dashboard_content %}
    <div class="stat-grid">
        <div class="stat-card">
            <span class="stat-label">{% trans "Total Revenue" %}</span>
            <span class="stat-value">${{ total_revenue|floatformat:2 }}</span>
        </div>
        <div class="stat-card stat-card--highlight">
            <span class="stat-label">{% trans "Revenue Today" %}</span>
            <span class="stat-value">${{ today_revenue|floatformat:2 }}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Revenue This Month" %}</span>
            <span class="stat-value">${{ month_revenue|floatformat:2 }}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Active Subscriptions" %}</span>
            <span class="stat-value">{{ active_subscriptions }}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Total Donations" %}</span>
            <span class="stat-value">${{ total_donations|floatformat:2 }}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Revenue this month (MRR proxy)" %}</span>
            <span class="stat-value">${{ revenue_trend.current_month_revenue|floatformat:2 }}</span>
        </div>
        <div class="stat-card">
            <span class="stat-label">{% trans "Projected ARR (run-rate)" %}</span>
            <span class="stat-value">${{ revenue_trend.projected_arr|floatformat:2 }}</span>
        </div>
    </div>

    <div class="chart-card">
        <div class="chart-title-wrapper">
            <h3 class="chart-title">{% trans "Daily Income" %} – {{ date_range_label }}</h3>
            <form class="compare-toggle" method="get" action="">
                {% for key, value in request.GET.items %}
                    {% if key != 'compare' %}
                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                    {% endif %}
                {% endfor %}
                <label class="compare-toggle__label">
                    <input type="checkbox" name="compare" value="1" id="compare-toggle" {% if compare_active %}checked{% endif %}>
                    <span>{% trans "Compare to previous period" %}</span>
                </label>
            </form>
        </div>
        {% if chart_income %}
            <div class="chart-wrap">
                <canvas id="billingChart" role="img" aria-label="Daily income"></canvas>
            </div>
        {% else %}
            <div class="chart-empty">{% trans "No income data for this period." %}</div>
        {% endif %}
    </div>

    <div class="chart-card">
        <div class="chart-title-wrapper">
            <h3 class="chart-title">{% trans "Monthly Revenue Trend (MRR proxy)" %} – {% trans "last 12 months" %}</h3>
        </div>
        <p class="form-hint">
            {% trans "Sum of paid invoices per calendar month — a proxy for subscription MRR, not the subscription value itself. See the Billing Integration docs for why." %}
        </p>
        {% if revenue_trend.values %}
            <div class="chart-wrap">
                <canvas id="mrrChart" role="img" aria-label="Monthly revenue trend"></canvas>
            </div>
        {% else %}
            <div class="chart-empty">{% trans "No revenue data yet." %}</div>
        {% endif %}
    </div>

    <div class="chart-grid analytics-chart-card--spaced">
        <!-- Churn -->
        <div class="table-card">
            <div class="chart-title-wrapper">
                <h3 class="chart-title">{% trans "Churn" %}</h3>
            </div>
            {% if churn %}
                <p class="form-hint">
                    {% blocktrans with baseline=churn.baseline_label following=churn.following_label %}Customers who paid in {{ baseline }} but not in {{ following }}.{% endblocktrans %}
                </p>
                <table class="analytics-table">
                    <tbody>
                        <tr>
                            <td>{% trans "Customer churn" %}</td>
                            <td>{{ churn.churned_customers }} / {{ churn.baseline_customers }} ({{ churn.customer_churn_pct }}%)</td>
                        </tr>
                        <tr>
                            <td>{% trans "Revenue churn" %}</td>
                            <td>${{ churn.churned_revenue|floatformat:2 }} / ${{ churn.baseline_revenue|floatformat:2 }} ({{ churn.revenue_churn_pct }}%)</td>
                        </tr>
                    </tbody>
                </table>
            {% else %}
                <div class="security-empty">{% trans "Not enough invoice history yet to compute churn." %}</div>
            {% endif %}
        </div>

        <!-- Failed payments / dunning -->
        <div class="table-card">
            <div class="chart-title-wrapper">
                <h3 class="chart-title">{% trans "Failed Payments" %}</h3>
                <div class="export-actions">
                    <a href="{% url 'paxalia:export' 'billing_dunning' %}" class="export-btn" title="{% trans 'Export CSV' %}">
                        <span class="icon icon--sm" aria-hidden="true">
                            <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                      d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.92.92 0 0 1-.288-.7q.012-.4.288-.7.3-.3.713-.312a.93.93 0 0 1 .712.287L11 12.15V5q0-.424.288-.712A.97.97 0 0 1 12 4q.424 0 .713.288A.96.96 0 0 1 13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7a.91.91 0 0 1-.288.7l-3.6 3.6q-.15.15-.325.213a1.1 1.1 0 0 1-.375.062M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.288-.712A.97.97 0 0 1 5 15q.424 0 .713.288A.96.96 0 0 1 6 16v2h12v-2q0-.424.288-.712A.97.97 0 0 1 19 15q.424 0 .713.288A.96.96 0 0 1 20 16v2q0 .825-.587 1.413A1.92 1.92 0 0 1 18 20z"/>
                            </svg>
                        </span>
                    </a>
                    <a href="{% url 'paxalia:export' 'billing_dunning' %}?format=json" class="export-btn export-btn--json" title="{% trans 'Export JSON' %}">JSON</a>
                </div>
            </div>
            {% if dunning.summary %}
                <p class="form-hint">{% trans "Last 90 days, grouped by status." %}</p>
                <table class="analytics-table">
                    <thead><tr><th>{% trans "Status" %}</th><th>{% trans "Count" %}</th><th>{% trans "Amount" %}</th></tr></thead>
                    <tbody>
                        {% for row in dunning.summary %}
                        <tr>
                            <td>{{ row.status }}</td>
                            <td>{{ row.count }}</td>
                            <td>${{ row.total|floatformat:2 }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <div class="security-empty">{% trans "No failed or pending payments in the last 90 days." %}</div>
            {% endif %}
        </div>
    </div>

    <div class="chart-grid analytics-chart-card--spaced">
        <!-- Top Plans -->
        <div class="table-card">
            <div class="chart-title-wrapper">
                <h3 class="chart-title">{% trans "Top Plans" %}</h3>
                <div class="export-actions">
                    <a href="{% url 'paxalia:export' 'billing_plans' %}?{{ request.GET.urlencode }}"
                       class="export-btn" title="{% trans 'Export CSV' %}">
                        <span class="icon icon--sm" aria-hidden="true">
                            <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                      d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.92.92 0 0 1-.288-.7q.012-.4.288-.7.3-.3.713-.312a.93.93 0 0 1 .712.287L11 12.15V5q0-.424.288-.712A.97.97 0 0 1 12 4q.424 0 .713.288A.96.96 0 0 1 13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7a.91.91 0 0 1-.288.7l-3.6 3.6q-.15.15-.325.213a1.1 1.1 0 0 1-.375.062M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.288-.712A.97.97 0 0 1 5 15q.424 0 .713.288A.96.96 0 0 1 6 16v2h12v-2q0-.424.288-.712A.97.97 0 0 1 19 15q.424 0 .713.288A.96.96 0 0 1 20 16v2q0 .825-.587 1.413A1.92 1.92 0 0 1 18 20z"/>
                            </svg>
                        </span>
                    </a>
                    <a href="{% url 'paxalia:export' 'billing_plans' %}?{{ request.GET.urlencode }}&format=json"
                       class="export-btn export-btn--json" title="{% trans 'Export JSON' %}">JSON</a>
                </div>
            </div>
            <table class="analytics-table">
                <thead>
                <tr>
                    <th>{% trans "Plan" %}</th>
                    <th>{% trans "Users" %}</th>
                </tr>
                </thead>
                <tbody>
                {% for plan in top_plans %}
                    <tr>
                        <td>{{ plan.current_plan__slug }}</td>
                        <td>{{ plan.count }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="2">{% trans "No subscription data yet." %}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Recent Invoices -->
        <div class="table-card">
            <div class="chart-title-wrapper">
                <h3 class="chart-title">{% trans "Recent Transactions" %}</h3>
                <div class="export-actions">
                    <a href="{% url 'paxalia:export' 'billing_invoices' %}?{{ request.GET.urlencode }}"
                       class="export-btn" title="{% trans 'Export CSV' %}">
                        <span class="icon icon--sm" aria-hidden="true">
                            <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                                <path fill="currentColor"
                                      d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.92.92 0 0 1-.288-.7q.012-.4.288-.7.3-.3.713-.312a.93.93 0 0 1 .712.287L11 12.15V5q0-.424.288-.712A.97.97 0 0 1 12 4q.424 0 .713.288A.96.96 0 0 1 13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7a.91.91 0 0 1-.288.7l-3.6 3.6q-.15.15-.325.213a1.1 1.1 0 0 1-.375.062M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.288-.712A.97.97 0 0 1 5 15q.424 0 .713.288A.96.96 0 0 1 6 16v2h12v-2q0-.424.288-.712A.97.97 0 0 1 19 15q.424 0 .713.288A.96.96 0 0 1 20 16v2q0 .825-.587 1.413A1.92 1.92 0 0 1 18 20z"/>
                            </svg>
                        </span>
                    </a>
                    <a href="{% url 'paxalia:export' 'billing_invoices' %}?{{ request.GET.urlencode }}&format=json"
                       class="export-btn export-btn--json" title="{% trans 'Export JSON' %}">JSON</a>
                </div>
            </div>
            <table class="analytics-table">
                <thead>
                <tr>
                    <th>{% trans "Invoice" %}</th>
                    <th>{% trans "User" %}</th>
                    <th>{% trans "Amount" %}</th>
                    <th>{% trans "Date" %}</th>
                </tr>
                </thead>
                <tbody>
                {% for inv in recent_invoices %}
                    <tr>
                        <td>{{ inv.invoice_number }}</td>
                        <td>{{ inv.user.username }}</td>
                        <td>${{ inv.amount }}</td>
                        <td>{{ inv.date|date:'Y-m-d' }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="4">{% trans "No transactions yet." %}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block page_scripts %}
    <script nonce="{{ request.csp_nonce }}">
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('compare-toggle')?.addEventListener('change', function() {
                this.form.submit();
            });
        });
    </script>
    <script nonce="{{ request.csp_nonce }}">
        window.__analytics_filter = {
            startDate: "{{ start_date|date:'Y-m-d'|default:'' }}",
            endDate: "{{ end_date|date:'Y-m-d'|default:'' }}",
            activePreset: "{{ active_preset|default:'last30' }}",
            showSearch: false
        };
        window.__analytics_billing = {
            labels: [{% for label in chart_labels %}"{{ label }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
            income: [{% for amount in chart_income %}{{ amount }}{% if not forloop.last %}, {% endif %}{% endfor %}],
            dateRangeLabel: "{{ date_range_label }}",
            compareActive: {{ compare_active|yesno:'true,false' }},
            previousLabels: [{% for label in previous_labels %}"{{ label }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
            previousIncome: [{% for amount in previous_income %}{{ amount }}{% if not forloop.last %}, {% endif %}{% endfor %}]
        };
        window.__analytics_revenue = {
            labels: [{% for label in revenue_trend.labels %}"{{ label }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
            values: [{% for v in revenue_trend.values %}{{ v }}{% if not forloop.last %}, {% endif %}{% endfor %}]
        };
    </script>
    <script nonce="{{ request.csp_nonce }}" src="{% static 'paxalia/scripts/filter-bar.js' %}"></script>
    <script nonce="{{ request.csp_nonce }}" src="{% static 'paxalia/scripts/billing-chart.js' %}"></script>
{% endblock %}