@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);
    }

    /* Sidebar - Conversations List */
    .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;
    }

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

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

    .sidebar-footer {
        padding: 16px 24px;
        /* border-top: 1px solid #e5e7eb; */
    }

    .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 Area */
    .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-name {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

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

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

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

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

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

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

    .message.received .message-bubble {
        background: #f3f4f6;
        color: #374151;
        border-bottom-right-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 */
    .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #9ca3af;
        font-size: 16px;
    }

    /* Scrollbar Styling */
    .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;
    }

    /* Responsive */
    @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">
            <h2 class="sidebar-title">Previous Conversations</h2>
        </div>

        <div class="conversations-list">
            <!-- Active Conversation -->
            <div class="conversation-item active">
                <img src="https://i.pravatar.cc/150?img=1" alt="Srilakshmi" class="conversation-avatar">
                <div class="conversation-details">
                    <div class="conversation-header">
                        <span class="conversation-name">Srilakshmi</span>
                        <span class="conversation-time">31 Jul, 08:00 PM</span>
                    </div>
                    <div class="conversation-preview">I am facing a problem with settin...</div>
                </div>
            </div>

            <!-- Other Conversations -->
            <div class="conversation-item">
                <img src="https://i.pravatar.cc/150?img=2" alt="Karthik" class="conversation-avatar">
                <div class="conversation-details">
                    <div class="conversation-header">
                        <span class="conversation-name">Karthik</span>
                        <span class="conversation-time">30 Jul, 11:00 AM</span>
                    </div>
                    <div class="conversation-preview">hey there</div>
                </div>
            </div>

            <div class="conversation-item">
                <img src="https://i.pravatar.cc/150?img=3" alt="Anjali" class="conversation-avatar">
                <div class="conversation-details">
                    <div class="conversation-header">
                        <span class="conversation-name">Anjali</span>
                        <span class="conversation-time">30 Jul, 10:15 AM</span>
                    </div>
                    <div class="conversation-preview">good morning</div>
                </div>
            </div>

            <div class="conversation-item">
                <img src="https://i.pravatar.cc/150?img=4" alt="Rajesh" class="conversation-avatar">
                <div class="conversation-details">
                    <div class="conversation-header">
                        <span class="conversation-name">Rajesh</span>
                        <span class="conversation-time">30 Jul, 09:30 AM</span>
                    </div>
                    <div class="conversation-preview">hello</div>
                </div>
            </div>
        </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">
            <img src="https://i.pravatar.cc/150?img=1" alt="Sreelakshmi" class="chat-user-avatar">
            <span class="chat-user-name">Sreelakshmi</span>
        </div>

        <div class="chat-messages" id="chatMessages">
            <!-- Sent Message -->
            <div class="message sent">
                <div class="message-bubble">hii</div>
                <div class="message-time">08:00 PM</div>
            </div>

            <!-- Received Message -->
            <div class="message received">
                <div class="message-bubble">
                    Hello. Thank you for reaching out to Tiqkets support.<br>
                    An executive will be with you shortly.
                </div>
                <div class="message-time">08:00 PM</div>
            </div>

            <!-- Sent Message -->
            <div class="message sent">
                <div class="message-bubble">Sure.</div>
                <div class="message-time">08:05 PM</div>
            </div>

            <!-- Received Message -->
            <div class="message received">
                <div class="message-bubble">
                    Hello. Thank you for the patience. I am John Doe.<br>
                    How can I help you today?
                </div>
                <div class="message-time">08:06 PM</div>
            </div>

            <!-- Sent Message -->
            <div class="message sent">
                <div class="message-bubble">I am facing a problem with setting up my special hours</div>
                <div class="message-time">08:07 PM</div>
            </div>
        </div>

        <div class="chat-input-container">
            <div class="chat-input-wrapper">
                <input
                    type="text"
                    class="chat-input"
                    placeholder="Enter a message"
                    id="messageInput"
                >
                <button class="btn-send" onclick="sendMessage()">Send</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let currentConversationId = null;
    let refreshInterval = null;
    let currentUserRole = {{ auth()->user()->role }};

    // User type mapping
    const userTypes = {
        1: 'super_admin',
        3: 'restaurant_admin',
        4: 'location_manager',
        7: 'outlet_staff',
        8: 'food_court_admin'
    };

    // Load conversations on page load
    document.addEventListener('DOMContentLoaded', function() {
        loadConversations();

        // Enable send button when typing
        const messageInput = document.getElementById('messageInput');
        if (messageInput) {
            messageInput.addEventListener('input', function() {
                const sendButton = document.getElementById('sendButton');
                if (sendButton) {
                    sendButton.disabled = this.value.trim() === '';
                }
            });
        }

        // Refresh conversations every 30 seconds
        refreshInterval = setInterval(loadConversations, 30000);
    });

    // Load conversations list
    async function loadConversations() {
        try {
            const response = await fetch('{{ route("chat-support.conversations") }}');

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const conversations = await response.json();
            const conversationsList = document.getElementById('conversationsList');

            if (!conversationsList) {
                console.error('Conversations list element not found');
                return;
            }

            if (conversations.length === 0) {
                conversationsList.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-content">
                            <div class="empty-state-icon">
                                <i class="fas fa-comments"></i>
                            </div>
                            <p>No conversations yet. Start a new chat to get support.</p>
                        </div>
                    </div>
                `;
                return;
            }

            conversationsList.innerHTML = conversations.map(conv => {
                const supportAgentName = conv.support_agent ? conv.support_agent.name : 'Support Agent';
                const latestMessage = conv.latest_message ? conv.latest_message.message : 'No messages yet';
                const updatedAt = conv.updated_at ? conv.updated_at : conv.created_at;

                return `
                <div class="conversation-item ${currentConversationId === conv.id ? 'active' : ''}"
                     onclick="selectConversation(${conv.id})">
                    <div class="conversation-avatar">
                        ${getInitials(supportAgentName)}
                    </div>
                    <div class="conversation-details">
                        <div class="conversation-header">
                            <span class="conversation-name">
                                ${supportAgentName}
                                ${conv.status !== 'resolved' ? '<span class="conversation-badge">Active</span>' : ''}
                                <span class="priority-badge priority-${conv.priority}">${conv.priority}</span>
                            </span>
                            <span class="conversation-time">
                                ${formatTime(updatedAt)}
                            </span>
                        </div>
                        <div class="conversation-preview">
                            ${escapeHtml(latestMessage)}
                        </div>
                    </div>
                </div>
                `;
            }).join('');

        } catch (error) {
            console.error('Error loading conversations:', error);
            const conversationsList = document.getElementById('conversationsList');
            if (conversationsList) {
                conversationsList.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-content">
                            <p>Error loading conversations. Please try again.</p>
                        </div>
                    </div>
                `;
            }
        }
    }

    // Select conversation and load messages
    async function selectConversation(conversationId) {
        try {
            currentConversationId = conversationId;

            // Update UI - remove active class from all and add to current
            document.querySelectorAll('.conversation-item').forEach(item => {
                item.classList.remove('active');
            });

            // Find and activate the clicked conversation
            const conversationItems = document.querySelectorAll('.conversation-item');
            conversationItems.forEach(item => {
                if (item.onclick && item.onclick.toString().includes(conversationId)) {
                    item.classList.add('active');
                }
            });

            // Show chat header and input
            const chatHeader = document.getElementById('chatHeader');
            const chatInputContainer = document.getElementById('chatInputContainer');

            if (chatHeader) chatHeader.style.display = 'flex';
            if (chatInputContainer) chatInputContainer.style.display = 'block';

            // Enable send button if there's text
            const messageInput = document.getElementById('messageInput');
            const sendButton = document.getElementById('sendButton');

            if (messageInput && sendButton) {
                sendButton.disabled = messageInput.value.trim() === '';
            }

            // Load messages
            await loadMessages(conversationId);

        } catch (error) {
            console.error('Error selecting conversation:', error);
            showToast('Error selecting conversation', 'error');
        }
    }

    // Load messages for a conversation
    async function loadMessages(conversationId) {
        try {
            const response = await fetch(`/chat-support/messages/${conversationId}`);

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const messages = await response.json();
            const chatMessages = document.getElementById('chatMessages');

            if (!chatMessages) {
                console.error('Chat messages element not found');
                return;
            }

            if (messages.length === 0) {
                chatMessages.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-content">
                            <p>No messages yet. Start the conversation!</p>
                        </div>
                    </div>
                `;
                return;
            }

            chatMessages.innerHTML = messages.map(msg => {
                const messageClass = isMessageFromCurrentUser(msg) ? 'sent' : 'received';
                const messageTime = msg.created_at ? formatTime(msg.created_at) : 'Just now';

                return `
                <div class="message ${messageClass}">
                    <div class="message-bubble">${escapeHtml(msg.message)}</div>
                    <div class="message-time">${messageTime}</div>
                </div>
                `;
            }).join('');

            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;

        } catch (error) {
            console.error('Error loading messages:', error);
            showToast('Error loading messages', 'error');

            const chatMessages = document.getElementById('chatMessages');
            if (chatMessages) {
                chatMessages.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-content">
                            <p>Error loading messages. Please try again.</p>
                        </div>
                    </div>
                `;
            }
        }
    }

    // Send message
    async function sendMessage() {
        const messageInput = document.getElementById('messageInput');
        const message = messageInput ? messageInput.value.trim() : '';

        if (!message || !currentConversationId) {
            showToast('Please enter a message', 'error');
            return;
        }

        try {
            const response = await fetch('{{ route("chat-support.send-message") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    conversation_id: currentConversationId,
                    message: message
                })
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const result = await response.json();

            if (result.success) {
                if (messageInput) {
                    messageInput.value = '';
                }

                const sendButton = document.getElementById('sendButton');
                if (sendButton) {
                    sendButton.disabled = true;
                }

                await loadMessages(currentConversationId);
                await loadConversations(); // Refresh conversations list
            } else {
                showToast(result.message || 'Failed to send message', 'error');
            }

        } catch (error) {
            console.error('Error sending message:', error);
            showToast('Error sending message', 'error');
        }
    }

    // Show new conversation modal
    function showNewConversationModal() {
        const modal = document.getElementById('newConversationModal');
        if (modal) {
            modal.classList.add('show');
        }
    }

    // Hide new conversation modal
    function hideNewConversationModal() {
        const modal = document.getElementById('newConversationModal');
        if (modal) {
            modal.classList.remove('show');
        }
    }

    // Create new conversation
    async function createNewConversation() {
        const prioritySelect = document.getElementById('prioritySelect');
        const categorySelect = document.getElementById('categorySelect');
        const subjectInput = document.getElementById('subjectInput');
        const messageTextarea = document.getElementById('messageTextarea');

        const priority = prioritySelect ? prioritySelect.value : 'medium';
        const category = categorySelect ? categorySelect.value : 'general';
        const subject = subjectInput ? subjectInput.value.trim() : 'Support Request';
        const message = messageTextarea ? messageTextarea.value.trim() : '';

        if (!message) {
            showToast('Please enter a message', 'error');
            return;
        }

        try {
            const response = await fetch('{{ route("chat-support.start-conversation") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    priority: priority,
                    category: category,
                    subject: subject,
                    message: message
                })
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const result = await response.json();

            if (result.success) {
                hideNewConversationModal();
                showToast('Conversation started successfully', 'success');
                await loadConversations();

                // Reset form
                if (subjectInput) subjectInput.value = '';
                if (messageTextarea) messageTextarea.value = '';
                if (prioritySelect) prioritySelect.value = 'medium';
                if (categorySelect) categorySelect.value = 'general';

                // Automatically select the new conversation
                if (result.conversation && result.conversation.id) {
                    setTimeout(() => {
                        selectConversation(result.conversation.id);
                    }, 500);
                }
            } else {
                showToast(result.message || 'Failed to start conversation', 'error');
            }

        } catch (error) {
            console.error('Error starting conversation:', error);
            showToast('Error starting conversation', 'error');
        }
    }

    // Utility functions
    function getInitials(name) {
        if (!name) return 'SA';
        return name.split(' ').map(n => n[0]).join('').toUpperCase().substring(0, 2);
    }

    function formatTime(dateString) {
        if (!dateString) return 'Just now';

        const date = new Date(dateString);
        if (isNaN(date.getTime())) return 'Just now';

        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);

        if (diffMins < 1) return 'Just now';
        if (diffMins < 60) return `${diffMins}m ago`;
        if (diffHours < 24) return `${diffHours}h ago`;
        if (diffDays < 7) return `${diffDays}d ago`;

        return date.toLocaleDateString();
    }

    function handleKeyPress(event) {
        if (event.key === 'Enter') {
            event.preventDefault(); // Prevent default enter behavior
            sendMessage();
        }
    }

    function isMessageFromCurrentUser(message) {
        if (!message || !message.sender_type) return false;
        return message.sender_type === userTypes[currentUserRole];
    }

    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function showToast(message, type = 'info') {
        // Remove existing toasts
        document.querySelectorAll('.custom-toast').forEach(toast => {
            toast.remove();
        });

        const toast = document.createElement('div');
        toast.className = 'custom-toast';
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};
            color: white;
            border-radius: 6px;
            z-index: 10000;
            font-weight: 500;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        `;
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 3000);
    }

    // Close modal when clicking outside
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('newConversationModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    hideNewConversationModal();
                }
            });
        }
    });

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