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

{% block title %}Interest Income Report{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/reports-enhanced.css' %}">
<style>
.interest-hero {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    position: relative;
    overflow: hidden;
}

.interest-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="waves" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0,20 Q10,10 20,20 T40,20" stroke="white" stroke-width="0.5" fill="none" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23waves)"/></svg>');
}

.metric-card-interest {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card-interest::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.metric-card-interest:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(16, 185, 129, 0.2);
}

.interest-table {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.interest-table-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 2rem;
    position: relative;
}

.interest-table-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="circles" width="15" height="15" patternUnits="userSpaceOnUse"><circle cx="7.5" cy="7.5" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23circles)"/></svg>');
}

.status-badge-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge-paid {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.interest-amount {
    font-weight: 700;
    color: #059669;
    font-size: 1.1rem;
}

.rate-display {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <!-- Enhanced Hero Section -->
    <div class="interest-hero text-white py-16 mb-8 rounded-3xl shadow-2xl">
        <div class="relative z-10">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <div class="flex-1">
                    <div class="flex items-center mb-4">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
                            <i class="fas fa-percentage text-3xl"></i>
                        </div>
                        <div>
                            <h1 class="text-4xl lg:text-5xl font-bold mb-2">Interest Income Report</h1>
                            <p class="text-xl opacity-90">Analysis of interest income from active loans</p>
                        </div>
                    </div>
                    <div class="flex items-center text-lg opacity-80">
                        <span>📅</span>
                        <span>Generated on {{ "now"|date:"F d, Y" }} at {{ "now"|date:"g:i A" }}</span>
                    </div>
                </div>
                <div class="flex flex-wrap gap-3">
                    <a href="{% url 'reports:reports_dashboard' %}" 
                       class="inline-flex items-center px-6 py-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-xl font-medium transition-all duration-200 backdrop-blur-sm">
                        <span>←</span> Back to Dashboard
                    </a>
                    <a href="?format=pdf" 
                       class="inline-flex items-center px-6 py-3 bg-red-500 hover:bg-red-600 rounded-xl font-medium transition-all duration-200 shadow-lg">
                        <span>📄</span> Export PDF
                    </a>
                    <a href="?format=csv" 
                       class="inline-flex items-center px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-xl font-medium transition-all duration-200 shadow-lg">
                        <i class="fas fa-file-csv mr-2"></i> Export CSV
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Filters -->
    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-green-100">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <span>🔍</span>
            Advanced Filters
        </h2>
        <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">Month</label>
                <select name="month" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-green-100 focus:border-green-500 transition-all duration-200">
                    <option value="">All Months</option>
                    {% for i in "123456789012"|make_list %}
                        <option value="{{ forloop.counter }}" {% if filters.month == forloop.counter %}selected{% endif %}>
                            {{ forloop.counter|date:"F" }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">Year</label>
                <select name="year" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-green-100 focus:border-green-500 transition-all duration-200">
                    <option value="">All Years</option>
                    {% for year in "2024,2025,2026"|make_list %}
                        <option value="{{ year }}" {% if filters.year == year|add:0 %}selected{% endif %}>{{ year }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <span>🔍</span> Apply Filters
                </button>
            </div>
        </form>
    </div>

    <!-- Enhanced Metrics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        <div class="metric-card-interest group">
            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <i class="fas fa-percentage text-white text-2xl"></i>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Total Interest Income</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                KES {{ report_data.summary.total_interest_income|default:0|floatformat:2|intcomma }}
            </p>
            <div class="flex items-center text-sm text-green-600">
                <span>↑</span>
                <span>Revenue from interest</span>
            </div>
        </div>

        <div class="metric-card-interest group">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <span>💵</span>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Interest Bearing Loans</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                {{ report_data.summary.total_loans|default:0 }}
            </p>
            <div class="flex items-center text-sm text-blue-600">
                <span>📈</span>
                <span>Active loan count</span>
            </div>
        </div>

        <div class="metric-card-interest group">
            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-violet-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <span>🧮</span>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Average Interest Rate</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                {{ report_data.summary.average_interest_rate|default:0|floatformat:1 }}%
            </p>
            <div class="flex items-center text-sm text-purple-600">
                <i class="fas fa-percentage mr-1"></i>
                <span>Mean rate across loans</span>
            </div>
        </div>

        <div class="metric-card-interest group">
            <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                <span>📈</span>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Monthly Growth</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                {{ report_data.summary.monthly_growth|default:0|floatformat:1 }}%
            </p>
            <div class="flex items-center text-sm text-yellow-600">
                <i class="fas fa-trending-up mr-1"></i>
                <span>Growth rate</span>
            </div>
        </div>
    </div>

    <!-- Enhanced Data Table -->
    <div class="interest-table">
        <div class="interest-table-header">
            <div class="relative z-10 flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold mb-2">Interest Income Details</h2>
                    {% if report_data.income_details %}
                    <p class="opacity-90">{{ report_data.income_details|length }} interest income record{{ report_data.income_details|length|pluralize }} found</p>
                    {% endif %}
                </div>
                <div class="flex items-center space-x-4">
                    <div class="bg-white bg-opacity-20 px-4 py-2 rounded-lg">
                        <i class="fas fa-table mr-2"></i>
                        <span class="font-medium">Detailed View</span>
                    </div>
                </div>
            </div>
        </div>
        
        {% if report_data.income_details %}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gradient-to-r from-green-600 to-emerald-600 text-white">
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-hashtag mr-2"></i>Loan #</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>👤</span>Borrower</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>💵</span>Principal</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-percentage mr-2"></i>Interest Rate</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>🪙</span>Interest Earned</th>
                        <th class="px-6 py-4 text-left font-semibold"><span>ℹ️</span>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for income in report_data.income_details %}
                    <tr class="hover:bg-gradient-to-r hover:from-green-50 hover:to-emerald-50 transition-all duration-200 border-b border-gray-100">
                        <td class="px-6 py-4">
                            <span class="font-mono font-semibold text-gray-900">{{ income.loan_number }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-medium text-gray-900">{{ income.borrower_name }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="font-semibold text-gray-700">KES {{ income.principal_amount|floatformat:2|intcomma }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="rate-display">{{ income.interest_rate|floatformat:1 }}%</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="interest-amount">KES {{ income.interest_earned|floatformat:2|intcomma }}</span>
                        </td>
                        <td class="px-6 py-4">
                            {% if income.status == 'active' %}
                                <span class="status-badge-active">{{ income.status|title }}</span>
                            {% elif income.status == 'paid' %}
                                <span class="status-badge-paid">{{ income.status|title }}</span>
                            {% else %}
                                <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">{{ income.status|title }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Table Footer -->
        <div class="bg-gray-50 px-6 py-4 border-t">
            <div class="flex justify-between items-center text-sm">
                <span class="text-gray-600">
                    Showing {{ report_data.income_details|length }} of {{ report_data.income_details|length }} records
                </span>
                <div class="flex items-center space-x-6">
                    <div class="text-gray-600">
                        <span class="font-medium">Total Interest:</span>
                        <span class="text-green-600 font-bold ml-1">KES {{ report_data.summary.total_interest_income|default:0|floatformat:2|intcomma }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        {% else %}
        <div class="text-center py-20">
            <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-percentage text-4xl text-green-500"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">No Interest Income Found</h3>
            <p class="text-gray-600 mb-8 max-w-md mx-auto">
                No interest income matches the selected criteria. Try adjusting your filters or check back when loans start generating interest.
            </p>
            <div class="flex justify-center space-x-4">
                <a href="{% url 'loans:new_application' %}" 
                   class="inline-flex items-center px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-xl font-medium transition-colors shadow-lg">
                    <span>+</span> Create New Loan
                </a>
                <a href="{% url 'reports:reports_dashboard' %}" 
                   class="inline-flex items-center px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-colors">
                    <span>←</span> Back to Reports
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
</div>
{% endblock %}