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

{% block title %}{{ 'feed.title'|trans }} - Na+{% endblock %}

{% block body %}
<main id="contenu">
    <div style="max-width: 1400px; margin: 0 auto; padding: 2rem 1rem;">
        
        <h1 class="hero-title" style="margin-bottom: 2rem;">{{ 'feed.title'|trans }}</h1>

        <div style="display: flex; gap: 2rem;">
            
            {# COLONNE PRINCIPALE - FEED #}
            <div class="feed-container" style="flex: 1; max-width: 800px;">
                
                {# Formulaire de création de post #}
                <div class="card" style="padding: 1.5rem; margin-bottom: 2rem;">
                    <h2 style="margin-top: 0;">{{ 'feed.create_post'|trans }}</h2>
                    
                    <form action="{{ path('app_post_create', {'_locale': app.request.locale}) }}" method="post" enctype="multipart/form-data">
                        <div class="form-group" style="margin-bottom: 1rem;">
                            <label for="content">{{ 'feed.post_content'|trans }} <span class="req">*</span></label>
                            <textarea id="content" name="content" rows="4" required placeholder="{{ 'feed.post_placeholder'|trans }}" style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-family: inherit;"></textarea>
                        </div>

                        <div class="form-group" style="margin-bottom: 1rem;">
                            <label for="image">{{ 'feed.post_image'|trans }}</label>
                            <input type="file" id="image" name="image" accept="image/*">
                            <small class="help-text">{{ 'feed.image_optional'|trans }}</small>
                        </div>

                        <button type="submit" class="btn btn-primary">{{ 'feed.publish'|trans }}</button>
                    </form>
                </div>

                {# Messages flash #}
                {% for message in app.flashes('success') %}
                    <div class="alert alert-success" style="margin-bottom: 1rem;">{{ message|trans }}</div>
                {% endfor %}
                {% for message in app.flashes('error') %}
                    <div class="alert alert-error" style="margin-bottom: 1rem;">{{ message|trans }}</div>
                {% endfor %}

                {# Liste des posts #}
                <div class="posts-list">
                    {% if posts is empty %}
                        <div class="card" style="padding: 2rem; text-align: center;">
                            <p style="color: #666;">{{ 'feed.no_posts'|trans }}</p>
                        </div>
                    {% else %}
                        {% for post in posts %}
                            <div class="card post-item" style="padding: 1.5rem; margin-bottom: 1.5rem; {% if post.isPinned %}border-left: 4px solid #4CAF50;{% endif %}">
                                
                                {# En-tête du post #}
                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
                                    <div style="display: flex; align-items: center; gap: 0.75rem;">
                                        {# Avatar de l'auteur du post #}
                                        {% if post.author.avatarPath %}
                                            <img src="/uploads/avatars/{{ post.author.avatarPath }}" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c400;">
                                        {% else %}
                                            <div style="width: 50px; height: 50px; border-radius: 50%; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem;">
                                                {{ post.author.firstName|first|upper }}{{ post.author.lastName|first|upper }}
                                            </div>
                                        {% endif %}
                                        
                                        <div>
                                            {# Nom de l'auteur #}
                                            <strong>
                                                {% if post.author.isAnonymous and post.author.pseudo %}
                                                    {{ post.author.pseudo }}
                                                {% else %}
                                                    {{ post.author.firstName }} {{ post.author.lastName }}
                                                {% endif %}
                                            </strong>
                                            <br>
                                            <small style="color: #666;">{{ post.createdAt|date('d/m/Y à H:i') }}</small>
                                            {% if post.isPinned %}
                                                <span class="badge badge-success" style="margin-left: 0.5rem;">📌 {{ 'feed.pinned'|trans }}</span>
                                            {% endif %}
                                        </div>
                                    </div>

                                    {# Bouton supprimer si auteur ou admin #}
                                    {% if post.author == app.user or is_granted('ROLE_ADMIN') %}
                                        <form action="{{ path('app_post_delete', {'id': post.id, '_locale': app.request.locale}) }}" method="post" onsubmit="return confirm('{{ 'feed.confirm_delete'|trans }}');" style="margin: 0;">
                                            <button type="submit" class="btn btn-danger btn-sm" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">🗑️</button>
                                        </form>
                                    {% endif %}
                                </div>

                                {# Contenu du post #}
                                <div class="post-content" style="margin-bottom: 1rem; line-height: 1.6;">
                                    {{ post.content|nl2br }}
                                </div>

                                {# Image si présente #}
                                {% if post.imagePath %}
                                    <div style="margin-bottom: 1rem;">
                                        <img src="/uploads/posts/{{ post.imagePath }}" alt="Post image" style="max-width: 100%; border-radius: 8px;">
                                    </div>
                                {% endif %}

                                {# Actions (Like + Commentaires) #}
                                <div style="display: flex; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee;">
                                    {# Bouton Like #}
                                    <form action="{{ path('app_post_like', {'id': post.id, '_locale': app.request.locale}) }}" method="post" style="margin: 0;">
                                        <button type="submit" class="btn-link" style="background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; color: {% if post.isLikedByUser(app.user) %}#e91e63{% else %}#666{% endif %};">
                                            {% if post.isLikedByUser(app.user) %}❤️{% else %}🤍{% endif %}
                                            <span>{{ post.likesCount }}</span>
                                        </button>
                                    </form>

                                    {# Compteur de commentaires #}
                                    <div style="display: flex; align-items: center; gap: 0.5rem; color: #666;">
                                        💬 <span>{{ post.commentsCount }}</span>
                                    </div>
                                </div>

                                {# Liste des commentaires #}
                                {% if post.comments|length > 0 %}
                                    <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee;">
                                        <h4 style="margin: 0 0 1rem 0; font-size: 0.9rem;">{{ 'feed.comments'|trans }} ({{ post.commentsCount }})</h4>
                                        {% for comment in post.comments %}
                                            <div style="margin-bottom: 0.75rem; padding: 0.75rem; background: #f8f9fa; border-radius: 4px; display: flex; gap: 0.75rem;">
                                                {# Avatar du commentateur #}
                                                {% if comment.author.avatarPath %}
                                                    <img src="/uploads/avatars/{{ comment.author.avatarPath }}" alt="Avatar" style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;">
                                                {% else %}
                                                    <div style="width: 36px; height: 36px; border-radius: 50%; background: #6c757d; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0;">
                                                        {{ comment.author.firstName|first|upper }}{{ comment.author.lastName|first|upper }}
                                                    </div>
                                                {% endif %}
                                                
                                                <div style="flex: 1;">
                                                    {# Nom du commentateur #}
                                                    <strong style="font-size: 0.9rem;">
                                                        {% if comment.author.isAnonymous and comment.author.pseudo %}
                                                            {{ comment.author.pseudo }}
                                                        {% else %}
                                                            {{ comment.author.firstName }}
                                                        {% endif %}
                                                    </strong>
                                                    <small style="color: #666; margin-left: 0.5rem;">{{ comment.createdAt|date('d/m/Y H:i') }}</small>
                                                    <p style="margin: 0.25rem 0 0 0; font-size: 0.9rem;">{{ comment.content|nl2br }}</p>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}

                                {# Formulaire d'ajout de commentaire #}
                                <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee;">
                                    <form action="{{ path('app_post_comment', {'id': post.id, '_locale': app.request.locale}) }}" method="post">
                                        <div style="display: flex; gap: 0.5rem; align-items: start;">
                                            {# Avatar de l'utilisateur connecté #}
                                            {% if app.user.avatarPath %}
                                                <img src="/uploads/avatars/{{ app.user.avatarPath }}" alt="Avatar" style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;">
                                            {% else %}
                                                <div style="width: 36px; height: 36px; border-radius: 50%; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0;">
                                                    {{ app.user.firstName|first|upper }}{{ app.user.lastName|first|upper }}
                                                </div>
                                            {% endif %}
                                            
                                            <input type="text" name="comment_content" placeholder="{{ 'feed.add_comment'|trans }}" required style="flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
                                            <button type="submit" class="btn btn-sm">{{ 'feed.send'|trans }}</button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>

            {# SIDEBAR DROITE - MEMBRES #}
            <aside style="width: 300px; flex-shrink: 0;" class="members-sidebar">
                <div class="card" style="padding: 1.5rem; position: sticky; top: 1rem;">
                    <h3 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.1rem;">👥 Membres</h3>
                    
                    {% if members is empty %}
                        <p style="color: #666; text-align: center;">Aucun autre membre</p>
                    {% else %}
                        <div style="display: flex; flex-direction: column; gap: 1rem;">
                            {% for member in members %}
                                <div style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 6px; background: #f8f9fa;">
                                    {# Avatar #}
                                    {% if member.avatarPath %}
                                        <img src="/uploads/avatars/{{ member.avatarPath }}" alt="Avatar" style="width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c400; flex-shrink: 0;">
                                    {% else %}
                                        <div style="width: 45px; height: 45px; border-radius: 50%; background: #6c757d; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0;">
                                            {{ member.firstName|first|upper }}{{ member.lastName|first|upper }}
                                        </div>
                                    {% endif %}
                                    
                                    <div style="flex: 1; min-width: 0;">
                                        <div style="font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                            {% if member.isAnonymous and member.pseudo %}
                                                {{ member.pseudo }}
                                            {% else %}
                                                {{ member.firstName }} {{ member.lastName }}
                                            {% endif %}
                                        </div>
                                        <a href="{{ path('app_messages_conversation', {'_locale': app.request.locale, 'id': member.id}) }}" class="btn btn-sm" style="margin-top: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.8rem; text-decoration: none; display: inline-block;">
                                            💬 Message
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </aside>

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

<style>
@media (max-width: 1024px) {
    .members-sidebar {
        display: none;
    }
}
</style>
{% endblock %}