{% load humanize %}

<div class="loan-analytics-report bg-white p-6 rounded-lg shadow">
    <!-- Report Header -->
    <div class="mb-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-6 text-white">
        <h1 class="text-3xl font-bold mb-2">
            {% if borrower %}
                <i class="fas fa-user-chart mr-2"></i>Client Analytics Report - {{ borrower.get_full_name }}
            {% else %}
                <span>📈</span>Comprehensive Loan Analytics Report
            {% endif %}
        </h1>
        <p class="text-blue-100">Generated on {{ stats.generated_at|date:"F d, Y H:i" }}</p>
        {% if borrower %}
        <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4 text-white">
            <div>
                <p class="text-sm opacity-75">Client ID</p>
                <p class="font-semibold">{{ borrower.id_number }}</p>
            </div>
            <div>
                <p class="text-sm opacity-75">Registration Date</p>
                <p class="font-semibold">{{ borrower.date_joined|date:"M d, Y" }}</p>
            </div>
            <div>
                <p class="text-sm opacity-75">Business Type</p>
                <p class="font-semibold">{{ borrower.business_type|default:"N/A" }}</p>
            </div>
            <div>
                <p class="text-sm opacity-75">Credit Score</p>
                <p class="font-semibold">{{ borrower.credit_score|default:"N/A" }}/100</p>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Key Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="bg-white p-4 rounded-lg border border-gray-200">
            <h3 class="text-sm font-medium text-gray-500">Total Loans</h3>
            <p class="mt-1 text-2xl font-semibold text-gray-900">{{ stats.total_loans|default:0|intcomma }}</p>
            {% if stats.loan_growth %}
            <p class="mt-1 text-sm {% if stats.loan_growth >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                {{ stats.loan_growth|floatformat:1 }}% from last month
            </p>
            {% endif %}
        </div>
        
        <div class="bg-white p-4 rounded-lg border border-gray-200">
            <h3 class="text-sm font-medium text-gray-500">Total Amount</h3>
            <p class="mt-1 text-2xl font-semibold text-gray-900" data-stat="total-borrowed">KES {{ stats.total_amount|default:0|intcomma }}</p>
            {% if stats.amount_growth %}
            <p class="mt-1 text-sm {% if stats.amount_growth >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                {{ stats.amount_growth|floatformat:1 }}% from last month
            </p>
            {% endif %}
        </div>
        
        <div class="bg-white p-4 rounded-lg border border-gray-200">
            <h3 class="text-sm font-medium text-gray-500">Active Loans</h3>
            <p class="mt-1 text-2xl font-semibold text-gray-900" data-stat="active-loans">{{ stats.active_loans|default:0|intcomma }}</p>
            <p class="mt-1 text-sm text-gray-600">
                {{ stats.active_percentage|default:0|floatformat:1 }}% of total
            </p>
        </div>
        
        <div class="bg-white p-4 rounded-lg border border-gray-200">
            <h3 class="text-sm font-medium text-gray-500">Default Rate</h3>
            <p class="mt-1 text-2xl font-semibold {% if stats.default_rate < 5 %}text-green-600{% elif stats.default_rate < 10 %}text-yellow-600{% else %}text-red-600{% endif %}" data-risk="level">
                {{ stats.risk_level|default:"Unknown" }}
            </p>
            {% if stats.default_rate_change %}
            <p class="mt-1 text-sm {% if stats.default_rate_change <= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                {{ stats.default_rate_change|floatformat:1 }}% from last month
            </p>
            {% endif %}
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Loan Status Distribution -->
        <div class="bg-white p-6 rounded-lg border border-gray-200">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Loan Status Distribution</h3>
            <div class="h-64" id="loanStatusChart" data-chart='{{ charts.loan_status_chart|safe }}'></div>
        </div>

        <!-- Monthly Trend -->
        <div class="bg-white p-6 rounded-lg border border-gray-200">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Monthly Disbursement Trend</h3>
            <div class="h-64" id="monthlyTrendChart" data-chart='{{ charts.monthly_trend_chart|safe }}'></div>
        </div>
    </div>

    <!-- Key Insights -->
    {% if insights %}
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Key Insights</h2>
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="px-4 py-5 sm:p-6">
                <div class="space-y-4">
                    {% for insight in insights %}
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <span>💡</span>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-gray-900" data-insight>{{ insight }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Detailed Statistics -->
    {% if stats.detailed_metrics %}
    <div>
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Detailed Metrics</h2>
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="px-4 py-5 sm:p-6">
                <dl class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    {% for metric in stats.detailed_metrics %}
                    <div class="px-4 py-5 bg-gray-50 rounded-lg overflow-hidden sm:p-6">
                        <dt class="text-sm font-medium text-gray-500 truncate">{{ metric.name }}</dt>
                        <dd class="mt-1 text-3xl font-semibold text-gray-900">{{ metric.value }}</dd>
                        {% if metric.change %}
                        <dd class="mt-1 text-sm {% if metric.change >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                            {{ metric.change|floatformat:1 }}% from previous period
                        </dd>
                        {% endif %}
                    </div>
                    {% endfor %}
                </dl>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Executive Summary -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <span>🚩</span>Executive Summary
        </h2>
        <div class="bg-white rounded-lg border border-gray-200 p-6">
            <div class="prose max-w-none">
                <p class="text-gray-700">{{ stats.executive_summary|default:"No executive summary available." }}</p>
            </div>
        </div>
    </div>

    <!-- Portfolio Analysis -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <i class="fas fa-briefcase mr-2"></i>Portfolio Analysis
        </h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Portfolio Composition -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Portfolio Composition</h3>
                <div class="h-64" id="portfolioCompositionChart" data-chart='{{ charts.portfolio_composition|safe }}'></div>
            </div>

            <!-- Loan Performance -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Loan Performance</h3>
                <div class="h-64" id="loanPerformanceChart" data-chart='{{ charts.loan_performance|safe }}'></div>
            </div>
        </div>
    </div>

    <!-- Risk Analysis -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <i class="fas fa-shield-alt mr-2"></i>Risk Analysis
        </h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Risk Metrics -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Risk Metrics</h3>
                <div class="space-y-4">
                    {% for metric in stats.risk_metrics %}
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">{{ metric.name }}</span>
                        <span class="font-semibold {% if metric.status == 'good' %}text-green-600{% elif metric.status == 'warning' %}text-yellow-600{% else %}text-red-600{% endif %}">
                            {{ metric.value }}
                        </span>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Risk Factors -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Risk Factors</h3>
                <ul class="space-y-2">
                    {% for factor in stats.risk_factors %}
                    <li class="flex items-start">
                        <span class="flex-shrink-0 h-6 w-6 rounded-full flex items-center justify-center {% if factor.impact == 'high' %}bg-red-100 text-red-600{% elif factor.impact == 'medium' %}bg-yellow-100 text-yellow-600{% else %}bg-blue-100 text-blue-600{% endif %} mr-3">
                            <span>⚠️</span>
                        </span>
                        <span class="text-gray-700">{{ factor.description }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <!-- Profitability Analysis -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <span>🪙</span>Profitability Analysis
        </h2>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Revenue Metrics -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Revenue Metrics</h3>
                <div class="space-y-4">
                    {% for metric in stats.revenue_metrics %}
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600">{{ metric.name }}</span>
                        <span class="font-semibold">{{ metric.value }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Revenue Trend -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Revenue Trend</h3>
                <div class="h-64" id="revenueTrendChart" data-chart='{{ charts.revenue_trend|safe }}'></div>
            </div>
        </div>
    </div>

    <!-- Operational Metrics -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <span>⚙️</span>Operational Metrics
        </h2>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {% for metric in stats.operational_metrics %}
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-2">{{ metric.name }}</h3>
                <p class="text-3xl font-bold {% if metric.trend == 'up' %}text-green-600{% elif metric.trend == 'down' %}text-red-600{% else %}text-gray-900{% endif %}">
                    {{ metric.value }}
                </p>
                <p class="text-sm text-gray-500 mt-1">{{ metric.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Recommendations -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
            <span>💡</span>Recommendations
        </h2>
        <div class="bg-white rounded-lg border border-gray-200 p-6">
            <div class="space-y-4">
                {% for recommendation in stats.recommendations %}
                <div class="flex items-start">
                    <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
                        <span>💡</span>
                    </div>
                    <div>
                        <h4 class="text-lg font-medium text-gray-900">{{ recommendation.title }}</h4>
                        <p class="text-gray-700 mt-1">{{ recommendation.description }}</p>
                        {% if recommendation.action_items %}
                        <ul class="mt-2 space-y-1">
                            {% for item in recommendation.action_items %}
                            <li class="flex items-center text-sm text-gray-600">
                                <span>→</span>
                                {{ item }}
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>