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

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

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        <i class="fas fa-users-cog text-primary mr-3"></i>
                        Staff Management Dashboard
                    </h1>
                    <p class="mt-2 text-sm text-gray-600">
                        Comprehensive staff management with role-based permissions and access control
                    </p>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'users:admin_create' %}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <span>+</span>
                        Add Staff Member
                    </a>
                    <a href="{% url 'users:default_permissions' %}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <i class="fas fa-shield-alt mr-2"></i>
                        Default Permissions
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Staff Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span>👥</span>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Staff</dt>
                            <dd class="text-2xl font-bold text-gray-900">{{ staff_stats.total_staff }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="flex items-center text-sm">
                        <span class="text-green-600 font-medium">{{ staff_stats.active_staff }} Active</span>
                        <span class="text-gray-500 mx-2">•</span>
                        <span class="text-red-600 font-medium">{{ staff_stats.suspended_staff }} Suspended</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-crown text-red-500 text-3xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Administrators</dt>
                            <dd class="text-2xl font-bold text-gray-900">{{ staff_stats.admin_count }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{% url 'users:admin_list' %}?role=admin" class="text-sm text-primary hover:text-primary-dark">
                        View all admins →
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span>👔</span>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Team Leaders</dt>
                            <dd class="text-2xl font-bold text-gray-900">{{ staff_stats.team_leader_count }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{% url 'users:admin_list' %}?role=team_leader" class="text-sm text-primary hover:text-primary-dark">
                        View all team leaders →
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-handshake text-green-500 text-3xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Loan Officers</dt>
                            <dd class="text-2xl font-bold text-gray-900">{{ staff_stats.loan_officer_count }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="{% url 'users:admin_list' %}?role=loan_officer" class="text-sm text-primary hover:text-primary-dark">
                        View all loan officers →
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Permission Summary -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">
                <i class="fas fa-shield-alt text-primary mr-2"></i>
                Permission Summary by Role
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                {% for role, stats in permission_summary.items %}
                <div class="border border-gray-200 rounded-lg p-4">
                    <h4 class="text-md font-medium text-gray-900 mb-2">{{ role|title|replace:"_":" " }}</h4>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Total Permissions:</span>
                            <span class="font-medium">{{ stats.total_permissions }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Allowed:</span>
                            <span class="font-medium text-green-600">{{ stats.allowed_permissions }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">Custom Overrides:</span>
                            <span class="font-medium text-blue-600">{{ stats.custom_permissions }}</span>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="{% url 'users:default_permissions' %}?role={{ role }}" 
                           class="text-sm text-primary hover:text-primary-dark">
                            Manage defaults →
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Recent Activities -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">
                    <i class="fas fa-history text-primary mr-2"></i>
                    Recent Staff Activities
                </h3>
                <a href="{% url 'users:permission_audit_log' %}" 
                   class="text-sm text-primary hover:text-primary-dark">
                    View full audit log →
                </a>
            </div>
            
            {% if recent_activities %}
            <div class="flow-root">
                <ul class="-mb-8">
                    {% for activity in recent_activities %}
                    <li>
                        <div class="relative pb-8">
                            {% if not forloop.last %}
                            <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                            {% endif %}
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full bg-primary flex items-center justify-center ring-8 ring-white">
                                        <span>👤</span>
                                    </span>
                                </div>
                                <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                    <div>
                                        <p class="text-sm text-gray-500">
                                            <span class="font-medium text-gray-900">{{ activity.user.get_full_name }}</span>
                                            {{ activity.description }}
                                        </p>
                                    </div>
                                    <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                        {{ activity.accessed_at|timesince }} ago
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% else %}
            <div class="text-center py-6">
                <i class="fas fa-history text-gray-400 text-3xl mb-2"></i>
                <p class="text-gray-500">No recent activities to display</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">
                <span>⚡</span>
                Quick Actions
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <a href="{% url 'users:admin_create' %}" 
                   class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <span>👤+</span>
                    <div>
                        <p class="font-medium text-gray-900">Add Staff</p>
                        <p class="text-sm text-gray-500">Create new staff member</p>
                    </div>
                </a>
                
                <a href="{% url 'users:default_permissions' %}" 
                   class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fas fa-shield-alt text-blue-500 text-xl mr-3"></i>
                    <div>
                        <p class="font-medium text-gray-900">Default Permissions</p>
                        <p class="text-sm text-gray-500">Manage role defaults</p>
                    </div>
                </a>
                
                <a href="{% url 'users:permission_templates' %}" 
                   class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <span>📋</span>
                    <div>
                        <p class="font-medium text-gray-900">Permission Templates</p>
                        <p class="text-sm text-gray-500">Quick permission sets</p>
                    </div>
                </a>
                
                <a href="{% url 'users:admin_list' %}" 
                   class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    <span>📋</span>
                    <div>
                        <p class="font-medium text-gray-900">Staff List</p>
                        <p class="text-sm text-gray-500">View all staff members</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}