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

{% block title %}Staff Management{% 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>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        <i class="fas fa-users-cog text-primary mr-2"></i>
                        Staff Management
                    </h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">
                        Manage staff users (Admin, Team Leader, Loan Officer, Secretary) and their role-based permissions
                    </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/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <span>+</span>
                        Add Staff User
                    </a>
                    <a href="{% url 'users:access_logs' %}" 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-history mr-2"></i>
                        Access Logs
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <form method="get" class="flex">
                        <input type="text" name="search" class="flex-1 rounded-l-md border-gray-300 focus:border-primary focus:ring-primary" 
                               placeholder="Search staff users..." value="{{ search }}">
                        <button type="submit" class="inline-flex items-center px-3 py-2 border border-l-0 border-gray-300 rounded-r-md bg-gray-50 text-gray-500 hover:bg-gray-100">
                            <span>🔍</span>
                        </button>
                    </form>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <form method="get" class="flex">
                            <input type="hidden" name="search" value="{{ search }}">
                            <select name="role" class="flex-1 rounded-md border-gray-300 focus:border-primary focus:ring-primary" onchange="this.form.submit()">
                                <option value="all" {% if role_filter == 'all' %}selected{% endif %}>All Roles</option>
                                <option value="admin" {% if role_filter == 'admin' %}selected{% endif %}>Admin</option>
                                <option value="team_leader" {% if role_filter == 'team_leader' %}selected{% endif %}>Team Leader</option>
                                <option value="loan_officer" {% if role_filter == 'loan_officer' %}selected{% endif %}>Loan Officer</option>
                                <option value="secretary" {% if role_filter == 'secretary' %}selected{% endif %}>Secretary</option>
                            </select>
                        </form>
                    </div>
                    <div>
                        <form method="get" class="flex">
                            <input type="hidden" name="search" value="{{ search }}">
                            <input type="hidden" name="role" value="{{ role_filter }}">
                            <select name="status" class="flex-1 rounded-md border-gray-300 focus:border-primary focus:ring-primary" onchange="this.form.submit()">
                                <option value="all" {% if status_filter == 'all' %}selected{% endif %}>All Status</option>
                                <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
                                <option value="suspended" {% if status_filter == 'suspended' %}selected{% endif %}>Suspended</option>
                                <option value="dormant" {% if status_filter == 'dormant' %}selected{% endif %}>Dormant</option>
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-5 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-lg font-medium text-gray-900">{{ total_staff }}</dd>
                        </dl>
                    </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-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Admins</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ admin_count }}</dd>
                        </dl>
                    </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">
                        <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-lg font-medium text-gray-900">{{ team_leader_count }}</dd>
                        </dl>
                    </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-handshake text-green-500 text-2xl"></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-lg font-medium text-gray-900">{{ loan_officer_count }}</dd>
                        </dl>
                    </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-user-secret text-purple-500 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Secretaries</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ secretary_count }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if error_message %}
        <div class="bg-red-50 border border-red-200 rounded-md p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <span>⚠️</span>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-700">{{ error_message }}</p>
                </div>
            </div>
        </div>
    {% endif %}

    <!-- Staff Table -->
    <div class="bg-white shadow overflow-hidden sm:rounded-md">
        <div class="px-4 py-5 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Staff Users</h3>
        </div>
        
        {% if admins %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Branch</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Login</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for admin in admins %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        {% if admin.selfie %}
                                            <img class="h-10 w-10 rounded-full" src="{{ admin.selfie.url }}" alt="">
                                        {% else %}
                                            <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                                <span>👤</span>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ admin.get_full_name }}</div>
                                        {% if admin == request.user %}
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">You</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ admin.username }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ admin.email|default:"-" }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ admin.phone_number }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {% if admin.branch %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                        <span>🏢</span>{{ admin.branch.name }}
                                    </span>
                                {% else %}
                                    <span class="text-gray-400">-</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% if admin.role == 'admin' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        <i class="fas fa-crown mr-1"></i>Admin
                                    </span>
                                {% elif admin.role == 'team_leader' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        <span>👔</span>Team Leader
                                    </span>
                                {% elif admin.role == 'loan_officer' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-handshake mr-1"></i>Loan Officer
                                    </span>
                                {% elif admin.role == 'secretary' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                        <i class="fas fa-user-secret mr-1"></i>Secretary
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        {{ admin.role|title }}
                                    </span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% if admin.status == 'active' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
                                {% elif admin.status == 'suspended' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Suspended</span>
                                {% elif admin.status == 'dormant' %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Dormant</span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ admin.status|title }}</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ admin.date_joined|date:"M d, Y" }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {% if admin.last_login %}
                                    {{ admin.last_login|date:"M d, Y H:i" }}
                                {% else %}
                                    <span class="text-gray-500">Never</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <a href="{% url 'users:admin_detail' admin.id %}" 
                                       class="text-primary hover:text-primary/80" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{% url 'users:admin_update' admin.id %}" 
                                       class="text-yellow-600 hover:text-yellow-800" title="Edit">
                                        <span>✏️</span>
                                    </a>
                                    <!-- <a href="{% url 'users:user_permissions' admin.id %}" 
                                       class="text-blue-600 hover:text-blue-800" title="Manage Permissions (Advanced)">
                                        <i class="fas fa-shield-alt"></i>
                                    </a> -->
                                    <a href="{% url 'users:simplified_user_permissions' admin.id %}" 
                                       class="text-purple-600 hover:text-purple-800" 
                                       title="Manage Permissions (Simplified)"
                                       onclick="console.log('Navigating to permissions for user: {{ admin.id }}'); return true;">
                                        <span>🛡️</span>
                                    </a>
                                    {% if admin.status == 'suspended' %}
                                        <a href="{% url 'users:admin_confirm_reactivate' admin.id %}" 
                                           class="text-green-600 hover:text-green-800" title="Reactivate">
                                            <i class="fas fa-user-check"></i>
                                        </a>
                                    {% else %}
                                        <a href="{% url 'users:admin_confirm_delete' admin.id %}" 
                                           class="text-red-600 hover:text-red-800" title="Suspend"
                                           onclick="return confirm('Are you sure you want to suspend this staff user?')">
                                            <i class="fas fa-user-slash"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-12">
                <span>👥</span>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No staff users found</h3>
                <p class="text-gray-500 mb-4">Get started by creating your first staff user.</p>
                <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/90">
                    Create First Staff User
                </a>
            </div>
        {% endif %}
    </div>

    <!-- Pagination -->
    {% if admins.has_other_pages %}
    <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
        <div class="flex-1 flex justify-between sm:hidden">
            {% if admins.has_previous %}
                <a href="?page={{ admins.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if role_filter != 'all' %}&role={{ role_filter }}{% endif %}{% if status_filter != 'all' %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Previous
                </a>
            {% endif %}
            {% if admins.has_next %}
                <a href="?page={{ admins.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if role_filter != 'all' %}&role={{ role_filter }}{% endif %}{% if status_filter != 'all' %}&status={{ status_filter }}{% endif %}" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Next
                </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700">
                    Showing <span class="font-medium">{{ admins.start_index }}</span> to <span class="font-medium">{{ admins.end_index }}</span> of <span class="font-medium">{{ admins.paginator.count }}</span> results
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    {% if admins.has_previous %}
                        <a href="?page=1{% if search %}&search={{ search }}{% endif %}{% if role_filter != 'all' %}&role={{ role_filter }}{% endif %}{% if status_filter != 'all' %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                        <a href="?page={{ admins.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if role_filter != 'all' %}&role={{ role_filter }}{% endif %}{% if status_filter != 'all' %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-angle-left"></i>
                        </a>
                    {% endif %}

                    {% for num in admins.paginator.page_range %}
                        {% if admins.number == num %}
                            <span class="relative inline-flex items-center px-4 py-2 border border-primary bg-primary text-sm font-medium text-white">{{ num }}</span>
                        {% elif num > admins.number|add:'-3' and num < admins.number|add:'3' %}
                            <a href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if role_filter != 'all' %}&role={{ role_filter }}{% endif %}{% if status_filter != 'all' %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">{{ num }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if admins.has_next %}
                        <a href="?page={{ admins.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if role_filter != 'all' %}&role={{ role_filter }}{% endif %}{% if status_filter != 'all' %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-angle-right"></i>
                        </a>
                        <a href="?page={{ admins.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if role_filter != 'all' %}&role={{ role_filter }}{% endif %}{% if status_filter != 'all' %}&status={{ status_filter }}{% endif %}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                    {% endif %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}