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

{% block title %}Portfolio Management Dashboard{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="bg-white bg-opacity-20 p-3 rounded-full">
                        <i class="fas fa-briefcase text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold">Portfolio Management</h1>
                        <p class="text-blue-100 mt-1">Manage client assignments and portfolio performance</p>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'users:assign_clients' %}"
                        class="bg-blue-100 bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 flex items-center space-x-2 text-white hover:text-white border border-white border-opacity-30 hover:border-opacity-50">
                        <span>👤+</span>
                        <span class="text-xl font-medium">Assign Clients</span>
                    </a>
                    <a href="{% url 'users:portfolio_analytics' %}"
                        class="bg-blue-500 bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 flex items-center space-x-2 text-white hover:text-white border border-white border-opacity-30 hover:border-opacity-50">
                        <span>📈</span>
                        <span class="text-xl font-medium">Analytics</span>
                    </a>
                    <a href="{% url 'users:enhanced_portfolio_analytics' %}"
                        class="bg-purple-500 bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 flex items-center space-x-2 text-white hover:text-white border border-white border-opacity-30 hover:border-opacity-50">
                        <span>📊</span>
                        <span class="text-xl font-medium">Enhanced Analytics</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <!-- Overview Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <a href="{% url 'users:filtered_clients' %}?status=all"
                class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow cursor-pointer block">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <span>👥</span>
                    </div>
                    <div class="ml-4">
                        <div class="text-2xl font-bold text-gray-900">{{ total_clients }}</div>
                        <div class="text-sm text-gray-600">Total Clients</div>
                    </div>
                </div>
            </a>

            <a href="{% url 'users:filtered_clients' %}?status=assigned"
                class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow cursor-pointer block">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-check text-green-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <div class="text-2xl font-bold text-gray-900">{{ total_assigned }}</div>
                        <div class="text-sm text-gray-600">Assigned Clients</div>
                    </div>
                </div>
            </a>

            <a href="{% url 'users:filtered_clients' %}?status=unassigned"
                class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow cursor-pointer block">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-clock text-yellow-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <div class="text-2xl font-bold text-gray-900">{{ unassigned_clients }}</div>
                        <div class="text-sm text-gray-600">Unassigned Clients</div>
                    </div>
                </div>
            </a>

            <a href="{% url 'users:portfolio_analytics' %}"
                class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow cursor-pointer block">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-percentage text-purple-600 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <div class="text-2xl font-bold text-gray-900">{{ assignment_rate|floatformat:1 }}%</div>
                        <div class="text-sm text-gray-600">Assignment Rate</div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Portfolio Managers Performance -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <span>👥</span>
                    Portfolio Managers Performance
                </h2>
            </div>
            <div class="p-6">
                {% if manager_stats %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% for stats in manager_stats %}
                    <div
                        class="bg-gradient-to-br from-white to-gray-50 rounded-xl border border-gray-200 p-6 hover:shadow-lg transition-all duration-300 relative">
                        <!-- Rank Badge -->
                        <div
                            class="absolute top-4 right-4 w-8 h-8 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
                            {{ forloop.counter }}
                        </div>

                        <!-- Manager Info -->
                        <div class="flex items-center mb-6">
                            <div
                                class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold">
                                {{ stats.manager.first_name|first }}{{ stats.manager.last_name|first }}
                            </div>
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-900">{{ stats.manager.get_full_name }}</h3>
                                <p class="text-sm text-gray-600">{{ stats.manager.get_role_display }}</p>
                            </div>
                        </div>

                        <!-- Performance Metrics -->
                        <div class="grid grid-cols-3 gap-4 mb-6">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-blue-600">{{ stats.total_clients }}</div>
                                <div class="text-xs text-gray-600">Clients</div>
                            </div>
                            <div class="text-center border-l border-r border-gray-200">
                                <div class="text-2xl font-bold text-green-600">{{ stats.active_loans }}</div>
                                <div class="text-xs text-gray-600">Active Loans</div>
                            </div>
                            <div class="text-center">
                                <div class="text-lg font-bold text-purple-600">{{ stats.total_disbursed|floatformat:0 }}
                                </div>
                                <div class="text-xs text-gray-600">Disbursed</div>
                            </div>
                        </div>

                        <!-- Performance Indicators -->
                        <div class="space-y-3">
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">Collection Rate</span>
                                    <span class="font-semibold">{{ stats.collection_rate|floatformat:1 }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-green-500 h-2 rounded-full"
                                        style="width: {{ stats.collection_rate }}%"></div>
                                </div>
                            </div>

                            {% if stats.default_rate %}
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">Default Rate</span>
                                    <span class="font-semibold text-red-600">{{ stats.default_rate|floatformat:1}}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-red-500 h-2 rounded-full" style="width: {{ stats.default_rate }}%">
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>

                        <!-- Action Button -->
                        <div class="mt-6">
                            <a href="{% url 'users:portfolio_manager_detail' stats.manager.id %}"
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-2 px-4 rounded-lg text-sm font-semibold transition-colors block">
                                View Details
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-12">
                    <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span>👥</span>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">No Portfolio Managers</h3>
                    <p class="text-gray-600">No portfolio managers found in the system.</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Unassigned Clients -->
        {% if unassigned_clients_list %}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-user-clock mr-3 text-yellow-600"></i>
                    Unassigned Clients ({{ unassigned_clients_list.count }})
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for client in unassigned_clients_list|slice:":9" %}
                    <div
                        class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 hover:bg-yellow-100 transition-colors">
                        <div class="flex items-center justify-between">
                            <div>
                                <h4 class="font-semibold text-gray-900">{{ client.get_full_name }}</h4>
                                <p class="text-sm text-gray-600">{{ client.email|default:"No email" }}</p>
                                <p class="text-sm text-gray-600">{{ client.phone_number|default:"No phone" }}</p>
                            </div>
                            <a href="{% url 'users:reassign_client' client.id %}"
                                class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm font-semibold transition-colors">
                                Assign
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if unassigned_clients_list.count > 9 %}
                <div class="mt-6 text-center">
                    <a href="{% url 'users:assign_clients' %}"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition-colors">
                        View All Unassigned Clients ({{ unassigned_clients_list.count }})
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}