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

$token = $_GET['token'] ?? '';
$email = $_GET['email'] ?? '';

if (!$token || !$email) {
    header('Location: ' . BASE_URL . '/auth/login?error=Invalid reset link');
    exit;
}
?>

<div class="auth-page">
    <div class="auth-container" style="max-width: 400px;">
        <div class="auth-header">
            <img src="<?php echo BASE_URL; ?>/assets/images/nis-logo.png" alt="NIS Logo" class="auth-logo">
            <h2>Reset Password</h2>
            <p>Enter your new password</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; ?>

        <form method="POST" action="<?php echo BASE_URL; ?>/auth/reset-password" class="auth-form" id="resetForm">
            <?php echo Security::csrfField(); ?>
            
            <input type="hidden" name="token" value="<?php echo htmlspecialchars($token); ?>">
            <input type="hidden" name="email" value="<?php echo htmlspecialchars($email); ?>">

            <div class="form-group">
                <label class="required">New Password</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" name="password" id="password" required minlength="8">
                    <button type="button" class="password-toggle" data-target="password">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div class="strength-meter" id="passwordStrength"></div>
                <small class="form-hint">Minimum 8 characters with uppercase, lowercase, number and special character</small>
            </div>

            <div class="form-group">
                <label class="required">Confirm Password</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" name="confirm_password" id="confirm_password" required>
                    <button type="button" class="password-toggle" data-target="confirm_password">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <small id="passwordMatch" class="form-hint"></small>
            </div>

            <button type="submit" class="btn-auth">
                <i class="fas fa-save"></i> Reset Password
            </button>
        </form>

        <div class="auth-links">
            <p><a href="<?php echo BASE_URL; ?>/auth/login">Back to Login</a></p>
        </div>
    </div>
</div>

<script>
// Password toggle
document.querySelectorAll('.password-toggle').forEach(button => {
    button.addEventListener('click', function() {
        const targetId = this.dataset.target;
        const input = document.getElementById(targetId);
        const icon = this.querySelector('i');
        
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });
});

// Password strength checker
function checkPasswordStrength(password) {
    let strength = 0;
    
    if (password.length >= 8) strength++;
    if (password.length >= 12) strength++;
    if (/[A-Z]/.test(password)) strength++;
    if (/[a-z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^A-Za-z0-9]/.test(password)) strength++;
    
    return Math.min(strength, 4);
}

document.getElementById('password').addEventListener('input', function() {
    const strength = checkPasswordStrength(this.value);
    const meter = document.getElementById('passwordStrength');
    
    const messages = ['Weak', 'Fair', 'Good', 'Strong', 'Very Strong'];
    meter.textContent = messages[strength];
    meter.className = 'strength-meter strength-' + strength;
});

// Password match validation
document.getElementById('confirm_password').addEventListener('input', function() {
    const newPass = document.getElementById('password').value;
    const match = document.getElementById('passwordMatch');
    
    if (this.value === newPass) {
        match.innerHTML = '<span class="text-success">✓ Passwords match</span>';
        this.setCustomValidity('');
    } else {
        match.innerHTML = '<span class="text-danger">✗ Passwords do not match</span>';
        this.setCustomValidity('Passwords do not match');
    }
});

document.getElementById('resetForm').addEventListener('submit', function(e) {
    const password = document.getElementById('password').value;
    const confirm = document.getElementById('confirm_password').value;
    
    if (password !== confirm) {
        e.preventDefault();
        alert('Passwords do not match');
        return false;
    }
    
    if (checkPasswordStrength(password) < 2) {
        e.preventDefault();
        alert('Password is too weak. Please use a stronger password.');
        return false;
    }
});
</script>

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