@extends('appshell::layouts.private')

@section('title', 'Live Agent Chat')

@section('content')
<div class="row h-full">
    <!-- Left Sidebar: Chat List -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <span class="badge badge-info">{{ $activeChatCount }}</span>
                    Active Chats
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>

            <div class="card-body p-0">
                <!-- Availability Toggle -->
                <div class="p-3 border-bottom">
                    <button
                        type="button"
                        id="availabilityToggle"
                        class="btn btn-block {{ $isAvailable ? 'btn-success' : 'btn-danger' }}"
                    >
                        <i class="fas {{ $isAvailable ? 'fa-check-circle' : 'fa-ban' }}"></i>
                        {{ $isAvailable ? 'I am Available' : 'I am Busy' }}
                    </button>
                </div>

                <!-- Chat List -->
                <div id="chatList" style="max-height: 600px; overflow-y: auto;">
                    @forelse($chats as $chat)
                        <div
                            class="chat-item p-3 border-bottom cursor-pointer hover:bg-gray-50 transition"
                            data-chat-id="{{ $chat->id }}"
                        >
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <h6 class="mb-1 font-weight-bold">
                                        {{ $chat->customer_name }}
                                        <span class="badge badge-{{ $chat->status === 'active' ? 'success' : ($chat->status === 'waiting' ? 'warning' : 'secondary') }}">
                                            {{ ucfirst($chat->status) }}
                                        </span>
                                    </h6>
                                    <small class="text-muted">{{ $chat->customer_email }}</small>
                                    <p class="mb-0 text-truncate text-sm mt-1">
                                        {{ $chat->messages->last()?->content ?? 'No messages yet' }}
                                    </p>
                                </div>
                                <small class="text-muted ml-2">
                                    {{ $chat->started_at->diffForHumans() }}
                                </small>
                            </div>
                        </div>
                    @empty
                        <div class="p-3 text-center text-muted">
                            No chats yet. You'll see incoming chats here.
                        </div>
                    @endforelse
                </div>

                <!-- Pagination -->
                @if($chats->hasPages())
                    <div class="p-2">
                        {{ $chats->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Right Panel: Chat Detail -->
    <div class="col-md-8">
        <div id="chatDetail" style="display: none;">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <span id="chatCustomerName"></span>
                        <small class="text-muted" id="chatCustomerEmail"></small>
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>

                <div class="card-body" id="messageContainer" style="height: 400px; overflow-y: auto; background: #f5f5f5;">
                    <!-- Messages will be loaded here -->
                </div>

                <div class="card-footer">
                    <div class="input-group mb-2">
                        <input
                            type="text"
                            id="messageInput"
                            class="form-control"
                            placeholder="Type your message..."
                        >
                        <div class="input-group-append">
                            <button
                                type="button"
                                id="sendButton"
                                class="btn btn-primary"
                            >
                                <i class="fas fa-paper-plane"></i> Send
                            </button>
                            <button
                                type="button"
                                id="closeButton"
                                class="btn btn-danger"
                            >
                                <i class="fas fa-times"></i> Close
                            </button>
                        </div>
                    </div>
                    <div class="btn-group w-100" role="group">
                        <button
                            type="button"
                            id="escalateButton"
                            class="btn btn-warning btn-sm"
                            title="Convert to support ticket"
                        >
                            <i class="fas fa-arrow-up"></i> Escalate
                        </button>
                        <button
                            type="button"
                            id="deleteButton"
                            class="btn btn-outline-danger btn-sm"
                            title="Delete this chat"
                        >
                            <i class="fas fa-trash"></i> Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="noChatSelected" class="card">
            <div class="card-body text-center text-muted py-5">
                <i class="fas fa-comments fa-3x mb-3 text-gray-300"></i>
                <p>Select a chat to start responding</p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .chat-item {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .chat-item:hover {
        background-color: #f5f5f5;
    }
    .chat-item.active {
        background-color: #e3f2fd;
        border-left: 4px solid #2196F3;
    }

    .message {
        margin-bottom: 10px;
        display: flex;
        animation: fadeIn 0.3s ease-in;
    }
    .message.customer {
        justify-content: flex-end;
    }
    .message.agent {
        justify-content: flex-start;
    }

    .message-bubble {
        max-width: 70%;
        padding: 10px 15px;
        border-radius: 8px;
        word-wrap: break-word;
    }
    .message.customer .message-bubble {
        background-color: #2196F3;
        color: white;
    }
    .message.agent .message-bubble {
        background-color: #e0e0e0;
        color: #333;
    }

    .message-time {
        font-size: 0.75rem;
        color: #999;
        margin-top: 3px;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endpush

@push('scripts')
<script>
let currentChatId = null;
let lastMessageId = 0;
let pollingInterval = null;

// Chat Item Click Handler
document.querySelectorAll('.chat-item').forEach(item => {
    item.addEventListener('click', function() {
        const chatId = this.dataset.chatId;
        selectChat(chatId);
    });
});

// Select a chat
function selectChat(chatId) {
    currentChatId = chatId;
    lastMessageId = 0;

    // Update UI
    document.querySelectorAll('.chat-item').forEach(item => {
        item.classList.remove('active');
    });
    document.querySelector(`[data-chat-id="${chatId}"]`).classList.add('active');

    document.getElementById('noChatSelected').style.display = 'none';
    document.getElementById('chatDetail').style.display = 'block';

    // Clear previous messages
    document.getElementById('messageContainer').innerHTML = '';

    // Fetch chat details
    fetchChatDetails(chatId);

    // Start polling
    clearInterval(pollingInterval);
    pollingInterval = setInterval(() => pollMessages(chatId), 2000);
}

// Fetch chat details
async function fetchChatDetails(chatId) {
    try {
        const response = await fetch(`/api/agent/chats/${chatId}`, {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            }
        });

        if (!response.ok) {
            console.error('Fetch error: HTTP ' + response.status);
            alert('Failed to load chat. Please try again.');
            return;
        }

        const data = await response.json();

        document.getElementById('chatCustomerName').textContent = data.customer_name;
        document.getElementById('chatCustomerEmail').textContent = `<${data.customer_email}>`;

        if (data.messages && data.messages.length > 0) {
            displayMessages(data.messages);
        }
    } catch (error) {
        console.error('Error fetching chat details:', error);
        alert('Failed to load chat. Please check the browser console.');
    }
}

// Poll for new messages
async function pollMessages(chatId) {
    try {
        const response = await fetch(`/api/agent/chats/${chatId}?last_message_id=${lastMessageId}`, {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            }
        });

        if (!response.ok) {
            console.error('Polling error: HTTP ' + response.status);
            return;
        }

        const data = await response.json();

        if (data.messages && data.messages.length > 0) {
            displayMessages(data.messages);
        }
    } catch (error) {
        console.error('Error polling messages:', error);
    }
}

// Display messages
function displayMessages(messages) {
    const container = document.getElementById('messageContainer');

    messages.forEach(msg => {
        if (msg.id > lastMessageId) {
            lastMessageId = msg.id;

            const messageEl = document.createElement('div');
            messageEl.id = `message-${msg.id}`;
            messageEl.className = `message ${msg.sender_type}`;

            messageEl.innerHTML = `
                <div>
                    <div class="message-bubble">${escapeHtml(msg.content)}</div>
                    <div class="message-time text-right">${new Date(msg.created_at).toLocaleTimeString()}</div>
                </div>
            `;

            container.appendChild(messageEl);
            container.scrollTop = container.scrollHeight;
        }
    });
}

// Send message
document.getElementById('sendButton').addEventListener('click', async () => {
    const content = document.getElementById('messageInput').value;

    if (!content.trim()) return;

    try {
        const response = await fetch(`/api/agent/chats/${currentChatId}/message`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ content })
        });

        if (response.ok) {
            document.getElementById('messageInput').value = '';
            pollMessages(currentChatId);
        }
    } catch (error) {
        console.error('Error sending message:', error);
        alert('Failed to send message');
    }
});

// Close chat
document.getElementById('closeButton').addEventListener('click', async () => {
    if (!confirm('Are you sure you want to close this chat?')) return;

    try {
        const response = await fetch(`/api/agent/chats/${currentChatId}/close`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            }
        });

        if (response.ok) {
            clearInterval(pollingInterval);
            currentChatId = null;
            document.getElementById('chatDetail').style.display = 'none';
            document.getElementById('noChatSelected').style.display = 'block';
            location.reload();
        }
    } catch (error) {
        console.error('Error closing chat:', error);
    }
});

// Escalate to ticket
document.getElementById('escalateButton').addEventListener('click', async () => {
    if (!confirm('Create a support ticket from this chat?')) return;

    try {
        const response = await fetch(`/api/agent/chats/${currentChatId}/escalate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            }
        });

        if (response.ok) {
            clearInterval(pollingInterval);
            currentChatId = null;
            document.getElementById('chatDetail').style.display = 'none';
            document.getElementById('noChatSelected').style.display = 'block';
            location.reload();
        } else {
            alert('Failed to escalate chat');
        }
    } catch (error) {
        console.error('Error escalating chat:', error);
    }
});

// Delete chat
document.getElementById('deleteButton').addEventListener('click', async () => {
    if (!confirm('Delete this chat permanently?')) return;

    try {
        const response = await fetch(`/api/agent/chats/${currentChatId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            }
        });

        if (response.ok) {
            clearInterval(pollingInterval);
            currentChatId = null;
            document.getElementById('chatDetail').style.display = 'none';
            document.getElementById('noChatSelected').style.display = 'block';
            location.reload();
        } else {
            alert('Failed to delete chat');
        }
    } catch (error) {
        console.error('Error deleting chat:', error);
    }
});

// Availability toggle
document.getElementById('availabilityToggle').addEventListener('click', async () => {
    try {
        const response = await fetch('/api/agent/availability', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ is_available: !document.getElementById('availabilityToggle').classList.contains('btn-success') })
        });

        if (response.ok) {
            location.reload();
        }
    } catch (error) {
        console.error('Error updating availability:', error);
    }
});

// Chat list polling — detects new incoming chats and injects them without a page refresh
const isAvailable = {{ $isAvailable ? 'true' : 'false' }};
const knownChatIds = new Set(
    Array.from(document.querySelectorAll('.chat-item')).map(el => parseInt(el.dataset.chatId))
);

function statusBadgeClass(status) {
    if (status === 'active') return 'badge-success';
    if (status === 'waiting') return 'badge-warning';
    return 'badge-secondary';
}

function timeAgo(dateStr) {
    const seconds = Math.floor((new Date() - new Date(dateStr)) / 1000);
    if (seconds < 60) return 'just now';
    if (seconds < 3600) return Math.floor(seconds / 60) + 'm ago';
    if (seconds < 86400) return Math.floor(seconds / 3600) + 'h ago';
    return Math.floor(seconds / 86400) + 'd ago';
}

function injectChatItem(chat) {
    const chatList = document.getElementById('chatList');
    const emptyMsg = chatList.querySelector('.text-center.text-muted');
    if (emptyMsg) emptyMsg.remove();

    const div = document.createElement('div');
    div.className = 'chat-item p-3 border-bottom cursor-pointer hover:bg-gray-50 transition';
    div.dataset.chatId = chat.id;
    div.innerHTML = `
        <div class="d-flex justify-content-between align-items-start">
            <div class="flex-grow-1">
                <h6 class="mb-1 font-weight-bold">
                    ${escapeHtml(chat.customer_name)}
                    <span class="badge ${statusBadgeClass(chat.status)}">${chat.status.charAt(0).toUpperCase() + chat.status.slice(1)}</span>
                </h6>
                <small class="text-muted">${escapeHtml(chat.customer_email)}</small>
                <p class="mb-0 text-truncate text-sm mt-1">New chat started</p>
            </div>
            <small class="text-muted ml-2">${timeAgo(chat.started_at)}</small>
        </div>
    `;
    div.addEventListener('click', function () {
        selectChat(chat.id);
    });

    chatList.insertBefore(div, chatList.firstChild);
    knownChatIds.add(chat.id);

    // Update active chat badge count
    const badge = document.querySelector('.badge.badge-info');
    if (badge) badge.textContent = parseInt(badge.textContent || 0) + 1;
}

async function pollChatList() {
    try {
        const response = await fetch('/api/agent/chats?status=waiting', {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            }
        });

        if (!response.ok) return;

        const data = await response.json();
        const chats = data.data ?? [];

        chats.forEach(chat => {
            if (!knownChatIds.has(chat.id)) {
                injectChatItem(chat);
            }
        });
    } catch (err) {
        console.error('Chat list poll error:', err);
    }
}

if (isAvailable) {
    setInterval(pollChatList, 5000);
}

// Allow sending message with Enter key
document.getElementById('messageInput').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        document.getElementById('sendButton').click();
    }
});

// Utility function to escape HTML
function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}
</script>
@endpush