@extends('layouts.app')

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

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

@push('styles')
    <style>
        .support-container {
            display: flex;
            height: calc(100vh - 70px);
            background: white;
            border-radius: 12px;
            overflow: hidden;
            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;
        }

        .sidebar-header {
            padding: 20px 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;
        }

        .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;
        }

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

        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #f9fafb;
        }

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

        .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;
        }

        .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(100vh - 70px);
            }

            .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;
            }
        }
    </style>
@endpush

@section('content')
    <div class="support-container">
        <!-- Conversations Sidebar -->
        <div class="conversations-sidebar">
            <div class="sidebar-header">
                @if (Auth::user()->role == 1)
                    <h2 class="sidebar-title">User Conversations</h2>
                    <p class="sidebar-subtitle">Support Admin View</p>
                @else
                    <h2 class="sidebar-title">Support Chat</h2>
                    <p class="sidebar-subtitle">Connect with our support team</p>
                @endif
            </div>

            <div class="conversations-list" id="conversationsList">
                @if (Auth::user()->role != 1)
                    <!-- Show Support Admins for Regular Users -->
                    @if ($sidebarusers->isNotEmpty())
                        <div class="section-divider">Available Support Admins</div>
                        @foreach ($sidebarusers as $admin)
                            <div class="conversation-item support-admin-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 class="support-badge">SUPPORT</span>
                                        </span>
                                    </div>
                                    <div class="conversation-preview">Click to start conversation</div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    <!-- Show Existing Conversations -->
                    @if ($conversations->isNotEmpty())
                        <div class="section-divider">Your Conversations</div>
                        @foreach ($conversations as $conversation)
                            @php
                                $otherUser = $conversation->supportAdmin;
                                $latestMsg = $conversation->latestMessage;
                            @endphp
                            <div class="conversation-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
                    <!-- Show User Conversations for Support Admin -->
                    @if ($conversations->isEmpty())
                        <div class="empty-state">No user conversations yet</div>
                    @else
                        @foreach ($conversations as $conversation)
                            @php
                                $otherUser = $conversation->user;
                                $latestMsg = $conversation->latestMessage;
                            @endphp
                            <div class="conversation-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="{{ route('restaurant-admin.dashboard') }}" class="btn-back">
                    <i class="fas fa-arrow-left"></i>
                    Cancel & Go Back
                </a>
            </div>
        </div>

        <!-- Chat Area -->
        <div class="chat-container">
            <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;

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

            // Fallback - try to get from Laravel's global
            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 '';
        }

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

            // Update UI
            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;

            // Clear existing polling
            if (messagePolling) {
                clearInterval(messagePolling);
            }

            // If conversation exists, fetch messages
            if (conversationId) {
                fetchMessages(conversationId);

                // Poll for new messages every 3 seconds
                messagePolling = setInterval(() => {
                    fetchMessages(conversationId);
                }, 3000);

                // Mark as read
                markAsRead(conversationId);
            } else {
                // New conversation - show empty state
                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;

                    chatMessages.innerHTML = '';

                    if (messages.length === 0) {
                        chatMessages.innerHTML =
                            '<div class="empty-state">No messages yet. Start the conversation!</div>';
                    } else {
                        messages.forEach(msg => {
                            const messageDiv = document.createElement('div');
                            const isSent = msg.sender_id == {{ Auth::id() }};
                            messageDiv.className = `message ${isSent ? 'sent' : 'received'}`;

                            const time = new Date(msg.created_at).toLocaleTimeString('en-US', {
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: true
                            });

                            messageDiv.innerHTML = `
                        <div class="message-bubble">${escapeHtml(msg.message)}</div>
                        <div class="message-time">${time}</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 = '';

                        // Update conversation ID if it was newly created
                        if (data.conversation_id && !currentConversationId) {
                            currentConversationId = data.conversation_id;
                            document.getElementById('currentConversationId').value = data.conversation_id;

                            // Start polling for new conversation
                            if (messagePolling) {
                                clearInterval(messagePolling);
                            }
                            messagePolling = setInterval(() => {
                                fetchMessages(data.conversation_id);
                            }, 3000);
                        }

                        // Fetch updated messages
                        fetchMessages(data.conversation_id);

                        // Refresh conversation list
                        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 = {{ Auth::user()->role == 1 ? 'true' : 'false' }};

                    // Keep support admin list for regular users
                    const supportAdminItems = document.querySelectorAll('.support-admin-item');

                    // Clear only conversation items, not support admin items
                    if (!isSupport) {
                        document.querySelectorAll('.conversation-item:not(.support-admin-item)').forEach(item => item
                            .remove());

                        if (conversations.length > 0) {
                            // Add divider if not exists
                            if (!document.querySelector('.section-divider:last-of-type')) {
                                const divider = document.createElement('div');
                                divider.className = 'section-divider';
                                divider.textContent = 'Your Conversations';
                                conversationsList.appendChild(divider);
                            }
                        }
                    } else {
                        conversationsList.innerHTML = '';
                    }

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

                    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';
                        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;

                        div.innerHTML = `
                    <img src="https://ui-avatars.com/api/?name=${encodeURIComponent(otherUser?.name || 'User')}&background=${isSupport ? 'random' : '7c2d5e'}&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">
                                ${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.substring(0, 40) + '...' : 'No messages yet'}
                        </div>
                    </div>
                `;

                        conversationsList.appendChild(div);
                    });
                })
                .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]);
        }

        // Event listeners
        document.addEventListener('DOMContentLoaded', function() {
            // 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;

                    loadConversation(conversationId, userId, userName, userRole);
                }
            });

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

            // Auto-load first conversation if exists
            const firstConv = document.querySelector('.conversation-item:not(.support-admin-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