{% extends 'admin/layout/base.twig' %}
{% block title %}Reports - {{ app_name }}{% endblock %}
{% block content %}
<div class="op-page-header">
    <div>
        <h1>Reports</h1>
        <p class="op-page-subtitle">Analyze transaction volume, payment channel performance, and currency distribution.</p>
    </div>
    <div class="op-header-actions">
        <a href="/admin/reports/export?{{ query_string }}" class="op-btn op-btn-outline">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="op-mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Export CSV
        </a>
    </div>
</div>

{# -- Filter Bar -------------------------------------------- #}
<div class="op-card op-mb-4">
    <div class="op-card-body">
        <form method="GET" class="op-filter-form">
            <div class="op-form-row op-align-end">
                <div class="op-form-group op-col-3">
                    <label class="op-text-sm op-text-muted">From</label>
                    <div class="op-date-picker">
                        <input type="hidden" name="from" value="{{ filters.from ?? '' }}">
                        <div class="op-date-picker-group">
                            <input type="text" class="op-date-picker-input" placeholder="Select date" value="{{ filters.from ?? '' }}" readonly>
                            <button type="button" class="op-date-picker-trigger" aria-label="Pick date">
                                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/></svg>
                            </button>
                        </div>
                        <div class="op-calendar-popover">
                            <div class="op-calendar-header">
                                <button type="button" class="op-calendar-nav-btn op-calendar-prev"><svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg></button>
                                <div class="op-calendar-heading"></div>
                                <button type="button" class="op-calendar-nav-btn op-calendar-next"><svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></button>
                            </div>
                            <div class="op-calendar-grid-header"><span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span></div>
                            <div class="op-calendar-grid-body"></div>
                        </div>
                    </div>
                </div>
                <div class="op-form-group op-col-3">
                    <label class="op-text-sm op-text-muted">To</label>
                    <div class="op-date-picker">
                        <input type="hidden" name="to" value="{{ filters.to ?? '' }}">
                        <div class="op-date-picker-group">
                            <input type="text" class="op-date-picker-input" placeholder="Select date" value="{{ filters.to ?? '' }}" readonly>
                            <button type="button" class="op-date-picker-trigger" aria-label="Pick date">
                                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/></svg>
                            </button>
                        </div>
                        <div class="op-calendar-popover">
                            <div class="op-calendar-header">
                                <button type="button" class="op-calendar-nav-btn op-calendar-prev"><svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg></button>
                                <div class="op-calendar-heading"></div>
                                <button type="button" class="op-calendar-nav-btn op-calendar-next"><svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></button>
                            </div>
                            <div class="op-calendar-grid-header"><span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span></div>
                            <div class="op-calendar-grid-body"></div>
                        </div>
                    </div>
                </div>
                <div class="op-form-group op-col-3">
                    <label class="op-text-sm op-text-muted">Gateway</label>
                    <div class="op-custom-dropdown" data-auto-submit>
                        <input type="hidden" name="gateway" value="{{ filters.gateway ?? '' }}">
                        <button type="button" class="op-custom-dropdown-btn op-w-full">
                            <span class="op-custom-dropdown-label">{{ filters.gateway ?? '' ? gateways|filter(g => g.slug == filters.gateway)|first.name : 'All Gateways' }}</span>
                            <svg class="op-dropdown-chevron" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
                        </button>
                        <div class="op-custom-dropdown-menu">
                            <button type="button" class="op-custom-dropdown-option {{ (filters.gateway ?? '') == '' ? 'active' : '' }}" data-value="">All Gateways</button>
                            {% for gw in gateways %}
                            <button type="button" class="op-custom-dropdown-option {{ (filters.gateway ?? '') == gw.slug ? 'active' : '' }}" data-value="{{ gw.slug }}">{{ gw.name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="op-form-group op-col-3">
                    <button type="submit" class="op-btn op-btn-primary op-btn-block">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="op-mr-1"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>Generate Report
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{# -- Stats Grid -------------------------------------------- #}
<div class="op-stats-grid op-mb-4">
    <div class="op-stat-card op-stat-primary">
        <div class="op-stat-icon op-stat-grad-primary">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
        </div>
        <div class="op-stat-content">
            <span class="op-stat-value">{{ report.total_revenue ?? '0.00' }}</span>
            <span class="op-stat-label">Total Revenue</span>
        </div>
    </div>
    <div class="op-stat-card op-stat-success">
        <div class="op-stat-icon op-stat-grad-success">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        </div>
        <div class="op-stat-content">
            <span class="op-stat-value">{{ report.total_transactions ?? 0 }}</span>
            <span class="op-stat-label">Transactions</span>
        </div>
    </div>
    <div class="op-stat-card op-stat-info">
        <div class="op-stat-icon op-stat-grad-info">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
        </div>
        <div class="op-stat-content">
            <span class="op-stat-value">{{ report.avg_transaction ?? '0.00' }}</span>
            <span class="op-stat-label">Avg Transaction</span>
        </div>
    </div>
    <div class="op-stat-card op-stat-warning">
        <div class="op-stat-icon op-stat-grad-warning">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
        </div>
        <div class="op-stat-content">
            <span class="op-stat-value">{{ report.total_fees ?? '0.00' }}</span>
            <span class="op-stat-label">Total Fees</span>
        </div>
    </div>
</div>

{{ hook('report.data', report)|raw }}

{# -- Status Breakdown -------------------------------------- #}
{% if report.by_status is defined and report.by_status|length > 0 %}
<div class="op-card op-mb-4">
    <div class="op-card-header"><h3>Transaction Status Breakdown</h3></div>
    <div class="op-card-body">
        <div class="op-status-bars">
            {% for status in report.by_status %}
            <div class="op-status-bar-item">
                <div class="op-status-bar-header">
                    <span class="op-badge op-badge-{{ status.status == 'completed' ? 'success' : (status.status == 'pending' ? 'warning' : (status.status == 'failed' ? 'danger' : 'muted')) }}">{{ status.status|capitalize }}</span>
                    <span class="op-text-muted op-text-sm">{{ status.count }} transactions</span>
                </div>
                <div class="op-progress-bar">
                    <div class="op-progress-fill op-progress-{{ status.status == 'completed' ? 'success' : (status.status == 'pending' ? 'warning' : 'danger') }}" style="width:{{ report.total_transactions > 0 ? ((status.count / report.total_transactions) * 100)|round : 0 }}%"></div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{# -- Gateway Breakdown ------------------------------------- #}
{% if report.by_gateway is defined and report.by_gateway|length > 0 %}
<div class="op-card op-mb-4">
    <div class="op-card-header"><h3>Revenue by Gateway</h3></div>
    <div class="op-card-body op-p-0">
        <div class="op-table-responsive"><table class="op-table">
            <thead>
                <tr>
                    <th>Gateway</th>
                    <th class="op-text-right">Transactions</th>
                    <th class="op-text-right">Revenue</th>
                    <th class="op-text-right">Fees</th>
                </tr>
            </thead>
            <tbody>
                {% for gw in report.by_gateway %}
                <tr>
                    <td data-label="Gateway">
                        <div class="op-gateway-name">
                            <span class="op-gateway-dot" style="background:var(--op-primary)"></span>
                            <strong>{{ gw.name }}</strong>
                        </div>
                    </td>
                    <td data-label="Transactions" class="op-text-right">{{ gw.count }}</td>
                    <td data-label="Revenue" class="op-text-right"><strong>{{ gw.revenue }}</strong></td>
                    <td data-label="Fees" class="op-text-right op-text-muted">{{ gw.fees }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table></div>
    </div>
</div>
{% else %}
<div class="op-card">
    <div class="op-card-body">
        <div class="op-empty-state">
            <div class="op-empty-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
            </div>
            <p class="op-empty-title">No transaction data for this period</p>
            <p class="op-text-muted op-text-sm">Adjust the date range or gateway filter above to see analytics.</p>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}