<?php
$title = 'Iniciar Sesión - Sistema de Gestión de Proyectos UAI';
$showSidebar = false;

ob_start();
?>

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
<?php
        // Obtener configuración de la app
        use App\Services\Database;
        $db = Database::getInstance();
        $appSettings = $db->fetchOne("SELECT * FROM app_settings WHERE id = 1");
        $appName = $appSettings['app_name'] ?? 'Sistema de Gestión de Proyectos';
        $appLogo = $appSettings['app_logo'] ?? null;
        ?>
        <!-- Logo y Título -->
        <div class="text-center">
            <?php if ($appLogo): ?>
            <div class="mx-auto mb-4">
                <img src="<?= htmlspecialchars($appLogo) ?>" alt="Logo" class="h-20 w-auto mx-auto object-contain">
            </div>
            <?php else: ?>
            <div class="mx-auto h-20 w-20 bg-primary-600 rounded-full flex items-center justify-center mb-4">
                <i class="fas fa-project-diagram text-white text-2xl"></i>
            </div>
            <?php endif; ?>
            <h2 class="text-3xl font-extrabold text-gray-900 mb-2">
                <?= htmlspecialchars($appName) ?>
            </h2>
            <p class="text-sm text-gray-600">
                Universidad Autónoma de Ica - Área de Tecnologías de la Información
            </p>
        </div>

        <!-- Formulario de Login -->
        <div class="bg-white shadow-xl rounded-lg p-8">
            <?php if (isset($_SESSION['error'])): ?>
            <div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <span><?= htmlspecialchars($_SESSION['error']) ?></span>
                </div>
            </div>
            <?php unset($_SESSION['error']); ?>
            <?php endif; ?>

            <div class="space-y-6">
                <div class="text-center">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">
                        Acceso al Sistema
                    </h3>
                    <p class="text-sm text-gray-600 mb-6">
                        Acceso para desarrollo o cuenta institucional
                    </p>
                </div>

                <!-- Login para desarrollo -->
                <div class="space-y-4">
                    <form action="/auth/login" method="POST" class="space-y-4">
                        <div>
                            <label for="username" class="block text-sm font-medium text-gray-700">Usuario</label>
                            <div class="mt-1 relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-user text-gray-400"></i>
                                </div>
                                <input id="username" name="username" type="text" required
                                       class="appearance-none rounded-md relative block w-full pl-10 pr-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
                                       placeholder="Ingresa tu usuario">
                            </div>
                        </div>
                        
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700">Contraseña</label>
                            <div class="mt-1 relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-lock text-gray-400"></i>
                                </div>
                                <input id="password" name="password" type="password" required
                                       class="appearance-none rounded-md relative block w-full pl-10 pr-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
                                       placeholder="Ingresa tu contraseña">
                            </div>
                        </div>

                        <div>
                            <button type="submit" 
                                    class="group relative w-full flex justify-center py-2 px-4 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 transition-all duration-200">
                                <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                                    <i class="fas fa-sign-in-alt text-primary-500 group-hover:text-primary-400"></i>
                                </span>
                                Iniciar Sesión
                            </button>
                        </div>
                    </form>

                    <!-- Usuarios de prueba -->
                    <div class="text-xs text-gray-500 p-3 bg-gray-50 rounded-md">
                        <div class="font-medium mb-1">Usuarios de prueba:</div>
                        <div>• admin / admin123 (Administrador)</div>
                        <div>• usuario / user123 (Usuario estándar)</div>
                    </div>
                </div>

                <!-- Separador -->
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">o</span>
                    </div>
                </div>

                <div>
                    <a href="/auth/keycloak" 
                       class="group relative w-full flex justify-center py-3 px-4 border border-primary-300 text-sm font-medium rounded-md text-primary-600 bg-white hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200">
                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                            <i class="fas fa-external-link-alt text-primary-500 group-hover:text-primary-400"></i>
                        </span>
                        Iniciar Sesión con Keycloak
                    </a>
                </div>

                <!-- Información adicional -->
                <div class="mt-6 border-t border-gray-200 pt-6">
                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-4">
                            Al acceder aceptas los términos y condiciones del sistema
                        </p>
                        
                        <div class="flex items-center justify-center space-x-6 text-xs text-gray-400">
                            <div class="flex items-center">
                                <i class="fas fa-shield-alt mr-1"></i>
                                <span>Autenticación segura</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-lock mr-1"></i>
                                <span>SSO Keycloak</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información del sistema -->
        <div class="text-center">
            <div class="bg-white shadow-sm rounded-lg p-6">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">
                    ¿Cómo funciona el acceso?
                </h4>
                <div class="space-y-3 text-xs text-gray-600 text-left">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                            <span class="text-blue-600 font-semibold">1</span>
                        </div>
                        <div>
                            <span class="font-medium">Autenticación:</span> 
                            Ingresa con tu cuenta institucional UAI
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                            <span class="text-blue-600 font-semibold">2</span>
                        </div>
                        <div>
                            <span class="font-medium">Activación:</span> 
                            Tu cuenta debe ser activada por un administrador
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                            <span class="text-blue-600 font-semibold">3</span>
                        </div>
                        <div>
                            <span class="font-medium">Asignación:</span> 
                            Se te asignará un rol según tu área de trabajo
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="text-center text-xs text-gray-400">
            <p>&copy; <?= date('Y') ?> Universidad Alas Peruanas</p>
            <p class="mt-1">Sistema de Gestión de Requerimientos y Proyectos v1.0</p>
        </div>
    </div>
</div>

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

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