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

{% block title %}{{ 'messages.conversation_with'|trans }}
    {{ contact.displayName }} - Na+
{% endblock %}

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

        <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 - CONVERSATION ===== #}
            <div class="conversation-container" style="flex: 0 0 600px; max-width: 600px;">

                {# Header conversation #}
                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #f5c400;">
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <a href="{{ path('app_messages_list', {'_locale': app.request.locale}) }}" class="btn btn-secondary btn-sm" style="text-decoration: none;">← {{ 'messages.back'|trans }}</a>

                        <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 #007bff;">
                            {% 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;">
                                    {{ contact.firstName|first|upper }}{{ contact.lastName|first|upper }}
                                </div>
                            {% endif %}
                            <span style="position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: {{ contact.isOnline ? '#22c55e' : '#9ca3af' }}; border: 2px solid white;" title="{{ contact.isOnline ? 'En ligne' : 'Hors ligne' }}"></span>
                        </div>

                        <div>
                            <h1 style="margin: 0; font-size: 1.5rem;">{{ contact.displayName }}</h1>
                            <small style="color: {{ contact.isOnline ? '#22c55e' : '#9ca3af' }}; font-size: 0.8rem;">
                                {{ contact.isOnline ? 'En ligne' : 'Hors ligne' }}
                            </small>
                        </div>
                    </div>
                </div>

                {% 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 %}

                {# Zone de messages #}
                <div class="messages-box" style="background: white; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; max-height: 500px; overflow-y: auto;">
                    {% if messages is empty %}
                        <p style="text-align: center; color: #666; padding: 2rem;">{{ 'messages.no_messages_yet'|trans }}</p>
                    {% else %}
                        {% set lastDate = null %}
                        {% for msg in messages %}
                            {% set isSentByMe = msg.sender.id == app.user.id %}
                            {% set msgDate = msg.createdAt|date('Y-m-d') %}
                            {% set today = "now"|date('Y-m-d') %}
                            {% set yesterday = "-1 day"|date('Y-m-d') %}

                            {# Séparateur de date timeline #}
                            {% if msgDate != lastDate %}
                                {% set lastDate = msgDate %}
                                <div style="display:flex;align-items:center;gap:0.75rem;margin:1rem 0 0.75rem;">
                                    <div style="flex:1;height:1px;background:#e5e7eb;"></div>
                                    <span style="font-size:0.72rem;color:#6b7280;white-space:nowrap;background:white;padding:0 0.4rem;">
                                        {% if msgDate == today %}Aujourd'hui
                                        {% elseif msgDate == yesterday %}Hier
                                        {% else %}{{ msg.createdAt|date('d/m/Y') }}{% endif %}
                                    </span>
                                    <div style="flex:1;height:1px;background:#e5e7eb;"></div>
                                </div>
                            {% endif %}

                            {# Détecter si le message est uniquement composé d'émojis #}
                            {% set trimmed = msg.content|trim %}
                            {% set isEmojiOnly = trimmed matches '/^(\\p{Emoji_Presentation}|\\p{Extended_Pictographic}|[\\x{1F1E0}-\\x{1F1FF}]|[\\x{1F300}-\\x{1FAFF}]|[\\x{2600}-\\x{27BF}]|[\\x{FE00}-\\x{FEFF}]|\\x{20E3}|\\x{200D}|\\x{FE0F})+$/u' %}

                            <div style="display: flex; justify-content: {% if isSentByMe %}flex-end{% else %}flex-start{% endif %}; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.75rem;">

                                {# Horodatage à GAUCHE pour messages reçus #}
                                {% if not isSentByMe %}
                                    <div style="display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; margin-bottom: 0.2rem;">
                                        <span style="font-size: 0.72rem; color: #6b7280; line-height: 1.3;">{{ msg.createdAt|date('H:i') }}</span>
                                    </div>
                                {% endif %}

                                {# Bulle — ou émoji seul sans fond #}
                                {% if isEmojiOnly %}
                                    <div style="max-width: 70%; font-size: 2.8rem; line-height: 1.2; padding: 0.25rem 0;">{{ msg.content }}</div>
                                {% else %}
                                    <div style="max-width: 70%; background: {% if isSentByMe %}#dbeafe{% else %}#d4e4d4{% endif %}; color: #1a2e5a; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid {% if isSentByMe %}#bfdbfe{% else %}#b8ccb0{% endif %};">
                                        <div style="word-wrap: break-word; white-space: pre-wrap; font-size: 0.95rem;">{{ msg.content }}</div>
                                    </div>
                                {% endif %}

                                {# Horodatage + statut à DROITE pour messages envoyés #}
                                {% if isSentByMe %}
                                    <div style="display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; margin-bottom: 0.2rem;">
                                        <span style="font-size: 0.72rem; color: #6b7280; line-height: 1.3;">{{ msg.createdAt|date('H:i') }}</span>
                                        <span style="font-size: 0.72rem; color: {% if msg.isRead %}#22c55e{% else %}#9ca3af{% endif %}; line-height: 1.3;" title="{% if msg.isRead %}Lu{% else %}Distribué{% endif %}">
                                            {% if msg.isRead %}✓✓{% else %}✓{% endif %}
                                        </span>
                                    </div>
                                {% endif %}

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

                {# Formulaire d'envoi #}
                <form action="{{ path('app_messages_send', {'_locale': app.request.locale, 'id': contact.id}) }}" method="post">
                    {# Barre emoji #}
                    <div style="position: relative; margin-bottom: 0.5rem;">
                        <button type="button" id="emoji-btn"
                                style="background: none; border: 1px solid #ddd; border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 1.2rem; color: #666;"
                                title="Insérer un émoji">😊</button>
                        <div id="emoji-picker"
                             style="display: none; position: absolute; bottom: 110%; left: 0; background: white; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 0.75rem; width: 320px; z-index: 100;">
                            <div style="display: flex; gap: 0.4rem; margin-bottom: 0.5rem; border-bottom: 1px solid #f0f0f0; padding-bottom: 0.5rem; overflow-x: auto;">
                                <button type="button" class="emoji-cat-btn active" data-cat="smileys" style="background: #f0f0f0; border: none; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 1rem; white-space: nowrap;">😊 Smileys</button>
                                <button type="button" class="emoji-cat-btn" data-cat="gestures" style="background: none; border: none; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 1rem; white-space: nowrap;">👋 Gestes</button>
                                <button type="button" class="emoji-cat-btn" data-cat="hearts" style="background: none; border: none; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 1rem; white-space: nowrap;">❤️ Cœurs</button>
                                <button type="button" class="emoji-cat-btn" data-cat="animals" style="background: none; border: none; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 1rem; white-space: nowrap;">🐾 Animaux</button>
                                <button type="button" class="emoji-cat-btn" data-cat="objects" style="background: none; border: none; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 1rem; white-space: nowrap;">🎉 Objets</button>
                            </div>
                            <div id="emoji-grid" style="display: flex; flex-wrap: wrap; gap: 0.25rem; max-height: 180px; overflow-y: auto;"></div>
                        </div>
                    </div>

                    <div style="display: flex; gap: 0.5rem;">
                        <textarea id="message-textarea"
                                  name="content"
                                  placeholder="{{ 'messages.write_message'|trans }}"
                                  required
                                  rows="3"
                                  style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; resize: vertical; font-family: inherit;"></textarea>
                        <button type="submit" class="btn btn-primary" style="align-self: flex-end; white-space: nowrap;">
                            {{ 'messages.send'|trans }} →
                        </button>
                    </div>
                </form>

            </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: {% if member.id == contact.id %}#eef2ff{% else %}#f8f9fa{% endif %}; text-decoration: none; color: inherit; transition: background 0.15s; {% if member.id == contact.id %}border: 1px solid #007bff;{% endif %}">
                                    <div style="position: relative; flex-shrink: 0;">
                                        {% if member.avatarPath %}
                                            <img src="/uploads/avatars/{{ member.avatarPath }}" alt=""
                                                 style="width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid {% if member.id == contact.id %}#007bff{% else %}#f5c400{% endif %};">
                                        {% 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>
@media (max-width: 1200px) {
    .left-sidebar, .members-sidebar { display: none !important; }
    .conversation-container { max-width: 100% !important; }
}
.emoji-btn-item {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0.2rem;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.1s;
}
.emoji-btn-item:hover { background: #f0f0f0; }
.emoji-cat-btn:hover { background: #f0f0f0 !important; }
</style>

<script>
// locale déjà défini dans base.html.twig — ne pas redéclarer

// Auto-scroll vers le bas
document.addEventListener('DOMContentLoaded', function() {
    const messagesBox = document.querySelector('.messages-box');
    if (messagesBox) {
        messagesBox.scrollTop = messagesBox.scrollHeight;
    }
});

// ===== EMOJI PICKER =====
const EMOJIS = {
    smileys: ['😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','🥰','😍','🤩','😘','😗','😚','😙','🥲','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','🤥','😌','😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧','🥵','🥶','🥴','😵','🤯','🤠','🥳','🥸','😎','🤓','🧐','😕','😟','🙁','☹️','😮','😯','😲','😳','🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','👾','🤖'],
    gestures: ['👋','🤚','🖐️','✋','🖖','👌','🤌','🤏','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌','👐','🤲','🤝','🙏','✍️','💅','🤳','💪','🦵','🦶','👂','🦻','👃','🧠','🦷','🦴','👀','👁️','👅','👄','💋','🫦','🧑','👶','🧒','👦','👧','🧑','👱','👨','🧔','👩','🧓','👴','👵','🙍','🙎','🙅','🙆','💁','🙋','🧏','🙇','🤦','🤷','👮','🕵️','💂','🧑‍⚕️','👨‍⚕️','👩‍⚕️','🧑‍🎓','🧑‍🏫','🧑‍🍳','🧑‍🌾','🧑‍🔧','🧑‍🏭','🧑‍💼','🧑‍🎤','🧑‍🎨','🧑‍✈️','🧑‍🚀','🧑‍🚒','👷','🤴','👸','🧙','🧝','🧛','🧟','🧞','🧜','🧚','👼','🤶','🎅','🦸','🦹','🧑‍🦯','🧑‍🦼','🧑‍🦽','🏃','🚶','🧍','🧎','👫','👬','👭','💑','👪'],
    hearts:  ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❤️‍🔥','❤️‍🩹','❣️','💕','💞','💓','💗','💖','💘','💝','💟','☮️','✝️','☯️','🕊️','🌈','💫','⭐','🌟','✨','💥','🔥','🌊','🎆','🎇','🥂','🍾','🎉','🎊','🎈','🎁','🎀','🎗️','🏆','🥇','🌸','🌺','🌻','🌹','🌷','💐','🍀','🌿'],
    animals: ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐽','🐸','🐵','🙈','🙉','🙊','🐔','🐧','🐦','🐤','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🐛','🦋','🐌','🐞','🐜','🦟','🦗','🕷️','🦂','🐢','🐍','🦎','🦖','🦕','🐙','🦑','🦐','🦞','🦀','🐡','🐠','🐟','🐬','🐳','🐋','🦈','🐊','🐅','🐆','🦓','🦍','🦧','🦣','🐘','🦛','🦏','🐪','🐫','🦒','🦘','🦬','🐃','🐂','🐄','🐎','🐖','🐏','🐑','🦙','🐐','🦌','🐕','🐩','🦮','🐕‍🦺','🐈','🐈‍⬛','🪶','🐓','🦃','🦤','🦚','🦜','🦢','🦩','🕊️','🐇','🦝','🦨','🦡','🦫','🦦','🦥','🐁','🐀','🐿️','🦔','🐾','🐉','🐲','🌵','🎄','🌲','🌳','🌴','🪵','🌱','🌿','☘️','🍀','🎍','🪴','🎋','🍃','🍂','🍁','🍄','🐚','🪸','🌾','💐','🌷','🌹','🥀','🪷','🌺','🌸','🌼','🌻','🌞','🌝','🌛','🌜','🌚','🌕','🌖','🌗','🌘','🌑','🌒','🌓','🌔','🌙','🌟','⭐','🌠','🌌','☀️','🌤️','⛅','🌦️','🌧️','⛈️','🌩️','🌨️','❄️','☃️','⛄','🌬️','💨','🌪️','🌫️','🌈','🌂','☔','⚡','🔥','💧','🌊'],
    objects: ['🎉','🎊','🎈','🎁','🎀','🎗️','🎟️','🎫','🏆','🥇','🥈','🥉','🏅','🎖️','🎯','🎮','🕹️','🎲','🧩','♟️','🎭','🎨','🖼️','🎬','🎤','🎧','🎼','🎵','🎶','🎷','🎸','🎹','🎺','🎻','🥁','🪘','🎙️','📻','📺','📱','💻','⌨️','🖥️','🖨️','🖱️','📷','📸','📹','🎥','📽️','🔭','🔬','📡','💡','🔦','🕯️','📚','📖','✏️','🖊️','🖋️','📝','📌','📍','🗂️','📁','📂','🗓️','📅','📆','🏠','🏡','🏢','🏥','🏦','🏨','🏪','🏫','🏬','🏰','🗼','🗽','⛪','🕌','⛩️','🎑','🏞️','🌅','🌄','🌠','🌇','🌆','🏙️','🌃','🌉','🚗','🚕','🚙','🚌','🏎️','🚓','🚑','🚒','✈️','🚀','🛸','🚢','⛵','🚁','🚂','🚆','🚇','⚓','🛣️','⛽','🚦','🚥','🍕','🍔','🍟','🌭','🍿','🧂','🥓','🥚','🍳','🧇','🥞','🧈','🍞','🥐','🥖','🫓','🥨','🧀','🥗','🥙','🥪','🌮','🌯','🫔','🍱','🍣','🍜','🍝','🍛','🍲','🫕','🍤','🍙','🍚','🍘','🍥','🥮','🍡','🧁','🍰','🎂','🍮','🍭','🍬','🍫','🍿','🍩','🍪','🌰','🥜','🍯','🧃','🥤','🧋','☕','🫖','🍵','🍺','🍻','🥂','🍷','🥃','🍸','🍹','🧉','🍾']
};

let currentCat = 'smileys';
const emojiBtn = document.getElementById('emoji-btn');
const emojiPicker = document.getElementById('emoji-picker');
const emojiGrid = document.getElementById('emoji-grid');
const textarea = document.getElementById('message-textarea');

function renderEmojis(cat) {
    emojiGrid.innerHTML = '';
    EMOJIS[cat].forEach(e => {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'emoji-btn-item';
        btn.textContent = e;
        btn.onclick = () => insertEmoji(e);
        emojiGrid.appendChild(btn);
    });
}

function insertEmoji(emoji) {
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const val = textarea.value;
    textarea.value = val.slice(0, start) + emoji + val.slice(end);
    textarea.selectionStart = textarea.selectionEnd = start + emoji.length;
    textarea.focus();
}

emojiBtn.addEventListener('click', function(e) {
    e.stopPropagation();
    const isOpen = emojiPicker.style.display !== 'none';
    emojiPicker.style.display = isOpen ? 'none' : 'block';
    if (!isOpen) renderEmojis(currentCat);
});

document.querySelectorAll('.emoji-cat-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.emoji-cat-btn').forEach(b => b.style.background = 'none');
        this.style.background = '#f0f0f0';
        currentCat = this.dataset.cat;
        renderEmojis(currentCat);
    });
});

document.addEventListener('click', function(e) {
    if (!emojiPicker.contains(e.target) && e.target !== emojiBtn) {
        emojiPicker.style.display = 'none';
    }
});

// ===== RECHERCHE MEMBRE =====
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 %}