{% extends 'base.html.twig' %}

{% block title %}Mon compte - Na+{% endblock %}

{% block body %}
<main id="contenu" style="max-width: 680px; margin: 0 auto; padding: 1.5rem 1rem;">

    {# ===== BANNIÈRE + HEADER ===== #}
    <div class="card" style="overflow:hidden; margin-bottom: 1rem;">
        {# Bannière #}
        {% if user.bannerPath %}
            <div style="height: 120px; background: url('/uploads/banners/{{ user.bannerPath }}') center/cover no-repeat;"></div>
        {% else %}
            <div style="height: 80px; background: linear-gradient(135deg, var(--royal,#1a2e5a) 0%, #2d4a8a 100%);"></div>
        {% endif %}

        <div style="padding: 0 1.25rem 1.25rem; position: relative;">
            {# Bouton Modifier en position absolue pour ne pas perturber le centrage #}
            <button onclick="openProfilPopup()"
                    style="position:absolute;top:0.5rem;right:1.25rem;padding:0.4rem 1rem;background:var(--royal,#1a2e5a);color:#f5c400;border:none;border-radius:6px;font-size:0.82rem;font-weight:700;cursor:pointer;">
                Modifier
            </button>

            {# Avatar centré chevauchant la bannière #}
            <div style="display:flex;justify-content:center;margin-top:-36px;margin-bottom:0.5rem;">
                {% if user.avatarPath %}
                    <img src="/uploads/avatars/{{ user.avatarPath }}" alt="Avatar"
                         style="width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid white;">
                {% else %}
                    <div style="width:72px;height:72px;border-radius:50%;background:var(--royal,#1a2e5a);color:#f5c400;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:bold;border:3px solid white;">
                        {{ user.firstName|first|upper }}{{ user.lastName|first|upper }}
                    </div>
                {% endif %}
            </div>

            {# Textes tous centrés #}
            <div style="text-align:center;">
                <h1 style="margin:0;font-size:1.3rem;color:var(--royal,#1a2e5a);">{{ user.displayName }}</h1>
                {% if user.pronouns %}
                    <div style="font-size:0.75rem;color:#9ca3af;margin-top:0.15rem;">({{ user.pronouns }})</div>
                {% endif %}
                {% if user.biography %}
                    <p style="margin:0.4rem auto 0;font-size:0.875rem;color:#555;line-height:1.5;max-width:400px;">{{ user.biography }}</p>
                {% endif %}
                <div style="display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.5rem;justify-content:center;">
                    {% if user.geoRegion or user.geoDepartment %}
                        <span style="font-size:0.78rem;color:#6b7280;">📍 {{ user.geoRegion ?? user.geoDepartment }}</span>
                    {% endif %}
                    {% if user.website %}
                        <a href="{{ user.website }}" target="_blank" rel="noopener" style="font-size:0.78rem;color:#007bff;text-decoration:none;">🔗 {{ user.website|replace({'https://':'','http://':''}) }}</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# ===== ONGLETS ===== #}
    <div class="card" style="padding: 1.25rem;">

        {# Barre d'onglets #}
        <div style="display:flex;gap:0.25rem;margin-bottom:0.75rem;border-bottom:2px solid #e5e7eb;padding-bottom:0;">
            <button onclick="showTab('posts')" id="tab-btn-posts"
                    style="padding:0.4rem 0.75rem;border:none;background:none;cursor:pointer;font-size:0.82rem;font-weight:700;color:var(--royal,#1a2e5a);border-bottom:2px solid var(--royal,#1a2e5a);margin-bottom:-2px;">
                Mes posts ({{ posts|length }})
            </button>
            <button onclick="showTab('photos')" id="tab-btn-photos"
                    style="padding:0.4rem 0.75rem;border:none;background:none;cursor:pointer;font-size:0.82rem;font-weight:400;color:#aaa;border-bottom:2px solid transparent;margin-bottom:-2px;">
                Mes photos ({{ posts|filter(p => p.imagePath)|length }})
            </button>
            <button onclick="showTab('comments')" id="tab-btn-comments"
                    style="padding:0.4rem 0.75rem;border:none;background:none;cursor:pointer;font-size:0.82rem;font-weight:400;color:#aaa;border-bottom:2px solid transparent;margin-bottom:-2px;">
                Mes commentaires ({{ comments|length }})
            </button>
            <button onclick="showTab('likes')" id="tab-btn-likes"
                    style="padding:0.4rem 0.75rem;border:none;background:none;cursor:pointer;font-size:0.82rem;font-weight:400;color:#aaa;border-bottom:2px solid transparent;margin-bottom:-2px;">
                Mes likes ({{ likes|length }})
            </button>
        </div>

        {# ===== POSTS ===== #}
        <div id="tab-posts">
            {% if posts is empty %}
                <p style="color:#aaa;text-align:center;font-size:0.875rem;padding:1.5rem 0;">Tu n'as pas encore publié.</p>
            {% else %}
                <div style="display:flex;flex-direction:column;gap:0.75rem;">
                {% for post in posts %}
                    <div style="border:1px solid #eee;border-radius:8px;padding:0.75rem;" id="post-{{ post.id }}">
                        <div style="font-size:0.75rem;color:#aaa;margin-bottom:0.3rem;">
                            {{ post.createdAt|date('d/m/Y à H:i') }}
                            {% if post.community %}
                                <span style="background:#f0f4ff;color:var(--royal,#1a2e5a);font-size:0.7rem;font-weight:700;padding:0.1rem 0.4rem;border-radius:8px;margin-left:0.4rem;">{{ post.community.name }}</span>
                            {% endif %}
                        </div>
                        {% if post.content %}
                            <div style="font-size:0.9rem;color:#333;margin-bottom:0.4rem;">{{ post.content|nl2br }}</div>
                        {% endif %}
                        {% if post.imagePath %}
                            <img src="/uploads/posts/{{ post.imagePath }}" alt=""
                                 style="width:100%;border-radius:6px;margin-top:0.3rem;object-fit:contain;max-height:300px;background:#f8f9fa;">
                        {% endif %}
                        <div style="display:flex;gap:1rem;margin-top:0.5rem;font-size:0.8rem;color:#aaa;align-items:center;">
                            <span>❤️ {{ post.likes|length }}</span>
                            <span>💬 {{ post.comments|length }}</span>
                            <a href="{{ path('app_feed', {'_locale': app.request.locale}) }}#post-{{ post.id }}"
                               style="margin-left:auto;font-size:0.75rem;color:#007bff;text-decoration:none;">Voir sur le fil →</a>
                        </div>
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        </div>

        {# ===== PHOTOS ===== #}
        <div id="tab-photos" style="display:none;">
            {% set photoPosts = posts|filter(p => p.imagePath) %}
            {% if photoPosts is empty %}
                <p style="color:#aaa;text-align:center;font-size:0.875rem;padding:1.5rem 0;">Aucune photo publiée.</p>
            {% else %}
                <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem;">
                {% for post in photoPosts %}
                    <div style="border-radius:6px;overflow:hidden;aspect-ratio:1;background:#f8f9fa;">
                        <img src="/uploads/posts/{{ post.imagePath }}" alt=""
                             style="width:100%;height:100%;object-fit:cover;">
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        </div>

        {# ===== COMMENTAIRES ===== #}
        <div id="tab-comments" style="display:none;">
            {% if comments is empty %}
                <p style="color:#aaa;text-align:center;font-size:0.875rem;padding:1.5rem 0;">Aucun commentaire.</p>
            {% else %}
                <div style="display:flex;flex-direction:column;gap:0.5rem;">
                {% for comment in comments %}
                    <div style="border:1px solid #eee;border-radius:8px;padding:0.65rem;">
                        <div style="font-size:0.72rem;color:#aaa;margin-bottom:0.2rem;">{{ comment.createdAt|date('d/m/Y à H:i') }}</div>
                        <div style="font-size:0.85rem;color:#333;">{{ comment.content|slice(0,150) }}{% if comment.content|length > 150 %}…{% endif %}</div>
                        <div style="font-size:0.72rem;color:#bbb;margin-top:0.25rem;">Sur le post de {{ comment.post.author.displayName }}</div>
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        </div>

        {# ===== LIKES ===== #}
        <div id="tab-likes" style="display:none;">
            {% if likes is empty %}
                <p style="color:#aaa;text-align:center;font-size:0.875rem;padding:1.5rem 0;">Aucun like.</p>
            {% else %}
                <div style="display:flex;flex-direction:column;gap:0.5rem;">
                {% for like in likes %}
                    <div style="border:1px solid #eee;border-radius:8px;padding:0.65rem;">
                        <div style="font-size:0.72rem;color:#aaa;margin-bottom:0.2rem;">Post de {{ like.post.author.displayName }} — {{ like.post.createdAt|date('d/m/Y') }}</div>
                        <div style="font-size:0.85rem;color:#333;">❤️ {{ like.post.content|slice(0,120) }}{% if like.post.content|length > 120 %}…{% endif %}</div>
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        </div>

    </div>

<script>
function showTab(tab) {
    ['posts','photos','comments','likes'].forEach(function(t) {
        document.getElementById('tab-' + t).style.display = t === tab ? 'block' : 'none';
        var btn = document.getElementById('tab-btn-' + t);
        btn.style.fontWeight = t === tab ? '700' : '400';
        btn.style.color = t === tab ? 'var(--royal,#1a2e5a)' : '#aaa';
        btn.style.borderBottom = t === tab ? '2px solid var(--royal,#1a2e5a)' : '2px solid transparent';
    });
}
</script>

    <div style="margin-top: 1rem; text-align: center;">
        <a href="{{ path('app_feed', {'_locale': app.request.locale}) }}" style="font-size:0.85rem; color:#aaa;">← Retour au fil d'actu</a>
    </div>

</main>
{% endblock %}