{% extends 'base.html' %}
{% load static %}

{% block title %}Reports & Analytics Dashboard{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">
                        <span>📊</span>
                        Reports & Analytics Dashboard
                    </h1>
                    <p class="text-gray-600">Comprehensive reporting and analytics for loan management</p>
                </div>
                <div class="flex space-x-4">
                    <button onclick="refreshDashboard()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl transition-colors">
                        <span>🔄</span>Refresh
                    </button>
                    <a href="{% url 'utils:notifications' %}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-xl transition-colors">
                        <span>🔔</span>Notifications
                    </a>
                </div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">Total Loans</p>
                        <p class="text-2xl font-bold text-gray-900">{{ executive_summary.total_loans|default:0 }}</p>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-full">
                        <span>💵</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-green-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">Active Loans</p>
                        <p class="text-2xl font-bold text-gray-900">{{ executive_summary.active_loans|default:0 }}</p>
                    </div>
                    <div class="bg-green-100 p-3 rounded-full">
                        <span>📈</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-yellow-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">Total Disbursed</p>
                        <p class="text-2xl font-bold text-gray-900">KES {{ executive_summary.total_disbursed|default:0|floatformat:0 }}</p>
                    </div>
                    <div class="bg-yellow-100 p-3 rounded-full">
                        <span>🪙</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-red-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">Overdue Loans</p>
                        <p class="text-2xl font-bold text-gray-900">{{ executive_summary.overdue_loans|default:0 }}</p>
                    </div>
                    <div class="bg-red-100 p-3 rounded-full">
                        <span>⚠️</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Reports Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- System Reports -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-semibold text-gray-900">
                        <span>⚙️</span>
                        System Reports
                    </h2>
                </div>
                
                <div class="space-y-4">
                    <a href="{% url 'reports:loan_reports' %}" class="block p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg hover:from-blue-100 hover:to-blue-200 transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span>📊</span>
                                <div>
                                    <h3 class="font-medium text-gray-900">Loan Analytics</h3>
                                    <p class="text-sm text-gray-600">Comprehensive loan performance reports</p>
                                </div>
                            </div>
                            <span>→</span>
                        </div>
                    </a>
                    
                    <a href="{% url 'reports:collection_reports' %}" class="block p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-lg hover:from-green-100 hover:to-green-200 transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span>💳</span>
                                <div>
                                    <h3 class="font-medium text-gray-900">Collection Reports</h3>
                                    <p class="text-sm text-gray-600">Payment and collection analytics</p>
                                </div>
                            </div>
                            <span>→</span>
                        </div>
                    </a>
                    
                    <a href="{% url 'reports:borrower_reports' %}" class="block p-4 bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg hover:from-purple-100 hover:to-purple-200 transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span>👥</span>
                                <div>
                                    <h3 class="font-medium text-gray-900">Borrower Analytics</h3>
                                    <p class="text-sm text-gray-600">Client behavior and risk analysis</p>
                                </div>
                            </div>
                            <span>→</span>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Individual Statements -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-semibold text-gray-900">
                        <span>📄</span>
                        Individual Statements
                    </h2>
                </div>
                
                <div class="space-y-4">
                    <a href="{% url 'utils:payment_receipts' %}" class="block p-4 bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-lg hover:from-indigo-100 hover:to-indigo-200 transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span>🧾</span>
                                <div>
                                    <h3 class="font-medium text-gray-900">Payment Receipts</h3>
                                    <p class="text-sm text-gray-600">Generate and manage payment receipts</p>
                                </div>
                            </div>
                            <span>→</span>
                        </div>
                    </a>
                    
                    <a href="{% url 'utils:reports_statements' %}" class="block p-4 bg-gradient-to-r from-teal-50 to-teal-100 rounded-lg hover:from-teal-100 hover:to-teal-200 transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span>🧾</span>
                                <div>
                                    <h3 class="font-medium text-gray-900">Loan Statements</h3>
                                    <p class="text-sm text-gray-600">Individual loan account statements</p>
                                </div>
                            </div>
                            <span>→</span>
                        </div>
                    </a>
                    
                    <a href="{% url 'reports:customer_requests_list' %}" class="block p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-200">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <span>❓</span>
                                <div>
                                    <h3 class="font-medium text-gray-900">Customer Requests</h3>
                                    <p class="text-sm text-gray-600">Track and manage customer inquiries</p>
                                </div>
                            </div>
                            <span>→</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- Recent Report Activity -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900">
                    <span>⏰</span>
                    Recent Report Activity
                </h2>
                <a href="{% url 'utils:notifications' %}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                    View All <span>→</span>
                </a>
            </div>
            
            <div class="space-y-4">
                {% if recent_notifications %}
                    {% for notification in recent_notifications %}
                    <div class="flex items-center p-4 bg-gray-50 rounded-lg">
                        <div class="flex-shrink-0">
                            {% if notification.type == 'success' %}
                                <span>✓</span>
                            {% elif notification.type == 'error' %}
                                <span>⚠️</span>
                            {% else %}
                                <span>ℹ️</span>
                            {% endif %}
                        </div>
                        <div class="ml-4 flex-1">
                            <p class="text-sm font-medium text-gray-900">{{ notification.message }}</p>
                            <p class="text-xs text-gray-500">{{ notification.created_at|timesince }} ago</p>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-8">
                        <span>📥</span>
                        <p class="text-gray-500">No recent activity</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
function refreshDashboard() {
    location.reload();
}

// Auto-refresh every 5 minutes
setInterval(function() {
    refreshDashboard();
}, 300000);
</script>
{% endblock %}