<?php
$title = 'Login';
$extra_css = [BASE_URL . '/assets/css/auth.css'];
require_once __DIR__ . '/../layouts/header.php';
?>

<div class="auth-page">
    <div class="auth-container">
        <div class="auth-header">
            <img src="<?php echo BASE_URL; ?>/assets/images/nis-logo.png" alt="NIS Logo" class="auth-logo">
            <h1>Nigeria Immigration Service</h1>
            <h2>Asset Management System</h2>
            <p>Works & Logistics Directorate</p>
        </div>

        <?php if (isset($_GET['error'])): ?>
            <div class="auth-alert error">
                <i class="fas fa-exclamation-circle"></i>
                <?php echo htmlspecialchars($_GET['error']); ?>
            </div>
        <?php endif; ?>

        <?php if (isset($_GET['success'])): ?>
            <div class="auth-alert success">
                <i class="fas fa-check-circle"></i>
                <?php echo htmlspecialchars($_GET['success']); ?>
            </div>
        <?php endif; ?>

        <?php if (isset($_GET['timeout'])): ?>
            <div class="auth-alert warning">
                <i class="fas fa-clock"></i> Session expired. Please login again.
            </div>
        <?php endif; ?>

        <form method="POST" action="<?php echo BASE_URL; ?>/auth/login" class="auth-form" id="loginForm">
            <?php echo Security::csrfField(); ?>
            
            <!-- Honeypot fields -->
            <div style="display:none">
                <input type="text" name="website" autocomplete="off">
                <input type="text" name="phone" autocomplete="off">
                <input type="text" name="company" autocomplete="off">
            </div>

            <div class="form-group">
                <label for="username">
                    <i class="fas fa-user"></i> Username / Email
                </label>
                <div class="input-with-icon">
                    <i class="fas fa-user"></i>
                    <input type="text" id="username" name="username" 
                           required placeholder="Enter your username or email"
                           value="<?php echo htmlspecialchars($_POST['username'] ?? ''); ?>"
                           autocomplete="username" autofocus>
                </div>
            </div>

            <div class="form-group">
                <label for="password">
                    <i class="fas fa-lock"></i> Password
                </label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="password" name="password" 
                           required placeholder="Enter your password"
                           autocomplete="current-password">
                    <button type="button" class="password-toggle" id="togglePassword">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>

            <?php if (isset($_SESSION['captcha_required']) && $_SESSION['captcha_required']): ?>
            <div class="form-group">
                <div class="captcha-container">
                    <div class="captcha-display">
                        <div class="captcha-code" id="captchaDisplay">
                            <?php echo $_SESSION['captcha'] ?? ''; ?>
                        </div>
                        <button type="button" class="btn-refresh" id="refreshCaptcha" title="Refresh CAPTCHA">
                            <i class="fas fa-redo"></i>
                        </button>
                    </div>
                    <div class="input-with-icon">
                        <i class="fas fa-shield-alt"></i>
                        <input type="text" id="captcha" name="captcha" 
                               required placeholder="Enter the code above"
                               maxlength="6" autocomplete="off">
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <button type="submit" class="btn-auth" id="loginBtn">
                <i class="fas fa-sign-in-alt"></i> Login to System
            </button>
        </form>

        <div class="auth-links">
            <p><a href="<?php echo BASE_URL; ?>/auth/forgot-password">Forgot Password?</a></p>
            <p>Need assistance? <a href="mailto:support@immigration.gov.ng">Contact Administrator</a></p>
        </div>

        <div class="auth-footer">
            <p><i class="fas fa-shield-alt"></i> Secure Login | Authorized Personnel Only</p>
            <p>&copy; <?php echo date('Y'); ?> Nigeria Immigration Service</p>
        </div>
    </div>
</div>

<script>
document.getElementById('togglePassword')?.addEventListener('click', function() {
    const password = document.getElementById('password');
    const icon = this.querySelector('i');
    
    if (password.type === 'password') {
        password.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        password.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
});

document.getElementById('refreshCaptcha')?.addEventListener('click', function() {
    const captchaDisplay = document.getElementById('captchaDisplay');
    const refreshBtn = this;
    
    refreshBtn.disabled = true;
    refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    
    fetch('<?php echo BASE_URL; ?>/auth/refresh-captcha')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                captchaDisplay.textContent = data.captcha;
                document.getElementById('captcha').value = '';
            }
        })
        .catch(error => console.error('CAPTCHA refresh error:', error))
        .finally(() => {
            refreshBtn.disabled = false;
            refreshBtn.innerHTML = '<i class="fas fa-redo"></i>';
        });
});

document.getElementById('loginForm')?.addEventListener('submit', function(e) {
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value.trim();
    
    if (!username || !password) {
        e.preventDefault();
        alert('Please fill in all required fields');
        return false;
    }
    
    // Check CAPTCHA if present
    const captcha = document.getElementById('captcha');
    if (captcha && captcha.value.trim().length !== 6) {
        e.preventDefault();
        alert('Please enter the complete 6-character security code');
        return false;
    }
    
    // Disable button to prevent double submission
    document.getElementById('loginBtn').disabled = true;
    document.getElementById('loginBtn').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Logging in...';
});
</script>

<?php require_once __DIR__ . '/../layouts/footer.php'; ?>