{% extends "base.html" %}

{% block title %}Gestión de Usuarios - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="md:flex md:items-center md:justify-between">
            <div class="flex-1 min-w-0">
                <h1 class="text-3xl font-bold leading-7 text-gray-900 dark:text-white sm:text-4xl sm:truncate gradient-text">
                    <i class="fas fa-users mr-3 text-primary-500"></i>
                    Gestión de Usuarios
                </h1>
                <p class="mt-2 text-lg text-gray-600 dark:text-gray-400">
                    Administra los usuarios del sistema, sus roles y permisos de forma segura.
                </p>
            </div>
            <div class="mt-4 flex md:mt-0 md:ml-4">
                <a href="{{ url_for('register') }}" class="btn-primary shadow-glow">
                    <i class="fas fa-plus mr-2"></i>
                    Nuevo Usuario
                </a>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="mb-8">
        <div class="card shadow-xl animate-fade-in-up">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-primary-50 to-blue-50 dark:from-gray-700 dark:to-gray-600">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    <i class="fas fa-search mr-2 text-primary-500"></i>
                    Filtros de Búsqueda
                </h3>
            </div>
            <div class="p-6">
                <form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <!-- Búsqueda general -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            <i class="fas fa-search mr-1 text-primary-500"></i>Buscar
                        </label>
                        <input type="text" name="search" value="{{ request.args.get('search', '') }}"
                               placeholder="Nombre de usuario o email" class="form-input">
                    </div>

                    <!-- Filtro por rol -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            <i class="fas fa-user-shield mr-1 text-indigo-500"></i>Rol
                        </label>
                        <select name="role" class="form-input">
                            <option value="">Todos los roles</option>
                            <option value="admin" {{ 'selected' if request.args.get('role') == 'admin' }}>Administrador</option>
                            <option value="editor" {{ 'selected' if request.args.get('role') == 'editor' }}>Editor</option>
                            <option value="viewer" {{ 'selected' if request.args.get('role') == 'viewer' }}>Solo Lectura</option>
                        </select>
                    </div>

                    <!-- Filtro por estado -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            <i class="fas fa-toggle-on mr-1 text-green-500"></i>Estado
                        </label>
                        <select name="status" class="form-input">
                            <option value="">Todos los estados</option>
                            <option value="active" {{ 'selected' if request.args.get('status') == 'active' }}>Activos</option>
                            <option value="inactive" {{ 'selected' if request.args.get('status') == 'inactive' }}>Inactivos</option>
                        </select>
                    </div>

                    <!-- Registros por página -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            <i class="fas fa-list-ol mr-1 text-purple-500"></i>Por página
                        </label>
                        <select name="per_page" class="form-input">
                            <option value="10" {{ 'selected' if request.args.get('per_page', '10') == '10' }}>10</option>
                            <option value="25" {{ 'selected' if request.args.get('per_page', '10') == '25' }}>25</option>
                            <option value="50" {{ 'selected' if request.args.get('per_page', '10') == '50' }}>50</option>
                            <option value="100" {{ 'selected' if request.args.get('per_page', '10') == '100' }}>100</option>
                        </select>
                    </div>

                    <!-- Botones de acción -->
                    <div class="md:col-span-2 lg:col-span-4 flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <button type="submit" class="btn-primary flex-1 sm:flex-none">
                            <i class="fas fa-search mr-2"></i>Filtrar
                        </button>
                        <a href="{{ url_for('admin_users') }}" class="btn-secondary flex-1 sm:flex-none">
                            <i class="fas fa-times mr-2"></i>Limpiar Filtros
                        </a>
                    </div>

                    <!-- Campos ocultos para mantener otros parámetros -->
                    {% for key, value in request.args.items() %}
                        {% if key not in ['search', 'role', 'status', 'per_page', 'page'] %}
                            <input type="hidden" name="{{ key }}" value="{{ value }}">
                        {% endif %}
                    {% endfor %}
                </form>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="mb-8">
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {% set total_users = users.total %}
            {% set active_users = users.items|selectattr('is_active')|list|length %}
            {% set admin_users = users.items|selectattr('role', 'equalto', 'admin')|list|length %}
            {% set users_with_2fa = users.items|selectattr('two_factor_enabled')|list|length %}

            <!-- Total Users Card -->
            <div class="card hover-lift animate-fade-in-up">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Total Usuarios
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ total_users }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Users Card -->
            <div class="card hover-lift animate-fade-in-up" style="animation-delay: 0.1s;">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-user-check text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Usuarios Activos
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ active_users }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Admin Users Card -->
            <div class="card hover-lift animate-fade-in-up" style="animation-delay: 0.2s;">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-crown text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Administradores
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ admin_users }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2FA Users Card -->
            <div class="card hover-lift animate-fade-in-up" style="animation-delay: 0.3s;">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-shield-alt text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                                    Con 2FA
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ users_with_2fa }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Users List -->
    <div class="animate-fade-in-up" style="animation-delay: 0.4s;">
        <div class="card shadow-xl">
            <div class="px-6 py-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-gray-700 dark:to-gray-600">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">
                    <i class="fas fa-list mr-3 text-indigo-500"></i>
                    Lista de Usuarios
                </h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    Gestiona todos los usuarios registrados en el sistema
                </p>
            </div>

            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600">
                        <tr>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300">
                                <i class="fas fa-user mr-2 text-primary-500"></i>Usuario
                            </th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300">
                                <i class="fas fa-user-shield mr-2 text-indigo-500"></i>Rol
                            </th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300">
                                <i class="fas fa-building mr-2 text-blue-500"></i>Departamento
                            </th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300">
                                <i class="fas fa-shield-alt mr-2 text-green-500"></i>Estado
                            </th>
                            <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300">
                                <i class="fas fa-clock mr-2 text-purple-500"></i>Último Acceso
                            </th>
                            <th scope="col" class="relative px-6 py-4">
                                <span class="sr-only">Acciones</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        {% for user in users.items %}
                        <tr class="hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all duration-300 hover-lift">
                            <td class="px-6 py-6">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-12 w-12">
                                        <div class="h-12 w-12 rounded-xl bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center shadow-lg">
                                            <span class="text-white text-sm font-medium">{{ user.username[0].upper() }}</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-lg font-semibold text-gray-900 dark:text-white">{{ user.username }}</div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-6">
                                <span class="inline-flex items-center px-3 py-2 rounded-lg text-sm font-medium
                                    {% if user.role == 'admin' %}bg-gradient-to-r from-red-100 to-red-200 text-red-800 dark:from-red-900 dark:to-red-800 dark:text-red-200 border border-red-300 dark:border-red-600
                                    {% elif user.role == 'editor' %}bg-gradient-to-r from-yellow-100 to-amber-200 text-yellow-800 dark:from-yellow-900 dark:to-amber-800 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-600
                                    {% else %}bg-gradient-to-r from-green-100 to-emerald-200 text-green-800 dark:from-green-900 dark:to-emerald-800 dark:text-green-200 border border-green-300 dark:border-green-600{% endif %} shadow-sm">
                                    {% if user.role == 'admin' %}
                                        <i class="fas fa-crown mr-2"></i>Administrador
                                    {% elif user.role == 'editor' %}
                                        <i class="fas fa-edit mr-2"></i>Editor
                                    {% else %}
                                        <i class="fas fa-eye mr-2"></i>Solo Lectura
                                    {% endif %}
                                </span>
                            </td>
                            <td class="px-6 py-6">
                                {% if user.department %}
                                    <span class="inline-flex items-center px-3 py-2 rounded-lg text-sm font-medium bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 dark:from-blue-900 dark:to-blue-800 dark:text-blue-200 border border-blue-300 dark:border-blue-600 shadow-sm">
                                        <i class="fas fa-building mr-2"></i>{{ user.department.name }}
                                    </span>
                                {% else %}
                                    <span class="text-gray-400 italic text-sm">Sin asignar</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-6">
                                <div class="flex items-center space-x-2">
                                    {% if user.is_active %}
                                    <span class="inline-flex items-center px-3 py-2 rounded-lg text-sm font-medium bg-gradient-to-r from-green-100 to-emerald-200 text-green-800 dark:from-green-900 dark:to-emerald-800 dark:text-green-200 border border-green-300 dark:border-green-600 shadow-sm">
                                        <i class="fas fa-check-circle mr-2"></i>Activo
                                    </span>
                                    {% else %}
                                    <span class="inline-flex items-center px-3 py-2 rounded-lg text-sm font-medium bg-gradient-to-r from-red-100 to-red-200 text-red-800 dark:from-red-900 dark:to-red-800 dark:text-red-200 border border-red-300 dark:border-red-600 shadow-sm">
                                        <i class="fas fa-times-circle mr-2"></i>Inactivo
                                    </span>
                                    {% endif %}

                                    {% if user.two_factor_enabled %}
                                    <span class="inline-flex items-center px-2 py-1 rounded-lg text-xs font-medium bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 dark:from-blue-900 dark:to-blue-800 dark:text-blue-200 border border-blue-300 dark:border-blue-600" title="2FA Habilitado">
                                        <i class="fas fa-shield-alt"></i>
                                    </span>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="px-6 py-6 text-sm text-gray-500 dark:text-gray-400">
                                {% if user.last_login %}
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar-alt mr-2 text-purple-400"></i>
                                        {{ user.last_login.strftime('%d/%m/%Y %H:%M') }}
                                    </div>
                                {% else %}
                                    <span class="italic flex items-center">
                                        <i class="fas fa-minus-circle mr-2 text-gray-400"></i>Nunca
                                    </span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-6 text-right">
                                <div class="flex items-center justify-end space-x-2">
                                    <!-- Toggle Status Button -->
                                    {% if user.id != current_user.id %}
                                    <button onclick="toggleUserStatus({{ user.id }}, '{{ user.username }}', {{ user.is_active|lower }})"
                                            class="toggle-status-btn p-2 rounded-lg transition-all duration-200 hover:scale-105
                                                   {{ 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900 dark:text-red-300' if user.is_active
                                                      else 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-300' }}"
                                            title="{{ 'Desactivar usuario' if user.is_active else 'Activar usuario' }}">
                                        <i class="fas {{ 'fa-user-times' if user.is_active else 'fa-user-check' }} text-sm"></i>
                                    </button>
                                    {% endif %}

                                    <!-- Edit Button -->
                                    <a href="{{ url_for('admin_edit_user', id=user.id) }}"
                                       class="p-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300
                                              transition-all duration-200 hover:scale-105"
                                       title="Editar usuario">
                                        <i class="fas fa-edit text-sm"></i>
                                    </a>

                                    <!-- Delete Button -->
                                    {% if user.id != current_user.id %}
                                    <button onclick="confirmDeleteUser({{ user.id }}, '{{ user.username }}')"
                                            class="p-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 dark:bg-red-900 dark:text-red-300
                                                   transition-all duration-200 hover:scale-105"
                                            title="Eliminar usuario">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Paginación Mejorada -->
    {% if users.pages > 1 %}
    <div class="mt-8 animate-fade-in-up" style="animation-delay: 0.5s;">
        <div class="card glass p-6">
            <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0">
                <!-- Información de paginación -->
                <div class="text-sm text-gray-700 dark:text-gray-300">
                    Mostrando <span class="font-semibold text-primary-600 dark:text-primary-400">{{ users.per_page * (users.page - 1) + 1 }}</span>
                    a <span class="font-semibold text-primary-600 dark:text-primary-400">{{ users.per_page * users.page if users.has_next else users.total }}</span>
                    de <span class="font-semibold text-primary-600 dark:text-primary-400">{{ users.total }}</span> usuarios
                </div>

                <!-- Navegación de páginas -->
                <div class="flex items-center space-x-2">
                    <!-- Primera página -->
                    {% if users.page > 1 %}
                    <a href="{{ url_for('admin_users', page=1) }}{% if request.args %}?{% for key, value in request.args.items() %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}{% endif %}"
                       class="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                    {% endif %}

                    <!-- Página anterior -->
                    {% if users.has_prev %}
                    <a href="{{ url_for('admin_users', page=users.prev_num) }}{% if request.args %}?{% for key, value in request.args.items() %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}{% endif %}"
                       class="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    {% endif %}

                    <!-- Páginas numeradas -->
                    {% set start_page = [users.page - 2, 1]|max %}
                    {% set end_page = [users.page + 2, users.pages]|min %}

                    {% if start_page > 1 %}
                    <span class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">...</span>
                    {% endif %}

                    {% for page_num in range(start_page, end_page + 1) %}
                        {% if page_num == users.page %}
                        <span class="px-4 py-2 text-sm font-bold text-white bg-gradient-to-r from-primary-500 to-primary-600 border border-primary-500 rounded-lg shadow-md">
                            {{ page_num }}
                        </span>
                        {% else %}
                        <a href="{{ url_for('admin_users', page=page_num) }}{% if request.args %}?{% for key, value in request.args.items() %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}{% endif %}"
                           class="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">
                            {{ page_num }}
                        </a>
                        {% endif %}
                    {% endfor %}

                    {% if end_page < users.pages %}
                    <span class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">...</span>
                    {% endif %}

                    <!-- Página siguiente -->
                    {% if users.has_next %}
                    <a href="{{ url_for('admin_users', page=users.next_num) }}{% if request.args %}?{% for key, value in request.args.items() %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}{% endif %}"
                       class="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    {% endif %}

                    <!-- Última página -->
                    {% if users.page < users.pages %}
                    <a href="{{ url_for('admin_users', page=users.pages) }}{% if request.args %}?{% for key, value in request.args.items() %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}{% endif %}"
                       class="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">
                        <i class="fas fa-angle-double-right"></i>
                    </a>
                    {% endif %}
                </div>

                <!-- Ir a página específica -->
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Ir a:</span>
                    <form method="GET" class="flex items-center space-x-2">
                        {% for key, value in request.args.items() %}
                            {% if key != 'page' %}
                                <input type="hidden" name="{{ key }}" value="{{ value }}">
                            {% endif %}
                        {% endfor %}
                        <input type="number" name="page" min="1" max="{{ users.pages }}"
                               value="{{ users.page }}"
                               class="w-16 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
                        <button type="submit" class="btn-secondary text-xs px-3 py-1">
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Toggle User Status Modal -->
<div id="toggleStatusModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50 backdrop-blur-sm">
    <div class="relative top-20 mx-auto p-5 border-0 max-w-md shadow-2xl rounded-2xl bg-white dark:bg-gray-800">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 mb-4">
                <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-300 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2" id="modalTitle">Cambiar Estado del Usuario</h3>
            <div class="px-7 py-3">
                <p class="text-sm text-gray-500 dark:text-gray-400" id="modalMessage">
                    ¿Estás seguro de que quieres cambiar el estado de este usuario?
                </p>
            </div>
            <div class="px-4 py-3 space-y-3">
                <button onclick="confirmToggleStatus()" class="btn-danger w-full justify-center" id="confirmButton">
                    Confirmar
                </button>
                <button onclick="closeToggleStatusModal()" class="btn-secondary w-full justify-center">
                    <i class="fas fa-times mr-2"></i>
                    Cancelar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete User Modal -->
<div id="deleteUserModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50 backdrop-blur-sm">
    <div class="relative top-20 mx-auto p-5 border-0 max-w-md shadow-2xl rounded-2xl bg-white dark:bg-gray-800">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900 dark:to-red-800 mb-4">
                <i class="fas fa-trash text-red-600 dark:text-red-300 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Eliminar Usuario</h3>
            <div class="px-7 py-3">
                <p class="text-sm text-gray-500 dark:text-gray-400" id="deleteModalMessage">
                    ¿Estás seguro de que quieres eliminar este usuario?
                </p>
                <div class="mt-3 p-3 bg-red-50 dark:bg-red-900/30 rounded-lg border border-red-200 dark:border-red-800">
                    <p class="text-xs text-red-700 dark:text-red-300">
                        <i class="fas fa-exclamation-triangle mr-1"></i>
                        Esta acción no se puede deshacer. Se eliminarán todos los datos asociados al usuario.
                    </p>
                </div>
            </div>
            <div class="px-4 py-3 space-y-3">
                <button onclick="confirmDeleteUser()" class="btn-danger w-full justify-center">
                    <i class="fas fa-trash mr-2"></i>
                    Eliminar Permanentemente
                </button>
                <button onclick="closeDeleteUserModal()" class="btn-secondary w-full justify-center">
                    <i class="fas fa-times mr-2"></i>
                    Cancelar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Notification Toast -->
<div id="notificationToast" class="fixed top-4 right-4 z-50 transform translate-x-full transition-transform duration-300 ease-in-out">
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4 min-w-80">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div id="toastIcon" class="w-6 h-6 rounded-full flex items-center justify-center">
                    <i id="toastIconClass" class="text-sm"></i>
                </div>
            </div>
            <div class="ml-3 w-0 flex-1 pt-0.5">
                <p id="toastTitle" class="text-sm font-medium text-gray-900 dark:text-white"></p>
                <p id="toastMessage" class="mt-1 text-sm text-gray-500 dark:text-gray-400"></p>
            </div>
            <div class="ml-4 flex-shrink-0 flex">
                <button onclick="hideNotification()" class="bg-white dark:bg-gray-800 rounded-md inline-flex text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                    <i class="fas fa-times text-sm"></i>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let toggleUserId = null;
let deleteUserId = null;

// Funciones para cambio de estado
function toggleUserStatus(userId, username, isActive) {
    toggleUserId = userId;
    const action = isActive === 'true' ? 'desactivar' : 'activar';
    const actionCap = isActive === 'true' ? 'Desactivar' : 'Activar';

    document.getElementById('modalTitle').textContent = `${actionCap} Usuario`;
    document.getElementById('modalMessage').textContent = `¿Estás seguro de que quieres ${action} al usuario "${username}"?`;
    document.getElementById('confirmButton').textContent = actionCap;

    if (isActive === 'true') {
        document.getElementById('confirmButton').className = 'btn-danger w-full justify-center';
    } else {
        document.getElementById('confirmButton').className = 'btn-success w-full justify-center';
    }

    document.getElementById('toggleStatusModal').classList.remove('hidden');
}

function closeToggleStatusModal() {
    document.getElementById('toggleStatusModal').classList.add('hidden');
    toggleUserId = null;
}

function confirmToggleStatus() {
    if (toggleUserId) {
        // Deshabilitar botón para evitar clics múltiples
        const confirmBtn = document.getElementById('confirmButton');
        confirmBtn.disabled = true;
        confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Procesando...';

        fetch(`/admin/users/${toggleUserId}/toggle-status`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Estado Actualizado', data.message, 'success');
                closeToggleStatusModal();
                // Recargar la página después de un breve delay
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showNotification('Error', data.message, 'error');
                confirmBtn.disabled = false;
                confirmBtn.textContent = 'Confirmar';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Error', 'Ocurrió un error al cambiar el estado del usuario', 'error');
            confirmBtn.disabled = false;
            confirmBtn.textContent = 'Confirmar';
        });
    }
}

// Funciones para eliminar usuario
function confirmDeleteUser(userId, username) {
    deleteUserId = userId;
    document.getElementById('deleteModalMessage').innerHTML = `¿Estás seguro de que quieres eliminar al usuario "<strong>${username}</strong>"?`;
    document.getElementById('deleteUserModal').classList.remove('hidden');
}

function closeDeleteUserModal() {
    document.getElementById('deleteUserModal').classList.add('hidden');
    deleteUserId = null;
}

function confirmDeleteUser() {
    if (deleteUserId) {
        // Deshabilitar botón para evitar clics múltiples
        const deleteBtn = document.querySelector('#deleteUserModal button[onclick="confirmDeleteUser()"]');
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Eliminando...';

        fetch(`/admin/users/${deleteUserId}/delete`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Usuario Eliminado', data.message, 'success');
                closeDeleteUserModal();
                // Recargar la página después de un breve delay
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showNotification('Error', data.message, 'error');
                deleteBtn.disabled = false;
                deleteBtn.innerHTML = '<i class="fas fa-trash mr-2"></i>Eliminar Permanentemente';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Error', 'Ocurrió un error al eliminar el usuario', 'error');
            deleteBtn.disabled = false;
            deleteBtn.innerHTML = '<i class="fas fa-trash mr-2"></i>Eliminar Permanentemente';
        });
    }
}

// Sistema de notificaciones
function showNotification(title, message, type) {
    const toast = document.getElementById('notificationToast');
    const toastIcon = document.getElementById('toastIcon');
    const toastIconClass = document.getElementById('toastIconClass');
    const toastTitle = document.getElementById('toastTitle');
    const toastMessage = document.getElementById('toastMessage');

    toastTitle.textContent = title;
    toastMessage.textContent = message;

    // Resetear clases
    toastIcon.className = 'w-6 h-6 rounded-full flex items-center justify-center';

    if (type === 'success') {
        toastIcon.classList.add('bg-green-100');
        toastIconClass.className = 'fas fa-check-circle text-green-500 text-sm';
    } else if (type === 'error') {
        toastIcon.classList.add('bg-red-100');
        toastIconClass.className = 'fas fa-exclamation-circle text-red-500 text-sm';
    } else if (type === 'warning') {
        toastIcon.classList.add('bg-yellow-100');
        toastIconClass.className = 'fas fa-exclamation-triangle text-yellow-500 text-sm';
    }

    // Mostrar notificación
    toast.classList.remove('translate-x-full');

    // Ocultar automáticamente después de 4 segundos
    setTimeout(() => {
        hideNotification();
    }, 4000);
}

function hideNotification() {
    const toast = document.getElementById('notificationToast');
    toast.classList.add('translate-x-full');
}

// Event listeners para cerrar modales al hacer clic fuera
document.getElementById('toggleStatusModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeToggleStatusModal();
    }
});

document.getElementById('deleteUserModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteUserModal();
    }
});

// Cerrar modales con tecla Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeToggleStatusModal();
        closeDeleteUserModal();
        hideNotification();
    }
});
</script>
{% endblock %}