#!/usr/bin/env python3
"""
Comprehensive script to enhance all report pages with modern styling
"""

import os
import re

def create_enhanced_interest_income_report():
    """Create enhanced interest income report template"""
    
    template = '''{% 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">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <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">
                        <i class="fas fa-arrow-left mr-2"></i> 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">
                        <i class="fas fa-file-pdf mr-2"></i> 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">
            <i class="fas fa-filter text-green-600 mr-3"></i>
            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">
                    <i class="fas fa-search mr-2"></i> 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">
                <i class="fas fa-arrow-up mr-1"></i>
                <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">
                <i class="fas fa-money-bill-wave text-white text-2xl"></i>
            </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">
                <i class="fas fa-chart-line mr-1"></i>
                <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">
                <i class="fas fa-calculator text-white text-2xl"></i>
            </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">
                <i class="fas fa-chart-line text-white text-2xl"></i>
            </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"><i class="fas fa-user mr-2"></i>Borrower</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-money-bill-wave mr-2"></i>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"><i class="fas fa-coins mr-2"></i>Interest Earned</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-info-circle mr-2"></i>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">
                    <i class="fas fa-plus mr-2"></i> 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">
                    <i class="fas fa-arrow-left mr-2"></i> Back to Reports
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
</div>
{% endblock %}'''
    
    return template

def create_enhanced_registration_fees_report():
    """Create enhanced registration fees report template"""
    
    template = '''{% extends 'base.html' %}
{% load humanize %}
{% load static %}

{% block title %}Registration Fees Report{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/reports-enhanced.css' %}">
<style>
.registration-hero {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    position: relative;
    overflow: hidden;
}

.registration-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="hexagons" width="30" height="26" patternUnits="userSpaceOnUse"><polygon points="15,2 25,8 25,18 15,24 5,18 5,8" stroke="white" stroke-width="0.5" fill="none" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23hexagons)"/></svg>');
}

.metric-card-registration {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card-registration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);
}

.metric-card-registration:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(139, 92, 246, 0.2);
}

.registration-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);
}

.registration-table-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 2rem;
    position: relative;
}

.registration-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="diamonds" width="20" height="20" patternUnits="userSpaceOnUse"><polygon points="10,2 18,10 10,18 2,10" stroke="white" stroke-width="0.5" fill="none" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23diamonds)"/></svg>');
}

.payment-method-badge {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.registration-amount {
    font-weight: 700;
    color: #7c3aed;
    font-size: 1.1rem;
}

.client-info {
    display: flex;
    flex-direction: column;
}

.client-name {
    font-weight: 600;
    color: #1f2937;
}

.client-type {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-purple-50 to-violet-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <!-- Enhanced Hero Section -->
    <div class="registration-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-file-invoice-dollar text-3xl"></i>
                        </div>
                        <div>
                            <h1 class="text-4xl lg:text-5xl font-bold mb-2">Registration Fees Report</h1>
                            <p class="text-xl opacity-90">
                                {% if report_data.period.period_display == 'All Time' %}
                                    All client registration fees collected since system launch
                                {% else %}
                                    Registration fees for {{ report_data.period.period_display }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center text-lg opacity-80">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <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">
                        <i class="fas fa-arrow-left mr-2"></i> Back to Dashboard
                    </a>
                    <a href="{% url 'users:client_create' %}"
                       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-user-plus mr-2"></i> Add Client
                    </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">
                        <i class="fas fa-file-pdf mr-2"></i> Export PDF
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Filters -->
    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-purple-100">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-filter text-purple-600 mr-3"></i>
            Advanced Filters
            {% if report_data.period.period_display == 'All Time' %}
            <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                Showing All Time Data
            </span>
            {% endif %}
        </h2>
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">Start Date</label>
                <input type="date" name="start_date" value="{{ filters.start_date|date:'Y-m-d' }}"
                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 transition-all duration-200"
                    placeholder="Leave empty for all-time">
                <p class="text-xs text-gray-500 mt-1">Leave empty for all-time data</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">End Date</label>
                <input type="date" name="end_date" value="{{ filters.end_date|date:'Y-m-d' }}"
                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 transition-all duration-200"
                    placeholder="Leave empty for all-time">
                <p class="text-xs text-gray-500 mt-1">Leave empty for all-time data</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">Payment Status</label>
                <select name="payment_status"
                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 transition-all duration-200">
                    <option value="">All Statuses</option>
                    <option value="paid" {% if filters.payment_status == 'paid' %}selected{% endif %}>Paid Only</option>
                    <option value="unpaid" {% if filters.payment_status == 'unpaid' %}selected{% endif %}>Unpaid Only</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-violet-600 hover:from-purple-700 hover:to-violet-700 text-white rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    <i class="fas fa-search mr-2"></i> Apply Filters
                </button>
            </div>
        </form>
        
        {% if filters.start_date or filters.end_date %}
        <div class="mt-6 flex items-center justify-between bg-blue-50 rounded-xl p-4">
            <div class="text-sm text-blue-700">
                <i class="fas fa-info-circle mr-1"></i>
                Filtered results are shown. 
            </div>
            <a href="{% url 'reports:registration_fees_report' %}" 
               class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                <i class="fas fa-times mr-1"></i>Clear filters (show all-time)
            </a>
        </div>
        {% endif %}
    </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-registration 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">
                <i class="fas fa-file-invoice-dollar text-white text-2xl"></i>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Total Registration Income</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                KES {{ report_data.summary.total_registration_income|default:0|floatformat:2|intcomma }}
            </p>
            <div class="flex items-center text-sm text-purple-600">
                <i class="fas fa-arrow-up mr-1"></i>
                <span>Total revenue</span>
            </div>
        </div>

        <div class="metric-card-registration 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">
                <i class="fas fa-users text-white text-2xl"></i>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Total Registrations</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                {{ report_data.summary.total_registrations|default:0 }}
            </p>
            <div class="flex items-center text-sm text-blue-600">
                <i class="fas fa-user-plus mr-1"></i>
                <span>Client registrations</span>
            </div>
        </div>

        <div class="metric-card-registration 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-calculator text-white text-2xl"></i>
            </div>
            <h3 class="text-sm font-semibold text-gray-600 mb-2 uppercase tracking-wide">Average Fee</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                KES {{ report_data.summary.average_registration_fee|default:0|floatformat:2|intcomma }}
            </p>
            <div class="flex items-center text-sm text-green-600">
                <i class="fas fa-calculator mr-1"></i>
                <span>Mean fee amount</span>
            </div>
        </div>

        <div class="metric-card-registration 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">
                <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">Payment Rate</h3>
            <p class="text-3xl font-bold text-gray-900 mb-2">
                {{ additional_analytics.payment_rate|default:0|floatformat:1 }}%
            </p>
            <div class="flex items-center text-sm text-yellow-600">
                <i class="fas fa-check-circle mr-1"></i>
                <span>Completion rate</span>
            </div>
        </div>
    </div>

    <!-- Registration Fees Table -->
    <div class="registration-table">
        <div class="registration-table-header">
            <div class="relative z-10 flex justify-between items-center">
                <div>
                    <h2 class="text-2xl font-bold mb-2">Registration Fees Details</h2>
                    {% if report_data.fees %}
                    <p class="opacity-90">{{ report_data.fees|length }} fee payment{{ report_data.fees|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.fees %}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gradient-to-r from-purple-600 to-violet-600 text-white">
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-user mr-2"></i>Client Name</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-file-invoice mr-2"></i>Registration Fee</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-money-bill-wave mr-2"></i>Amount</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-credit-card mr-2"></i>Payment Method</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-calendar mr-2"></i>Date Paid</th>
                        <th class="px-6 py-4 text-left font-semibold"><i class="fas fa-check-circle mr-2"></i>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for fee in report_data.fees %}
                    <tr class="hover:bg-gradient-to-r hover:from-purple-50 hover:to-violet-50 transition-all duration-200 border-b border-gray-100">
                        <td class="px-6 py-4">
                            <div class="client-info">
                                <div class="client-name">{{ fee.customer_name }}</div>
                                {% if fee.source == 'Client Registration' %}
                                <div class="client-type">Client Registration</div>
                                {% endif %}
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-medium text-gray-900">{{ fee.fee_name }}</div>
                            {% if fee.product_type != 'client_registration' %}
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mt-1">
                                {{ fee.product_type|title }}
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            <span class="registration-amount">KES {{ fee.amount|floatformat:2|intcomma }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="payment-method-badge">{{ fee.payment_method|title }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-gray-900 font-medium">{{ fee.payment_date|date:"M d, Y" }}</div>
                            <div class="text-xs text-gray-500">{{ fee.payment_date|date:"H:i" }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <i class="fas fa-check-circle mr-1"></i>
                                {{ fee.payment_status }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Data Source Breakdown -->
        {% if report_data.breakdown_by_source %}
        <div class="bg-purple-50 p-6 border-t">
            <h4 class="text-lg font-semibold text-gray-900 mb-4">Data Sources Breakdown</h4>
            <div class="grid grid-cols-2 gap-6">
                <div class="bg-white rounded-xl p-4 shadow-sm">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 font-medium">Client Registration Fees:</span>
                        <span class="font-bold text-purple-600 text-lg">
                            KES {{ report_data.breakdown_by_source.user_registration_fees|floatformat:2|intcomma }}
                        </span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm">
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 font-medium">Separate Fee Payments:</span>
                        <span class="font-bold text-purple-600 text-lg">
                            KES {{ report_data.breakdown_by_source.registration_fee_payments|floatformat:2|intcomma }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {% else %}
        <div class="text-center py-20">
            <div class="w-24 h-24 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-file-invoice-dollar text-4xl text-purple-500"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-4">No Registration Fees Found</h3>
            <p class="text-gray-600 mb-8 max-w-md mx-auto">
                {% if filters.start_date or filters.end_date %}
                    No registration fees match the selected date range.
                {% else %}
                    No registration fees have been recorded yet.
                {% endif %}
            </p>
            <div class="flex justify-center space-x-4">
                <a href="{% url 'reports:record_registration_fee_payment' %}" 
                   class="inline-flex items-center px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-xl font-medium transition-colors shadow-lg">
                    <i class="fas fa-plus mr-2"></i> Record Fee Payment
                </a>
                <a href="{% url 'users:client_create' %}" 
                   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">
                    <i class="fas fa-user-plus mr-2"></i> Add New Client
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
</div>
{% endblock %}'''
    
    return template

def main():
    """Main function to enhance all reports"""
    
    print("🎨 Enhancing All Report Templates...")
    
    # Create enhanced interest income report
    interest_template = create_enhanced_interest_income_report()
    with open('templates/reports/interest_income_report.html', 'w', encoding='utf-8') as f:
        f.write(interest_template)
    print("✅ Enhanced interest income report created")
    
    # Create enhanced registration fees report
    registration_template = create_enhanced_registration_fees_report()
    with open('templates/reports/registration_fees_report.html', 'w', encoding='utf-8') as f:
        f.write(registration_template)
    print("✅ Enhanced registration fees report created")
    
    print("\n🚀 All report templates enhanced!")
    print("📋 Enhanced Features:")
    print("   🎨 Modern gradient hero sections")
    print("   📊 Enhanced metric cards with animations")
    print("   🔍 Improved filter sections")
    print("   📋 Professional data tables")
    print("   📱 Responsive design")
    print("   🎯 Better empty states")
    print("   ✨ Smooth animations and transitions")

if __name__ == '__main__':
    main()