@extends('admin.layout.master')

@section('custom_css')
    @vite(['resources/css/app.css', 'resources/js/app.js'])
@endsection

@section('content')
<div class="container-fluid h-100">
    <div class="row h-100">
        <!-- Conversations List Sidebar -->
        <div class="col-md-4 col-lg-3 border-end p-0 h-100" style="max-height: calc(100vh - 100px); overflow-y: auto;">
            <div class="p-3 border-bottom bg-light">
                <h5 class="mb-3">Messages</h5>
                <button class="btn btn-primary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#newChatModal">
                    <i class="bi bi-plus-circle"></i> New Chat
                </button>
            </div>
            
            <div id="conversationsList" class="list-group list-group-flush">
                <!-- Conversations will be loaded here -->
            </div>
        </div>

        <!-- Chat Area -->
        <div class="col-md-8 col-lg-9 p-0 d-flex flex-column h-100" style="max-height: calc(100vh - 100px);">
            <div id="noChatSelected" class="d-flex align-items-center justify-content-center h-100">
                <div class="text-center text-muted">
                    <i class="bi bi-chat-dots" style="font-size: 4rem;"></i>
                    <p class="mt-3">Select a conversation to start messaging</p>
                </div>
            </div>

            <div id="chatArea" class="d-none flex-column h-100">
                <!-- Chat Header -->
                <div class="p-3 border-bottom bg-light">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="mb-0" id="chatHeaderName"></h6>
                            <small class="text-muted" id="chatHeaderTyping"></small>
                        </div>
                    </div>
                </div>

                <!-- Messages Area -->
                <div id="messagesArea" class="flex-grow-1 p-3" style="overflow-y: auto; background-color: #f8f9fa;">
                    <!-- Messages will be loaded here -->
                </div>

                <!-- Message Input -->
                <div class="p-3 border-top bg-white">
                    <form id="messageForm" class="d-flex gap-2">
                        <input type="text" id="messageInput" class="form-control" placeholder="Type a message..." autocomplete="off">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send"></i> Send
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Chat Modal -->
<div class="modal fade" id="newChatModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Start New Chat</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Select User</label>
                <select id="selectUser" class="form-select">
                    <option value="">Choose a user...</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="startChatBtn">Start Chat</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom_style')
<style>
    .conversation-item {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .conversation-item:hover {
        background-color: #f8f9fa;
    }
    .conversation-item.active {
        background-color: #e7f3ff;
    }
    .message-bubble {
        max-width: 70%;
        padding: 0.75rem;
        border-radius: 1rem;
        margin-bottom: 0.5rem;
        word-wrap: break-word;
    }
    .message-own {
        background-color: #0d6efd;
        color: white;
        margin-left: auto;
        border-bottom-right-radius: 0.25rem;
    }
    .message-other {
        background-color: #e9ecef;
        color: #212529;
        margin-right: auto;
        border-bottom-left-radius: 0.25rem;
    }
    .unread-badge {
        background-color: #0d6efd;
        color: white;
        border-radius: 50%;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: bold;
    }
    .typing-indicator {
        display: inline-block;
    }
    .typing-indicator span {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #6c757d;
        margin: 0 2px;
        animation: typing 1.4s infinite;
    }
    .typing-indicator span:nth-child(2) {
        animation-delay: 0.2s;
    }
    .typing-indicator span:nth-child(3) {
        animation-delay: 0.4s;
    }
    @keyframes typing {
        0%, 60%, 100% {
            transform: translateY(0);
        }
        30% {
            transform: translateY(-10px);
        }
    }
</style>
@endsection

@section('script')
<script>
$(document).ready(function() {
    let currentConversationId = null;
    let currentUserId = {{ $currentUser->id }};
    let typingTimeout = null;
    let isTyping = false;
    let activeChannel = null;
    
    // Load conversations on page load
    loadConversations();
    
    // Load conversations
    function loadConversations() {
        $.ajax({
            url: '{{ route("admin.chat.conversations") }}',
            method: 'GET',
            success: function(response) {
                renderConversations(response.conversations);
            },
            error: function(xhr) {
                console.error('Error loading conversations:', xhr);
            }
        });
    }
    
    // Render conversations list
    function renderConversations(conversations) {
        const $list = $('#conversationsList');
        $list.empty();
        
        if (conversations.length === 0) {
            $list.append('<div class="p-3 text-center text-muted">No conversations yet</div>');
            return;
        }
        
        conversations.forEach(function(conv) {
            const users = conv.users;
            const displayName = conv.type === 'private' && users.length > 0 
                ? users[0].name 
                : users.map(u => u.name).join(', ');
            
            const lastMsg = conv.last_message 
                ? `<small class="text-muted">${escapeHtml(conv.last_message.message.substring(0, 30))}${conv.last_message.message.length > 30 ? '...' : ''}</small>`
                : '<small class="text-muted">No messages yet</small>';
            
            const unreadBadge = conv.unread_count > 0 
                ? `<span class="unread-badge">${conv.unread_count}</span>` 
                : '';
            
            const item = `
                <a href="#" class="list-group-item list-group-item-action conversation-item" data-conversation-id="${conv.id}">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="mb-1">${escapeHtml(displayName)}</h6>
                            ${lastMsg}
                        </div>
                        ${unreadBadge}
                    </div>
                </a>
            `;
            $list.append(item);
        });
    }
    
    // Handle conversation click
    $(document).on('click', '.conversation-item', function(e) {
        e.preventDefault();
        const conversationId = $(this).data('conversation-id');
        openConversation(conversationId);
    });
    
    // Open conversation
    function openConversation(conversationId) {
        // Unsubscribe from previous channel
        if (activeChannel) {
            window.Echo.leave(activeChannel);
        }
        
        currentConversationId = conversationId;
        
        // Update UI
        $('.conversation-item').removeClass('active');
        $(`.conversation-item[data-conversation-id="${conversationId}"]`).addClass('active');
        
        $('#noChatSelected').addClass('d-none');
        $('#chatArea').removeClass('d-none').addClass('d-flex');
        
        // Load messages
        loadMessages(conversationId);
        
        // Mark as read
        markAsRead(conversationId);
        
        // Subscribe to conversation channel
        subscribeToConversation(conversationId);
    }
    
    // Load messages
    function loadMessages(conversationId) {
        $.ajax({
            url: `/admin/chat/conversations/${conversationId}/messages`,
            method: 'GET',
            success: function(response) {
                renderMessages(response.messages);
                updateChatHeader(conversationId);
            },
            error: function(xhr) {
                console.error('Error loading messages:', xhr);
            }
        });
    }
    
    // Render messages
    function renderMessages(messages) {
        const $area = $('#messagesArea');
        $area.empty();
        
        if (messages.length === 0) {
            $area.append('<div class="text-center text-muted">No messages yet. Start the conversation!</div>');
            return;
        }
        
        messages.forEach(function(msg) {
            appendMessage(msg);
        });
        
        scrollToBottom();
    }
    
    // Append single message
    function appendMessage(msg) {
        const bubbleClass = msg.is_own ? 'message-own' : 'message-other';
        const alignClass = msg.is_own ? 'text-end' : 'text-start';
        const senderName = msg.is_own ? '' : `<small class="text-muted d-block mb-1">${escapeHtml(msg.sender_name)}</small>`;
        
        const messageHtml = `
            <div class="${alignClass}">
                ${senderName}
                <div class="message-bubble ${bubbleClass}">
                    ${escapeHtml(msg.message)}
                </div>
            </div>
        `;
        
        $('#messagesArea').append(messageHtml);
    }
    
    // Update chat header
    function updateChatHeader(conversationId) {
        const $conv = $(`.conversation-item[data-conversation-id="${conversationId}"]`);
        const name = $conv.find('h6').text();
        $('#chatHeaderName').text(name);
        $('#chatHeaderTyping').text('');
    }
    
    // Send message
    $('#messageForm').on('submit', function(e) {
        e.preventDefault();
        
        const message = $('#messageInput').val().trim();
        if (!message || !currentConversationId) return;
        
        $.ajax({
            url: `/admin/chat/conversations/${currentConversationId}/messages`,
            method: 'POST',
            data: {
                message: message,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                $('#messageInput').val('');
                appendMessage({
                    id: response.message.id,
                    sender_id: currentUserId,
                    sender_name: '{{ $currentUser->name }}',
                    message: response.message.message,
                    is_own: true,
                    created_at: response.message.created_at
                });
                scrollToBottom();
                loadConversations(); // Refresh conversation list
                
                // Stop typing indicator
                sendTypingIndicator(false);
            },
            error: function(xhr) {
                alert('Error sending message');
                console.error(xhr);
            }
        });
    });
    
    // Typing indicator
    $('#messageInput').on('input', function() {
        if (!currentConversationId) return;
        
        if (!isTyping) {
            isTyping = true;
            sendTypingIndicator(true);
        }
        
        clearTimeout(typingTimeout);
        typingTimeout = setTimeout(function() {
            isTyping = false;
            sendTypingIndicator(false);
        }, 1000);
    });
    
    function sendTypingIndicator(typing) {
        return false;

        if (!currentConversationId) return;
        
        $.ajax({
            url: `/admin/chat/conversations/${currentConversationId}/typing`,
            method: 'POST',
            data: {
                is_typing: typing,
                _token: '{{ csrf_token() }}'
            }
        });
    }
    
    // Mark as read
    function markAsRead(conversationId) {
        $.ajax({
            url: `/admin/chat/conversations/${conversationId}/read`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function() {
                loadConversations(); // Refresh to update unread counts
            }
        });
    }
    
    // Subscribe to conversation
    function subscribeToConversation(conversationId) {
        const channelName = `conversation.${conversationId}`;
        activeChannel = channelName;
        
        window.Echo.private(channelName)
            .listen('.message.sent', function(e) {
                if (e.sender_id !== currentUserId) {
                    appendMessage({
                        id: e.id,
                        sender_id: e.sender_id,
                        sender_name: e.sender_name,
                        message: e.message,
                        is_own: false,
                        created_at: e.created_at
                    });
                    scrollToBottom();
                    markAsRead(conversationId);
                }
                loadConversations(); // Refresh conversation list
            })
            .listen('.user.typing', function(e) {
                if (e.user_id !== currentUserId) {
                    if (e.is_typing) {
                        $('#chatHeaderTyping').html(`<span class="typing-indicator">${escapeHtml(e.user_name)} is typing<span>.</span><span>.</span><span>.</span></span>`);
                    } else {
                        $('#chatHeaderTyping').text('');
                    }
                }
            })
            .listen('.message.read', function(e) {
                // Handle read receipts if needed
                console.log('Message read:', e);
            });
    }
    
    // Start new chat
    $('#startChatBtn').on('click', function() {
        const userId = $('#selectUser').val();
        if (!userId) {
            alert('Please select a user');
            return;
        }
        
        $.ajax({
            url: '{{ route("admin.chat.conversations_private") }}',
            method: 'POST',
            data: {
                user_id: userId,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                $('#newChatModal').modal('hide');
                $('#selectUser').val('');
                loadConversations();
                openConversation(response.conversation.id);
            },
            error: function(xhr) {
                alert('Error creating conversation');
                console.error(xhr);
            }
        });
    });
    
    // Utility functions
    function scrollToBottom() {
        const $area = $('#messagesArea');
        $area.scrollTop($area[0].scrollHeight);
    }
    
    function escapeHtml(text) {
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }
});
</script>
@endsection