{% extends "base.html" %}
{% block title %}Analytics — Revenue Dashboard{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-serif font-bold text-white flex items-center gap-3">
            <span class="text-gold-400">&#128200;</span> Revenue Analytics
        </h1>
        <div class="flex gap-3">
            <a href="{{ url_for('admin.index') }}" class="text-slate-400 hover:text-white text-sm">Dashboard</a>
            <a href="{{ url_for('admin.audit') }}" class="text-slate-400 hover:text-white text-sm">Audit Log</a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-gold-400">${{ '%.0f' % mrr }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest mt-1">MRR</div>
        </div>
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-emerald-400">{{ pro_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest mt-1">Pro Subscribers</div>
        </div>
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-purple-400">{{ enterprise_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest mt-1">Enterprise</div>
        </div>
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-blue-400">{{ free_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest mt-1">Free Users</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">User Growth (6 Months)</h2>
            <canvas id="usersChart" height="200"></canvas>
        </div>
        <div class="glass p-6 rounded-2xl">
            <h2 class="text-lg font-bold text-white mb-4">Reports Generated (6 Months)</h2>
            <canvas id="reportsChart" height="200"></canvas>
        </div>
    </div>

    <div class="glass p-6 rounded-2xl">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-white">Recent Activity</h2>
            <a href="{{ url_for('admin.audit') }}" class="text-xs text-gold-400">View All &#8594;</a>
        </div>
        <div class="space-y-2">
            {% for log in recent_logs %}
            <div class="flex items-center justify-between p-3 bg-black/20 rounded-xl text-sm">
                <div>
                    <span class="text-white">{{ log.action }}</span>
                    {% if log.user %}<span class="text-slate-500 ml-2">by {{ log.user.name }}</span>{% endif %}
                </div>
                <span class="text-xs text-slate-500">{{ log.created_at.strftime('%m/%d %H:%M') }}</span>
            </div>
            {% else %}
            <div class="text-slate-500 text-center py-4">No audit logs yet</div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const monthsData = {{ months_data | tojson }};
const labels = monthsData.map(m => m.label);

new Chart(document.getElementById('usersChart'), {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'New Users',
            data: monthsData.map(m => m.users),
            backgroundColor: 'rgba(210, 175, 32, 0.6)',
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#64748b' } },
            x: { grid: { display: false }, ticks: { color: '#64748b' } }
        }
    }
});

new Chart(document.getElementById('reportsChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Reports',
            data: monthsData.map(m => m.reports),
            borderColor: '#34d399',
            backgroundColor: 'rgba(52, 211, 153, 0.1)',
            fill: true,
            tension: 0.4,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#64748b' } },
            x: { grid: { display: false }, ticks: { color: '#64748b' } }
        }
    }
});
</script>
{% endblock %}