<?php
$title = 'Pendiente de Activación - Sistema de Gestión de Proyectos';
$showSidebar = false;
$current_user = $user ?? $_SESSION['user'] ?? null;

ob_start();
?>

<div class="min-h-screen bg-gradient-to-br from-yellow-50 to-orange-100 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-2xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="mx-auto h-20 w-20 bg-yellow-500 rounded-full flex items-center justify-center mb-4">
                <i class="fas fa-clock text-white text-2xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Cuenta Pendiente de Activación</h1>
            <p class="text-gray-600">Tu cuenta ha sido creada pero requiere activación por parte del administrador</p>
        </div>

        <!-- Status Card -->
        <div class="bg-white rounded-lg shadow-xl p-8 mb-6" x-data="checkStatusComponent()">
            <!-- User Info -->
            <div class="border-b border-gray-200 pb-6 mb-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 bg-primary-100 rounded-full flex items-center justify-center">
                            <span class="text-primary-600 font-semibold text-lg">
                                <?= strtoupper(substr($current_user['first_name'] ?? 'U', 0, 1)) ?>
                            </span>
                        </div>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">
                            <?= htmlspecialchars(($current_user['first_name'] ?? '') . ' ' . ($current_user['last_name'] ?? '')) ?>
                        </h3>
                        <p class="text-sm text-gray-500"><?= htmlspecialchars($current_user['email'] ?? '') ?></p>
                    </div>
                </div>
            </div>

            <!-- Status -->
            <div class="text-center mb-6">
                <div class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 mb-4">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Pendiente de Activación
                </div>

                <div id="status-message">
                    <h4 class="text-lg font-medium text-gray-900 mb-2">Tu cuenta está siendo revisada</h4>
                    <p class="text-gray-600 mb-4">
                        Un administrador del sistema debe asignar un rol a tu cuenta antes de que puedas acceder.
                        Esto es para garantizar que tengas los permisos adecuados según tu área de trabajo.
                    </p>
                </div>
            </div>

            <!-- Check Status Button -->
            <div class="text-center mb-6">
                <button @click="checkStatus()" :disabled="checking" 
                        class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200">
                    <i class="fas fa-sync-alt mr-2" :class="{ 'fa-spin': checking }"></i>
                    <span x-text="checking ? 'Verificando...' : 'Verificar Estado'"></span>
                </button>
                
                <!-- Botón de redirección manual (solo se muestra después de activación) -->
                <div x-show="roleActivated" x-transition class="mt-4">
                    <a href="/redirect-dashboard" 
                       class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        <i class="fas fa-arrow-right mr-2"></i>
                        Ir al Dashboard
                    </a>
                    <p class="text-xs text-gray-500 mt-2">Si no se redirecciona automáticamente, haz clic aquí</p>
                </div>
            </div>

            <!-- Instructions -->
            <div class="bg-gray-50 rounded-lg p-6">
                <h5 class="font-medium text-gray-900 mb-3">¿Qué sucede ahora?</h5>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
                        Tu cuenta ha sido creada exitosamente
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-clock text-yellow-500 mr-2 mt-0.5"></i>
                        Un administrador revisará tu solicitud de acceso
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-user-shield text-blue-500 mr-2 mt-0.5"></i>
                        Se te asignará un rol según tu área de trabajo
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-unlock text-green-500 mr-2 mt-0.5"></i>
                        Una vez activada, podrás acceder al sistema completo
                    </li>
                </ul>
            </div>

            <!-- Contact Info -->
            <div class="mt-6 pt-6 border-t border-gray-200">
                <div class="text-center">
                    <p class="text-sm text-gray-600 mb-3">
                        Si necesitas acceso urgente, contacta al administrador del sistema:
                    </p>
                    <div class="flex justify-center space-x-4 text-sm">
                        <div class="flex items-center text-gray-500">
                            <i class="fas fa-envelope mr-1"></i>
                            <span>ti@uap.edu.pe</span>
                        </div>
                        <div class="flex items-center text-gray-500">
                            <i class="fas fa-phone mr-1"></i>
                            <span>Ext. 1234</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logout Option -->
        <div class="text-center">
            <a href="/logout" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 transition-colors duration-200">
                <i class="fas fa-sign-out-alt mr-2"></i>
                Cerrar Sesión
            </a>
        </div>

        <!-- Footer -->
        <div class="text-center mt-8 text-xs text-gray-400">
            <p>&copy; <?= date('Y') ?> Universidad Alas Peruanas - Área de Tecnologías de la Información</p>
        </div>
    </div>
</div>

<script>
function checkStatusComponent() {
    return {
        checking: false,
        roleActivated: false,
        
        async checkStatus() {
            this.checking = true;
            
            try {
                const response = await fetch('/auth/check-role-status', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (!response.ok) {
                    throw new Error('Error en la respuesta del servidor');
                }

                const data = await response.json();
                console.log('Response data:', data); // Debug

                if (data.error) {
                    this.showToast(data.error, 'error');
                    return;
                }

                if (data.has_role) {
                    this.roleActivated = true; // Mostrar botón manual
                    this.showToast('¡Tu cuenta ha sido activada! Redirigiendo al dashboard...', 'success');
                    console.log('Redirecting to dashboard...'); // Debug
                    console.log('Session should be updated with:', data.debug); // Debug
                    
                    // Esperar un poco más para asegurar que la sesión se actualice
                    setTimeout(async () => {
                        console.log('Checking auth state before redirect...'); // Debug
                        
                        // Verificar estado de autenticación antes de redirigir
                        try {
                            const authCheck = await fetch('/debug-auth-state');
                            const authData = await authCheck.json();
                            console.log('Auth state check:', authData);
                            
                            if (authData.has_role) {
                                console.log('Auth confirmed, redirecting...'); // Debug
                                window.location.href = '/dashboard';
                            } else {
                                console.log('Auth not confirmed, showing manual button'); // Debug
                                // No redirigir automáticamente, solo mostrar el botón manual
                            }
                        } catch (error) {
                            console.log('Auth check failed, trying redirect anyway'); // Debug
                            window.location.href = '/dashboard';
                        }
                    }, 2000);
                    
                } else {
                    this.showToast('Tu cuenta aún está pendiente de activación', 'info');
                }

            } catch (error) {
                console.error('Error:', error);
                this.showToast('Error al verificar el estado. Intenta de nuevo.', 'error');
            } finally {
                this.checking = false;
            }
        },

        showToast(message, type = 'info') {
            // Crear notificación
            const notification = document.createElement('div');
            const bgColor = type === 'success' ? 'bg-green-500' : 
                            type === 'error' ? 'bg-red-500' : 
                            type === 'info' ? 'bg-blue-500' : 'bg-gray-500';
            
            const icon = type === 'success' ? 'fa-check' : 
                         type === 'error' ? 'fa-times' : 
                         type === 'info' ? 'fa-info' : 'fa-bell';
            
            notification.className = `fixed top-4 right-4 z-50 ${bgColor} text-white px-6 py-4 rounded-lg shadow-lg flex items-center transform transition-all duration-300 translate-x-full`;
            notification.innerHTML = `
                <i class="fas ${icon} mr-3"></i>
                <span>${message}</span>
                <button onclick="this.parentElement.remove()" class="ml-4 text-white hover:text-gray-200">
                    <i class="fas fa-times"></i>
                </button>
            `;
            
            document.body.appendChild(notification);
            
            // Animar entrada
            setTimeout(() => {
                notification.classList.remove('translate-x-full');
            }, 100);
            
            // Auto remover
            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => notification.remove(), 300);
            }, 5000);
        }
    }
}

// Auto-verificar cada 30 segundos
setInterval(() => {
    // Solo auto-verificar si no estamos verificando manualmente
    const component = document.querySelector('[x-data]').__x;
    if (component && !component.checking) {
        component.checkStatus();
    }
}, 30000);
</script>

<style>
    .bg-gradient-to-br {
        background: linear-gradient(135deg, #fefce8 0%, #fed7aa 100%);
    }
</style>

<?php
$content = ob_get_clean();
include __DIR__ . '/../layouts/app.php';
?>