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

{% block title %}{{ 'messages.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; text-align: center;">
            {{ 'messages.title'|trans }}
            {% if unreadCount > 0 %}
                <span class="badge" style="background: #e91e63; color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.9rem; margin-left: 0.5rem;">{{ unreadCount }}</span>
            {% endif %}
        </h1>

        <div style="display: flex; gap: 2rem; justify-content: center;">

            {# ===== COLONNE GAUCHE - RECHERCHE ===== #}
            <aside style="width: 250px; flex-shrink: 0;" class="left-sidebar">
                <div class="card" style="padding: 1.25rem; position: sticky; top: 1rem;">
                    <h3 style="margin: 0 0 1rem 0; font-size: 0.95rem; color: var(--royal, #1a2e5a);">🔍 Rechercher</h3>
                    <input type="text" id="member-search-input" placeholder="Pseudo ou nom…"
                           style="width: 100%; box-sizing: border-box; padding: 0.45rem 0.75rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.875rem;">
                    <div id="member-search-results" style="margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;"></div>
                </div>
            </aside>

            {# ===== COLONNE CENTRALE - CONVERSATIONS ===== #}
            <div class="messages-container" style="flex: 0 0 600px; max-width: 600px;">

                <div style="margin-bottom: 1rem;">
                    <a href="{{ path('app_feed', {'_locale': app.request.locale}) }}"
                       style="font-size: 0.85rem; color: var(--royal, #1a2e5a); text-decoration: none; font-weight: 600;">
                        ← Fil d'actu
                    </a>
                </div>

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

                {% if conversations is empty %}
                    <div class="card" style="padding: 3rem; text-align: center;">
                        <p style="color: #666; font-size: 1.1rem;">{{ 'messages.no_conversations'|trans }}</p>
                        <p style="color: #999; margin-top: 0.5rem;">{{ 'messages.start_conversation_hint'|trans }}</p>
                    </div>
                {% else %}
                    <div class="conversations-list">
                        {% for conversation in conversations %}
                            {% set contact = conversation.contact %}
                            {% set lastMsg = conversation.lastMessage %}
                            {% set isUnread = lastMsg.receiver_id == app.user.id and not lastMsg.is_read %}

                            <a href="{{ path('app_messages_conversation', {'_locale': app.request.locale, 'id': contact.id}) }}"
                               class="conversation-item"
                               style="display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 1rem; text-decoration: none; color: inherit; transition: all 0.2s; {% if isUnread %}background: #f0f8ff; border-color: #007bff;{% else %}background: white;{% endif %}">

                                {# Avatar + indicateur en ligne #}
                                <div style="position: relative; flex-shrink: 0;">
                                    {% if contact.avatarPath %}
                                        <img src="/uploads/avatars/{{ contact.avatarPath }}" alt="Avatar"
                                             style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid {% if isUnread %}#007bff{% else %}#6c757d{% endif %};">
                                    {% else %}
                                        <div style="width: 50px; height: 50px; border-radius: 50%; background: {% if isUnread %}#007bff{% else %}#6c757d{% endif %}; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem;">
                                            {{ contact.firstName|first|upper }}{{ contact.lastName|first|upper }}
                                        </div>
                                    {% endif %}
                                    <span style="position: absolute; bottom: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: {{ contact.isOnline ? '#22c55e' : '#9ca3af' }}; border: 2px solid white;"></span>
                                </div>

                                <div style="flex: 1; min-width: 0;">
                                    <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
                                        <strong style="font-size: 1.1rem; {% if isUnread %}color: #007bff;{% endif %}">
                                            {{ contact.displayName }}
                                            <span onclick="event.preventDefault();openMemberPopup({{ contact.id }});"
                                                  style="font-size:0.72rem;font-weight:400;color:#9ca3af;cursor:pointer;margin-left:0.3rem;">voir profil</span>
                                        </strong>
                                        <small style="color: #999;">{{ lastMsg.created_at|date('d/m/Y H:i') }}</small>
                                    </div>
                                    <p style="margin: 0; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                        {% if lastMsg.sender_id == app.user.id %}
                                            <span style="color: #999;">{{ 'messages.you'|trans }}: </span>
                                        {% endif %}
                                        {{ lastMsg.content|length > 60 ? lastMsg.content|slice(0, 60) ~ '...' : lastMsg.content }}
                                    </p>
                                </div>

                                {% if isUnread %}
                                    <div style="width: 12px; height: 12px; border-radius: 50%; background: #e91e63; flex-shrink: 0;"></div>
                                {% endif %}

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

            </div>

            {# ===== COLONNE DROITE - DERNIERS CONTACTÉS ===== #}
            <aside style="width: 250px; flex-shrink: 0;" class="members-sidebar">
                <div class="card" style="padding: 1.25rem; position: sticky; top: 1rem;">
                    <h3 style="margin: 0 0 1rem 0; font-size: 0.95rem; color: var(--royal, #1a2e5a);">💬 Derniers contactés</h3>

                    {% if recentContacts is empty %}
                        <p style="color: #aaa; text-align: center; font-size: 0.85rem;">Aucune conversation</p>
                    {% else %}
                        <div style="display: flex; flex-direction: column; gap: 0.6rem;">
                            {% for member in recentContacts %}
                                <a href="{{ path('app_messages_conversation', {'_locale': app.request.locale, 'id': member.id}) }}"
                                   style="display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border-radius: 8px; background: #f8f9fa; text-decoration: none; color: inherit; transition: background 0.15s;">
                                    <div onclick="event.preventDefault();openMemberPopup({{ member.id }});" style="position: relative; flex-shrink: 0; cursor:pointer;">
                                        {% if member.avatarPath %}
                                            <img src="/uploads/avatars/{{ member.avatarPath }}" alt=""
                                                 style="width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c400;">
                                        {% else %}
                                            <div style="width: 38px; height: 38px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem;">
                                                {{ member.firstName|first|upper }}{{ member.lastName|first|upper }}
                                            </div>
                                        {% endif %}
                                        <span style="position: absolute; bottom: 0px; right: 0px; width: 10px; height: 10px; border-radius: 50%; background: {{ member.isOnline ? '#22c55e' : '#9ca3af' }}; border: 2px solid white;"></span>
                                    </div>
                                    <div style="font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--royal, #1a2e5a);">
                                        {{ member.displayName }}
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </aside>

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

<style>
.conversation-item:hover {
    background: #f8f9fa !important;
    border-color: #007bff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
@media (max-width: 1200px) {
    .left-sidebar, .members-sidebar { display: none !important; }
    .messages-container { max-width: 100% !important; }
}
</style>

<script>
const locale = document.documentElement.lang || 'fr';
const searchInput = document.getElementById('member-search-input');
const searchResults = document.getElementById('member-search-results');
let searchTimer = null;

searchInput.addEventListener('input', function() {
    clearTimeout(searchTimer);
    const q = this.value.trim();
    if (q.length < 2) { searchResults.innerHTML = ''; return; }
    searchTimer = setTimeout(() => searchMembers(q), 300);
});

async function searchMembers(q) {
    const res = await fetch('/' + locale + '/na/membres/recherche?q=' + encodeURIComponent(q), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });
    if (!res.ok) return;
    const data = await res.json();
    searchResults.innerHTML = '';

    if (data.length === 0) {
        searchResults.innerHTML = '<div style="color:#aaa;font-size:0.82rem;text-align:center;">Aucun résultat</div>';
        return;
    }

    data.forEach(member => {
        const a = document.createElement('a');
        a.href = '/' + locale + '/messages/' + member.id;
        a.style.cssText = 'display:flex;align-items:center;gap:0.6rem;padding:0.5rem 0.6rem;border-radius:8px;background:#f8f9fa;text-decoration:none;color:inherit;';

        const avatarHtml = member.avatar
            ? `<div style="position:relative;flex-shrink:0;"><img src="/uploads/avatars/${member.avatar}" style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #f5c400;"><span style="position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:${member.online ? '#22c55e' : '#9ca3af'};border:2px solid white;"></span></div>`
            : `<div style="position:relative;flex-shrink:0;"><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.85rem;">${member.initials}</div><span style="position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:${member.online ? '#22c55e' : '#9ca3af'};border:2px solid white;"></span></div>`;

        a.innerHTML = avatarHtml + `<div style="flex:1;min-width:0;"><div style="font-size:0.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${member.name}</div><div style="font-size:0.75rem;color:${member.online ? '#22c55e' : '#9ca3af'};">${member.online ? 'En ligne' : 'Hors ligne'}</div></div>`;
        searchResults.appendChild(a);
    });
}
</script>
{% endblock %}