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

{% block title %}Set New Password - Accounts{% endblock %}

{% block extra_head %}
<style>
.reset-confirm-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.reset-confirm-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    max-width: 500px;
    width: 100%;
}

.reset-confirm-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

.reset-confirm-body {
    padding: 2rem;
}

.form-floating {
    margin-bottom: 1rem;
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: #495057;
}

.btn-reset-confirm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-reset-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.password-requirements {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.requirement {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.requirement:last-child {
    margin-bottom: 0;
}

.requirement i {
    margin-right: 0.5rem;
    width: 16px;
    transition: all 0.3s ease;
}

.requirement.valid {
    color: #28a745;
}

.requirement.invalid {
    color: #dc3545;
}

.requirement.neutral {
    color: #6c757d;
}

.password-strength {
    margin-top: 1rem;
}

.strength-meter {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.strength-fill {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.strength-weak { background: #dc3545; width: 25%; }
.strength-fair { background: #fd7e14; width: 50%; }
.strength-good { background: #ffc107; width: 75%; }
.strength-strong { background: #28a745; width: 100%; }

.strength-text {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.reset-confirm-footer {
    text-align: center;
    padding: 1rem 2rem 2rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.reset-confirm-footer a {
    color: #667eea;
    text-decoration: none;
}

.reset-confirm-footer a:hover {
    text-decoration: underline;
}

.success-animation {
    animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.password-success {
    text-align: center;
    padding: 2rem;
}

.password-success i {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1rem;
}

.invalid-link {
    text-align: center;
    padding: 2rem;
}

.invalid-link i {
    font-size: 4rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .reset-confirm-container {
        padding: 1rem;
    }
    
    .reset-confirm-card {
        margin: 0;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="reset-confirm-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="reset-confirm-card">
                    {% if validlink %}
                        {% if not password_changed %}
                        <div class="reset-confirm-header">
                            <h2 class="mb-0">
                                <i class="fas fa-lock me-2"></i>
                                Set New Password
                            </h2>
                            <p class="mb-0 mt-2 opacity-75">Create a strong, secure password</p>
                        </div>
                        
                        <div class="reset-confirm-body">
                            {% if messages %}
                                {% for message in messages %}
                                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                        {{ message }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                    </div>
                                {% endfor %}
                            {% endif %}
                            
                            {% if form.non_field_errors %}
                                <div class="alert alert-danger">
                                    {{ form.non_field_errors }}
                                </div>
                            {% endif %}
                            
                            <form method="post" id="resetConfirmForm">
                                {% csrf_token %}
                                
                                <div class="form-floating">
                                    <input type="password" class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}" 
                                           id="id_new_password1" name="new_password1" placeholder="New password" 
                                           autocomplete="new-password" required>
                                    <label for="id_new_password1">New password</label>
                                    <button type="button" class="password-toggle" onclick="togglePassword('id_new_password1', this)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    {% if form.new_password1.errors %}
                                        <div class="invalid-feedback">
                                            {{ form.new_password1.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-floating">
                                    <input type="password" class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}" 
                                           id="id_new_password2" name="new_password2" placeholder="Confirm new password" 
                                           autocomplete="new-password" required>
                                    <label for="id_new_password2">Confirm new password</label>
                                    <button type="button" class="password-toggle" onclick="togglePassword('id_new_password2', this)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    {% if form.new_password2.errors %}
                                        <div class="invalid-feedback">
                                            {{ form.new_password2.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                                
                                <!-- Password Strength Meter -->
                                <div class="password-strength">
                                    <div class="strength-meter">
                                        <div class="strength-fill" id="strengthFill"></div>
                                    </div>
                                    <div class="strength-text" id="strengthText">Enter a password to see strength</div>
                                </div>
                                
                                <!-- Password Requirements -->
                                <div class="password-requirements">
                                    <h6 class="mb-3"><i class="fas fa-shield-alt me-2"></i>Password Requirements</h6>
                                    <div class="requirement neutral" id="req-length">
                                        <i class="fas fa-circle"></i>
                                        At least 8 characters long
                                    </div>
                                    <div class="requirement neutral" id="req-uppercase">
                                        <i class="fas fa-circle"></i>
                                        Contains uppercase letter (A-Z)
                                    </div>
                                    <div class="requirement neutral" id="req-lowercase">
                                        <i class="fas fa-circle"></i>
                                        Contains lowercase letter (a-z)
                                    </div>
                                    <div class="requirement neutral" id="req-number">
                                        <i class="fas fa-circle"></i>
                                        Contains number (0-9)
                                    </div>
                                    <div class="requirement neutral" id="req-special">
                                        <i class="fas fa-circle"></i>
                                        Contains special character (!@#$%^&*)
                                    </div>
                                    <div class="requirement neutral" id="req-match">
                                        <i class="fas fa-circle"></i>
                                        Passwords match
                                    </div>
                                </div>
                                
                                <button type="submit" class="btn btn-primary btn-reset-confirm w-100 mt-3" id="resetConfirmButton" disabled>
                                    <span class="spinner-border spinner-border-sm me-2 d-none" id="resetConfirmSpinner"></span>
                                    <i class="fas fa-check me-2"></i>
                                    Update Password
                                </button>
                            </form>
                        </div>
                        {% else %}
                        <div class="reset-confirm-header bg-success">
                            <h2 class="mb-0">
                                <i class="fas fa-check-circle me-2"></i>
                                Password Updated
                            </h2>
                            <p class="mb-0 mt-2 opacity-75">Your password has been successfully changed</p>
                        </div>
                        
                        <div class="password-success success-animation">
                            <i class="fas fa-shield-check"></i>
                            <h4 class="mb-3">Success!</h4>
                            <p class="mb-3">
                                Your password has been updated successfully. You can now sign in with your new password.
                            </p>
                            
                            <div class="alert alert-success">
                                <h6><i class="fas fa-info-circle me-2"></i>Security Tips:</h6>
                                <ul class="mb-0 text-start">
                                    <li>Keep your password secure and don't share it</li>
                                    <li>Consider enabling two-factor authentication</li>
                                    <li>Use a unique password for this account</li>
                                    <li>Update your password regularly</li>
                                </ul>
                            </div>
                            
                            <div class="mt-3">
                                <a href="{% url 'accounts:login' %}" class="btn btn-primary btn-lg">
                                    <i class="fas fa-sign-in-alt me-2"></i>
                                    Sign In Now
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    {% else %}
                    <div class="reset-confirm-header bg-danger">
                        <h2 class="mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Invalid Reset Link
                        </h2>
                        <p class="mb-0 mt-2 opacity-75">This password reset link is not valid</p>
                    </div>
                    
                    <div class="invalid-link">
                        <i class="fas fa-times-circle"></i>
                        <h4 class="mb-3">Link Expired or Invalid</h4>
                        <p class="mb-3">
                            This password reset link has expired or is no longer valid.
                        </p>
                        
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-clock me-2"></i>Common Reasons:</h6>
                            <ul class="mb-0 text-start">
                                <li>The link has expired (links are valid for 1 hour)</li>
                                <li>The link has already been used</li>
                                <li>A newer reset request was made</li>
                                <li>The link was copied incorrectly</li>
                            </ul>
                        </div>
                        
                        <div class="mt-3">
                            <a href="{% url 'accounts:password_reset' %}" class="btn btn-primary me-2">
                                <i class="fas fa-redo me-1"></i>Request New Reset
                            </a>
                            <a href="{% url 'accounts:login' %}" class="btn btn-outline-primary">
                                <i class="fas fa-arrow-left me-1"></i>Back to Login
                            </a>
                        </div>
                    </div>
                    {% endif %}
                    
                    <div class="reset-confirm-footer">
                        <p class="mb-2">
                            Need help? 
                            <a href="{% url 'accounts:help' %}">Visit our help center</a>
                        </p>
                        <p class="mb-0">
                            <a href="{% url 'accounts:contact' %}">Contact Support</a> • 
                            <a href="{% url 'accounts:privacy' %}">Privacy Policy</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Password visibility toggle
function togglePassword(fieldId, button) {
    const field = document.getElementById(fieldId);
    const icon = button.querySelector('i');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

// Password strength checker
function checkPasswordStrength(password) {
    let score = 0;
    const requirements = {
        length: password.length >= 8,
        uppercase: /[A-Z]/.test(password),
        lowercase: /[a-z]/.test(password),
        number: /[0-9]/.test(password),
        special: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
    };
    
    // Calculate score
    Object.values(requirements).forEach(req => {
        if (req) score++;
    });
    
    // Determine strength level
    let strength = 'weak';
    if (score >= 5) strength = 'strong';
    else if (score >= 4) strength = 'good';
    else if (score >= 3) strength = 'fair';
    
    return { score, strength, requirements };
}

// Update password requirements display
function updateRequirements(requirements, passwordsMatch) {
    const reqElements = {
        length: document.getElementById('req-length'),
        uppercase: document.getElementById('req-uppercase'),
        lowercase: document.getElementById('req-lowercase'),
        number: document.getElementById('req-number'),
        special: document.getElementById('req-special'),
        match: document.getElementById('req-match')
    };
    
    // Update individual requirements
    Object.keys(requirements).forEach(req => {
        const element = reqElements[req];
        const icon = element.querySelector('i');
        
        if (requirements[req]) {
            element.className = 'requirement valid';
            icon.className = 'fas fa-check-circle';
        } else {
            element.className = 'requirement invalid';
            icon.className = 'fas fa-times-circle';
        }
    });
    
    // Update password match requirement
    const matchElement = reqElements.match;
    const matchIcon = matchElement.querySelector('i');
    
    if (passwordsMatch === null) {
        matchElement.className = 'requirement neutral';
        matchIcon.className = 'fas fa-circle';
    } else if (passwordsMatch) {
        matchElement.className = 'requirement valid';
        matchIcon.className = 'fas fa-check-circle';
    } else {
        matchElement.className = 'requirement invalid';
        matchIcon.className = 'fas fa-times-circle';
    }
}

// Update strength meter
function updateStrengthMeter(strength, score) {
    const strengthFill = document.getElementById('strengthFill');
    const strengthText = document.getElementById('strengthText');
    
    // Remove existing classes
    strengthFill.className = 'strength-fill';
    
    // Add new class and update text
    if (score === 0) {
        strengthText.textContent = 'Enter a password to see strength';
        strengthText.style.color = '#6c757d';
    } else {
        strengthFill.classList.add(`strength-${strength}`);
        
        const strengthTexts = {
            weak: 'Weak',
            fair: 'Fair',
            good: 'Good',
            strong: 'Strong'
        };
        
        const strengthColors = {
            weak: '#dc3545',
            fair: '#fd7e14',
            good: '#ffc107',
            strong: '#28a745'
        };
        
        strengthText.textContent = strengthTexts[strength];
        strengthText.style.color = strengthColors[strength];
    }
}

// Check if form is valid
function checkFormValidity() {
    const password1 = document.getElementById('id_new_password1').value;
    const password2 = document.getElementById('id_new_password2').value;
    const button = document.getElementById('resetConfirmButton');
    
    if (!password1) {
        button.disabled = true;
        return;
    }
    
    const { requirements } = checkPasswordStrength(password1);
    const passwordsMatch = password2 ? password1 === password2 : null;
    
    // Check if all requirements are met
    const allRequirementsMet = Object.values(requirements).every(req => req);
    const passwordsMatchValid = passwordsMatch === true;
    
    button.disabled = !(allRequirementsMet && passwordsMatchValid);
}

// Real-time password validation
document.getElementById('id_new_password1')?.addEventListener('input', function() {
    const password = this.value;
    const password2 = document.getElementById('id_new_password2').value;
    
    if (password) {
        const { score, strength, requirements } = checkPasswordStrength(password);
        const passwordsMatch = password2 ? password === password2 : null;
        
        updateStrengthMeter(strength, score);
        updateRequirements(requirements, passwordsMatch);
    } else {
        updateStrengthMeter('', 0);
        updateRequirements({
            length: false,
            uppercase: false,
            lowercase: false,
            number: false,
            special: false
        }, null);
    }
    
    checkFormValidity();
});

// Real-time password confirmation validation
document.getElementById('id_new_password2')?.addEventListener('input', function() {
    const password1 = document.getElementById('id_new_password1').value;
    const password2 = this.value;
    
    if (password1) {
        const { requirements } = checkPasswordStrength(password1);
        const passwordsMatch = password2 ? password1 === password2 : null;
        
        updateRequirements(requirements, passwordsMatch);
        
        // Update field validation state
        if (password2) {
            if (password1 === password2) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            } else {
                this.classList.remove('is-valid');
                this.classList.add('is-invalid');
            }
        } else {
            this.classList.remove('is-valid', 'is-invalid');
        }
    }
    
    checkFormValidity();
});

// Form submission handling
document.getElementById('resetConfirmForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const button = document.getElementById('resetConfirmButton');
    const spinner = document.getElementById('resetConfirmSpinner');
    const form = this;
    
    const password1 = document.getElementById('id_new_password1').value;
    const password2 = document.getElementById('id_new_password2').value;
    
    // Final validation
    if (!password1 || !password2) {
        showError('Please fill in both password fields');
        return;
    }
    
    if (password1 !== password2) {
        showError('Passwords do not match');
        return;
    }
    
    const { requirements } = checkPasswordStrength(password1);
    if (!Object.values(requirements).every(req => req)) {
        showError('Please ensure your password meets all requirements');
        return;
    }
    
    // Show loading state
    button.disabled = true;
    spinner.classList.remove('d-none');
    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Updating...';
    
    // Submit form
    form.submit();
});

// Show error message
function showError(message) {
    // Remove existing alerts
    document.querySelectorAll('.alert-danger').forEach(alert => alert.remove());
    
    // Create new alert
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-danger 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>
    `;
    
    // Insert at top of form body
    const resetBody = document.querySelector('.reset-confirm-body');
    if (resetBody) {
        resetBody.insertBefore(alertDiv, resetBody.firstChild);
    }
}

// Auto-focus on first password field
document.addEventListener('DOMContentLoaded', function() {
    const passwordField = document.getElementById('id_new_password1');
    if (passwordField) {
        passwordField.focus();
    }
    
    // Add animation to success state
    const passwordSuccess = document.querySelector('.password-success');
    if (passwordSuccess) {
        passwordSuccess.classList.add('success-animation');
    }
});

// Prevent form submission on Enter in password fields (to avoid accidental submission)
document.querySelectorAll('#id_new_password1, #id_new_password2').forEach(field => {
    field.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            
            // Move to next field or submit if all fields are filled
            if (this.id === 'id_new_password1') {
                document.getElementById('id_new_password2').focus();
            } else if (this.id === 'id_new_password2') {
                const button = document.getElementById('resetConfirmButton');
                if (!button.disabled) {
                    button.click();
                }
            }
        }
    });
});

// Prevent multiple submissions
let isSubmitting = false;
document.getElementById('resetConfirmForm')?.addEventListener('submit', function(e) {
    if (isSubmitting) {
        e.preventDefault();
        return false;
    }
    isSubmitting = true;
});
</script>
{% endblock %}