{% extends 'layout.html' %}
{% load bbcode_tags %}

{% block content %}
    <div class="container">
        {% block profile-nav %}
            {% include "../components/profile_nav.html" %}
        {% endblock %}

        <div class="profile-grid">
            <!-- Colonne de gauche -->
            <div class="profile-main">
                <div class="profile-header">
                    <div class="avatar-container">
                        <div class="level-badge">
                            <span class="level-text">LEVEL</span>
                            <span class="level-number">{{ user.level.level }}</span>
                        </div>
                    </div>
                    <div class="profile-info">
                        <h2 class="username">{{ user.username }}</h2>
                        {% if user == request.user %}
                            Prochain niveau: {{ request.user.experience_left }} XP
                        {% endif %}
                        <p class="joined-date">Membre depuis le {{ user.date_joined|date:"d F Y" }}</p>
                        {% if user.first_name or user.last_name %}
                            <p class="real-name">{{ user.first_name }} {{ user.last_name }}</p>
                        {% endif %}
                    </div>
                </div>

                <div class="profile-bio">
                    <h3>Biographie</h3>
                    <div class="bio-content">
                        {{ user.biography|bbcode|safe|linebreaksbr|default:"Aucune biographie disponible" }}
                    </div>
                </div>
            </div>

            <!-- Colonne de droite -->
            <div class="profile-stats">
                <div class="stats-card">
                    <h3>Statistiques</h3>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <span class="stat-value">{{ forum_posts }}</span>
                            <span class="stat-label">Messages</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">{{ topics }}</span>
                            <span class="stat-label">Sujets</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">{{ posts }}</span>
                            <span class="stat-label">Articles</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">{{ user.level.experience }}</span>
                            <span class="stat-label">XP</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">{{ user.level.coins }}</span>
                            <span class="stat-label">Pièces</span>
                        </div>
                    </div>
                </div>

                <div class="achievements-card">
                    <h3>Badges</h3>
                    <div class="achievements-grid">
                        {% for badge in user.badges.all %}
                            <div class="badge-item" title="{{ badge.description }}">
                                <img src="{{ badge.image.url }}" alt="{{ badge.name }}">
                                <span class="badge-name">{{ badge.name }}</span>
                            </div>
                        {% empty %}
                            <p class="no-badges">Aucun badge pour le moment</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        
        {% if user.id == request.user.id %}
            <div class="inventory">
                <h3>Inventaire</h3>
                <div class="inventory-grid">
                    {% for inventory in request.user.inventory.all %}
                    {%if inventory.item.name != 'Or' %}
                        <a href="{% url 'use_item' inventory.item.id %}">
                    {% endif %}
                            <div class="inventory-item" id="bubbleinfo">
                                <span class="item-name">
                                    {% if inventory.item.category.name == 'Décoration pseudo' %}
                                        <center><span id="item" data-info="{{ inventory.item }} : {{ inventory.item.description }}" class="{{ inventory.item.name|slugify }}" style="font-size: 1.5rem">{{ request.user }}</span></center>
                                    {% else %}
                                        {% if inventory.item.category.name == 'cadres' %}
                                            <center><div class="{{ inventory.item.name|slugify }}""><img src="/media/{{ request.user.avatar }}" style="width:100px;" alt=""></div></center>
                                        {% else %}
                                            <img id="item" data-info="{{ inventory.item }} : {{ inventory.item.description }}" src="/media/shop/items/{{ inventory.item.image }}" alt="{{ inventory.item }} : {{ inventory.item.description }}">
                                        {% endif %}
                                    {% endif %}
                                </span>
                                <span class="item-quantity">{{ inventory.quantity }}</span>
                                <div id="div-bubble" style="
                                    display: none;
                                    position: absolute;
                                    background-color: rgba(0, 0, 0, 0.5);
                                    color: white;
                                    text-shadow: none;
                                    padding: 10px;
                                    border-radius: 5px;
                                    top: 0px; 
                                    left: 0px;
                                    z-index: 9998;
                                "></div>
                            </div>
                    {%if inventory.item != 'Or' %}
                        </a>
                    {% endif %}
                    {% empty %}
                        <p class="no-items">
                            Aucun objet dans l'inventaire
                        </p>
                    {% endfor %}
                </div>
            </div>
            <div class="profile-actions">
                <a href="{% url 'profile_update' %}" class="btn btn-default">Modifier le profil</a>
                <!-- <a href="" class="btn btn-warning">Voir l'inventaire</a> -->
            </div>
        {% endif %}
    </div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
            const bubble = document.querySelector('#bubbleinfo');
                console.log(bubble);
                if (!bubble) {
                    console.error('Element with ID "bubbleinfo" not found.');
                    return;
                }
    
            const item = bubble.querySelector('#item');
            const div = document.querySelector('#div-bubble');
            let info = item.dataset.info;
    
            bubble.addEventListener('mouseover', function() {
                div.style.top = item.offsetTop + -10 + 'px';
                div.style.left = item.offsetLeft +'px';
                div.textContent = info;
                div.style.display = 'block';
            });
            bubble.addEventListener('mouseout', function() {
                div.style.display = 'none';
            });
        })
    </script>
{% endblock %}