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

{% block title %}{{ 'chat.inbox_title'|trans({}, 'Chat') }} — {{ 'navigator.academia'|trans({}, 'UserBundle') }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
/* ===== Chat Inbox Styles ===== */
.chat-inbox-container {
    max-width: 800px;
    margin: 80px auto 40px;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.chat-inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

.chat-inbox-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.chat-search-box {
    position: relative;
    flex: 0 0 260px;
}

.chat-search-box input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    font-size: 14px;
    background: #f8f9fa;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
}

html[dir="rtl"] .chat-search-box input {
    padding: 10px 14px 10px 36px;
}

.chat-search-box input:focus {
    border-color: #00a550;
    background: #fff;
}

.chat-search-box .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

html[dir="rtl"] .chat-search-box .search-icon {
    right: auto;
    left: 12px;
}

.chat-conversation-list {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    overflow: hidden;
}

.chat-conv-item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    cursor: pointer;
    gap: 14px;
}

.chat-conv-item:hover {
    background: #f8fdf9;
    text-decoration: none;
    color: inherit;
}

.chat-conv-item.unread {
    background: #f0faf4;
}

.chat-conv-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e8e8e8;
}

.chat-conv-item.unread .chat-conv-avatar {
    border-color: #00a550;
}

.chat-conv-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-conv-name {
    font-weight: 600;
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-conv-preview {
    font-size: 13px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-conv-item.unread .chat-conv-preview {
    color: #333;
    font-weight: 500;
}

.chat-conv-meta {
    text-align: end;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

html[dir="rtl"] .chat-conv-meta {
    align-items: flex-start;
}

.chat-conv-time {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.chat-conv-item.unread .chat-conv-time {
    color: #00a550;
    font-weight: 600;
}

.chat-conv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #00a550;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.chat-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.chat-empty i {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    color: #ddd;
}

.chat-empty p {
    font-size: 15px;
    margin: 0;
}

.chat-loading {
    text-align: center;
    padding: 40px;
    color: #999;
}

.chat-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.chat-search-results.show {
    display: block;
}

.chat-search-result-item {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.chat-search-result-item:hover {
    background: #f8fdf9;
    text-decoration: none;
    color: #333;
}

.chat-search-result-item .result-sender {
    font-weight: 600;
    color: #00a550;
}

.chat-search-result-item .result-body {
    color: #666;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Delete button on hover */
.chat-conv-delete {
    display: none;
    background: none;
    border: none;
    color: #cc3333;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.chat-conv-item:hover .chat-conv-delete {
    display: inline-block;
}

.chat-conv-delete:hover {
    background: rgba(204,51,51,0.08);
}

@media (max-width: 600px) {
    .chat-inbox-container {
        margin-top: 64px;
        padding: 0 8px;
    }
    .chat-inbox-header {
        flex-direction: column;
        align-items: stretch;
    }
    .chat-search-box {
        flex: 1;
    }
    .chat-conv-item {
        padding: 12px 14px;
    }
}
</style>
{% endblock %}

{% block body %}
<div class="chat-inbox-container">
    <div class="chat-inbox-header">
        <h1><i class="fa fa-comments-o"></i> {{ 'chat.messages'|trans({}, 'Chat') }}</h1>
        <div class="chat-search-box">
            <input type="text" id="chatSearchInput" placeholder="{{ 'chat.search_placeholder'|trans({}, 'Chat') }}" autocomplete="off">
            <i class="fa fa-search search-icon"></i>
            <div class="chat-search-results" id="chatSearchResults"></div>
        </div>
    </div>

    <div class="chat-conversation-list" id="chatConversationList">
        <div class="chat-loading">
            <i class="fa fa-spinner fa-spin"></i> {{ 'chat.loading'|trans({}, 'Chat') }}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function() {
    var chatApiBase = '{{ path('api_chat_inbox')|replace({'/inbox': ''}) }}';
    var messagesBase = '{{ path('app_chat_inbox') }}';
    var listEl = document.getElementById('chatConversationList');
    var searchInput = document.getElementById('chatSearchInput');
    var searchResults = document.getElementById('chatSearchResults');
    var searchTimeout = null;

    function escapeHtml(text) {
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(text || ''));
        return div.innerHTML;
    }

    function timeAgo(dateStr) {
        if (!dateStr) return '';
        var diff = Math.floor((Date.now() - new Date(dateStr.replace(' ', 'T') + 'Z').getTime()) / 1000);
        // Adjust for possible server timezone offset (~3h)
        var localDate = new Date(dateStr.replace(' ', 'T'));
        diff = Math.floor((Date.now() - localDate.getTime()) / 1000);
        if (diff < 60) return '{{ "chat.time_now"|trans({}, "Chat")|e("js") }}';
        if (diff < 3600) return Math.floor(diff/60) + ' {{ "chat.time_min"|trans({}, "Chat")|e("js") }}';
        if (diff < 86400) return Math.floor(diff/3600) + ' {{ "chat.time_hour"|trans({}, "Chat")|e("js") }}';
        if (diff < 604800) return Math.floor(diff/86400) + ' {{ "chat.time_day"|trans({}, "Chat")|e("js") }}';
        return Math.floor(diff/2592000) + ' {{ "chat.time_month"|trans({}, "Chat")|e("js") }}';
    }

    function loadInbox() {
        fetch(chatApiBase + '/inbox', { credentials: 'same-origin' })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var convs = data.conversations || [];
                if (convs.length === 0) {
                    listEl.innerHTML = '<div class="chat-empty">' +
                        '<i class="fa fa-comments-o"></i>' +
                        '<p>{{ "chat.no_conversations"|trans({}, "Chat")|e("js") }}</p>' +
                        '</div>';
                    return;
                }

                var html = '';
                for (var i = 0; i < convs.length; i++) {
                    var c = convs[i];
                    var u = c.otherUser || {};
                    var unreadClass = c.unreadCount > 0 ? ' unread' : '';
                    var name = (u.firstName || '') + ' ' + (u.lastName || '');
                    if (!name.trim()) name = u.username || '?';
                    var avatar = u.imagePath ? u.imagePath : '/bundles/syndexacademic/images/default-avatar.png';
                    var preview = '';
                    if (c.lastMessage) {
                        if (c.lastMessage.isDeleted) {
                            preview = '<i>{{ "chat.message_deleted"|trans({}, "Chat")|e("js") }}</i>';
                        } else {
                            var prefix = c.lastMessage.isMine ? '{{ "chat.you_prefix"|trans({}, "Chat")|e("js") }} ' : '';
                            preview = prefix + escapeHtml(c.lastMessage.body);
                        }
                    }
                    var time = c.lastMessage ? timeAgo(c.lastMessage.createdAt) : timeAgo(c.createdAt);

                    html += '<a href="' + messagesBase + '/' + c.id + '" class="chat-conv-item' + unreadClass + '" data-cid="' + c.id + '">';
                    html += '<img class="chat-conv-avatar" src="' + escapeHtml(avatar) + '" alt="" onerror="this.onerror=null; this.src=\'/bundles/user/img/default_profile_pic_m.png\'">';
                    html += '<div class="chat-conv-body">';
                    html += '<div class="chat-conv-name">' + escapeHtml(name) + '</div>';
                    html += '<div class="chat-conv-preview">' + preview + '</div>';
                    html += '</div>';
                    html += '<div class="chat-conv-meta">';
                    html += '<span class="chat-conv-time">' + escapeHtml(time) + '</span>';
                    if (c.unreadCount > 0) {
                        html += '<span class="chat-conv-badge">' + (c.unreadCount > 99 ? '99+' : c.unreadCount) + '</span>';
                    }
                    html += '<button type="button" class="chat-conv-delete" data-cid="' + c.id + '" title="{{ "chat.delete_conversation"|trans({}, "Chat")|e("js") }}" onclick="event.preventDefault();event.stopPropagation();deleteConv(' + c.id + ')"><i class="fa fa-trash-o"></i></button>';
                    html += '</div>';
                    html += '</a>';
                }
                listEl.innerHTML = html;
            })
            .catch(function() {
                listEl.innerHTML = '<div class="chat-empty"><p>{{ "chat.error_loading"|trans({}, "Chat")|e("js") }}</p></div>';
            });
    }

    window.deleteConv = function(cid) {
        if (!confirm('{{ "chat.confirm_delete"|trans({}, "Chat")|e("js") }}')) return;
        fetch(chatApiBase + '/' + cid + '/delete', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function() {
            var el = document.querySelector('.chat-conv-item[data-cid="' + cid + '"]');
            if (el) el.remove();
        });
    };

    // Search
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            var q = this.value.trim();
            if (q.length < 2) {
                searchResults.classList.remove('show');
                return;
            }
            searchTimeout = setTimeout(function() {
                fetch(chatApiBase + '/search?q=' + encodeURIComponent(q), { credentials: 'same-origin' })
                    .then(function(r) { return r.json(); })
                    .then(function(data) {
                        var items = data.results || [];
                        if (items.length === 0) {
                            searchResults.innerHTML = '<div style="padding:16px;text-align:center;color:#999;font-size:13px;">{{ "chat.no_results"|trans({}, "Chat")|e("js") }}</div>';
                        } else {
                            var h = '';
                            for (var i = 0; i < items.length; i++) {
                                var r = items[i];
                                h += '<a href="' + messagesBase + '/' + r.conversation_id + '" class="chat-search-result-item">';
                                h += '<div class="result-sender">' + escapeHtml(r.sender_first_name || r.sender_username) + '</div>';
                                h += '<div class="result-body">' + escapeHtml(r.body) + '</div>';
                                h += '</a>';
                            }
                            searchResults.innerHTML = h;
                        }
                        searchResults.classList.add('show');
                    });
            }, 300);
        });

        document.addEventListener('click', function(e) {
            if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
                searchResults.classList.remove('show');
            }
        });
    }

    loadInbox();
})();
</script>
{% endblock %}