@extends('layouts.app')

@section('title', 'Support - Tiqkets')

@section('page-title', 'Support')

@push('styles')
    <style>
        .support-container {
            display: flex;
            height: calc(90vh - 70px);
            background: #F7F7F7;
            border-radius: 12px;
            /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
            gap: 20px;
        }

        .chat-container {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .conversations-sidebar {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .conversations-sidebar {
            width: 380px;
            border-right: 1px solid #e5e7eb;
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 8px;
        }

        .sidebar-header {
            padding: 16px 24px;
            border-bottom: 1px solid #e5e7eb;
        }

        .sidebar-title {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }

        .sidebar-subtitle {
            font-size: 13px;
            color: #6b7280;
            margin-top: 4px;
        }

        .tabs {
            display: flex;
            width: 100%;
            gap: 10px;
        }

        .tab-button {
            flex: 1;
            /* makes both buttons equal width */
            padding: 10px 0;
            background: #f3f4f6;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            font-weight: 500;
            text-align: center;
            transition: 0.2s;
        }

        .tab-button.active {
            background: #7c2d5e;
            color: white;
        }


        .conversations-list {
            flex: 1;
            overflow-y: auto;
        }

        .section-divider {
            padding: 12px 24px;
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            /* text-transform: uppercase; */
            letter-spacing: 0.5px;
        }


        .conversation-item {
            display: flex;
            align-items: center;
            padding: 16px 24px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #f3f4f6;
        }

        .conversation-item:hover {
            background: #f9fafb;
        }

        .conversation-item.active {
            background: #faf5f9;
            border-left: 3px solid #7c2d5e;
        }

        .conversation-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            flex-shrink: 0;
            object-fit: cover;
        }

        .conversation-details {
            flex: 1;
            margin-left: 14px;
            min-width: 0;
        }

        .conversation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }

        .conversation-name {
            font-weight: 600;
            color: #111827;
            font-size: 15px;
        }

        .conversation-time {
            font-size: 12px;
            color: #9ca3af;
            flex-shrink: 0;
            margin-left: 8px;
        }

        .conversation-preview {
            font-size: 14px;
            color: #6b7280;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .support-badge {
            display: inline-block;
            background: #7c2d5e;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }

        .sidebar-footer {
            padding: 16px 24px;
        }

        .btn-back {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6b7280;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: color 0.2s;
            padding: 18px;

        }

        .btn-back:hover {
            color: #7c2d5e;
        }

        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #f9fafb;
            border-left: 1px solid #e5e7eb;
        }

        .chat-header {
            padding: 20px 30px;
            background: white;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            border-radius: 8px;
        }

        .chat-user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
        }

        .chat-user-info {
            flex: 1;
        }

        .chat-user-name {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
        }

        .chat-user-role {
            font-size: 12px;
            color: #6b7280;
            margin-top: 2px;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 30px;
        }

        .message {
            margin-bottom: 24px;
            display: flex;
            flex-direction: column;
        }

        .message.sent {
            align-items: flex-end;
        }

        .message.received {
            align-items: flex-start;
        }

        .message-bubble {
            max-width: 70%;
            padding: 14px 18px;
            border-radius: 12px;
            position: relative;
            word-wrap: break-word;
        }

        .message.sent .message-bubble {
            background: #7c2d5e;
            color: white;
            border-bottom-right-radius: 4px;
        }

        .message.received .message-bubble {
            background: white;
            border: 1px solid #e5e7eb;
            color: #374151;
            border-bottom-left-radius: 4px;
        }

        .message-time {
            font-size: 12px;
            color: #9ca3af;
            margin-top: 6px;
            padding: 0 4px;
        }

        .chat-input-container {
            padding: 20px 30px;
            background: white;
            border-top: 1px solid #e5e7eb;
            border-radius: 8px;
        }

        .chat-input-wrapper {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .chat-input {
            flex: 1;
            padding: 14px 18px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
            resize: none;
            font-family: inherit;
        }

        .chat-input:focus {
            outline: none;
            border-color: #7c2d5e;
        }

        .chat-input::placeholder {
            color: #9ca3af;
        }

        .btn-send {
            padding: 14px 28px;
            background: #7c2d5e;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
            flex-shrink: 0;
        }

        .btn-send:hover {
            background: #651f4a;
        }

        .empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #9ca3af;
            font-size: 16px;
            text-align: center;
            padding: 20px;
        }

        .conversations-list::-webkit-scrollbar,
        .chat-messages::-webkit-scrollbar {
            width: 6px;
        }

        .conversations-list::-webkit-scrollbar-track,
        .chat-messages::-webkit-scrollbar-track {
            background: #f3f4f6;
        }

        .conversations-list::-webkit-scrollbar-thumb,
        .chat-messages::-webkit-scrollbar-thumb {
            background: #d1d5db;
            border-radius: 3px;
        }

        .conversations-list::-webkit-scrollbar-thumb:hover,
        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

        @media (max-width: 768px) {
            .support-container {
                height: calc(90vh - 70px);
                flex-direction: column;
            }

            .conversations-sidebar {
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                z-index: 10;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .conversations-sidebar.show {
                transform: translateX(0);
            }

            .chat-container {
                width: 100%;
            }

            .message-bubble {
                max-width: 85%;
            }

            .chat-messages {
                padding: 20px 15px;
            }

            .chat-input-container {
                padding: 15px;
            }
        }

        @media (max-width: 768px) {
            .conversations-sidebar {
                display: none !important;
            }

            .conversations-sidebar.show {
                display: block !important;
                transform: translateX(0) !important;
            }
        }
    </style>
@endpush

@section('content')
    <div class="support-container">
        <!-- Conversations Sidebar -->
        <div class="conversations-sidebar rounded">
            <div class="sidebar-header">
                <div class="tabs">
                    <button class="tab-button active" data-tab="support">
                        Support Chat
                    </button>
                    <button class="tab-button" data-tab="conversations">
                        Conversations
                    </button>
                </div>
            </div>

            <div class="conversations-list" id="conversationsList">
                @if (Auth::user()->role != 1)
                    {{-- Regular User View --}}
                    {{-- Support Admins --}}
                    @if ($sidebarusers->isNotEmpty())
                        <div class="section-divider support-section1">
                            Available Support Admins
                        </div>
                        @foreach ($sidebarusers as $admin)
                            <div class="conversation-item support-item" data-conversation-id=""
                                data-user-id="{{ $admin->id }}" data-user-name="{{ $admin->name }}"
                                data-user-role="Support Admin">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($admin->name) }}&background=7c2d5e&color=fff"
                                    alt="{{ $admin->name }}" class="conversation-avatar">
                                <div class="conversation-details">
                                    <div class="conversation-header">
                                        <span class="conversation-name">
                                            {{ $admin->name }}
                                        </span>
                                    </div>
                                    <div class="conversation-preview">Click to start conversation</div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    {{-- User Conversations --}}
                    @if ($conversations->isNotEmpty())
                        <div class="section-divider conv-section">
                            Your Conversations
                        </div>
                        @foreach ($conversations as $conversation)
                            @php
                                $otherUser = $conversation->supportAdmin;
                                $latestMsg = $conversation->latestMessage;
                            @endphp
                            <div class="conversation-item conv-item" data-conversation-id="{{ $conversation->id }}"
                                data-user-id="{{ $otherUser->id ?? '' }}"
                                data-user-name="{{ $otherUser->name ?? 'Support' }}" data-user-role="Support Admin">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($otherUser->name ?? 'Support') }}&background=7c2d5e&color=fff"
                                    alt="{{ $otherUser->name ?? 'Support' }}" class="conversation-avatar">
                                <div class="conversation-details">
                                    <div class="conversation-header">
                                        <span class="conversation-name">{{ $otherUser->name ?? 'Support' }}</span>
                                        <span class="conversation-time">
                                            @if ($latestMsg)
                                                {{ $latestMsg->created_at->format('d M, h:i A') }}
                                            @endif
                                        </span>
                                    </div>
                                    <div class="conversation-preview">
                                        {{ $latestMsg ? Str::limit($latestMsg->message, 40) : 'No messages yet' }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                @else
                    {{-- Support Admin View --}}
                    @if ($conversations->isEmpty())
                        <div class="empty-state">No user conversations yet</div>
                    @else
                        <div class="section-divider conv-section">User Conversations</div>
                        @foreach ($conversations as $conversation)
                            @php
                                $otherUser = $conversation->user;
                                $latestMsg = $conversation->latestMessage;
                            @endphp
                            <div class="conversation-item conv-item" data-conversation-id="{{ $conversation->id }}"
                                data-user-id="{{ $otherUser->id ?? '' }}"
                                data-user-name="{{ $otherUser->name ?? 'User' }}" data-user-role="User">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($otherUser->name ?? 'User') }}&background=random&color=fff"
                                    alt="{{ $otherUser->name ?? 'User' }}" class="conversation-avatar">
                                <div class="conversation-details">
                                    <div class="conversation-header">
                                        <span class="conversation-name">{{ $otherUser->name ?? 'User' }}</span>
                                        <span class="conversation-time">
                                            @if ($latestMsg)
                                                {{ $latestMsg->created_at->format('d M, h:i A') }}
                                            @endif
                                        </span>
                                    </div>
                                    <div class="conversation-preview">
                                        {{ $latestMsg ? Str::limit($latestMsg->message, 40) : 'No messages yet' }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                @endif
            </div>

            <div class="sidebar-footer">
                <a href="{{ url()->previous() }}" class="btn-back">
                    <i class="fas fa-arrow-left"></i>
                    Cancel & Go Back
                </a>
            </div>
        </div>

        <!-- Chat Area -->
        <div class="chat-container rounded">
            <div class="chat-header" id="chatHeader" style="display: none;">
                <img src="" alt="" class="chat-user-avatar" id="chatUserAvatar">
                <div class="chat-user-info">
                    <div class="chat-user-name" id="chatUserName"></div>
                    <div class="chat-user-role" id="chatUserRole"></div>
                </div>
            </div>

            <div class="chat-messages" id="chatMessages">
                <div class="empty-state">
                    @if (Auth::user()->role == 1)
                        Select a user conversation to start chatting
                    @else
                        Select a support admin from the list to start chatting
                    @endif
                </div>
            </div>

            <div class="chat-input-container" id="chatInputContainer" style="display: none;">
                <div class="chat-input-wrapper">
                    <input type="text" class="chat-input" placeholder="Enter a message" id="messageInput">
                    <input type="hidden" id="currentConversationId">
                    <input type="hidden" id="currentReceiverId">
                    <button class="btn-send" onclick="sendMessage()">Send</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentConversationId = null;
        let currentReceiverId = null;
        let messagePolling = null;
        let lastMessageCount = 0;

        const IS_SUPPORT = {{ Auth::user()->role == 1 ? 'true' : 'false' }};

        // Get CSRF token with fallback
        function getCsrfToken() {
            const metaTag = document.querySelector('meta[name="csrf-token"]');
            if (metaTag) {
                return metaTag.getAttribute('content');
            }

            if (typeof window.Laravel !== 'undefined' && window.Laravel.csrfToken) {
                return window.Laravel.csrfToken;
            }

            console.error(
                'CSRF token not found. Please add <meta name="csrf-token" content="{{ csrf_token() }}"> to your layout head section.'
            );
            return '';
        }

        // Tab helpers
        function showSupportTab() {
            // Show support admins
            document.querySelectorAll('.support-section1').forEach(e => e.style.display = 'block');
            document.querySelectorAll('.support-item').forEach(e => e.style.display = 'flex');

            // Hide conversations
            document.querySelectorAll('.conv-section, .conv-item').forEach(e => e.style.display = 'none');
        }

        function showConversationsTab() {
            // Hide support admins
            document.querySelectorAll('.support-section1, .support-item').forEach(e => e.style.display = 'none');

            // Show conversations
            document.querySelectorAll('.conv-section').forEach(e => e.style.display = 'block');
            document.querySelectorAll('.conv-item').forEach(e => e.style.display = 'flex');
        }

        function applyCurrentTabFilter() {
            const activeTab = document.querySelector('.tab-button.active');
            if (!activeTab) return;

            const tab = activeTab.dataset.tab;
            if (tab === 'support') {
                showSupportTab();
            } else {
                showConversationsTab();
            }
        }


        // Load conversation
        function loadConversation(conversationId, userId, userName, userRole) {
            currentConversationId = conversationId || null;
            currentReceiverId = userId;

            document.getElementById('chatHeader').style.display = 'flex';
            document.getElementById('chatInputContainer').style.display = 'block';
            document.getElementById('chatUserName').textContent = userName;
            document.getElementById('chatUserRole').textContent = userRole;
            document.getElementById('chatUserAvatar').src =
                `https://ui-avatars.com/api/?name=${encodeURIComponent(userName)}&background=7c2d5e&color=fff`;
            document.getElementById('currentConversationId').value = conversationId || '';
            document.getElementById('currentReceiverId').value = userId;

            if (messagePolling) {
                clearInterval(messagePolling);
            }

            if (conversationId) {
                fetchMessages(conversationId);

                messagePolling = setInterval(() => {
                    fetchMessages(conversationId);
                }, 3000);

                markAsRead(conversationId);
            } else {
                const chatMessages = document.getElementById('chatMessages');
                chatMessages.innerHTML = '<div class="empty-state">Start your conversation by sending a message</div>';
            }
        }

        // Fetch messages
        function fetchMessages(conversationId) {
            const csrfToken = getCsrfToken();

            fetch(`{{ url('') }}/chat-support/fetch-messages/${conversationId}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken
                    }
                })
                .then(response => {
                    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                    return response.json();
                })
                .then(messages => {
                    const chatMessages = document.getElementById('chatMessages');
                    const currentScroll = chatMessages.scrollTop;
                    const isScrolledToBottom = chatMessages.scrollHeight - chatMessages.clientHeight <= currentScroll +
                        50;

                    if (messages.length !== lastMessageCount) {
                        lastMessageCount = messages.length;
                        chatMessages.innerHTML = '';

                        if (messages.length === 0) {
                            chatMessages.innerHTML =
                                '<div class="empty-state">No messages yet. Start the conversation!</div>';
                        } else {
                            let lastDate = null;
                            messages.forEach(msg => {
                                const dt = new Date(msg.created_at);
                                const datePart = dt.toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short'
                                });
                                const timePart = dt.toLocaleTimeString('en-US', {
                                    hour: '2-digit',
                                    minute: '2-digit',
                                    hour12: true
                                });
                                const dateTime = `${datePart}, ${timePart}`;

                                if (!lastDate || dt.toDateString() !== lastDate) {
                                    const dateDivider = document.createElement('div');
                                    dateDivider.style.textAlign = 'center';
                                    dateDivider.style.color = '#6b7280';
                                    dateDivider.style.fontSize = '12px';
                                    dateDivider.style.margin = '18px 0 6px 0';
                                    dateDivider.textContent = datePart;
                                    chatMessages.appendChild(dateDivider);
                                    lastDate = dt.toDateString();
                                }

                                const messageDiv = document.createElement('div');
                                const isSent = msg.sender_id == {{ Auth::id() }};
                                messageDiv.className = `message ${isSent ? 'sent' : 'received'}`;

                                messageDiv.innerHTML = `
                                    <div class="message-bubble">${escapeHtml(msg.message)}</div>
                                    <div class="message-time">${dateTime}</div>
                                `;

                                chatMessages.appendChild(messageDiv);
                            });
                        }

                        if (isScrolledToBottom || currentScroll === 0) {
                            chatMessages.scrollTop = chatMessages.scrollHeight;
                        }
                    }
                })
                .catch(error => {
                    console.error('Error fetching messages:', error);
                    const chatMessages = document.getElementById('chatMessages');
                    chatMessages.innerHTML =
                        '<div class="empty-state">Error loading messages. Please refresh the page.</div>';
                });
        }

        // Send message
        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            const conversationId = document.getElementById('currentConversationId').value;
            const receiverId = document.getElementById('currentReceiverId').value;

            if (!message) return;

            const csrfToken = getCsrfToken();
            if (!csrfToken) {
                alert('Security token is missing. Please refresh the page.');
                return;
            }

            const formData = new FormData();
            formData.append('message', message);
            if (conversationId) {
                formData.append('conversation_id', conversationId);
            }
            formData.append('receiver_id', receiverId);

            fetch('{{ url('') }}/chat-support/send-message', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        input.value = '';

                        if (data.conversation_id && !currentConversationId) {
                            currentConversationId = data.conversation_id;
                            document.getElementById('currentConversationId').value = data.conversation_id;

                            if (messagePolling) {
                                clearInterval(messagePolling);
                            }
                            messagePolling = setInterval(() => {
                                fetchMessages(data.conversation_id);
                            }, 3000);
                        }

                        fetchMessages(data.conversation_id);
                        refreshConversations();
                    } else {
                        alert(data.error || 'Failed to send message');
                    }
                })
                .catch(error => {
                    console.error('Error sending message:', error);
                    alert('Failed to send message. Please try again.');
                });
        }

        // Mark conversation as read
        function markAsRead(conversationId) {
            const csrfToken = getCsrfToken();

            fetch(`{{ url('') }}/chat-support/mark-read/${conversationId}`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                }
            }).catch(error => console.error('Error marking as read:', error));
        }

        // Refresh conversation list
        function refreshConversations() {
            fetch('{{ url('') }}/chat-support/conversations', {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(conversations => {
                    const conversationsList = document.getElementById('conversationsList');
                    const isSupport = IS_SUPPORT;

                    if (!isSupport) {
                        // Regular users: keep support admins, only replace conv-section + conv-item
                        document.querySelectorAll('.conv-section').forEach(e => e.remove());
                        document.querySelectorAll('.conv-item').forEach(e => e.remove());

                        if (conversations.length > 0) {
                            const divider = document.createElement('div');
                            divider.className = 'section-divider conv-section';
                            divider.textContent = 'Your Conversations';
                            conversationsList.appendChild(divider);
                        }
                    } else {
                        // Support admin: full replace
                        conversationsList.innerHTML = '';
                    }

                    if (conversations.length === 0 && isSupport) {
                        conversationsList.innerHTML = '<div class="empty-state">No user conversations yet</div>';
                        return;
                    }

                    if (conversations.length > 0 && isSupport) {
                        const divider = document.createElement('div');
                        divider.className = 'section-divider conv-section';
                        divider.textContent = 'User Conversations';
                        conversationsList.appendChild(divider);
                    }

                    conversations.forEach(conv => {
                        const otherUser = isSupport ? conv.user : conv.support_admin;
                        const latestMsg = conv.latest_message;
                        const userRole = isSupport ? 'User' : 'Support Admin';

                        const div = document.createElement('div');
                        div.className = 'conversation-item conv-item';
                        if (conv.id == currentConversationId) {
                            div.classList.add('active');
                        }
                        div.dataset.conversationId = conv.id;
                        div.dataset.userId = otherUser?.id || '';
                        div.dataset.userName = otherUser?.name || (isSupport ? 'User' : 'Support');
                        div.dataset.userRole = userRole;

                        const avatarBg = isSupport ? 'random' : '7c2d5e';

                        div.innerHTML = `
                            <img src="https://ui-avatars.com/api/?name=${encodeURIComponent(otherUser?.name || (isSupport ? 'User' : 'Support'))}&background=${avatarBg}&color=fff"
                                 alt="${otherUser?.name || (isSupport ? 'User' : 'Support')}"
                                 class="conversation-avatar">
                            <div class="conversation-details">
                                <div class="conversation-header">
                                    <span class="conversation-name">${otherUser?.name || (isSupport ? 'User' : 'Support')}</span>
                                    <span class="conversation-time">
                                        ${latestMsg ? new Date(latestMsg.created_at).toLocaleString('en-US', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''}
                                    </span>
                                </div>
                                <div class="conversation-preview">
                                    ${latestMsg ? (latestMsg.message.length > 40 ? latestMsg.message.substring(0, 40) + '...' : latestMsg.message) : 'No messages yet'}
                                </div>
                            </div>
                        `;

                        conversationsList.appendChild(div);
                    });

                    // Re-apply current tab filter after refreshing
                    applyCurrentTabFilter();
                })
                .catch(error => console.error('Error refreshing conversations:', error));
        }

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

        document.addEventListener('DOMContentLoaded', function() {
            // Tab click handling
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.tab-button').forEach(b => b.classList.remove(
                        'active'));
                    this.classList.add('active');

                    if (this.dataset.tab === 'support') {
                        showSupportTab();
                    } else {
                        showConversationsTab();
                    }
                });
            });

            // Default tab view
            if (IS_SUPPORT) {
                showConversationsTab();
            } else {
                // Regular users → default to Support Chat
                showSupportTab();
            }

            // Handle conversation click
            document.addEventListener('click', function(e) {
                const convItem = e.target.closest('.conversation-item');
                if (convItem) {
                    document.querySelectorAll('.conversation-item').forEach(i => i.classList.remove(
                        'active'));
                    convItem.classList.add('active');

                    const conversationId = convItem.dataset.conversationId;
                    const userId = convItem.dataset.userId;
                    const userName = convItem.dataset.userName;
                    const userRole = convItem.dataset.userRole;

                    if (!conversationId && userRole === "Support Admin") {
                        // User clicked Available Support Admin → check if old conv exists
                        fetch(`{{ url('chat-support/start') }}/${userId}`)
                            .then(res => res.json())
                            .then(data => {
                                if (data.conversation_id) {
                                    loadConversation(data.conversation_id, userId, userName, userRole);
                                }
                            });
                    } else {
                        loadConversation(conversationId, userId, userName, userRole);
                    }
                }
            });

            // Send on Enter key
            document.getElementById('messageInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    sendMessage();
                }
            });

            // Auto-load first conversation if exists
            const firstConv = document.querySelector('.conversation-item.conv-item');
            if (firstConv) {
                firstConv.click();
            }

            // Refresh conversations every 5 seconds
            setInterval(refreshConversations, 5000);
        });

        // Clean up on page unload
        window.addEventListener('beforeunload', function() {
            if (messagePolling) {
                clearInterval(messagePolling);
            }
        });
    </script>
@endpush