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

{% block title %}{{ member.displayName }} - Na+{% endblock %}

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

    {# ===== HEADER ===== #}
    <div class="card" style="padding: 0.75rem 1rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">

        {# Avatar + statut #}
        <div style="flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;">
            <div style="position: relative;">
                {% if member.avatarPath %}
                    <img src="/uploads/avatars/{{ member.avatarPath }}" alt="Avatar"
                         style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #f5c400;">
                {% else %}
                    <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: bold; border: 3px solid #f5c400;">
                        {{ member.firstName|first|upper }}{{ member.lastName|first|upper }}
                    </div>
                {% endif %}
                <span style="position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: {{ member.isOnline ? '#22c55e' : '#9ca3af' }}; border: 2px solid white;"></span>
            </div>
            <span style="font-size: 0.7rem; color: {{ member.isOnline ? '#22c55e' : '#9ca3af' }}; font-weight: 600;">{{ member.isOnline ? 'En ligne' : 'Hors ligne' }}</span>
        </div>

        {# Nom + compteurs #}
        <div style="flex: 1; text-align: center;">
            <h1 style="margin: 0; font-size: 1.1rem; color: var(--royal, #1a2e5a);">{{ member.displayName }}</h1>
            {% if member.pronouns or member.birthDate %}
                <div style="font-size: 0.78rem; color: #888; margin-top: 0.1rem;">
                    {% if member.pronouns %}({{ member.pronouns }}){% endif %}
                    {% if member.birthDate %}
                        {% if member.pronouns %} · {% endif %}
                        {{ (("now"|date('Y')) - (member.birthDate|date('Y'))) - ((("now"|date('md')) < (member.birthDate|date('md'))) ? 1 : 0) }} ans
                    {% endif %}
                </div>
            {% endif %}
            {% if member.moodStatus %}
                <div style="color: #888; font-style: italic; font-size: 0.78rem; margin-top: 0.1rem;">{{ member.moodStatus }}</div>
            {% endif %}
            <div style="display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.35rem;">
                <div style="text-align: center;">
                    <div style="font-weight: 700; font-size: 0.9rem; color: var(--royal, #1a2e5a);">{{ followersCount }}</div>
                    <div style="font-size: 0.68rem; color: #aaa;">followers</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-weight: 700; font-size: 0.9rem; color: var(--royal, #1a2e5a);">{{ followingCount }}</div>
                    <div style="font-size: 0.68rem; color: #aaa;">suivi(e)s</div>
                </div>
            </div>
        </div>

        {# Bouton Suivre #}
        <div style="flex-shrink: 0;">
            {% if followStatus == 'accepted' %}
                <button id="follow-btn" onclick="unfollow({{ member.id }})" class="btn btn-secondary btn-sm">Suivi</button>
            {% elseif followStatus == 'pending' %}
                <button id="follow-btn" onclick="cancelRequest({{ member.id }})" class="btn btn-secondary btn-sm" style="opacity:0.7;">En attente…</button>
            {% else %}
                <button id="follow-btn" onclick="sendRequest({{ member.id }})" class="btn btn-primary btn-sm">Suivre</button>
            {% endif %}
        </div>

    </div>

    {# ===== BLOCS INFO ===== #}
    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem;">

        {# Biographie — toujours visible #}
        {% if member.biography %}
        <div class="card" style="flex: 1; min-width: 200px; padding: 0.75rem;">
            <h2 class="pst">Biographie</h2>
            <p style="margin: 0; font-size: 0.82rem; color: #444; white-space: pre-line; font-style: italic; line-height: 1.4;">{{ member.biography }}</p>
        </div>
        {% endif %}

        {# Neuro-atypie — uniquement si public #}
        {% if member.neuroProfile and member.neuroProfileVisibility == 'public' %}
        <div class="card" style="flex: 1; min-width: 200px; padding: 0.75rem;">
            <h2 class="pst">Ma neuro-atypie en quelques mots</h2>
            <p style="margin: 0; font-size: 0.82rem; color: #444; white-space: pre-line; line-height: 1.4;">{{ member.neuroProfile }}</p>
        </div>
        {% endif %}

        {# Centres d'intérêts — uniquement si public #}
        {% if member.specialInterests and member.specialInterestsVisibility == 'public' %}
        <div class="card" style="flex: 1; min-width: 200px; padding: 0.75rem;">
            <h2 class="pst">Mes centres d'intérêts :</h2>
            <p style="margin: 0; font-size: 0.82rem; color: #444; white-space: pre-line; line-height: 1.4;">{{ member.specialInterests }}</p>
        </div>
        {% endif %}

        {# Géolocalisation — affiché uniquement si public ET données présentes #}
        {% if (member.geoDepartment or member.geoRegion) and member.geoVisibility == 'public' %}
        <div class="card" style="flex: 1; min-width: 160px; padding: 0.75rem;">
            <h2 class="pst">Localisation</h2>
            <div style="display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem;">
                {% if member.geoDepartment %}
                    <div><span style="font-weight:700; color: var(--royal,#1a2e5a);">Département</span> — {{ member.geoDepartment }}</div>
                {% endif %}
                {% if member.geoRegion %}
                    <div><span style="font-weight:700; color: var(--royal,#1a2e5a);">Région</span> — {{ member.geoRegion }}</div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {# Humeur + jauge #}
        {% if member.moodStatus or member.moodEnergy is not null %}
        <div class="card" style="flex: 1; min-width: 200px; padding: 0.75rem;">
            <h2 class="pst">Humeur du moment</h2>
            <div style="background: #dbeafe; border-radius: 6px; padding: 0.5rem 0.65rem;">
                {% if member.moodStatus %}
                    <div style="font-size: 0.8rem; color: #1e3a5f; font-style: italic; margin-bottom: 0.3rem;">{{ member.moodStatus }}</div>
                {% endif %}
                <div style="display: flex; align-items: center; gap: 0.4rem;">
                    <span style="font-size: 0.9rem;">😴</span>
                    <div style="flex: 1; height: 6px; background: #bfdbfe; border-radius: 3px; overflow: hidden;">
                        <div style="height: 100%; width: {{ member.moodEnergy * 10 }}%; background: var(--royal, #1a2e5a); border-radius: 3px;"></div>
                    </div>
                    <span style="font-size: 0.9rem;">🤩</span>
                    <span style="font-size: 0.78rem; font-weight: 700; color: var(--royal, #1a2e5a); min-width: 2.2rem; text-align: right;">{{ member.moodEnergy }}/10</span>
                </div>
            </div>
        </div>
        {% endif %}

    </div>

    {# ===== ONGLETS PUBLICATIONS ===== #}
    <div class="card" style="padding: 0.75rem; margin-bottom: 0.75rem;">

        {# 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;">
                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;">
                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;">
                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;">
                Likes ({{ likes|length }})
            </button>
        </div>

        {# ===== ONGLET POSTS ===== #}
        <div id="tab-posts">
            {% if posts|length == 0 %}
                <p style="color:#aaa;font-size:0.82rem;text-align:center;margin:1rem 0;">Aucune publication.</p>
            {% else %}
                <div style="display:flex;flex-direction:column;gap:0.5rem;">
                {% for post in posts %}
                    <div style="border:1px solid #eee;border-radius:8px;padding:0.65rem;">
                        <div style="font-size:0.72rem;color:#aaa;margin-bottom:0.25rem;">{{ post.createdAt|date('d/m/Y à H:i') }}</div>
                        <div style="font-size:0.85rem;color:#333;">{{ post.content|slice(0,120) }}{% if post.content|length > 120 %}…{% endif %}</div>
                        {% if post.imagePath %}
                            <img src="/uploads/posts/{{ post.imagePath }}" alt=""
                                 style="width:100%;border-radius:6px;margin-top:0.4rem;object-fit:contain;max-height:300px;background:#f8f9fa;">
                        {% endif %}
                        <div style="display:flex;gap:1rem;margin-top:0.35rem;font-size:0.78rem;color:#aaa;">
                            <span>❤️ {{ post.likes|length }}</span>
                            <span>💬 {{ post.comments|length }}</span>
                        </div>
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        </div>

        {# ===== ONGLET PHOTOS ===== #}
        <div id="tab-photos" style="display:none;">
            {% set photoPosts = posts|filter(p => p.imagePath) %}
            {% if photoPosts|length == 0 %}
                <p style="color:#aaa;font-size:0.82rem;text-align:center;margin:1rem 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>

        {# ===== ONGLET COMMENTAIRES ===== #}
        <div id="tab-comments" style="display:none;">
            {% if comments|length == 0 %}
                <p style="color:#aaa;font-size:0.82rem;text-align:center;margin:1rem 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>

        {# ===== ONGLET LIKES ===== #}
        <div id="tab-likes" style="display:none;">
            {% if likes|length == 0 %}
                <p style="color:#aaa;font-size:0.82rem;text-align:center;margin:1rem 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>

    {# Retour #}
    <div style="margin-top: 1.5rem; 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>

<style>
.pst {
    margin: 0 0 0.5rem 0;
    font-size: 0.88rem;
    color: var(--royal, #1a2e5a);
    border-bottom: 1px solid var(--royal, #1a2e5a);
    padding-bottom: 0.3rem;
    text-align: center;
}
</style>

<script>
// locale défini dans base.html.twig

// ===== ONGLETS =====
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';
    });
}

async function sendRequest(userId) {
    try {
        const res = await fetch(`/${locale}/membre/${userId}/suivre`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json'
            }
        });
        const text = await res.text();
        let data = {};
        try { data = JSON.parse(text); } catch(e) {}

        const btn = document.getElementById('follow-btn');
        if (res.ok && (data.success || data.status === 'pending')) {
            btn.textContent = 'En attente…';
            btn.style.opacity = '0.7';
            btn.onclick = () => cancelRequest(userId);
        } else if (res.status === 409) {
            // Relation déjà existante — mettre à jour l'affichage silencieusement
            btn.textContent = 'En attente…';
            btn.style.opacity = '0.7';
            btn.onclick = () => cancelRequest(userId);
        } else if (data.error) {
            alert(data.error);
        } else {
            alert('Erreur ' + res.status + ' : ' + text.substring(0, 100));
        }
    } catch(e) {
        alert('Erreur réseau : ' + e.message);
    }
}

async function cancelRequest(userId) {
    try {
        const res = await fetch(`/${locale}/membre/${userId}/retirer`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json'
            }
        });
        const data = await res.json();
        const btn = document.getElementById('follow-btn');
        if (data.success) {
            btn.textContent = 'Suivre';
            btn.style.opacity = '1';
            btn.onclick = () => sendRequest(userId);
        }
    } catch(e) {}
}

async function unfollow(userId) {
    if (!confirm('Ne plus suivre ce membre ?')) return;
    try {
        const res = await fetch(`/${locale}/membre/${userId}/retirer`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json'
            }
        });
        const data = await res.json();
        const btn = document.getElementById('follow-btn');
        if (data.success) {
            btn.textContent = 'Suivre';
            btn.style.opacity = '1';
            btn.className = 'btn btn-primary btn-sm';
            btn.onclick = () => sendRequest(userId);
        }
    } catch(e) {}
}
</script>
{% endblock %}