{% extends "base.html" %}

{% block title %}{{ profile_user.username }}'s Profile - ArchCNTL{% endblock %}

{% block main_content %}
<div class="px-8 py-6 border-b border-white/5 bg-white/5 backdrop-blur-md flex-shrink-0">
    <div class="flex items-center space-x-3">
        <div class="p-2 bg-brand-500/10 rounded-xl">
            <i data-lucide="user" class="h-6 w-6 text-brand-400"></i>
        </div>
        <h2 class="text-2xl font-bold text-white tracking-tight">{{ profile_user.username }}</h2>
    </div>
</div>

<div class="flex-1 overflow-y-auto p-8 md:p-12 space-y-12 text-slate-300">

    {# --- Profile Info (Avatar, Name, Bio) --- #}
    <div
        class="w-full text-center max-w-2xl mx-auto glass-panel p-12 rounded-3xl border border-white/5 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-brand-500/5 to-transparent pointer-events-none"></div>

        {# --- Avatar Section --- #}
        <div class="mb-10 relative inline-block">
            {% if profile_user.profile_picture == 'default_avatar.png' %}
            <div
                class="w-48 h-48 rounded-full bg-slate-800 border-4 border-white/5 shadow-[0_0_50px_-12px_rgba(59,130,246,0.3)] flex items-center justify-center overflow-hidden relative z-10">
                <i data-lucide="user" class="w-24 h-24 text-slate-600"></i>
            </div>
            {% else %}
            <img src="{{ url_for('static', filename=profile_user.profile_picture) }}" alt="Profile Picture"
                class="w-48 h-48 rounded-full object-cover border-4 border-white/5 shadow-[0_0_50px_-12px_rgba(59,130,246,0.3)] relative z-10">
            {% endif %}
            <div class="absolute inset-0 rounded-full bg-brand-500/20 blur-2xl -z-10 animate-pulse"></div>
        </div>

        {# --- Name, Pronouns, Email --- #}
        <div class="mb-8 relative z-10">
            <h1 class="text-4xl font-black text-white mb-2 tracking-tight selection:bg-brand-500/30">{{
                profile_user.username }}</h1>
            <div class="flex items-center justify-center space-x-3">
                {% if profile_user.pronouns %}
                <span
                    class="text-brand-400 font-bold uppercase text-[10px] tracking-widest bg-brand-500/10 px-3 py-1 rounded-full border border-brand-500/20">{{
                    profile_user.pronouns }}</span>
                {% endif %}
                <span class="text-slate-500 font-mono text-xs">{{ profile_user.email }}</span>
            </div>
        </div>

        {# --- Bio --- #}
        <div class="mt-8 relative z-10">
            {% if profile_user.bio %}
            <p class="text-slate-400 text-lg leading-relaxed selection:bg-white/10 italic">"{{ profile_user.bio }}"</p>
            {% else %}
            <p class="text-slate-600 text-sm italic">System operator has not provided a status update.</p>
            {% endif %}
        </div>
    </div>

    {# --- Edit Profile Button and Modal Structure --- #}
    {% if is_owner %}
    <div class="fixed bottom-10 right-10 z-[100]">
        <button type="button" id="edit-profile-btn"
            class="bg-brand-500 hover:bg-brand-600 text-white font-black p-5 rounded-2xl flex items-center shadow-[0_20px_50px_rgba(59,130,246,0.3)] transition-all transform hover:scale-105 active:scale-95 border border-white/20 backdrop-blur-xl group"
            title="Edit Profile">
            <i data-lucide="edit-3" class="h-6 w-6 group-hover:rotate-12 transition-transform"></i>
        </button>
    </div>

    <div id="editProfileModal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[150] p-4">
        <div class="modal-backdrop fixed inset-0 bg-slate-950/80 backdrop-blur-sm modal-transition z-[149]"></div>
        <div
            class="modal-content glass-panel rounded-3xl shadow-2xl w-full max-w-lg modal-content-transition relative z-[150] overflow-hidden border-white/10">
            <div
                class="px-8 py-6 border-b border-white/5 bg-white/5 backdrop-blur-md flex items-center justify-between">
                <h3 class="text-xl font-bold text-white tracking-tight flex items-center">
                    <i data-lucide="settings-2" class="mr-3 h-5 w-5 text-brand-400"></i> Identity Overrides
                </h3>
                <button type="button" class="text-slate-500 hover:text-white transition-colors"
                    id="edit-profile-close-btn">
                    <i data-lucide="x" class="h-5 w-5"></i>
                </button>
            </div>

            <form method="POST" action="{{ url_for('profile.edit_profile') }}" class="p-8 space-y-6"
                enctype="multipart/form-data">
                <div class="space-y-2">
                    <label for="bio"
                        class="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Personal Bio</label>
                    <textarea
                        class="w-full bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium h-32 resize-none"
                        id="bio" name="bio">{{ profile_user.bio if profile_user.bio else '' }}</textarea>
                </div>
                <div class="space-y-2">
                    <label for="pronouns"
                        class="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Preferred
                        Pronouns</label>
                    <input type="text"
                        class="w-full bg-slate-950/40 border border-white/10 rounded-2xl py-3 px-4 text-sm text-white focus:border-brand-500/50 focus:ring-4 focus:ring-brand-500/10 outline-none transition-all font-medium"
                        id="pronouns" name="pronouns"
                        value="{{ profile_user.pronouns if profile_user.pronouns else '' }}">
                </div>

                <div class="pt-2">
                    <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Profile
                        Visualization</label>
                    <div class="mt-4 flex items-center space-x-6">
                        {% if profile_user.profile_picture == 'default_avatar.png' %}
                        <div
                            class="w-16 h-16 rounded-2xl bg-slate-800 border border-white/5 flex items-center justify-center">
                            <i data-lucide="user" class="h-8 w-8 text-slate-600"></i>
                        </div>
                        {% else %}
                        <img src="{{ url_for('static', filename=profile_user.profile_picture) }}" alt="Current"
                            class="w-16 h-16 rounded-2xl object-cover border border-white/5">
                        {% endif %}

                        <label for="profile_picture"
                            class="cursor-pointer bg-white/5 hover:bg-white/10 text-white text-xs font-bold py-3 px-6 rounded-2xl border border-white/10 transition-all">
                            Upload Image
                        </label>
                        <input type="file" id="profile_picture" name="profile_picture"
                            accept=".gif,.png,.jpg,.jpeg,.webp" class="hidden">
                    </div>
                    <div class="mt-4" id="profile-picture-preview-container" style="display: none;">
                        <div
                            class="bg-brand-500/10 p-4 rounded-2xl border border-brand-500/20 flex items-center space-x-4">
                            <img id="profile-picture-preview"
                                class="w-12 h-12 rounded-xl object-cover border border-white/20" src="" alt="Preview">
                            <p class="text-[10px] font-bold text-brand-400 uppercase tracking-wider">New asset detected
                            </p>
                        </div>
                    </div>
                </div>

                <div class="pt-6 flex gap-4">
                    <button type="button"
                        class="flex-1 bg-slate-800 hover:bg-white/10 text-white font-bold py-4 rounded-2xl text-xs transition-all border border-white/5"
                        id="edit-profile-cancel-btn">Discard</button>
                    <button type="submit"
                        class="flex-1 bg-brand-500 hover:bg-brand-600 text-white font-bold py-4 rounded-2xl text-xs transition-all btn-premium shadow-lg shadow-brand-500/20">Apply
                        Metadata</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}

{% block scripts %}
<script>
    function initializeProfilePage() {
        const editProfileBtn = document.getElementById('edit-profile-btn');
        const editProfileModal = document.getElementById('editProfileModal');
        const editProfileCancelBtn = document.getElementById('edit-profile-cancel-btn');
        const editProfileCloseBtn = document.getElementById('edit-profile-close-btn');

        // Check if modal functions exist (might be loaded globally in base.html)
        const openModal = window.openModalAnimation || function (modal) { modal && modal.classList.remove('hidden'); };
        const closeModal = window.closeModalAnimation || function (modal) { modal && modal.classList.add('hidden'); };


        if (editProfileBtn && editProfileModal) {
            editProfileBtn.addEventListener('click', () => {
                openModal(editProfileModal);
            });
        }

        if (editProfileCancelBtn) {
            editProfileCancelBtn.addEventListener('click', () => {
                closeModal(editProfileModal);
            });
        }

        if (editProfileCloseBtn) {
            editProfileCloseBtn.addEventListener('click', () => {
                closeModal(editProfileModal);
            });
        }

        // Close modal when clicking outside
        if (editProfileModal) {
            editProfileModal.addEventListener('click', (e) => {
                if (e.target === editProfileModal.querySelector('.modal-backdrop') || e.target === editProfileModal) {
                    closeModal(editProfileModal);
                }
            });
        }

        // Profile Picture Upload Preview and Validation
        const profilePictureInput = document.getElementById('profile_picture');
        const profilePicturePreview = document.getElementById('profile-picture-preview');
        const profilePicturePreviewContainer = document.getElementById('profile-picture-preview-container');
        const maxFileSize = 8 * 1024 * 1024; // 8MB

        if (profilePictureInput) {
            profilePictureInput.addEventListener('change', function () {
                const file = this.files[0];
                if (file) {
                    // Validate file type
                    const allowedTypes = ['image/gif', 'image/png', 'image/jpeg', 'image/webp'];
                    if (!allowedTypes.includes(file.type)) {
                        alert('Invalid file type. Please upload a GIF, PNG, JPG, JPEG, or WEBP image.');
                        profilePictureInput.value = ''; // Clear the input
                        profilePicturePreviewContainer.style.display = 'none';
                        return;
                    }

                    // Validate file size
                    if (file.size > maxFileSize) {
                        alert('File size exceeds 8MB. Please upload a smaller image.');
                        profilePictureInput.value = ''; // Clear the input
                        profilePicturePreviewContainer.style.display = 'none';
                        return;
                    }

                    const reader = new FileReader();
                    reader.onload = function (e) {
                        profilePicturePreview.src = e.target.result;
                        profilePicturePreviewContainer.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    profilePicturePreview.src = '';
                    profilePicturePreviewContainer.style.display = 'none';
                }
            });
        }
    }

    // Call the initialization function
    setTimeout(initializeProfilePage, 50);
</script>
{% endblock %}