{% extends "base_authenticated.html" %} 
{% block title %}Edit User - QR Code Management{% endblock %} 

{% block content %}
<div class="edit-user-page">
    <div class="page-header">
        <div class="header-content">
            <h1>
                <i class="fas fa-user-edit"></i>
                Edit User: {{ user.full_name }}
            </h1>
            <p>Modify user information and permissions</p>
        </div>
    </div>

    <div class="edit-user-container">
        <form id="editUserForm" method="POST" action="{{ url_for('edit_user', user_id=user.id) }}">
            <!-- User Information Section -->
            <div class="form-section">
                <h3>
                    <i class="fas fa-user"></i>
                    User Information
                </h3>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="full_name">
                            <i class="fas fa-id-card"></i>
                            Full Name
                        </label>
                        <input type="text" id="full_name" name="full_name" 
                               value="{{ user.full_name }}" required 
                               placeholder="Enter full name">
                        <small class="form-help">First and last name</small>
                    </div>

                    <div class="form-group">
                        <label for="email">
                            <i class="fas fa-envelope"></i>
                            Email Address
                        </label>
                        <input type="email" id="email" name="email" 
                               value="{{ user.email }}" required 
                               placeholder="user@example.com">
                        <small class="form-help">Must be unique in the system</small>
                    </div>
                </div>

                <div class="form-group">
                    <label for="username">
                        <i class="fas fa-user"></i>
                        Username
                    </label>
                    <input type="text" id="username" value="{{ user.username }}" disabled>
                    <small class="form-help">Username cannot be changed</small>
                </div>

                <div class="form-group">
                    <label for="role">
                        <i class="fas fa-user-shield"></i>
                        User Role
                    </label>
                    <select id="role" name="role" required>
                        <option value="staff" {{ 'selected' if user.role == 'staff' else '' }}>Staff User</option>
                        <option value="payroll" {{ 'selected' if user.role == 'payroll' else '' }}>Payroll Specialist</option>
                        <option value="project_manager" {{ 'selected' if user.role == 'project_manager' else '' }}>Project Manager</option>
                        <option value="admin" {{ 'selected' if user.role == 'admin' else '' }}>Administrator</option>
                    </select>
                    <small class="form-help">Changes role permissions immediately</small>
                </div>
            </div>

            <!-- Role Change Warning -->
            <div class="role-warning" id="roleWarning" style="display: none;">
                <div class="warning-header">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>Role Change Warning</span>
                </div>
                <div class="warning-content" id="warningContent">
                    <!-- Dynamic warning content -->
                </div>
            </div>

            <!-- Password Section -->
            <div class="password-section">
                <h3>
                    <i class="fas fa-key"></i>
                    Password Management
                </h3>
                
                <div class="form-group">
                    <label for="new_password">
                        <i class="fas fa-lock"></i>
                        New Password (Optional)
                    </label>
                    <input type="password" id="new_password" name="new_password" 
                           minlength="6" placeholder="Leave blank to keep current password">
                    <div class="password-strength" id="passwordStrength"></div>
                    <small class="form-help">Only enter a password if you want to change it</small>
                </div>

                <div class="form-group">
                    <label for="confirm_password">
                        <i class="fas fa-check-circle"></i>
                        Confirm New Password
                    </label>
                    <input type="password" id="confirm_password" name="confirm_password"
                           placeholder="Confirm new password">
                    <small class="form-help">Must match the new password above</small>
                </div>
            </div>

            <!-- User Status Information -->
            <div class="user-status-section">
                <h3>
                    <i class="fas fa-info-circle"></i>
                    User Status Information
                </h3>
                
                <div class="status-grid">
                    <div class="status-item">
                        <strong>Current Status:</strong>
                        <span class="status-badge {{ 'active' if user.active_status else 'inactive' }}">
                            <i class="fas fa-{{ 'check-circle' if user.active_status else 'times-circle' }}"></i>
                            {{ 'Active' if user.active_status else 'Inactive' }}
                        </span>
                    </div>
                    
                    <div class="status-item">
                        <strong>Account Created:</strong>
                        <span>{{ user.created_date.strftime('%B %d, %Y at %I:%M %p') if user.created_date else 'Unknown' }}</span>
                    </div>
                    
                    <div class="status-item">
                        <strong>Created By:</strong>
                        <span>{{ user.creator.full_name if user.creator else 'System' }}</span>
                    </div>
                    
                    <div class="status-item">
                        <strong>Last Login:</strong>
                        <span>
                            {% if user.last_login_date %}
                                {{ user.last_login_date.strftime('%B %d, %Y at %I:%M %p') }}
                            {% else %}
                                Never logged in
                            {% endif %}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="form-actions">
                <a href="{{ url_for('users') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i>
                    Back to Users
                </a>
                
                <button type="button" class="btn btn-warning" id="resetPassword">
                    <i class="fas fa-key"></i>
                    Generate New Password
                </button>
                
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i>
                    Update User
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('editUserForm');
        const roleSelect = document.getElementById('role');
        const originalRole = '{{ user.role }}';
        const currentUserId = {{ session.get('user_id', 0) }};
        const editingUserId = {{ user.id }};
        const roleWarning = document.getElementById('roleWarning');
        const warningContent = document.getElementById('warningContent');
        const newPasswordInput = document.getElementById('new_password');
        const confirmPasswordInput = document.getElementById('confirm_password');
        const passwordStrength = document.getElementById('passwordStrength');
        const resetPasswordBtn = document.getElementById('resetPassword');

        // Role change warning system
        roleSelect.addEventListener('change', function() {
            const newRole = this.value;
            let warningMessage = '';
            
            if (originalRole !== newRole) {
                if (originalRole === 'admin' && newRole !== 'admin') {
                    if (editingUserId === currentUserId) {
                        warningMessage = `
                            <strong>WARNING: You are demoting yourself!</strong><br>
                            This will remove your admin privileges and you will lose access to:
                            <ul>
                                <li>User management</li>
                                <li>System administration</li>
                                <li>Advanced settings</li>
                            </ul>
                            <strong>You will need another admin to restore your privileges.</strong>
                        `;
                    } else {
                        warningMessage = `
                            <strong>Demoting Admin to ${getRoleDisplayName(newRole)}</strong><br>
                            This user will lose admin privileges and access to:
                            <ul>
                                <li>User management</li>
                                <li>System administration</li>
                                <li>Advanced settings</li>
                            </ul>
                        `;
                    }
                } else if (originalRole !== 'admin' && newRole === 'admin') {
                    warningMessage = `
                        <strong>Promoting ${getRoleDisplayName(originalRole)} to Admin</strong><br>
                        This user will gain full system access including:
                        <ul>
                            <li>User management</li>
                            <li>System administration</li>
                            <li>All QR code operations</li>
                        </ul>
                    `;
                } else if (originalRole !== newRole && newRole !== 'admin' && originalRole !== 'admin') {
                    warningMessage = `
                        <strong>Changing role from ${getRoleDisplayName(originalRole)} to ${getRoleDisplayName(newRole)}</strong><br>
                        Both roles have similar permissions, but this change will be reflected in:
                        <ul>
                            <li>User interface labels</li>
                            <li>Future feature access</li>
                            <li>Reporting and analytics</li>
                        </ul>
                    `;
                }
                
                if (warningMessage) {
                    warningContent.innerHTML = warningMessage;
                    roleWarning.style.display = 'block';
                    setTimeout(() => roleWarning.classList.add('fade-in'), 100);
                } else {
                    hideRoleWarning();
                }
            } else {
                hideRoleWarning();
            }
        });

        function hideRoleWarning() {
            roleWarning.classList.remove('fade-in');
            setTimeout(() => roleWarning.style.display = 'none', 300);
        }

        function getRoleDisplayName(role) {
            const roleNames = {
                'staff': 'Staff User',
                'payroll': 'Payroll Specialist', 
                'project_manager': 'Project Manager',
                'admin': 'Administrator'
            };
            return roleNames[role] || role;
        }

        // Password strength indicator
        newPasswordInput.addEventListener('input', function() {
            const password = this.value;
            
            if (password.length === 0) {
                passwordStrength.className = 'password-strength';
                passwordStrength.textContent = '';
                return;
            }
            
            const strength = calculatePasswordStrength(password);
            passwordStrength.className = `password-strength ${strength.class}`;
            passwordStrength.textContent = strength.text;
        });

        // Password confirmation validation
        confirmPasswordInput.addEventListener('input', function() {
            const newPassword = newPasswordInput.value;
            const confirmPassword = this.value;
            
            if (confirmPassword.length > 0) {
                if (newPassword === confirmPassword) {
                    this.setCustomValidity('');
                    this.classList.remove('invalid');
                    this.classList.add('valid');
                } else {
                    this.setCustomValidity('Passwords do not match');
                    this.classList.remove('valid');
                    this.classList.add('invalid');
                }
            } else {
                this.setCustomValidity('');
                this.classList.remove('valid', 'invalid');
            }
        });

        // Generate random password
        resetPasswordBtn.addEventListener('click', function() {
            const newPassword = generateRandomPassword();
            newPasswordInput.value = newPassword;
            confirmPasswordInput.value = newPassword;
            
            // Trigger events to update UI
            newPasswordInput.dispatchEvent(new Event('input'));
            confirmPasswordInput.dispatchEvent(new Event('input'));
            
            // Show the generated password in a modal or alert
            if (confirm(`Generated password: ${newPassword}\n\nThis password has been filled in the form. Make sure to save it and share it securely with the user.\n\nContinue with this password?`)) {
                newPasswordInput.focus();
            } else {
                newPasswordInput.value = '';
                confirmPasswordInput.value = '';
                newPasswordInput.dispatchEvent(new Event('input'));
                confirmPasswordInput.dispatchEvent(new Event('input'));
            }
        });

        // Form validation
        form.addEventListener('submit', function(e) {
            const newPassword = newPasswordInput.value;
            const confirmPassword = confirmPasswordInput.value;
            
            // If password is being changed, validate it
            if (newPassword || confirmPassword) {
                if (newPassword.length < 6) {
                    e.preventDefault();
                    alert('Password must be at least 6 characters long.');
                    newPasswordInput.focus();
                    return;
                }
                
                if (newPassword !== confirmPassword) {
                    e.preventDefault();
                    alert('Password confirmation does not match.');
                    confirmPasswordInput.focus();
                    return;
                }
            }
            
            // Confirm if demoting self from admin
            if (editingUserId === currentUserId && originalRole === 'admin' && roleSelect.value !== 'admin') {
                if (!confirm('Are you sure you want to remove your own admin privileges? You will lose access to administrative functions immediately.')) {
                    e.preventDefault();
                    return;
                }
            }
        });
    });

    function calculatePasswordStrength(password) {
        let score = 0;
        
        // Length scoring
        if (password.length >= 6) score += 1;
        if (password.length >= 8) score += 1;
        if (password.length >= 12) score += 1;
        
        // Character variety scoring
        if (/[a-z]/.test(password)) score += 1;
        if (/[A-Z]/.test(password)) score += 1;
        if (/[0-9]/.test(password)) score += 1;
        if (/[^a-zA-Z0-9]/.test(password)) score += 1;
        
        if (score < 3) {
            return { class: 'weak', text: 'Weak password' };
        } else if (score < 5) {
            return { class: 'medium', text: 'Medium strength' };
        } else {
            return { class: 'strong', text: 'Strong password' };
        }
    }

    function generateRandomPassword() {
        const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
        let password = '';
        
        // Ensure at least one of each type
        password += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[Math.floor(Math.random() * 26)];
        password += 'abcdefghijklmnopqrstuvwxyz'[Math.floor(Math.random() * 26)];
        password += '0123456789'[Math.floor(Math.random() * 10)];
        password += '!@#$%^&*'[Math.floor(Math.random() * 8)];
        
        // Fill remaining length
        for (let i = 4; i < 12; i++) {
            password += chars[Math.floor(Math.random() * chars.length)];
        }
        
        // Shuffle the password
        return password.split('').sort(() => 0.5 - Math.random()).join('');
    }
</script>
{% endblock %}