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

{% block title %}Reports Dashboard -RuralPointAdvance{% endblock %}

{% block content %}
<div class="min-h-screen py-8">
    <div class="mb-8">
        <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
            Loan Reports
        </h2>
        <p class="mt-1 text-sm leading-6 text-gray-600">
            Comprehensive overview of loan performance and statistics
        </p>
    </div>

    <!-- Enhanced Analytics Dashboard Link -->
    <div class="mb-8">
        <div class="rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold mb-2">
                        <i class="fas fa-chart-line mr-2"></i>
                        Enhanced Loan Analytics Dashboard
                    </h3>
                    <p class="text-blue-100 mb-4">
                        Generate comprehensive PDF reports with advanced visualizations including bar charts, 
                        pie charts, and trend analysis. View reports in browser or download as PDF.
                    </p>
                    <div class="flex space-x-4">
                        <a href="{% url 'reports:loan_analytics_dashboard' %}" 
                           class="inline-flex items-center px-4 py-2 bg-white text-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
                            <i class="fas fa-chart-bar mr-2"></i>
                            Access Enhanced Analytics
                        </a>
                    </div>
                </div>
                <div class="hidden md:block">
                    <i class="fas fa-chart-pie text-6xl text-blue-200 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
        <!-- Disbursement Trend -->
        <div class="rounded-lg bg-white p-6 shadow">
            <h3 class="text-lg font-medium leading-6 text-gray-900">
                Loan Disbursement Trend
            </h3>
            <div class="mt-5 h-80">
                <canvas id="disbursementTrendChart"></canvas>
            </div>
        </div>

        <!-- Loan Status Distribution -->
        <div class="rounded-lg bg-white p-6 shadow">
            <h3 class="text-lg font-medium leading-6 text-gray-900">
                Loan Status Distribution
            </h3>
            <div class="mt-5 h-80">
                <canvas id="loanStatusChart"></canvas>
            </div>
        </div>

        <!-- Repayment Performance -->
        <div class="col-span-full rounded-lg bg-white p-6 shadow">
            <h3 class="text-lg font-medium leading-6 text-gray-900">
                Repayment Performance
            </h3>
            <div class="mt-5 h-80">
                <canvas id="repaymentChart"></canvas>
            </div>
        </div>

        <!-- Summary Statistics -->
        <div class="col-span-full grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <div class="rounded-lg bg-white p-6 shadow">
                <h4 class="text-sm font-medium text-gray-500">
                    Total Active Loans
                </h4>
                <p class="mt-2 text-3xl font-semibold text-gray-900" id="totalActiveLoans">-</p>
                <p class="mt-2 text-sm text-gray-500">
                    <span id="totalActiveLoansChange" class="text-green-600">-</span> vs last month
                </p>
            </div>

            <div class="rounded-lg bg-white p-6 shadow">
                <h4 class="text-sm font-medium text-gray-500">
                    Total Disbursed Amount
                </h4>
                <p class="mt-2 text-3xl font-semibold text-gray-900" id="totalDisbursed">-</p>
                <p class="mt-2 text-sm text-gray-500">
                    <span id="totalDisbursedChange" class="text-green-600">-</span> vs last month
                </p>
            </div>

            <div class="rounded-lg bg-white p-6 shadow">
                <h4 class="text-sm font-medium text-gray-500">
                    Average Loan Size
                </h4>
                <p class="mt-2 text-3xl font-semibold text-gray-900" id="avgLoanSize">-</p>
                <p class="mt-2 text-sm text-gray-500">
                    <span id="avgLoanSizeChange" class="text-red-600">-</span> vs last month
                </p>
            </div>

            <div class="rounded-lg bg-white p-6 shadow">
                <h4 class="text-sm font-medium text-gray-500">Default Rate</h4>
                <p class="mt-2 text-3xl font-semibold text-gray-900" id="defaultRate">-</p>
                <p class="mt-2 text-sm text-gray-500">
                    <span id="defaultRateChange" class="text-green-600">-</span> vs last month
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fetch data from API
    fetch('/reports/api/report-data/')
        .then(response => response.json())
        .then(data => {
            // Initialize charts
            initDisbursementTrendChart(data.disbursementTrend);
            initLoanStatusChart(data.loanStatusDistribution);
            initRepaymentChart(data.repaymentPerformance);
            updateSummaryStats(data.summaryStats);
        })
        .catch(error => console.error('Error fetching report data:', error));
});

function initDisbursementTrendChart(data) {
    const ctx = document.getElementById('disbursementTrendChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
            },
        },
    });
}

function initLoanStatusChart(data) {
    const ctx = document.getElementById('loanStatusChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                },
            },
        },
    });
}

function initRepaymentChart(data) {
    const ctx = document.getElementById('repaymentChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
            },
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        },
    });
}

function updateSummaryStats(stats) {
    // Format numbers
    const formatCurrency = new Intl.NumberFormat('en-KE', {
        style: 'currency',
        currency: 'KES',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
    });

    const formatPercent = new Intl.NumberFormat('en-KE', {
        style: 'percent',
        minimumFractionDigits: 1,
        maximumFractionDigits: 1,
    });

    // Update total active loans
    document.getElementById('totalActiveLoans').textContent = stats.totalActiveLoans.value;
    updateChangeIndicator('totalActiveLoansChange', stats.totalActiveLoans.change);

    // Update total disbursed
    document.getElementById('totalDisbursed').textContent = formatCurrency.format(stats.totalDisbursed.value);
    updateChangeIndicator('totalDisbursedChange', stats.totalDisbursed.change);

    // Update average loan size
    document.getElementById('avgLoanSize').textContent = formatCurrency.format(stats.avgLoanSize.value);
    updateChangeIndicator('avgLoanSizeChange', stats.avgLoanSize.change);

    // Update default rate
    document.getElementById('defaultRate').textContent = formatPercent.format(stats.defaultRate.value / 100);
    updateChangeIndicator('defaultRateChange', stats.defaultRate.change);
}

function updateChangeIndicator(elementId, change) {
    const element = document.getElementById(elementId);
    const formattedChange = new Intl.NumberFormat('en-KE', {
        signDisplay: 'always',
        minimumFractionDigits: 1,
        maximumFractionDigits: 1,
    }).format(change) + '%';
    
    if (change > 0) {
        element.textContent = '↑ ' + formattedChange;
        element.className = 'text-green-600';
    } else if (change < 0) {
        element.textContent = '↓ ' + formattedChange;
        element.className = 'text-red-600';
    } else {
        element.textContent = formattedChange;
        element.className = 'text-gray-600';
    }
}
</script>
{% endblock %}