{% extends "base.html" %}
{% load humanize %}
{% block title %}
    {{ room.name }}
{% endblock title %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="max-w-4xl mx-auto py-8 px-4">
        <!-- Breadcrumbs -->
        {% include "includes/breadcrumbs.html" %}
        <div class="flex items-center justify-between mt-4">
            <h1 class="text-3xl font-bold text-gray-900">{{ room.name }}</h1>
            <div class="flex items-center gap-2">
                <div id="connection-status" class="w-3 h-3 rounded-full bg-gray-400"></div>
                <span id="connection-text" class="text-sm text-gray-600">Connecting...</span>
            </div>
        </div>
        <div id="log-history"
             class="mt-4 p-3 bg-gray-100 rounded-lg h-96 overflow-y-auto scroll-smooth">
            <div id="messages-container" class="space-y-1.5">
                {% for message in room_messages reversed %}
                    <div class="py-1 px-2 bg-white rounded-lg shadow-sm relative group message-item"
                         data-message-id="{{ message.id }}">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <p class="text-sm font-medium">{{ message.username }}</p>
                                <p class="text-sm text-gray-700">{{ message.content }}</p>
                                <span class="text-xs text-gray-500">{{ message.timestamp|naturaltime }}</span>
                            </div>
                            {% if request.user.is_authenticated and message.user == request.user %}
                                <button class="delete-message-btn opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 hover:text-red-700">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-4 w-4"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <form id="chat-form" class="mt-4 flex gap-2">
            <input type="text"
                   id="message-input"
                   class="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500"
                   placeholder="Type your message..."
                   required>
            <button type="submit"
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                Send
            </button>
        </form>
    </div>
{% endblock content %}
{% block extra_js %}
    <script>
// WebSocket connection management
let chatSocket = null;
let isConnecting = false;
let reconnectAttempts = 0;
const maxReconnectAttempts = 5;
const reconnectDelay = 2000; // 2 seconds

const connectionStatus = document.getElementById('connection-status');
const connectionText = document.getElementById('connection-text');
const messageInput = document.getElementById('message-input');
const chatForm = document.getElementById('chat-form');
const messagesContainer = document.getElementById('messages-container');
const logHistory = document.getElementById('log-history');

function updateConnectionStatus(connected) {
    if (connected) {
        connectionStatus.className = 'w-3 h-3 rounded-full bg-green-500';
        connectionText.textContent = 'Connected';
        connectionText.className = 'text-sm text-green-600';
        messageInput.disabled = false;
    } else {
        connectionStatus.className = 'w-3 h-3 rounded-full bg-red-500';
        connectionText.textContent = 'Disconnected';
        connectionText.className = 'text-sm text-red-600';
        messageInput.disabled = true;
    }
}

function connectWebSocket() {
    if (chatSocket && (chatSocket.readyState === WebSocket.OPEN || chatSocket.readyState === WebSocket.CONNECTING)) {
        return;
    }

    if (isConnecting) {
        return;
    }

    isConnecting = true;
    updateConnectionStatus(false);
    
    try {
        const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
        chatSocket = new WebSocket(protocol + window.location.host + '/ws/discussion-rooms/chat/{{ room.id }}/');
        
        chatSocket.onopen = function() {
            isConnecting = false;
            reconnectAttempts = 0;
            updateConnectionStatus(true);
        };

        chatSocket.onclose = function(e) {
            isConnecting = false;
            updateConnectionStatus(false);
            
            if (reconnectAttempts < maxReconnectAttempts) {
                reconnectAttempts++;
                setTimeout(connectWebSocket, reconnectDelay);
            }
        };

        chatSocket.onerror = function(error) {
            isConnecting = false;
            updateConnectionStatus(false);
        };

        chatSocket.onmessage = handleWebSocketMessage;
    } catch (error) {
        isConnecting = false;
        updateConnectionStatus(false);
    }
}

function handleWebSocketMessage(event) {
    try {
        const data = JSON.parse(event.data);
        
        switch (data.type) {
            case 'chat_message':
                appendMessage(data);
                break;
            case 'delete_message':
                handleDeleteMessage(data);
                break;
            case 'connection_status':
                updateConnectionStatus(data.status === 'connected');
                break;
            case 'error':
                break;
        }
    } catch (error) {
        // Error handling
    }
}

function appendMessage(data) {
    if (!messagesContainer) return;

    const messageDiv = document.createElement('div');
    messageDiv.className = 'py-1 px-2 bg-white rounded-lg shadow-sm relative group message-item';
    messageDiv.dataset.messageId = data.message_id;
    
    const isCurrentUser = data.username === '{{ request.user.username }}';
    
    messageDiv.innerHTML = `
        <div class="flex items-start justify-between">
            <div class="flex-1">
                <p class="text-sm font-medium">${escapeHtml(data.username)}</p>
                <p class="text-sm text-gray-700">${escapeHtml(data.message)}</p>
                <span class="text-xs text-gray-500">just now</span>
            </div>
            ${isCurrentUser ? `
                <button class="delete-message-btn opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 hover:text-red-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                </button>
            ` : ''}
        </div>
    `;
    
    messagesContainer.appendChild(messageDiv);
    
    // Scroll to the new message
    logHistory.scrollTop = logHistory.scrollHeight;
    
    // Add delete event listener if it's the current user's message
    if (isCurrentUser) {
        const deleteBtn = messageDiv.querySelector('.delete-message-btn');
        if (deleteBtn) {
            deleteBtn.addEventListener('click', () => deleteMessage(data.message_id));
        }
    }
}

function handleDeleteMessage(data) {
    const messageElement = document.querySelector(`[data-message-id="${data.message_id}"]`);
    if (messageElement) {
        messageElement.remove();
    }
}

function deleteMessage(messageId) {
    if (!chatSocket || chatSocket.readyState !== WebSocket.OPEN) {
        return;
    }

    chatSocket.send(JSON.stringify({
        'type': 'delete_message',
        'message_id': messageId,
        'room_id': '{{ room.id }}'
    }));
}

function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g , "&lt;") .replace( />/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

// Initialize WebSocket connection
document.addEventListener('DOMContentLoaded', function() {
    connectWebSocket();
    
    // Set up form handler
    if (chatForm) {
        chatForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (!messageInput) return;
            
            const message = messageInput.value.trim();
            if (!message) return;
            
            // Check WebSocket connection
            if (!chatSocket || chatSocket.readyState !== WebSocket.OPEN) {
                connectWebSocket();
                return;
            }
            
            try {
                chatSocket.send(JSON.stringify({
                    'type': 'chat_message',
                    'message': message,
                    'room_id': '{{ room.id }}'
                }));
                messageInput.value = '';
            } catch (error) {
                // Error handling
            }
        });
    }
    
    // Set up delete message handlers
    document.querySelectorAll('.delete-message-btn').forEach(btn => {
        const messageItem = btn.closest('[data-message-id]');
        if (messageItem) {
            btn.addEventListener('click', () => deleteMessage(messageItem.dataset.messageId));
        }
    });
});

// Clean up WebSocket connection when leaving the page
window.addEventListener('beforeunload', function() {
    if (chatSocket && chatSocket.readyState === WebSocket.OPEN) {
        chatSocket.close();
    }
});
    </script>
{% endblock extra_js %}