{% extends "admin/base_admin.html" %}

{% block title %}Analytics Dashboard - Admin{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Header -->
    <div class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 rounded-3xl shadow-2xl overflow-hidden">
        <div class="px-8 py-8 relative">
            <div class="absolute inset-0 bg-black/10">
                <div class="absolute inset-0" style="background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%);"></div>
            </div>
            <div class="relative">
                <h1 class="text-3xl font-black text-white mb-2">
                    <i class="fas fa-chart-line mr-3"></i>Analytics Dashboard
                </h1>
                <p class="text-purple-100 text-lg">Advanced insights and performance metrics for {{ group.name }}</p>
            </div>
        </div>
    </div>

    <!-- Key Metrics Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Monthly Goal Progress -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-bullseye text-white text-xl"></i>
                    </div>
                    <span class="text-2xl font-bold text-blue-600">{{ "%.1f"|format(analytics.goal_progress) }}%</span>
                </div>
                <h3 class="text-lg font-bold text-gray-900 mb-1">Monthly Goal</h3>
                <p class="text-sm text-gray-600">৳{{ "{:,.0f}".format(analytics.current_month_total) }} / ৳{{ "{:,.0f}".format(analytics.monthly_goal) }}</p>
                <div class="mt-4 bg-gray-200 rounded-full h-2">
                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-500" 
                         style="width: {{ analytics.goal_progress|min(100) }}%"></div>
                </div>
            </div>
        </div>

        <!-- Total Members Performance -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-users text-white text-xl"></i>
                    </div>
                    <span class="text-2xl font-bold text-green-600">{{ analytics.member_performance|length }}</span>
                </div>
                <h3 class="text-lg font-bold text-gray-900 mb-1">Active Contributors</h3>
                <p class="text-sm text-gray-600">Members with contributions</p>
            </div>
        </div>

        <!-- Average Contribution -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-chart-bar text-white text-xl"></i>
                    </div>
                    <span class="text-2xl font-bold text-purple-600">
                        ৳{{ "{:,.0f}".format(analytics.member_performance[0].avg_contribution if analytics.member_performance else 0) }}
                    </span>
                </div>
                <h3 class="text-lg font-bold text-gray-900 mb-1">Avg Contribution</h3>
                <p class="text-sm text-gray-600">Per member average</p>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-clock text-white text-xl"></i>
                    </div>
                    <span class="text-2xl font-bold text-orange-600">{{ analytics.recent_activity|length }}</span>
                </div>
                <h3 class="text-lg font-bold text-gray-900 mb-1">Recent Activity</h3>
                <p class="text-sm text-gray-600">Last 30 days</p>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Monthly Trends Chart -->
        <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h3 class="text-xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-line-chart text-blue-500 mr-3"></i>
                    Monthly Contribution Trends
                </h3>
            </div>
            <div class="p-6">
                <canvas id="monthlyTrendsChart" width="400" height="300"></canvas>
            </div>
        </div>

        <!-- Contribution Types Chart -->
        <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h3 class="text-xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-pie-chart text-purple-500 mr-3"></i>
                    Contribution Type Breakdown
                </h3>
            </div>
            <div class="p-6">
                <canvas id="contributionTypesChart" width="400" height="300"></canvas>
            </div>
        </div>
    </div>

    <!-- Top Contributors -->
    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-trophy text-yellow-500 mr-3"></i>
                Top Contributors This Month
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
                {% for contributor in analytics.top_contributors %}
                <div class="bg-gradient-to-br from-yellow-50 to-orange-100 rounded-2xl p-4 border border-yellow-200 text-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-3">
                        <span class="text-white font-bold">{{ loop.index }}</span>
                    </div>
                    <h4 class="font-bold text-gray-900 text-sm">{{ contributor.full_name }}</h4>
                    <p class="text-xs text-gray-600 mb-2">{{ contributor.custom_id }}</p>
                    <p class="text-lg font-bold text-orange-600">৳{{ "{:,.0f}".format(contributor.monthly_total) }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Member Performance Table -->
    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <h3 class="text-xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-users text-green-500 mr-3"></i>
                Member Performance Analysis
            </h3>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead class="bg-gray-50 rounded-xl">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Member</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Total Contributions</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Count</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Average</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Last Payment</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for member in analytics.member_performance[:10] %}
                        <tr class="hover:bg-gray-50 transition-colors duration-200">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold text-sm">{{ member.custom_id }}</span>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-bold text-gray-900">{{ member.full_name }}</div>
                                        <div class="text-sm text-gray-500">ID: {{ member.custom_id }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-lg font-bold text-green-600">৳{{ "{:,.0f}".format(member.total_contributions) }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ member.contribution_count }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-gray-900">
                                ৳{{ "{:,.0f}".format(member.avg_contribution) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ member.last_contribution.strftime('%b %d, %Y') if member.last_contribution else 'Never' }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Monthly Trends Chart
const monthlyCtx = document.getElementById('monthlyTrendsChart').getContext('2d');
const monthlyTrendsChart = new Chart(monthlyCtx, {
    type: 'line',
    data: {
        labels: [
            {% for trend in analytics.monthly_trends %}
            '{{ trend.month.strftime("%b %Y") if trend.month else "N/A" }}',
            {% endfor %}
        ],
        datasets: [{
            label: 'Monthly Total (৳)',
            data: [
                {% for trend in analytics.monthly_trends %}
                {{ trend.total or 0 }},
                {% endfor %}
            ],
            borderColor: 'rgb(99, 102, 241)',
            backgroundColor: 'rgba(99, 102, 241, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '৳' + value.toLocaleString();
                    }
                }
            }
        }
    }
});

// Contribution Types Chart
const typesCtx = document.getElementById('contributionTypesChart').getContext('2d');
const contributionTypesChart = new Chart(typesCtx, {
    type: 'doughnut',
    data: {
        labels: [
            {% for type in analytics.contribution_types %}
            '{{ type.contribution_type.title() }}',
            {% endfor %}
        ],
        datasets: [{
            data: [
                {% for type in analytics.contribution_types %}
                {{ type.total or 0 }},
                {% endfor %}
            ],
            backgroundColor: [
                'rgba(59, 130, 246, 0.8)',
                'rgba(16, 185, 129, 0.8)',
                'rgba(245, 158, 11, 0.8)',
                'rgba(239, 68, 68, 0.8)',
                'rgba(139, 92, 246, 0.8)'
            ],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
{% endblock %}