<?php
require_once '../includes/config.php';
require_once '../includes/auth.php';

// Si ya está autenticado, redirigir al dashboard
if (isLoggedIn()) {
    $role = getUserRole();
    header("Location: " . APP_URL . "/modules/$role/dashboard.php");
    exit;
}

// Procesar formulario de inicio de sesión
$error = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $email = $_POST['email'] ?? '';
    $password = $_POST['password'] ?? '';
    
    if (loginUser($email, $password)) {
        // Redirigir según el rol
        $role = getUserRole();
        header("Location: " . APP_URL . "/modules/$role/dashboard.php");
        exit;
    } else {
        $error = 'Email o contraseña incorrectos';
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= APP_NAME ?> | Iniciar Sesión</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
    :root {
        --primary-light: #e6f4ff;
        --primary-soft: #b3d9ff;
        --primary-medium: #66b2ff;
        --primary-dark: #1a75ff;
        --primary-deep: #0052cc;
        --accent-color: #85d1f0;
        --light-color: #ffffff;
        --dark-color: #0a2e52;
        --success-color: #4cc9f0;
        --error-color: #f38d8d;
        --gray-light: #f5f5f5;
        --gray-medium: #e0e0e0;
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary-dark) 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        overflow-x: hidden;
    }
    
    .login-container {
        max-width: 420px;
        width: 100%;
        perspective: 1000px;
        position: relative;
        z-index: 10;
    }
    
    .login-card {
        background: var(--light-color);
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(10, 46, 82, 0.15);
        overflow: hidden;
        transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-style: preserve-3d;
        animation: cardEntrance 0.8s ease-out forwards;
        position: relative;
        z-index: 11;
    }
    
    .login-card:hover {
        transform: translateY(-10px);
    }
    
    .card-header {
        background: linear-gradient(120deg, var(--primary-medium), var(--primary-deep));
        padding: 30px 20px;
        text-align: center;
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .card-header::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
        transform: rotate(30deg);
        animation: shine 8s infinite;
    }
    
    .card-header h3 {
        font-weight: 700;
        font-size: 1.8rem;
        margin-bottom: 5px;
        position: relative;
        z-index: 2;
    }
    
    .card-header p {
        opacity: 0.9;
        margin: 0;
        font-size: 1rem;
        position: relative;
        z-index: 2;
    }
    
    .card-body {
        padding: 30px;
        position: relative;
        z-index: 12;
    }
    
    .card-footer {
        background-color: var(--primary-light);
        padding: 20px;
        text-align: center;
        border-top: 1px solid var(--gray-medium);
        border-radius: 0 0 20px 20px;
    }
    
    .form-label {
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 8px;
        transition: color 0.3s;
        display: block;
    }
    
    .input-group {
        position: relative;
        margin-bottom: 25px;
    }
    
    .input-group i.left-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-dark);
        transition: color 0.3s;
        z-index: 1;
        pointer-events: none;
    }
    
    .form-control {
        border: none;
        border-bottom: 2px solid var(--gray-medium);
        border-radius: 0;
        padding: 12px 15px 12px 45px;
        background-color: transparent;
        transition: all 0.3s;
        position: relative;
        z-index: 3;
        width: 100%;
        font-size: 1rem;
        color: var(--dark-color);
    }
    
    .form-control:focus {
        box-shadow: none;
        border-color: var(--primary-dark);
        background-color: rgba(26, 117, 255, 0.03);
        outline: none;
    }
    
    .form-control:focus + .input-highlight {
        width: 100%;
    }
    
    .form-control:focus ~ .left-icon {
        color: var(--primary-deep);
    }
    
    .input-highlight {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        background: linear-gradient(90deg, var(--primary-medium), var(--primary-deep));
        transition: width 0.4s ease;
        z-index: 2;
    }
    
    .btn-login {
        background: linear-gradient(120deg, var(--primary-medium), var(--primary-deep));
        border: none;
        border-radius: 50px;
        padding: 12px;
        font-weight: 600;
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s;
        box-shadow: 0 5px 15px rgba(26, 117, 255, 0.3);
        transform: translateY(0);
        color: white;
        width: 100%;
        cursor: pointer;
        z-index: 4;
    }
    
    .btn-login:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(26, 117, 255, 0.4);
    }
    
    .btn-login:active {
        transform: translateY(1px);
        box-shadow: 0 3px 10px rgba(26, 117, 255, 0.3);
    }
    
    .btn-login::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: 0.5s;
    }
    
    .btn-login:hover::before {
        left: 100%;
    }
    
    .error-message {
        background-color: rgba(243, 141, 141, 0.1);
        border-left: 4px solid var(--error-color);
        padding: 12px 15px;
        border-radius: 4px;
        margin-bottom: 20px;
        animation: shake 0.5s ease;
        display: flex;
        align-items: center;
        color: var(--error-color);
    }
    
    .error-message i {
        margin-right: 10px;
    }
    
    .floating-elements {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
    }
    
    .floating-element {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        animation: float 15s infinite linear;
        pointer-events: none;
        border: 2px solid rgba(102, 178, 255, 0.2);
    }
    
    .floating-element:nth-child(1) {
        width: 80px;
        height: 80px;
        top: 20%;
        left: 10%;
        animation-duration: 20s;
    }
    
    .floating-element:nth-child(2) {
        width: 120px;
        height: 120px;
        top: 60%;
        left: 80%;
        animation-duration: 25s;
        animation-delay: -5s;
    }
    
    .floating-element:nth-child(3) {
        width: 50px;
        height: 50px;
        top: 80%;
        left: 30%;
        animation-duration: 15s;
        animation-delay: -10s;
    }
    
    .floating-element:nth-child(4) {
        width: 90px;
        height: 90px;
        top: 40%;
        left: 70%;
        animation-duration: 30s;
        animation-delay: -7s;
    }
    
    .password-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--primary-dark);
        z-index: 5;
        transition: color 0.3s;
        padding: 5px;
    }
    
    .password-toggle:hover {
        color: var(--primary-deep);
    }
    
    .water-wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        z-index: 0;
    }
    
    .water-wave svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 80px;
        transform: rotateY(180deg);
    }
    
    .water-wave .shape-fill {
        fill: var(--primary-light);
    }
    
    .login-title {
        text-align: center;
        margin-bottom: 25px;
        color: var(--primary-deep);
        position: relative;
    }
    
    .login-title h4 {
        font-size: 1.5rem;
        font-weight: 700;
    }
    
    .login-title::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: linear-gradient(to right, var(--primary-medium), var(--primary-deep));
        margin: 10px auto 0;
        border-radius: 3px;
    }
    
    .footer-link {
        color: var(--primary-deep);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s;
    }
    
    .footer-link:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }
    
    @keyframes cardEntrance {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    @keyframes shine {
        0% {
            transform: rotate(30deg) translate(-10%, -10%);
        }
        100% {
            transform: rotate(30deg) translate(100%, 100%);
        }
    }
    
    @keyframes float {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
        }
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
        20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
    
    @media (max-width: 575.98px) {
        .login-card {
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .card-body {
            padding: 25px 20px;
        }
        
        .card-header h3 {
            font-size: 1.5rem;
        }
        
        .login-title h4 {
            font-size: 1.3rem;
        }
    }
</style>
</head>
<body>
    <div class="floating-elements">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
    </div>
    
    <div class="login-container">
        <div class="login-card">
            <div class="card-header">
                <h3><i class="fas fa-graduation-cap me-2"></i>Sistema Escolar</h3>
                <p>Sistema de Gestión Escolar</p>
            </div>
            
            <div class="card-body">
                <div class="login-title">
                    <h4>Iniciar Sesión</h4>
                </div>
                
                <?php if ($error): ?>
                <div class="error-message">
                    <i class="fas fa-exclamation-circle me-2"></i><?= $error ?>
                </div>
                <?php endif; ?>
                
                <form action="login.php" method="POST" id="login-form">
                    <div class="mb-4">
                        <label for="email" class="form-label">Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="email" name="email" required placeholder="tucorreo@ejemplo.com">
                            <div class="input-highlight"></div>
                            <i class="fas fa-envelope left-icon"></i>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label for="password" class="form-label">Contraseña</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="password" name="password" required placeholder="••••••••">
                            <div class="input-highlight"></div>
                            <i class="fas fa-lock left-icon"></i>
                            <span class="password-toggle" id="password-toggle">
    <i class="fas fa-eye-slash"></i>
</span>
                        </div>
                    </div>
                    
                    <div class="d-grid mt-4">
                        <button type="submit" class="btn btn-login" id="login-button">
                            <span id="login-text">Iniciar Sesión</span>
                            <span id="login-spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                        </button>
                    </div>
                </form>
            </div>
            
            <div class="card-footer">
    <p class="mb-0"><a href="forgot_password.php" class="footer-link">¿Olvidaste tu contraseña?</a></p>
</div>
        </div>
    </div>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle para mostrar/ocultar contraseña
        const passwordToggle = document.getElementById('password-toggle');
        const passwordInput = document.getElementById('password');
        
        passwordToggle.addEventListener('click', function() {
            const isPassword = passwordInput.getAttribute('type') === 'password';
            const newType = isPassword ? 'text' : 'password';
            passwordInput.setAttribute('type', newType);
            
            // Actualizar el ícono correctamente
            const icon = this.querySelector('i');
            if (isPassword) {
                // Si estaba oculto, ahora se muestra → ojo abierto
                icon.className = 'fas fa-eye';
            } else {
                // Si estaba visible, ahora se oculta → ojo tachado
                icon.className = 'fas fa-eye-slash';
            }
        });
        
        // Animación al enviar el formulario
        const loginForm = document.getElementById('login-form');
        const loginButton = document.getElementById('login-button');
        const loginText = document.getElementById('login-text');
        
        loginForm.addEventListener('submit', function() {
            loginButton.disabled = true;
            loginText.textContent = 'Iniciando...';
            loginButton.style.background = 'linear-gradient(120deg, var(--primary-medium), var(--primary-dark))';
        });
        
        // Efecto de hover en los inputs
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            const label = input.closest('.input-group').previousElementSibling;
            
            input.addEventListener('focus', function() {
                if (label) label.style.color = 'var(--primary-deep)';
                const icon = input.parentElement.querySelector('.left-icon');
                if (icon) icon.style.color = 'var(--primary-deep)';
            });
            
            input.addEventListener('blur', function() {
                if (label) label.style.color = 'var(--dark-color)';
                const icon = input.parentElement.querySelector('.left-icon');
                if (icon) icon.style.color = 'var(--primary-dark)';
            });
        });
    });
</script>
</body>
</html>