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

{% block title %}Expense Analytics - HAVEN GRAZURI ADVANCE{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-6">
        <a href="{% url 'expenses:expenses_list' %}" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
            <span class="mr-2">←</span> Back to Expenses
        </a>
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Expense Analytics</h1>
                <p class="mt-2 text-sm text-gray-600">
                    Comprehensive expense analysis and trends across all categories and branches
                </p>
            </div>
            <div class="flex gap-3">
                <a href="{% url 'expenses:export_expenses_excel' %}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors shadow-sm">
                    <span class="mr-2">📊</span> Export Excel
                </a>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {% with total_expenses=category_breakdown|length %}
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium">Total Categories</p>
                    <p class="text-3xl font-bold mt-2">{{ total_expenses }}</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-3" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 2rem;">🏷️</span>
                </div>
            </div>
        </div>
        {% endwith %}

        {% with total_branches=branch_breakdown|length %}
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium">Active Branches</p>
                    <p class="text-3xl font-bold mt-2">{{ total_branches }}</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-3" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 2rem;">🏢</span>
                </div>
            </div>
        </div>
        {% endwith %}

        {% with total_amount=category_breakdown|first %}
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium">Top Category</p>
                    <p class="text-xl font-bold mt-2">
                        {% if category_breakdown %}
                            {% with top=category_breakdown|first %}
                                {% if top.category == 'loan_related' %}Loan-Related{% else %}{{ top.category|title }}{% endif %}
                            {% endwith %}
                        {% else %}
                            N/A
                        {% endif %}
                    </p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-3" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 2rem;">📊</span>
                </div>
            </div>
        </div>
        {% endwith %}

        <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-orange-100 text-sm font-medium">Total Expenses</p>
                    <p class="text-2xl font-bold mt-2">
                        {% with total=0 %}
                            {% for item in category_breakdown %}
                                {% with total=total|add:item.count %}{% endwith %}
                            {% endfor %}
                            {{ category_breakdown|length|default:0 }}
                        {% endwith %}
                    </p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-3" style="width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 2rem;">🧾</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        <!-- Expenses by Category -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="bg-gradient-to-r from-primary to-primary-dark px-6 py-4 border-b">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <span class="mr-3">📊</span>
                    Expenses by Category
                </h2>
            </div>
            <div class="p-6">
                {% if category_breakdown %}
                    <div class="space-y-4">
                        {% for item in category_breakdown %}
                        <div class="border-l-4 border-primary bg-gray-50 rounded-r-lg p-4 hover:bg-gray-100 transition-colors">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900">
                                    {% if item.category == 'loan_related' %}
                                        Loan-Related
                                    {% else %}
                                        {{ item.category|title }}
                                    {% endif %}
                                </h3>
                                <span class="bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">
                                    {{ item.count }} expense{{ item.count|pluralize }}
                                </span>
                            </div>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <p class="text-gray-500">Total Amount</p>
                                    <p class="font-bold text-gray-900">KES {{ item.total|floatformat:2|intcomma }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">Average</p>
                                    <p class="font-bold text-gray-900">KES {{ item.average|floatformat:2|intcomma }}</p>
                                </div>
                            </div>
                            <!-- Progress Bar -->
                            <div class="mt-3 bg-gray-200 rounded-full h-2">
                                {% if item.percentage > 0 %}
                                    <div class="bg-gradient-to-r from-primary to-secondary h-2 rounded-full transition-all duration-500" style="width: {{ item.percentage }}%"></div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12">
                        <span style="font-size: 5rem; opacity: 0.3;">📊</span>
                        <p class="text-gray-500 mt-4">No expense data available</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Expenses by Branch -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="bg-gradient-to-r from-secondary to-secondary-dark px-6 py-4 border-b">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <span class="mr-3">🏢</span>
                    Expenses by Branch
                </h2>
            </div>
            <div class="p-6">
                {% if branch_breakdown %}
                    <div class="space-y-4">
                        {% for item in branch_breakdown %}
                        <div class="border-l-4 border-secondary bg-green-50 rounded-r-lg p-4 hover:bg-green-100 transition-colors">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900">{{ item.branch__name }}</h3>
                                <span class="bg-secondary text-white text-xs font-bold px-2 py-1 rounded-full">
                                    {{ item.count }} expense{{ item.count|pluralize }}
                                </span>
                            </div>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <p class="text-gray-500">Total Amount</p>
                                    <p class="font-bold text-gray-900">KES {{ item.total|floatformat:2|intcomma }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">Average</p>
                                    <p class="font-bold text-gray-900">KES {{ item.average|floatformat:2|intcomma }}</p>
                                </div>
                            </div>
                            <!-- Progress Bar -->
                            <div class="mt-3 bg-gray-200 rounded-full h-2">
                                {% if item.percentage > 0 %}
                                    <div class="bg-gradient-to-r from-secondary to-green-400 h-2 rounded-full transition-all duration-500" style="width: {{ item.percentage }}%"></div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12">
                        <span style="font-size: 5rem; opacity: 0.3;">🏢</span>
                        <p class="text-gray-500 mt-4">No branch data available</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Monthly Trend -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
        <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 px-6 py-4 border-b">
            <h2 class="text-xl font-bold text-white flex items-center">
                <span class="mr-3">📈</span>
                Monthly Expense Trend (Last 6 Months)
            </h2>
        </div>
        <div class="p-6">
            {% if monthly_trend %}
                <div class="space-y-4">
                    {% for item in monthly_trend %}
                    <div class="flex items-center gap-4">
                        <div class="w-24 text-sm font-semibold text-gray-700">
                            {{ item.month }}
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center gap-3">
                                <div class="flex-1 bg-gray-200 rounded-full h-8 relative overflow-hidden">
                                    {% if item.percentage > 0 %}
                                        <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 h-8 rounded-full flex items-center justify-end pr-3 transition-all duration-500" style="width: {{ item.percentage }}%">
                                            <span class="text-white text-xs font-bold">{{ item.percentage|floatformat:0 }}%</span>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="w-40 text-right">
                                    <span class="font-bold text-gray-900">KES {{ item.total|floatformat:2|intcomma }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-12">
                    <span style="font-size: 5rem; opacity: 0.3;">📈</span>
                    <p class="text-gray-500 mt-4">No trend data available</p>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Quick Stats Footer -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Highest Category</p>
                    <p class="text-xl font-bold text-gray-900 mt-1">
                        {% if category_breakdown %}
                            {% with top=category_breakdown|first %}
                                KES {{ top.total|floatformat:2|intcomma }}
                            {% endwith %}
                        {% else %}
                            KES 0.00
                        {% endif %}
                    </p>
                </div>
                <span style="font-size: 2rem;">📈</span>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Highest Branch</p>
                    <p class="text-xl font-bold text-gray-900 mt-1">
                        {% if branch_breakdown %}
                            {% with top=branch_breakdown|first %}
                                KES {{ top.total|floatformat:2|intcomma }}
                            {% endwith %}
                        {% else %}
                            KES 0.00
                        {% endif %}
                    </p>
                </div>
                <span style="font-size: 2rem;">🏢</span>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-purple-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Average Expense</p>
                    <p class="text-xl font-bold text-gray-900 mt-1">
                        {% if category_breakdown %}
                            {% with total_avg=0 count=0 %}
                                {% for item in category_breakdown %}
                                    {% with total_avg=total_avg|add:item.average count=count|add:1 %}{% endwith %}
                                {% endfor %}
                                KES {{ total_avg|floatformat:2|intcomma }}
                            {% endwith %}
                        {% else %}
                            KES 0.00
                        {% endif %}
                    </p>
                </div>
                <span style="font-size: 2rem;">🧮</span>
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom animations */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .space-y-4 > * {
        animation: slideIn 0.3s ease-out;
    }
</style>
{% endblock %}