{% extends 'auth/base.html' %}
{% load static %}

{% block title %}Set New Password - {{ block.super }}{% endblock %}

{% block content %}
<div class="confirm-container">
    <div class="confirm-card">
        <div class="logo-container">
            <img src="{% static 'images/logo.png' %}" alt="Logo" class="logo">
        </div>
        {% if validlink %}
            <div class="text-center mb-4">
                <i class="fas fa-key fa-3x text-success mb-3"></i>
                <h1>Set New Password</h1>
                <p class="text-muted">Enter your new password below</p>
            </div>
                    
                    <form method="post" id="passwordResetConfirmForm">
                        {% csrf_token %}
                        
            {% if form.non_field_errors %}
                <div class="error-message">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ form.non_field_errors.0 }}
                </div>
            {% endif %}
                        
            <!-- New Password Field -->
            <div class="form-floating mb-3">
                <input type="password" 
                       class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}" 
                       id="{{ form.new_password1.id_for_label }}"
                       name="{{ form.new_password1.name }}"
                       placeholder="Enter new password"
                       required>
                <label for="{{ form.new_password1.id_for_label }}">
                    <i class="fas fa-lock me-2"></i>New Password
                </label>
                <button class="password-toggle" type="button" id="togglePassword1">
                    <i class="fas fa-eye"></i>
                </button>
                            
                            <!-- Password Strength Indicator -->
                            <div class="mt-2">
                                <div class="progress" style="height: 5px;">
                                    <div class="progress-bar" id="passwordStrength" 
                                         role="progressbar" style="width: 0%"></div>
                                </div>
                                <small class="text-muted" id="strengthText">Password strength</small>
                            </div>
                            
                            {% if form.new_password1.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.new_password1.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
            <!-- Confirm Password Field -->
            <div class="form-floating mb-4">
                <input type="password" 
                       class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}" 
                       id="{{ form.new_password2.id_for_label }}"
                       name="{{ form.new_password2.name }}"
                       placeholder="Confirm new password"
                       required>
                <label for="{{ form.new_password2.id_for_label }}">
                    <i class="fas fa-lock me-2"></i>Confirm New Password
                </label>
                <button class="password-toggle" type="button" id="togglePassword2">
                    <i class="fas fa-eye"></i>
                </button>
                            
                            <!-- Password Match Indicator -->
                            <div class="mt-2">
                                <small class="text-muted" id="matchText"></small>
                            </div>
                            
                            {% if form.new_password2.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.new_password2.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
            <!-- Password Requirements -->
            <div class="security-badge mb-4">
                <h6>
                    <i class="fas fa-info-circle me-2"></i>Password Requirements
                </h6>
                <ul class="mb-0 small">
                    <li id="req-length" class="text-muted">
                        <i class="fas fa-circle me-1"></i>At least 8 characters long
                    </li>
                    <li id="req-uppercase" class="text-muted">
                        <i class="fas fa-circle me-1"></i>Contains uppercase letter
                    </li>
                    <li id="req-lowercase" class="text-muted">
                        <i class="fas fa-circle me-1"></i>Contains lowercase letter
                    </li>
                    <li id="req-number" class="text-muted">
                        <i class="fas fa-circle me-1"></i>Contains number
                    </li>
                    <li id="req-special" class="text-muted">
                        <i class="fas fa-circle me-1"></i>Contains special character
                    </li>
                </ul>
            </div>
                        
            <div class="d-grid mb-3">
                <button type="submit" class="btn-verification" id="resetBtn">
                    <span class="btn-text">
                        <i class="fas fa-check me-2"></i>Update Password
                    </span>
                    <span class="btn-loading d-none">
                        <span class="loading me-2"></span>Updating...
                    </span>
                </button>
            </div>
                    </form>
                    
            <!-- Security Tips -->
            <div class="security-badge mt-4">
                <h6 class="mb-3">
                    <i class="fas fa-shield-alt me-2"></i>Security Tips
                </h6>
                <div class="row g-2">
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-lightbulb text-warning me-2 mt-1"></i>
                            <small>
                                Use a unique password that you don't use elsewhere
                            </small>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-lightbulb text-warning me-2 mt-1"></i>
                            <small>
                                Consider using a password manager
                            </small>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-lightbulb text-warning me-2 mt-1"></i>
                            <small>
                                Enable two-factor authentication for extra security
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <!-- Invalid Link -->
            <div class="text-center">
                <i class="fas fa-exclamation-triangle fa-4x text-danger mb-4"></i>
                <h1 class="text-danger mb-3">Invalid Reset Link</h1>
                <p class="mb-4">
                    This password reset link is invalid or has expired. 
                    Password reset links are only valid for 24 hours.
                </p>
                
                <div class="security-badge">
                    <i class="fas fa-clock me-2"></i>
                    <strong>Possible reasons:</strong>
                    <ul class="mb-0 mt-2 text-start">
                        <li>The link has expired (older than 24 hours)</li>
                        <li>The link has already been used</li>
                        <li>The link was copied incorrectly</li>
                        <li>A newer reset request was made</li>
                    </ul>
                </div>
                
                <div class="mt-4">
                    <a href="{% url 'auth:password_reset' %}" class="btn-verification me-2">
                        <i class="fas fa-redo me-1"></i>Request New Reset
                    </a>
                    <a href="{% url 'auth:login' %}" class="login-link">
                        <i class="fas fa-sign-in-alt me-1"></i>Back to Login
                    </a>
                </div>
            </div>
        {% endif %}
    </div>
</div>
        
        {% if validlink %}
            <!-- Additional Security Notice -->
            <div class="security-badge mt-4">
                <small>
                    <i class="fas fa-info-circle me-1"></i>
                    <strong>Security Notice:</strong> This reset link will expire in 24 hours. 
                    If you didn't request this password reset, please ignore this email and 
                    contact our support team immediately.
                </small>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% if validlink %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordResetForm = document.getElementById('passwordResetConfirmForm');
    const resetBtn = document.getElementById('resetBtn');
    const password1Field = document.getElementById('{{ form.new_password1.id_for_label }}');
    const password2Field = document.getElementById('{{ form.new_password2.id_for_label }}');
    const togglePassword1 = document.getElementById('togglePassword1');
    const togglePassword2 = document.getElementById('togglePassword2');
    
    // Password visibility toggles
    togglePassword1.addEventListener('click', function() {
        const type = password1Field.getAttribute('type') === 'password' ? 'text' : 'password';
        password1Field.setAttribute('type', type);
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
    });
    
    togglePassword2.addEventListener('click', function() {
        const type = password2Field.getAttribute('type') === 'password' ? 'text' : 'password';
        password2Field.setAttribute('type', type);
        this.querySelector('i').classList.toggle('fa-eye');
        this.querySelector('i').classList.toggle('fa-eye-slash');
    });
    
    // Password strength checker
    password1Field.addEventListener('input', function() {
        const password = this.value;
        const strength = calculatePasswordStrength(password);
        updatePasswordStrength(strength);
        updatePasswordRequirements(password);
        checkPasswordMatch();
    });
    
    // Password match checker
    password2Field.addEventListener('input', function() {
        checkPasswordMatch();
    });
    
    function calculatePasswordStrength(password) {
        let score = 0;
        const checks = {
            length: password.length >= 8,
            uppercase: /[A-Z]/.test(password),
            lowercase: /[a-z]/.test(password),
            number: /\d/.test(password),
            special: /[^\w\s]/.test(password)
        };
        
        Object.values(checks).forEach(check => {
            if (check) score += 20;
        });
        
        // Bonus for longer passwords
        if (password.length >= 12) score += 10;
        if (password.length >= 16) score += 10;
        
        return Math.min(score, 100);
    }
    
    function updatePasswordStrength(strength) {
        const progressBar = document.getElementById('passwordStrength');
        const strengthText = document.getElementById('strengthText');
        
        progressBar.style.width = strength + '%';
        
        if (strength < 40) {
            progressBar.className = 'progress-bar bg-danger';
            strengthText.textContent = 'Weak password';
            strengthText.className = 'text-danger';
        } else if (strength < 70) {
            progressBar.className = 'progress-bar bg-warning';
            strengthText.textContent = 'Fair password';
            strengthText.className = 'text-warning';
        } else if (strength < 90) {
            progressBar.className = 'progress-bar bg-info';
            strengthText.textContent = 'Good password';
            strengthText.className = 'text-info';
        } else {
            progressBar.className = 'progress-bar bg-success';
            strengthText.textContent = 'Strong password';
            strengthText.className = 'text-success';
        }
    }
    
    function updatePasswordRequirements(password) {
        const requirements = {
            'req-length': password.length >= 8,
            'req-uppercase': /[A-Z]/.test(password),
            'req-lowercase': /[a-z]/.test(password),
            'req-number': /\d/.test(password),
            'req-special': /[^\w\s]/.test(password)
        };
        
        Object.entries(requirements).forEach(([id, met]) => {
            const element = document.getElementById(id);
            const icon = element.querySelector('i');
            
            if (met) {
                element.className = 'text-success';
                icon.className = 'fas fa-check-circle me-1';
            } else {
                element.className = 'text-muted';
                icon.className = 'fas fa-circle me-1';
            }
        });
    }
    
    function checkPasswordMatch() {
        const password1 = password1Field.value;
        const password2 = password2Field.value;
        const matchText = document.getElementById('matchText');
        
        if (password2.length === 0) {
            matchText.textContent = '';
            password2Field.classList.remove('is-valid', 'is-invalid');
            return;
        }
        
        if (password1 === password2) {
            matchText.textContent = '✓ Passwords match';
            matchText.className = 'text-success';
            password2Field.classList.remove('is-invalid');
            password2Field.classList.add('is-valid');
        } else {
            matchText.textContent = '✗ Passwords do not match';
            matchText.className = 'text-danger';
            password2Field.classList.remove('is-valid');
            password2Field.classList.add('is-invalid');
        }
    }
    
    // Form submission with validation
    passwordResetForm.addEventListener('submit', function(e) {
        const password1 = password1Field.value;
        const password2 = password2Field.value;
        
        // Validate passwords match
        if (password1 !== password2) {
            e.preventDefault();
            showAlert('Passwords do not match. Please try again.', 'danger');
            password2Field.focus();
            return;
        }
        
        // Validate password strength
        const strength = calculatePasswordStrength(password1);
        if (strength < 40) {
            e.preventDefault();
            showAlert('Password is too weak. Please choose a stronger password.', 'warning');
            password1Field.focus();
            return;
        }
        
        // Show loading state
        const btnText = resetBtn.querySelector('.btn-text');
        const btnLoading = resetBtn.querySelector('.btn-loading');
        
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        resetBtn.disabled = true;
    });
    
    function showAlert(message, type) {
        // Remove existing alerts
        const existingAlerts = document.querySelectorAll('.alert-dismissible');
        existingAlerts.forEach(alert => alert.remove());
        
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="fas fa-exclamation-circle me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const form = document.getElementById('passwordResetConfirmForm');
        form.insertBefore(alertDiv, form.firstChild);
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }
    
    // Auto-focus on first password input
    if (password1Field) {
        password1Field.focus();
    }
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl+Enter to submit form
        if (e.ctrlKey && e.key === 'Enter') {
            e.preventDefault();
            passwordResetForm.submit();
        }
        
        // Escape to go back to login
        if (e.key === 'Escape') {
            if (confirm('Are you sure you want to leave? Your progress will be lost.')) {
                window.location.href = '{% url "auth:login" %}';
            }
        }
    });
    
    // Add fade-in animation
    const card = document.querySelector('.card');
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    
    setTimeout(() => {
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
    }, 100);
    
    // Animate requirement checks
    const requirements = document.querySelectorAll('[id^="req-"]');
    requirements.forEach(req => {
        req.style.transition = 'color 0.3s ease';
    });
});
</script>
{% endif %}
{% endblock %}