{% extends "layout.html" %}

{% block title %}Чат - ZontikGram Lite{% endblock %}

{% block extra_css %}
<style>
    .chat-container {
        display: flex;
        height: calc(100vh - 150px);
        background: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    /* Боковая панель */
    .sidebar {
        width: 300px;
        border-right: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
    }
    
    .sidebar-header {
        padding: 20px;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .search-box {
        position: relative;
        margin-bottom: 15px;
    }
    
    .search-box input {
        width: 100%;
        padding: 10px 10px 10px 35px;
        border: 1px solid #cbd5e0;
        border-radius: 5px;
    }
    
    .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
    }
    
    .contact-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
    }
    
    .contact-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s;
        margin-bottom: 5px;
    }
    
    .contact-item:hover {
        background: #f7fafc;
    }
    
    .contact-item.active {
        background: #667eea;
        color: white;
    }
    
    .contact-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
        object-fit: cover;
    }
    
    .contact-info {
        flex: 1;
    }
    
    .contact-name {
        font-weight: bold;
    }
    
    .contact-last-message {
        font-size: 12px;
        color: #718096;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .unread-badge {
        background: #f56565;
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 5px;
    }
    
    /* Основная область чата */
    .chat-main {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .chat-header {
        padding: 15px 20px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .current-contact {
        display: flex;
        align-items: center;
    }
    
    .current-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
        object-fit: cover;
    }
    
    .messages-container {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        background: #f7fafc;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .message {
        max-width: 70%;
        padding: 10px 15px;
        border-radius: 15px;
        position: relative;
        animation: fadeIn 0.3s;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .message-incoming {
        align-self: flex-start;
        background: white;
        border-bottom-left-radius: 5px;
    }
    
    .message-outgoing {
        align-self: flex-end;
        background: #667eea;
        color: white;
        border-bottom-right-radius: 5px;
    }
    
    .message-sender {
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .message-text {
        word-wrap: break-word;
    }
    
    .message-time {
        font-size: 11px;
        text-align: right;
        margin-top: 5px;
        opacity: 0.8;
    }
    
    /* Поле ввода */
    .message-input-area {
        padding: 15px 20px;
        border-top: 1px solid #e2e8f0;
        background: white;
    }
    
    .message-form {
        display: flex;
        gap: 10px;
    }
    
    .message-input {
        flex: 1;
        padding: 10px 15px;
        border: 1px solid #cbd5e0;
        border-radius: 5px;
        resize: none;
        min-height: 40px;
        max-height: 100px;
    }
    
    .file-preview {
        margin-bottom: 10px;
        padding: 10px;
        background: #edf2f7;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .file-preview img {
        max-width: 50px;
        border-radius: 5px;
    }
    
    /* Уведомления */
    .notification {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #667eea;
        color: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
        animation: slideIn 0.3s;
    }
    
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #cbd5e0;
        border-radius: 5px;
        max-height: 300px;
        overflow-y: auto;
        z-index: 100;
        display: none;
    }
    
    .search-result-item {
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    
    .search-result-item:hover {
        background: #f7fafc;
    }
</style>
{% endblock %}

{% block content %}
<div class="chat-container">
    <!-- Боковая панель с контактами -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h3 style="margin-bottom: 15px;">Контакты</h3>
            <div class="search-box">
                <span class="search-icon">🔍</span>
                <input type="text" id="contactSearch" placeholder="Поиск пользователей...">
                <div class="search-results" id="searchResults"></div>
            </div>
            <button class="btn btn-primary" style="width: 100%;" onclick="refreshContacts()">
                🔄 Обновить
            </button>
        </div>
        
        <div class="contact-list" id="contactList">
            {% if contacts %}
                {% for contact in contacts %}
                <div class="contact-item" data-contact-id="{{ contact.id }}" onclick="selectContact('{{ contact.id }}')">
                    <img src="{{ url_for('uploaded_file', filename='avatars/' + contact.avatar) }}" 
                         alt="{{ contact.username }}" class="contact-avatar">
                    <div class="contact-info">
                        <div class="contact-name">
                            {{ contact.username }}
                            {% if contact.unread_count %}
                            <span class="unread-badge">{{ contact.unread_count }}</span>
                            {% endif %}
                        </div>
                        <div class="contact-last-message">{{ contact.last_message }}</div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div style="text-align: center; padding: 40px; color: #718096;">
                    <p>😔 У вас пока нет контактов</p>
                    <p style="font-size: 14px;">Найдите пользователей через поиск</p>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Основная область чата -->
    <div class="chat-main">
        <!-- Шапка чата -->
        <div class="chat-header">
            <div id="noContactSelected">
                <h3 style="margin: 0;">👈 Выберите контакт для общения</h3>
                <p style="margin: 5px 0 0 0; color: #718096;">Начните новый диалог или выберите из списка</p>
            </div>
            
            <div id="activeContactInfo" style="display: none;">
                <div class="current-contact">
                    <img id="activeContactAvatar" src="" alt="Аватар" class="current-avatar">
                    <div>
                        <h4 style="margin: 0;" id="activeContactName"></h4>
                        <small id="activeContactStatus"></small>
                    </div>
                </div>
                <button class="btn btn-secondary" onclick="refreshMessages()">
                    🔄 Обновить
                </button>
            </div>
        </div>
        
        <!-- История переписки -->
        <div class="messages-container" id="messagesContainer">
            <div style="text-align: center; padding: 40px; color: #718096;">
                <h3>💬 Добро пожаловать в ZontikGram!</h3>
                <p>Выберите контакт слева, чтобы начать общение</p>
            </div>
        </div>
        
        <!-- Поле ввода сообщения -->
        <div class="message-input-area" id="messageInputArea" style="display: none;">
            <div class="message-form">
                <textarea class="message-input" id="messageInput" 
                          placeholder="Введите сообщение..." rows="1"></textarea>
                <button type="button" class="btn btn-primary" onclick="sendMessage()">
                    📨 Отправить
                </button>
            </div>
            <div style="margin-top: 10px; font-size: 12px; color: #718096;">
                💡 Совет: Нажмите Enter для отправки, Shift+Enter для новой строки
            </div>
        </div>
    </div>
</div>

<!-- Скрытые поля с данными -->
<input type="hidden" id="currentUserId" value="{{ session.user_id }}">
<input type="hidden" id="currentUsername" value="{{ session.username }}">
<input type="hidden" id="currentAvatar" value="{{ session.avatar }}">

<script src="{{ url_for('static', filename='js/chat.js') }}"></script>

<script>
// Обновление контактов
function refreshContacts() {
    location.reload();
}

// Выбор контакта
function selectContact(contactId) {
    // Убираем выделение у всех контактов
    document.querySelectorAll('.contact-item').forEach(item => {
        item.classList.remove('active');
    });
    
    // Выделяем выбранный контакт
    const contactItem = document.querySelector(`.contact-item[data-contact-id="${contactId}"]`);
    if (contactItem) {
        contactItem.classList.add('active');
        
        // Сбрасываем счетчик непрочитанных
        const badge = contactItem.querySelector('.unread-badge');
        if (badge) {
            badge.remove();
        }
    }
    
    // Загружаем сообщения с этим контактом
    loadMessages(contactId);
}

// Загрузка сообщений
function loadMessages(contactId) {
    fetch(`/api/messages/${contactId}`)
        .then(response => response.json())
        .then(messages => {
            displayMessages(messages, contactId);
            
            // Показываем информацию о контакте
            showContactInfo(contactId);
            
            // Показываем поле ввода
            document.getElementById('messageInputArea').style.display = 'block';
        })
        .catch(error => {
            console.error('Ошибка загрузки сообщений:', error);
            alert('Не удалось загрузить сообщения');
        });
}

// Отображение сообщений
function displayMessages(messages, contactId) {
    const container = document.getElementById('messagesContainer');
    const currentUserId = document.getElementById('currentUserId').value;
    
    container.innerHTML = '';
    
    if (messages.length === 0) {
        container.innerHTML = `
            <div style="text-align: center; padding: 40px; color: #718096;">
                <h3>💬 Начните диалог!</h3>
                <p>Отправьте первое сообщение</p>
            </div>
        `;
        return;
    }
    
    messages.forEach(message => {
        const isOutgoing = message.sender_id === currentUserId;
        const messageClass = isOutgoing ? 'message-outgoing' : 'message-incoming';
        
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${messageClass}`;
        
        if (!isOutgoing) {
            const senderDiv = document.createElement('div');
            senderDiv.className = 'message-sender';
            senderDiv.textContent = message.sender_username;
            messageDiv.appendChild(senderDiv);
        }
        
        const textDiv = document.createElement('div');
        textDiv.className = 'message-text';
        textDiv.textContent = message.text || '📎 Файл';
        messageDiv.appendChild(textDiv);
        
        const timeDiv = document.createElement('div');
        timeDiv.className = 'message-time';
        const date = new Date(message.timestamp);
        timeDiv.textContent = date.toLocaleTimeString('ru-RU', { 
            hour: '2-digit', 
            minute: '2-digit' 
        });
        messageDiv.appendChild(timeDiv);
        
        container.appendChild(messageDiv);
    });
    
    // Прокручиваем к последнему сообщению
    container.scrollTop = container.scrollHeight;
}

// Показать информацию о контакте
function showContactInfo(contactId) {
    fetch(`/api/user/${contactId}`)
        .then(response => response.json())
        .then(contact => {
            document.getElementById('noContactSelected').style.display = 'none';
            document.getElementById('activeContactInfo').style.display = 'flex';
            
            document.getElementById('activeContactAvatar').src = 
                `/uploads/avatars/${contact.avatar}`;
            document.getElementById('activeContactName').textContent = contact.username;
            
            const status = contact.is_online ? '🟢 Онлайн' : '⚫ Офлайн';
            document.getElementById('activeContactStatus').textContent = status;
        });
}

// Отправка сообщения
function sendMessage() {
    const input = document.getElementById('messageInput');
    const text = input.value.trim();
    const activeContact = document.querySelector('.contact-item.active');
    
    if (!text || !activeContact) return;
    
    const contactId = activeContact.dataset.contactId;
    
    fetch('/api/messages/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            recipient_id: contactId,
            text: text
        })
    })
    .then(response => response.json())
    .then(message => {
        // Очищаем поле ввода
        input.value = '';
        
        // Добавляем сообщение в историю
        loadMessages(contactId);
        
        // Обновляем список контактов
        refreshContacts();
    })
    .catch(error => {
        console.error('Ошибка отправки сообщения:', error);
        alert('Не удалось отправить сообщение');
    });
}

// Поиск пользователей
document.getElementById('contactSearch').addEventListener('input', function(e) {
    const query = e.target.value.trim();
    const resultsContainer = document.getElementById('searchResults');
    
    if (!query) {
        resultsContainer.style.display = 'none';
        return;
    }
    
    fetch(`/api/users/search?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(users => {
            if (users.length === 0) {
                resultsContainer.innerHTML = '<div class="search-result-item">Пользователи не найдены</div>';
            } else {
                resultsContainer.innerHTML = users.map(user => `
                    <div class="search-result-item" onclick="selectContact('${user.id}')">
                        <img src="/uploads/avatars/${user.avatar}" alt="${user.username}" 
                             style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px;">
                        <div>
                            <div>${user.username}</div>
                            <small style="color: #718096;">${user.is_online ? '🟢 Онлайн' : '⚫ Офлайн'}</small>
                        </div>
                    </div>
                `).join('');
            }
            
            resultsContainer.style.display = 'block';
        })
        .catch(error => {
            console.error('Ошибка поиска:', error);
        });
});

// Отправка по Enter, новая строка по Shift+Enter
document.getElementById('messageInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

// Обновление сообщений
function refreshMessages() {
    const activeContact = document.querySelector('.contact-item.active');
    if (activeContact) {
        loadMessages(activeContact.dataset.contactId);
    }
}

// Автообновление сообщений каждые 5 секунд
setInterval(() => {
    const activeContact = document.querySelector('.contact-item.active');
    if (activeContact) {
        loadMessages(activeContact.dataset.contactId);
    }
}, 5000);
</script>
{% endblock %}