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

{% block title %}Change Password - Accounts{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'accounts:dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'accounts:profile' %}">Profile</a></li>
        <li class="breadcrumb-item active" aria-current="page">Change Password</li>
    </ol>
</nav>
{% endblock %}

{% block page_header %}
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="h3 mb-0">
            <i class="fas fa-key text-primary me-2"></i>
            Change Password
        </h1>
        <p class="text-muted mb-0">Update your account password for better security</p>
    </div>
    <div>
        <a href="{% url 'accounts:profile' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Back to Profile
        </a>
    </div>
</div>
{% endblock %}

{% block extra_head %}
<style>
.password-change-container {
    max-width: 600px;
    margin: 0 auto;
}

.password-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.password-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-bottom: none;
}

.password-card-body {
    padding: 2rem;
}

.form-floating {
    margin-bottom: 1.5rem;
    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-change-password {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-change-password: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-bottom: 1.5rem;
}

.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-bottom: 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;
}

.security-tips {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.security-tip {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.security-tip:last-child {
    margin-bottom: 0;
}

.security-tip i {
    color: #0066cc;
    margin-right: 0.75rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.last-changed {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.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);
    }
}

@media (max-width: 768px) {
    .password-card-body {
        padding: 1.5rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="password-change-container">
    <div class="password-card">
        <div class="password-card-header">
            <h4 class="mb-0">
                <i class="fas fa-shield-alt me-2"></i>
                Change Your Password
            </h4>
            <p class="mb-0 mt-2 opacity-75">Keep your account secure with a strong password</p>
        </div>
        
        <div class="password-card-body">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show success-animation" role="alert">
                        <i class="fas fa-{% if message.tags == 'success' %}check-circle{% elif message.tags == 'error' %}exclamation-circle{% else %}info-circle{% endif %} me-2"></i>
                        {{ 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">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ form.non_field_errors }}
                </div>
            {% endif %}
            
            <!-- Last Password Change Info -->
            {% if user.last_login %}
            <div class="last-changed">
                <div class="d-flex align-items-center">
                    <i class="fas fa-history text-muted me-2"></i>
                    <div>
                        <strong>Last password change:</strong> 
                        <span class="text-muted">{{ user.password_changed_at|default:"Not available" }}</span>
                    </div>
                </div>
            </div>
            {% endif %}
            
            <form method="post" id="passwordChangeForm">
                {% csrf_token %}
                
                <!-- Current Password -->
                <div class="form-floating">
                    <input type="password" class="form-control {% if form.old_password.errors %}is-invalid{% endif %}" 
                           id="id_old_password" name="old_password" placeholder="Current password" 
                           autocomplete="current-password" required>
                    <label for="id_old_password">Current password</label>
                    <button type="button" class="password-toggle" onclick="togglePassword('id_old_password', this)">
                        <i class="fas fa-eye"></i>
                    </button>
                    <div class="form-text">Enter your current password to verify your identity</div>
                    {% if form.old_password.errors %}
                        <div class="invalid-feedback">
                            {{ form.old_password.errors.0 }}
                        </div>
                    {% endif %}
                </div>
                
                <!-- New Password -->
                <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>
                
                <!-- 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>
                
                <!-- Confirm New Password -->
                <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 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 class="requirement neutral" id="req-different">
                        <i class="fas fa-circle"></i>
                        Different from current password
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-change-password flex-fill" id="changePasswordButton" disabled>
                        <span class="spinner-border spinner-border-sm me-2 d-none" id="changePasswordSpinner"></span>
                        <i class="fas fa-check me-2"></i>
                        Change Password
                    </button>
                    <a href="{% url 'accounts:profile' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>
                        Cancel
                    </a>
                </div>
            </form>
            
            <!-- Security Tips -->
            <div class="security-tips">
                <h6 class="mb-3"><i class="fas fa-lightbulb me-2"></i>Security Tips</h6>
                <div class="security-tip">
                    <i class="fas fa-check-circle"></i>
                    <div>
                        <strong>Use a unique password</strong><br>
                        Don't reuse passwords from other accounts or services.
                    </div>
                </div>
                <div class="security-tip">
                    <i class="fas fa-check-circle"></i>
                    <div>
                        <strong>Make it memorable</strong><br>
                        Use a passphrase or combination of words that's easy for you to remember.
                    </div>
                </div>
                <div class="security-tip">
                    <i class="fas fa-check-circle"></i>
                    <div>
                        <strong>Consider a password manager</strong><br>
                        Use a reputable password manager to generate and store strong passwords.
                    </div>
                </div>
                <div class="security-tip">
                    <i class="fas fa-check-circle"></i>
                    <div>
                        <strong>Enable two-factor authentication</strong><br>
                        Add an extra layer of security to your account.
                    </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, isDifferent) {
    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'),
        different: document.getElementById('req-different')
    };
    
    // 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 different from current password requirement
    const differentElement = reqElements.different;
    const differentIcon = differentElement.querySelector('i');
    
    if (isDifferent === null) {
        differentElement.className = 'requirement neutral';
        differentIcon.className = 'fas fa-circle';
    } else if (isDifferent) {
        differentElement.className = 'requirement valid';
        differentIcon.className = 'fas fa-check-circle';
    } else {
        differentElement.className = 'requirement invalid';
        differentIcon.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 oldPassword = document.getElementById('id_old_password').value;
    const newPassword1 = document.getElementById('id_new_password1').value;
    const newPassword2 = document.getElementById('id_new_password2').value;
    const button = document.getElementById('changePasswordButton');
    
    if (!oldPassword || !newPassword1 || !newPassword2) {
        button.disabled = true;
        return;
    }
    
    const { requirements } = checkPasswordStrength(newPassword1);
    const passwordsMatch = newPassword1 === newPassword2;
    const isDifferent = oldPassword !== newPassword1;
    
    // Check if all requirements are met
    const allRequirementsMet = Object.values(requirements).every(req => req);
    
    button.disabled = !(allRequirementsMet && passwordsMatch && isDifferent);
}

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

// Real-time validation for password confirmation
document.getElementById('id_new_password2')?.addEventListener('input', function() {
    const newPassword1 = document.getElementById('id_new_password1').value;
    const newPassword2 = this.value;
    const oldPassword = document.getElementById('id_old_password').value;
    
    if (newPassword1) {
        const { requirements } = checkPasswordStrength(newPassword1);
        const passwordsMatch = newPassword2 ? newPassword1 === newPassword2 : null;
        const isDifferent = oldPassword ? oldPassword !== newPassword1 : null;
        
        updateRequirements(requirements, passwordsMatch, isDifferent);
        
        // Update field validation state
        if (newPassword2) {
            if (newPassword1 === newPassword2) {
                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();
});

// Real-time validation for old password
document.getElementById('id_old_password')?.addEventListener('input', function() {
    const oldPassword = this.value;
    const newPassword1 = document.getElementById('id_new_password1').value;
    
    if (oldPassword && newPassword1) {
        const { requirements } = checkPasswordStrength(newPassword1);
        const newPassword2 = document.getElementById('id_new_password2').value;
        const passwordsMatch = newPassword2 ? newPassword1 === newPassword2 : null;
        const isDifferent = oldPassword !== newPassword1;
        
        updateRequirements(requirements, passwordsMatch, isDifferent);
    }
    
    checkFormValidity();
});

// Form submission handling
document.getElementById('passwordChangeForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const button = document.getElementById('changePasswordButton');
    const spinner = document.getElementById('changePasswordSpinner');
    const form = this;
    
    const oldPassword = document.getElementById('id_old_password').value;
    const newPassword1 = document.getElementById('id_new_password1').value;
    const newPassword2 = document.getElementById('id_new_password2').value;
    
    // Final validation
    if (!oldPassword || !newPassword1 || !newPassword2) {
        showError('Please fill in all password fields');
        return;
    }
    
    if (newPassword1 !== newPassword2) {
        showError('New passwords do not match');
        return;
    }
    
    if (oldPassword === newPassword1) {
        showError('New password must be different from current password');
        return;
    }
    
    const { requirements } = checkPasswordStrength(newPassword1);
    if (!Object.values(requirements).every(req => req)) {
        showError('Please ensure your new 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>Changing...';
    
    // 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 card body
    const cardBody = document.querySelector('.password-card-body');
    if (cardBody) {
        cardBody.insertBefore(alertDiv, cardBody.firstChild);
    }
}

// Auto-focus on current password field
document.addEventListener('DOMContentLoaded', function() {
    const oldPasswordField = document.getElementById('id_old_password');
    if (oldPasswordField) {
        oldPasswordField.focus();
    }
});

// Prevent multiple submissions
let isSubmitting = false;
document.getElementById('passwordChangeForm')?.addEventListener('submit', function(e) {
    if (isSubmitting) {
        e.preventDefault();
        return false;
    }
    isSubmitting = true;
});

// Handle keyboard navigation
document.querySelectorAll('#id_old_password, #id_new_password1, #id_new_password2').forEach((field, index, fields) => {
    field.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            
            // Move to next field or submit
            if (index < fields.length - 1) {
                fields[index + 1].focus();
            } else {
                const button = document.getElementById('changePasswordButton');
                if (!button.disabled) {
                    button.click();
                }
            }
        }
    });
});
</script>
{% endblock %}