{% extends "base.html" %}

{% block title %}Dashboard - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="md:flex md:items-center md:justify-between mb-8">
        <div class="flex-1 min-w-0">
            <h2 class="text-3xl font-bold leading-7 text-gray-900 dark:text-white sm:text-4xl sm:truncate gradient-text">
                Dashboard
            </h2>
            <p class="mt-2 text-lg text-gray-600 dark:text-gray-400">
                Bienvenido, <span class="font-semibold text-primary-600 dark:text-primary-400">{{ current_user.username }}</span>. Aquí tienes un resumen de tu gestor de contraseñas.
            </p>
        </div>
        {% if current_user.can_edit() %}
        <div class="mt-4 flex md:mt-0 md:ml-4">
            <a href="{{ url_for('new_password') }}" class="btn-primary shadow-glow">
                <i class="fas fa-plus mr-2"></i>
                Nueva Contraseña
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Stats -->
    <div class="mt-8">
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Total Passwords -->
            <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-key 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 Contraseñas
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ total_passwords }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4">
                    <div class="text-sm">
                        <a href="{{ url_for('list_passwords') }}" class="font-semibold text-primary-700 dark:text-primary-300 hover:text-primary-900 dark:hover:text-primary-100 transition-colors duration-200">
                            Ver todas <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Expired Passwords -->
            <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-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-exclamation-triangle 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">
                                    Caducadas
                                </dt>
                                <dd class="text-3xl font-bold text-gray-900 dark:text-white">
                                    {{ expired_passwords }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-r from-gray-50 to-red-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4">
                    <div class="text-sm">
                        <a href="{{ url_for('list_passwords', expired_only=true) }}" class="font-semibold text-primary-700 dark:text-primary-300 hover:text-primary-900 dark:hover:text-primary-100 transition-colors duration-200">
                            Ver caducadas <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- User Role -->
            <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-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-user-shield 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">
                                    Tu Rol
                                </dt>
                                <dd class="text-xl font-bold text-gray-900 dark:text-white">
                                    {{ current_user.role.title() }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-r from-gray-50 to-green-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4">
                    <div class="text-sm">
                        <a href="{{ url_for('profile') }}" class="font-semibold text-primary-700 dark:text-primary-300 hover:text-primary-900 dark:hover:text-primary-100 transition-colors duration-200">
                            Ver perfil <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Department -->
            <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-building 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">
                                    Departamento
                                </dt>
                                <dd class="text-lg font-bold text-gray-900 dark:text-white">
                                    {{ current_user.department.name if current_user.department else 'Sin asignar' }}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-r from-gray-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4">
                    <div class="text-sm">
                        {% if current_user.department %}
                        <a href="{{ url_for('list_passwords', department_id=current_user.department_id) }}" class="font-semibold text-primary-700 dark:text-primary-300 hover:text-primary-900 dark:hover:text-primary-100 transition-colors duration-200">
                            Ver del depto <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                        {% else %}
                        <span class="text-gray-500 dark:text-gray-400">N/A</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Passwords -->
    <div class="mt-12">
        <div class="card shadow-xl animate-fade-in-up" style="animation-delay: 0.4s;">
            <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-history mr-3 text-indigo-500"></i>
                    Contraseñas Recientes
                </h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    Últimas contraseñas agregadas o modificadas
                </p>
            </div>

            {% if recent_passwords %}
            <div class="divide-y divide-gray-200 dark:divide-gray-700">
                {% for password in recent_passwords %}
                <div class="px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center min-w-0 flex-1">
                            <div class="flex-shrink-0">
                                <div class="w-12 h-12 bg-gradient-to-br from-primary-400 to-primary-600 rounded-xl flex items-center justify-center shadow-lg">
                                    <i class="fas fa-key text-white"></i>
                                </div>
                            </div>
                            <div class="ml-4 min-w-0 flex-1">
                                <div class="flex items-center justify-between">
                                    <p class="text-lg font-semibold text-gray-900 dark:text-white truncate">
                                        {{ password.name }}
                                    </p>
                                    {% if password.is_expired %}
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>Caducada
                                    </span>
                                    {% endif %}
                                </div>
                                <div class="flex items-center mt-2 space-x-6">
                                    {% if password.username %}
                                    <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                                        <i class="fas fa-user mr-2 text-indigo-400"></i>{{ password.username }}
                                    </p>
                                    {% endif %}
                                    <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                                        <i class="fas fa-building mr-2 text-blue-400"></i>{{ password.department.name }}
                                    </p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
                                        <i class="fas fa-clock mr-2 text-purple-400"></i>{{ password.updated_at.strftime('%d/%m/%Y') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3">
                            {% if current_user.can_edit() and (current_user.can_admin() or password.department_id == current_user.department_id) %}
                            <a href="{{ url_for('edit_password', id=password.id) }}" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-200 p-2 rounded-lg hover:bg-primary-50 dark:hover:bg-primary-900 transition-all duration-200">
                                <i class="fas fa-edit"></i>
                            </a>
                            {% endif %}
                            <button onclick="viewPassword({{ password.id }})" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 px-6 py-4">
                <div class="text-center">
                    <a href="{{ url_for('list_passwords') }}" class="btn-primary">
                        <i class="fas fa-list mr-2"></i>
                        Ver todas las contraseñas
                    </a>
                </div>
            </div>
            {% else %}
            <div class="px-6 py-12 text-center">
                <div class="text-gray-500 dark:text-gray-400">
                    <i class="fas fa-key text-6xl mb-6 text-gray-300 dark:text-gray-600"></i>
                    <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">No hay contraseñas aún</h4>
                    <p class="text-gray-600 dark:text-gray-400 mb-6">Comienza agregando tu primera contraseña al sistema</p>
                    {% if current_user.can_edit() %}
                    <a href="{{ url_for('new_password') }}" class="btn-primary shadow-glow">
                        <i class="fas fa-plus mr-2"></i>
                        Agregar Primera Contraseña
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-12">
        <div class="card shadow-xl animate-fade-in-up" style="animation-delay: 0.5s;">
            <div class="px-6 py-6 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-emerald-50 to-teal-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-bolt mr-3 text-emerald-500"></i>
                    Acciones Rápidas
                </h3>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    Herramientas y funciones más utilizadas
                </p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    {% if current_user.can_edit() %}
                    <a href="{{ url_for('new_password') }}" class="group relative bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 border-2 border-dashed border-blue-300 dark:border-blue-600 rounded-xl p-6 text-center hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-lg transition-all duration-300 hover-lift">
                        <i class="fas fa-plus text-blue-500 text-3xl mb-4 group-hover:scale-110 transition-transform duration-200"></i>
                        <span class="block text-sm font-semibold text-gray-900 dark:text-white">Nueva Contraseña</span>
                        <span class="block text-xs text-gray-500 dark:text-gray-400 mt-1">Crear nueva entrada</span>
                    </a>
                    {% endif %}

                    <a href="{{ url_for('export_passwords') }}" class="group relative bg-gradient-to-br from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 border-2 border-dashed border-green-300 dark:border-green-600 rounded-xl p-6 text-center hover:border-green-500 dark:hover:border-green-400 hover:shadow-lg transition-all duration-300 hover-lift">
                        <i class="fas fa-download text-green-500 text-3xl mb-4 group-hover:scale-110 transition-transform duration-200"></i>
                        <span class="block text-sm font-semibold text-gray-900 dark:text-white">Exportar</span>
                        <span class="block text-xs text-gray-500 dark:text-gray-400 mt-1">Descargar datos</span>
                    </a>

                    {% if current_user.can_edit() %}
                    <a href="{{ url_for('import_passwords') }}" class="group relative bg-gradient-to-br from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 border-2 border-dashed border-purple-300 dark:border-purple-600 rounded-xl p-6 text-center hover:border-purple-500 dark:hover:border-purple-400 hover:shadow-lg transition-all duration-300 hover-lift">
                        <i class="fas fa-upload text-purple-500 text-3xl mb-4 group-hover:scale-110 transition-transform duration-200"></i>
                        <span class="block text-sm font-semibold text-gray-900 dark:text-white">Importar</span>
                        <span class="block text-xs text-gray-500 dark:text-gray-400 mt-1">Cargar archivo</span>
                    </a>
                    {% endif %}

                    <a href="{{ url_for('profile') }}" class="group relative bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-600 border-2 border-dashed border-orange-300 dark:border-orange-600 rounded-xl p-6 text-center hover:border-orange-500 dark:hover:border-orange-400 hover:shadow-lg transition-all duration-300 hover-lift">
                        <i class="fas fa-user text-orange-500 text-3xl mb-4 group-hover:scale-110 transition-transform duration-200"></i>
                        <span class="block text-sm font-semibold text-gray-900 dark:text-white">Mi Perfil</span>
                        <span class="block text-xs text-gray-500 dark:text-gray-400 mt-1">Configuración</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Password View Modal -->
<div id="passwordModal" class="fixed inset-0 bg-gray-600 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 w-96 shadow-2xl rounded-2xl bg-white dark:bg-gray-800">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">
                    <i class="fas fa-eye mr-2 text-primary-500"></i>
                    Contraseña
                </h3>
                <button onclick="closePasswordModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 p-4 rounded-xl border border-gray-200 dark:border-gray-600">
                    <div class="flex items-center justify-between">
                        <span id="passwordValue" class="font-mono text-lg text-gray-900 dark:text-white"></span>
                        <button onclick="copyPassword()" class="btn-secondary p-2">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
                <div id="passwordStrength"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentPassword = '';

function viewPassword(passwordId) {
    fetch(`/passwords/${passwordId}/view`)
        .then(response => response.json())
        .then(data => {
            currentPassword = data.password;
            document.getElementById('passwordValue').textContent = data.password;

            // Mostrar fortaleza de contraseña
            const strengthDiv = document.getElementById('passwordStrength');
            const strength = data.strength;
            let strengthClass = '';
            let strengthColor = '';

            switch(strength.strength) {
                case 'Muy Fuerte':
                    strengthClass = 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
                    break;
                case 'Fuerte':
                    strengthClass = 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
                    break;
                case 'Moderada':
                    strengthClass = 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
                    break;
                case 'Débil':
                    strengthClass = 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200';
                    break;
                case 'Muy Débil':
                    strengthClass = 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
                    break;
            }

            strengthDiv.innerHTML = `
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${strengthClass}">
                    Fortaleza: ${strength.strength}
                </span>
            `;

            document.getElementById('passwordModal').classList.remove('hidden');
        })
        .catch(error => {
            alert('Error al obtener la contraseña');
            console.error('Error:', error);
        });
}

function closePasswordModal() {
    document.getElementById('passwordModal').classList.add('hidden');
    currentPassword = '';
}

function copyPassword() {
    navigator.clipboard.writeText(currentPassword).then(() => {
        // Mostrar feedback visual
        const button = event.target.closest('button');
        const icon = button.querySelector('i');
        icon.classList.remove('fa-copy');
        icon.classList.add('fa-check');

        setTimeout(() => {
            icon.classList.remove('fa-check');
            icon.classList.add('fa-copy');
        }, 2000);
    });
}

// Cerrar modal al hacer clic fuera
document.getElementById('passwordModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closePasswordModal();
    }
});
</script>
{% endblock %}