{% extends "layouts/base.html" %}

{% load static %}

{% block title %}
    {% if user.pk %} Edit User - {{ user.get_full_name|default:user.username }}
    {% else %} Add User {% endif %}
{% endblock title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'plugins/select2/css/select2.min.css' %}">
<style>
    .select2-container--default .select2-results__option[aria-selected=true] {
        display: none;
    }
    
    /* Modern loading spinner */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .btn-loading {
        position: relative;
        pointer-events: none;
    }
    
    .btn-loading::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        margin: auto;
        border: 2px solid transparent;
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    /* Disabled button styles */
    .btn.disabled, .btn:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    /* Form validation styles */
    .form-control.is-invalid {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    }

    .form-control.is-valid {
        border-color: #28a745 !important;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    }

    .validation-error {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 5px;
    }

    .validation-success {
        color: #155724;
        font-size: 0.875rem;
        margin-top: 5px;
    }

    .shake-animation {
        animation: shake 0.5s ease-in-out;
    }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }

    /* User Preview Styles */
    .user-preview {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        margin-top: 20px;
    }
    
    .preview-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    
    .preview-avatar {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: 1rem;
        border: 2px solid #dee2e6;
    }
    
    .badge {
        margin: 0.25rem;
    }
    
    /* Card styles */
    .card {
        margin-bottom: 1.5rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem 1.25rem;
    }
    
    .card-title {
        margin-bottom: 0;
        font-size: 1.125rem;
        font-weight: 600;
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    
    .help-text {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Avatar upload styles */
    .avatar-upload-container {
        position: relative;
        display: inline-block;
    }
    
    .avatar-preview {
        width: 120px;
        height: 120px;
        border: 2px dashed #dee2e6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 10px;
    }
    
    .avatar-preview:hover {
        border-color: #007bff;
        background: #e7f3ff;
    }
    
    .avatar-preview.has-image {
        border-style: solid;
        border-color: #dee2e6;
    }
    
    .avatar-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    .avatar-placeholder {
        text-align: center;
        color: #6c757d;
    }
    
    .avatar-placeholder i {
        font-size: 2rem;
        margin-bottom: 8px;
        display: block;
    }
    
    .avatar-remove-btn {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #dc3545;
        color: white;
        border: none;
        font-size: 12px;
        cursor: pointer;
        display: none;
    }
    
    .avatar-upload-container:hover .avatar-remove-btn {
        display: block;
    }
    
    .form-floating {
        margin-bottom: 1rem;
    }
    
    .form-floating > .form-control {
        height: calc(3.5rem + 2px);
        line-height: 1.25;
    }
    
    .form-floating > label {
        padding: 1rem 0.75rem;
    }
    
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label {
        opacity: .65;
        transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">
        {% if user.pk %}
            Edit User
        {% else %}
            Add User
        {% endif %}
    </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'accounts:user_list' %}">Users</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {% if user.pk %}
                    Edit {{ user.get_full_name|default:user.username }}
                {% else %}
                    Add User
                {% endif %}
            </li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<form method="post" enctype="multipart/form-data" id="userForm" novalidate>
    {% csrf_token %}
    
    <div class="row">
        <!-- Main Form -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fe fe-user me-2"></i>Basic Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.username }}
                                <label for="{{ form.username.id_for_label }}" class="required-field">Username</label>
                                {% if form.username.errors %}
                                    <div class="validation-error">{{ form.username.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.email }}
                                <label for="{{ form.email.id_for_label }}" class="required-field">Email</label>
                                {% if form.email.errors %}
                                    <div class="validation-error">{{ form.email.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.first_name }}
                                <label for="{{ form.first_name.id_for_label }}">First Name</label>
                                {% if form.first_name.errors %}
                                    <div class="validation-error">{{ form.first_name.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.last_name }}
                                <label for="{{ form.last_name.id_for_label }}">Last Name</label>
                                {% if form.last_name.errors %}
                                    <div class="validation-error">{{ form.last_name.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    {% if not user.pk %}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.password1 }}
                                <label for="{{ form.password1.id_for_label }}" class="required-field">Password</label>
                                {% if form.password1.errors %}
                                    <div class="validation-error">{{ form.password1.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">Your password must contain at least 8 characters.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ form.password2 }}
                                <label for="{{ form.password2.id_for_label }}" class="required-field">Confirm Password</label>
                                {% if form.password2.errors %}
                                    <div class="validation-error">{{ form.password2.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">Enter the same password as before, for verification.</div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Permissions & Groups -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fe fe-shield me-2"></i>Permissions & Groups
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.groups.id_for_label }}" class="form-label">Groups</label>
                                {{ form.groups }}
                                {% if form.groups.errors %}
                                    <div class="validation-error">{{ form.groups.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">The groups this user belongs to. A user will get all permissions granted to each of their groups.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.user_permissions.id_for_label }}" class="form-label">User Permissions</label>
                                {{ form.user_permissions }}
                                {% if form.user_permissions.errors %}
                                    <div class="validation-error">{{ form.user_permissions.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">Specific permissions for this user.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="form-check mb-3">
                                {{ form.is_staff }}
                                <label class="form-check-label" for="{{ form.is_staff.id_for_label }}">
                                    Staff status
                                </label>
                                {% if form.is_staff.errors %}
                                    <div class="validation-error">{{ form.is_staff.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">Designates whether the user can log into this admin site.</div>
                            </div>
                            
                            <div class="form-check mb-3">
                                {{ form.is_active }}
                                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                    Active
                                </label>
                                {% if form.is_active.errors %}
                                    <div class="validation-error">{{ form.is_active.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">Designates whether this user should be treated as active. Unselect this instead of deleting accounts.</div>
                            </div>
                            
                            <div class="form-check">
                                {{ form.is_superuser }}
                                <label class="form-check-label" for="{{ form.is_superuser.id_for_label }}">
                                    Superuser status
                                </label>
                                {% if form.is_superuser.errors %}
                                    <div class="validation-error">{{ form.is_superuser.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">Designates that this user has all permissions without explicitly assigning them.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Avatar Upload -->
            {% if form.avatar %}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fe fe-image me-2"></i>Profile Picture
                    </h5>
                </div>
                <div class="card-body text-center">
                    <div class="avatar-upload-container">
                        <div class="avatar-preview" id="avatarPreview" onclick="document.getElementById('{{ form.avatar.id_for_label }}').click()">
                            {% if user.avatar %}
                                <img src="{{ user.avatar.url }}" alt="Avatar" id="avatarImage">
                            {% else %}
                                <div class="avatar-placeholder">
                                    <i class="fe fe-user"></i>
                                    <small>Click to upload</small>
                                </div>
                            {% endif %}
                        </div>
                        {% if user.avatar %}
                            <button type="button" class="avatar-remove-btn" onclick="removeAvatar()">
                                <i class="fe fe-x"></i>
                            </button>
                        {% endif %}
                    </div>
                    
                    {{ form.avatar }}
                    {% if form.avatar.errors %}
                        <div class="validation-error">{{ form.avatar.errors.0 }}</div>
                    {% endif %}
                    <div class="help-text">Upload a profile picture. Recommended size: 200x200px</div>
                </div>
            </div>
            {% endif %}
            
            <!-- User Preview -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fe fe-eye me-2"></i>Preview
                    </h5>
                </div>
                <div class="card-body">
                    <div class="user-preview">
                        <div class="preview-icon">
                            <i class="fe fe-user"></i>
                        </div>
                        <h6 id="previewName">{{ user.get_full_name|default:user.username|default:'New User' }}</h6>
                        <p class="text-muted mb-2" id="previewEmail">{{ user.email|default:'user@example.com' }}</p>
                        <div id="previewBadges">
                            {% if user.is_active %}
                                <span class="badge bg-success">Active</span>
                            {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                            {% if user.is_staff %}
                                <span class="badge bg-info">Staff</span>
                            {% endif %}
                            {% if user.is_superuser %}
                                <span class="badge bg-danger">Superuser</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fe fe-save me-2"></i>
                            {% if user.pk %}Update User{% else %}Create User{% endif %}
                        </button>
                        
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-outline-secondary">
                            <i class="fe fe-arrow-left me-2"></i>Back to Users
                        </a>
                        
                        {% if user.pk %}
                            <a href="{% url 'accounts:user_detail' user.pk %}" class="btn btn-outline-info">
                                <i class="fe fe-eye me-2"></i>View User
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock content %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script>
$(document).ready(function() {
    // Initialize Select2 for multi-select fields
    $('#{{ form.groups.id_for_label }}').select2({
        placeholder: 'Select groups...',
        allowClear: true,
        width: '100%'
    });
    
    $('#{{ form.user_permissions.id_for_label }}').select2({
        placeholder: 'Select permissions...',
        allowClear: true,
        width: '100%'
    });
    
    // Avatar upload preview
    $('#{{ form.avatar.id_for_label }}').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#avatarPreview').addClass('has-image');
                $('#avatarPreview').html('<img src="' + e.target.result + '" alt="Avatar" id="avatarImage">');
                $('.avatar-remove-btn').show();
            };
            reader.readAsDataURL(file);
        }
    });
    
    // Form validation and preview updates
    function updatePreview() {
        const firstName = $('#{{ form.first_name.id_for_label }}').val();
        const lastName = $('#{{ form.last_name.id_for_label }}').val();
        const username = $('#{{ form.username.id_for_label }}').val();
        const email = $('#{{ form.email.id_for_label }}').val();
        
        const fullName = (firstName + ' ' + lastName).trim() || username || 'New User';
        $('#previewName').text(fullName);
        $('#previewEmail').text(email || 'user@example.com');
        
        // Update badges
        let badges = '';
        if ($('#{{ form.is_active.id_for_label }}').is(':checked')) {
            badges += '<span class="badge bg-success">Active</span>';
        } else {
            badges += '<span class="badge bg-secondary">Inactive</span>';
        }
        
        if ($('#{{ form.is_staff.id_for_label }}').is(':checked')) {
            badges += '<span class="badge bg-info">Staff</span>';
        }
        
        if ($('#{{ form.is_superuser.id_for_label }}').is(':checked')) {
            badges += '<span class="badge bg-danger">Superuser</span>';
        }
        
        $('#previewBadges').html(badges);
    }
    
    // Update preview on input changes
    $('#{{ form.first_name.id_for_label }}, #{{ form.last_name.id_for_label }}, #{{ form.username.id_for_label }}, #{{ form.email.id_for_label }}').on('input', updatePreview);
    $('#{{ form.is_active.id_for_label }}, #{{ form.is_staff.id_for_label }}, #{{ form.is_superuser.id_for_label }}').on('change', updatePreview);
    
    // Form submission with loading state
    $('#userForm').on('submit', function(e) {
        const submitBtn = $('#submitBtn');
        submitBtn.addClass('btn-loading').prop('disabled', true);
        submitBtn.html('<span class="loading-spinner"></span> Saving...');
    });
});

// Remove avatar function
function removeAvatar() {
    $('#avatarPreview').removeClass('has-image');
    $('#avatarPreview').html('<div class="avatar-placeholder"><i class="fe fe-user"></i><small>Click to upload</small></div>');
    $('#{{ form.avatar.id_for_label }}').val('');
    $('.avatar-remove-btn').hide();
}
</script>

{% if not user.pk %}
<script>
$(document).ready(function() {
    // Username availability check for new users
    let usernameTimeout;
    $('#{{ form.username.id_for_label }}').on('input', function() {
        const username = $(this).val();
        const field = $(this);
        
        clearTimeout(usernameTimeout);
        
        if (username.length >= 3) {
            usernameTimeout = setTimeout(function() {
                $.ajax({
                    url: '/accounts/api/check-username/',
                    data: { 'username': username },
                    success: function(data) {
                        if (data.available) {
                            field.removeClass('is-invalid').addClass('is-valid');
                            field.siblings('.validation-error').remove();
                            field.after('<div class="validation-success">Username is available</div>');
                        } else {
                            field.removeClass('is-valid').addClass('is-invalid');
                            field.siblings('.validation-success').remove();
                            field.after('<div class="validation-error">Username is already taken</div>');
                        }
                    }
                });
            }, 500);
        }
    });
});
</script>
{% endif %}
{% endblock extra_js %}