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

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

{% block body %}
<style>
  main#contenu { text-align: left !important; }
</style>
<main id="contenu" style="padding: 2rem; box-sizing: border-box;">

    {# ===== HEADER ===== #}
    <div class="card" style="padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1.5rem;">
        <div style="flex-shrink: 0; position: relative;">
            {% if user.avatarPath %}
                <img src="/uploads/avatars/{{ user.avatarPath }}" alt="Avatar"
                     style="width: 75px; height: 75px; border-radius: 50%; object-fit: cover; border: 3px solid #f5c400;">
            {% else %}
                <div style="width: 75px; height: 75px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: bold; border: 3px solid #f5c400;">
                    {{ user.firstName|first|upper }}{{ user.lastName|first|upper }}
                </div>
            {% endif %}
            <span style="position:absolute;bottom:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid white;"></span>
        </div>

        <div style="flex: 1; text-align: center;">
            <h1 class="hero-title" style="margin: 0; font-size: 1.6rem; text-align: center;">{{ user.displayName }}</h1>
            {% if user.moodStatus %}
                <div style="color: #888; font-style: italic; margin-top: 0.2rem; font-size: 0.9rem; text-align: center;">{{ user.moodStatus }}</div>
            {% endif %}
        </div>

        <div style="flex-shrink: 0;">
            <a href="{{ path('app_profile_edit', {'_locale': app.request.locale}) }}" class="btn btn-secondary btn-sm">Modifier</a>
        </div>
    </div>

    {# ===== 3 COLONNES ===== #}
    <div style="display: flex; gap: 2rem; align-items: flex-start;">

        {# ===== COLONNE GAUCHE — Parle-nous de toi ===== #}
        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem;">

            <div class="card" style="padding: 1.5rem;">
                <h2 class="pst">Parle-nous de toi</h2>
                <div style="display: flex; flex-direction: column; gap: 1.25rem;">

                    <div>
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
                            <span class="plabel">Pourquoi je suis neuro-atypique</span>
                            <span class="vis-badge {{ user.neuroProfileVisibility == 'private' ? 'vis-private' : 'vis-public' }}">
                                {{ user.neuroProfileVisibility == 'private' ? 'Privé' : 'Public' }}
                            </span>
                        </div>
                        {% if user.neuroProfile %}
                            <div class="vtext">{{ user.neuroProfile|nl2br }}</div>
                        {% else %}
                            <div class="vempty">Non renseigné</div>
                        {% endif %}
                    </div>

                    <div>
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
                            <span class="plabel">Mes centres d'intérêts</span>
                            <span class="vis-badge {{ user.specialInterestsVisibility == 'private' ? 'vis-private' : 'vis-public' }}">
                                {{ user.specialInterestsVisibility == 'private' ? 'Privé' : 'Public' }}
                            </span>
                        </div>
                        {% if user.specialInterests %}
                            <div class="vtext">{{ user.specialInterests|nl2br }}</div>
                        {% else %}
                            <div class="vempty">Non renseigné</div>
                        {% endif %}
                    </div>

                </div>
            </div>

            <div class="card" style="padding: 1.5rem;">
                <h2 class="pst">Géolocalisation</h2>
                <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                    <div class="vrow">
                        <span class="plabel">Département</span>
                        <span>{{ user.geoDepartment ?: '—' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Région</span>
                        <span>{{ user.geoRegion ?: '—' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Visible par</span>
                        <span class="vis-badge {{ user.geoVisibility == 'private' ? 'vis-private' : 'vis-public' }}">
                            {{ user.geoVisibility == 'private' ? 'Privé' : 'Public' }}
                        </span>
                    </div>
                </div>
            </div>

        </div>

        {# ===== COLONNE CENTRE — Informations ===== #}
        <div style="flex: 1; min-width: 0;">
            <div class="card" style="padding: 1.5rem;">
                <h2 class="pst">Informations</h2>
                <div style="display: flex; flex-direction: column; gap: 0.85rem;">

                    <div class="vrow">
                        <span class="plabel">Nom complet</span>
                        <span>{{ user.firstName }} {{ user.lastName }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Pseudo</span>
                        <span>{{ user.pseudo ?: '—' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Affiché en public</span>
                        <span>{{ user.isAnonymous ? 'Pseudonyme' : 'Nom complet' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Email</span>
                        <span style="word-break: break-all;">{{ user.email }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Téléphone</span>
                        <span>{{ user.phone ?: '—' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Naissance</span>
                        <span>{{ user.birthDate ? user.birthDate|date('d/m/Y') : '—' }}</span>
                    </div>
                    <div class="vrow" style="align-items: flex-start;">
                        <span class="plabel">Adresse</span>
                        <span>
                            {% if user.addressLine1 %}
                                {{ user.addressLine1 }}{% if user.addressLine2 %}, {{ user.addressLine2 }}{% endif %}<br>
                                {{ user.postalCode }} {{ user.city }}<br>
                                {{ user.country == 'FR' ? 'France' : (user.country ?? 'France') }}
                            {% else %}
                                —
                            {% endif %}
                        </span>
                    </div>
                    <div style="font-size: 0.82rem; color: #aaa; text-align: center; padding-top: 0.75rem; border-top: 1px solid #eee;">
                        Membre depuis le {{ user.createdAt|date('d/m/Y') }}
                    </div>

                </div>
            </div>
        </div>

        {# ===== COLONNE DROITE — Accessibilité + Publications ===== #}
        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem;">

            <div class="card" style="padding: 1.5rem;">
                <h2 class="pst">Accessibilité par défaut</h2>
                <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                    <div class="vrow">
                        <span class="plabel">Thème</span>
                        <span>{{ user.displayTheme == 'dark' ? 'Nuit' : 'Jour' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Taille des caractères</span>
                        <span>
                            {% if user.fontSize == 'small' %}Petite
                            {% elseif user.fontSize == 'large' %}Grande
                            {% elseif user.fontSize == 'xlarge' %}Très grande
                            {% else %}Normale{% endif %}
                        </span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Contraste élevé</span>
                        <span style="color: {{ user.highContrast ? '#28a745' : '#aaa' }};">{{ user.highContrast ? 'Oui' : 'Non' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Police OpenDyslexic</span>
                        <span style="color: {{ user.dyslexiaFont ? '#28a745' : '#aaa' }};">{{ user.dyslexiaFont ? 'Oui' : 'Non' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Réduire les animations</span>
                        <span style="color: {{ user.reduceAnimations ? '#28a745' : '#aaa' }};">{{ user.reduceAnimations ? 'Oui' : 'Non' }}</span>
                    </div>
                    <div class="vrow">
                        <span class="plabel">Mise en page simplifiée</span>
                        <span style="color: {{ user.simpleLayout ? '#28a745' : '#aaa' }};">{{ user.simpleLayout ? 'Oui' : 'Non' }}</span>
                    </div>
                </div>
            </div>

            <div class="card" style="padding: 1.5rem;">
                <h2 class="pst">Mes publications ({{ posts|length }})</h2>
                {% if posts is empty %}
                    <p style="color: #aaa; text-align: center; padding: 1.5rem; font-style: italic;">Aucune publication pour l'instant.</p>
                {% else %}
                    <div style="display: flex; flex-direction: column; gap: 1rem;">
                        {% for post in posts %}
                            <div style="padding: 1rem; border: 1px solid #eee; border-radius: 8px;">
                                <small style="color: #666;">{{ post.createdAt|date('d/m/Y à H:i') }}</small>
                                <div style="margin: 0.5rem 0; line-height: 1.6; font-size: 0.9rem;">{{ post.content|nl2br }}</div>
                                {% if post.imagePath %}
                                    <img src="/uploads/posts/{{ post.imagePath }}" alt=""
                                         style="max-width: 100%; max-height: 180px; border-radius: 4px; margin-top: 0.5rem;">
                                {% endif %}
                                <div style="display: flex; gap: 1rem; margin-top: 0.5rem; color: #666; font-size: 0.85rem;">
                                    <span>❤️ {{ post.likesCount }}</span>
                                    <span>💬 {{ post.commentsCount }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

        </div>
    </div>

</main>

<style>
.pst {
    margin: 0 0 1.1rem 0;
    font-size: 1.05rem;
    color: var(--royal, #1a2e5a);
    border-bottom: 2px solid var(--royal, #1a2e5a);
    padding-bottom: 0.5rem;
    text-align: center;
}
.plabel {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--royal, #1a2e5a);
    min-width: 140px;
    flex-shrink: 0;
}
.vrow {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.9rem;
}
.vtext {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
    background: #f8f9fa;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
}
.vempty {
    font-size: 0.9rem;
    color: #bbb;
    font-style: italic;
}
.vis-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 12px;
    flex-shrink: 0;
}
.vis-public  { background: #e8f5e9; color: #28a745; }
.vis-private { background: #f5f5f5; color: #aaa; }
</style>
{% endblock %}