{% load phoxtail_core_tags thumbnail phoxtail_design_tags %}
<div class="phoxtail-modal-overlay"
     onclick="closeModal()"
     data-modal-animation="slide-right"
     data-animation-duration="300ms">
    <div class="phoxtail-modal-drawer phoxtail-drawer--glass"
         style="--phoxtail-drawer-width: 480px;"
         onclick="event.stopPropagation()">
        <div class="phoxtail-drawer__scroll">
            <!-- Header -->
            <div class="phoxtail-drawer__header">
                <div class="phoxtail-drawer__title-row">
                    <h2 class="phoxtail-drawer__title">Edit Profile</h2>
                    <button class="phoxtail-close-btn"
                            onclick="closeModal()"
                            aria-label="Close modal"
                            type="button">
                        {% icon "close" %}
                    </button>
                </div>
            </div>
            <!-- Body -->
            <div class="phoxtail-drawer__body">
                <div class="phoxtail-form-stack">
                    <!-- Avatar Preview -->
                    <div class="usr-avatar-section">
                        <div id="avatar-preview-initials"
                             class="usr-avatar-initials{% if user.avatar %} usr-hidden{% endif %}">
                            {{ user.first_name|default:""|slice:":1" }}{{ user.last_name|default:""|slice:":1" }}
                        </div>
                        {% if user.avatar %}
                            {% thumbnail user.avatar "256x256" crop="center" as avatar %}
                                <img id="avatar-preview-image"
                                     class="usr-avatar"
                                     src="{{ avatar.url }}"
                                     alt="{{ user.get_full_name }}">
                            {% endthumbnail %}
                        {% else %}
                            <img id="avatar-preview-image"
                                 class="usr-avatar usr-hidden"
                                 src=""
                                 alt="{{ user.get_full_name }}">
                        {% endif %}
                        <h2 class="usr-profile-name">{{ user.get_full_name }}</h2>
                        <span class="usr-profile-handle">@{{ user.username }}</span>
                    </div>
                    <form id="profile-update-form"
                          method="POST"
                          enctype="multipart/form-data"
                          hx-post="{% url 'users:profile_update' %}"
                          hx-target="#core-modal-placeholder"
                          hx-swap="innerHTML">
                        {% csrf_token %}
                        {{ form.media }}
                        <div class="phoxtail-form-stack">
                            {% include "phoxtail_core/forms/widgets/input.html" with field=form.first_name show_label=True show_help_text=False %}
                            {% include "phoxtail_core/forms/widgets/input.html" with field=form.last_name show_label=True show_help_text=False %}
                            {% include "phoxtail_core/forms/widgets/date.html" with field=form.born_at %}
                            {% include "phoxtail_core/forms/widgets/select.html" with field=form.gender %}
                            {% include "phoxtail_core/forms/widgets/select.html" with field=form.country %}
                            {% include "phoxtail_core/forms/widgets/htmx/input.html" with field=form.phone_number show_label=True show_help_text=False %}
                            <div class="usr-form-group">
                                <label for="{{ form.avatar.id_for_label }}" class="usr-label">
                                    Avatar
                                    {% if form.avatar.field.required %}<span class="usr-required">*</span>{% endif %}
                                </label>
                                <input type="file"
                                       name="{{ form.avatar.name }}"
                                       id="{{ form.avatar.id_for_label }}"
                                       accept="image/*"
                                       onchange="previewAvatar(event)"
                                       class="usr-file-input">
                                {% if user.avatar %}
                                    <label class="usr-checkbox-group">
                                        <input type="checkbox"
                                               name="{{ form.avatar.name }}-clear"
                                               id="avatar-clear-checkbox"
                                               onchange="handleClearAvatar(event)"
                                               class="usr-checkbox">
                                        <span class="usr-label">Clear current avatar</span>
                                    </label>
                                {% endif %}
                                {% if form.avatar.errors %}
                                    <p class="usr-error-text">
                                        {% for error in form.avatar.errors %}
                                            {{ error }}
                                            {% if not forloop.last %}<br>{% endif %}
                                        {% endfor %}
                                    </p>
                                {% endif %}
                            </div>
                            {% if form.non_field_errors %}
                                <div class="usr-error-box">
                                    <h3 class="usr-error-box__title">Please correct the errors below:</h3>
                                    <ul class="usr-error-box__list">
                                        {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
                                    </ul>
                                </div>
                            {% endif %}
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Footer -->
        <div class="phoxtail-drawer__footer">
            <button class="phoxtail-btn phoxtail-btn--secondary"
                    onclick="closeModal()"
                    type="button">
                <span>Cancel</span>
            </button>
            <button class="phoxtail-btn phoxtail-btn--primary"
                    type="submit"
                    form="profile-update-form">
                <span>Save</span>
            </button>
        </div>
    </div>
</div>
<script>
    (function() {
        const previewImage = document.getElementById('avatar-preview-image');
        const originalAvatarSrc = previewImage?.getAttribute('src') || '';
        const hasOriginalAvatar = !!originalAvatarSrc;

        window.previewAvatar = function(event) {
            const file = event.target.files[0];
            const previewInitials = document.getElementById('avatar-preview-initials');
            const clearCheckbox = document.getElementById('avatar-clear-checkbox');

            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                const img = new Image();

                reader.onload = function(e) {
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        const maxSize = 512;

                        let width = img.width;
                        let height = img.height;

                        if (width > height) {
                            if (width > maxSize) {
                                height *= maxSize / width;
                                width = maxSize;
                            }
                        } else {
                            if (height > maxSize) {
                                width *= maxSize / height;
                                height = maxSize;
                            }
                        }

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);

                        previewImage.src = canvas.toDataURL('image/jpeg', 0.95);
                        previewImage.classList.remove('usr-hidden');
                        if (previewInitials) {
                            previewInitials.classList.add('usr-hidden');
                        }
                        if (clearCheckbox) {
                            clearCheckbox.checked = false;
                        }
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        };

        window.handleClearAvatar = function(event) {
            const previewInitials = document.getElementById('avatar-preview-initials');
            const fileInput = document.getElementById('{{ form.avatar.id_for_label }}');

            if (event.target.checked) {
                previewImage.classList.add('usr-hidden');
                previewInitials.classList.remove('usr-hidden');
                fileInput.value = '';
            } else {
                if (hasOriginalAvatar) {
                    previewImage.src = originalAvatarSrc;
                    previewImage.classList.remove('usr-hidden');
                    previewInitials.classList.add('usr-hidden');
                }
            }
        };
    })();
</script>