@extends('admin.admin')
@stack('styles')
<link rel="stylesheet" href="{{ asset('assets/css/whatsapp-chat.css') }}">


@section('content')
<div class="page-wrapper chat-page-shell">
<div class="whatsapp-chat-container">
    <div class="chat-layout">
        <!-- Left Sidebar - Sessions List -->
        <div class="chat-sidebar">
            <div class="sidebar-header">
                <h2>
                    <i class="fab fa-whatsapp"></i> {{ __('WhatsApp Chats') }}
                </h2>
                <a href="{{ route('admin.whatsapp.settings') }}" class="settings-btn" title="{{ __('Settings') }}">
                    <i class="fas fa-cog"></i>
                </a>
            </div>

            <div class="sidebar-search">
                <input type="text" id="session-search" placeholder="{{ __('Search conversations') }}..." class="search-input">
            </div>

            <div class="sessions-list" id="sessions-list">
                @forelse($sessions as $s)
                    <div class="session-item {{ $session && $session->id == $s->id ? 'active' : '' }}" 
                         data-session-id="{{ $s->id }}"
                         onclick="loadSession('{{ Crypt::encryptString($s->id) }}')">
                        
                        <div class="session-avatar">
                            <i class="fas fa-user"></i>
                        </div>

                        <div class="session-info">
                            <div class="session-name">
                                {{ $s->profile_name }}
                            </div>
                            <div class="session-last-message">
                                @if($s->latestMessage)
                                    @if($s->latestMessage->media_type)
                                        <i class="fas fa-paperclip"></i>
                                        {{ ucfirst($s->latestMessage->media_type) }}
                                    @else
                                        {{ Str::limit($s->latestMessage->message, 40) }}
                                    @endif
                                @else
                                    {{ __('No messages yet') }}
                                @endif
                            </div>
                        </div>

                        <div class="session-meta">
                            <div class="session-time">
                                {{ $s->last_activity_at->diffForHumans(null, true) }}
                            </div>
                            @if($s->unreadCount() > 0)
                                <div class="session-unread">
                                    {{ $s->unreadCount() }}
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="no-sessions">
                        <i class="fas fa-inbox"></i>
                        <p>{{ __('No conversations yet') }}</p>
                        <small>{{ __('New chats will appear here') }}</small>
                    </div>
                @endforelse
            </div>

            <div class="sidebar-footer">
                <div class="pagination-info">
                    Showing {{ $sessions->firstItem() ?? 0 }}-{{ $sessions->lastItem() ?? 0 }} of {{ $sessions->total() }}
                </div>
            </div>
        </div>

        <!-- Right Panel - Chat Window -->
        <div class="chat-main">
            <!-- Skeleton Loader for Chat Header -->
            <div class="chat-header-skeleton hidden" id="chat-header-skeleton">
                <div class="user-info-skeleton">
                    <div class="avatar-skeleton skeleton-loader"></div>
                    <div class="details-skeleton">
                        <div class="name-skeleton skeleton-loader"></div>
                        <div class="phone-skeleton skeleton-loader"></div>
                    </div>
                </div>
                <div class="actions-skeleton">
                    <div class="action-skeleton skeleton-loader"></div>
                    <div class="action-skeleton skeleton-loader"></div>
                </div>
            </div>

            @if($session)
                <!-- Chat Header -->
                <div class="chat-header" id="chat-header">
                    <div class="chat-user-info">
                        <div class="chat-user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="chat-user-details">
                            <h3>{{ $session->profile_name }}</h3>
                            <p>
                                <i class="fas fa-phone"></i> {{ $session->phone_number }}
                            </p>
                        </div>
                    </div>

                    <div class="chat-actions">
                        <button class="action-btn" onclick="refreshMessages()" title="{{ __('Refresh') }}">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <button class="action-btn" onclick="closeSession('{{ Crypt::encryptString($session->id) }}')" title="{{ __('Close Chat') }}">
                            <i class="fas fa-times-circle"></i>
                        </button>
                    </div>
                </div>

                <!-- Messages Area -->
                <div class="messages-container" id="messages-container">
                    <!-- Skeleton Loader for Messages -->
                    <div class="messages-loading-skeleton hidden" id="messages-loading-skeleton">
                        <div class="spinner"></div>
                        <div class="loading-text">{{ __('Loading') }}...</div>
                    </div>

                    <!-- Loading Indicator for older messages -->
                    <div id="loading-older-messages" class="loading-indicator" style="display: none; text-align: center; padding: 10px;">
                        <i class="fas fa-spinner fa-spin"></i> {{ __('Loading older messages') }}...
                    </div>
                    
                    <!-- Scroll to Bottom Button -->
                    <button id="scroll-to-bottom-btn" class="scroll-to-bottom-btn" onclick="scrollToBottom()" title="{{ __('Scroll to bottom') }}">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    
                    <div class="messages-wrapper" id="messages-wrapper" data-has-more="{{ isset($session->total_messages) && $session->messages->count() < $session->total_messages ? 'true' : 'false' }}">
                        @php
                            $lastDate = null;
                        @endphp
                        @foreach($session->messages as $message)
                            @if($message->sender_type === 'system')
                                <div class="system-message">
                                    <span>{{ $message->message }}</span>
                                </div>
                            @else
                                @php
                                    // Group messages by date
                                    $currentDate = $message->created_at->format('Y-m-d');
                                    $showDateSeparator = $lastDate !== $currentDate;
                                    $lastDate = $currentDate;
                                    
                                    // Determine date label
                                    $today = now()->format('Y-m-d');
                                    $yesterday = now()->subDay()->format('Y-m-d');
                                    
                                    if ($currentDate === $today) {
                                        $dateLabel = 'Today';
                                    } elseif ($currentDate === $yesterday) {
                                        $dateLabel = 'Yesterday';
                                    } else {
                                        $dateLabel = $message->created_at->format('F j, Y');
                                    }
                                @endphp
                                
                                @if($showDateSeparator)
                                    <div class="date-separator">
                                        <span>{{ $dateLabel }}</span>
                                    </div>
                                @endif
                                
                                <div class="messages {{ $message->sender_type === 'admin' ? 'message-sent' : 'message-received' }}" data-message-id="{{ $message->id }}">
                                    <div class="message-content">
                                        <div class="message-bubble">
                                            {{-- Display media if present --}}
                                            @if($message->media_type)
                                                <div class="message-media">
                                                    @if($message->media_type === 'image')
                                                        <img src="{{ $message->full_media_url }}" 
                                                             alt="{{ $message->media_filename }}"
                                                             class="message-image"
                                                             onclick="window.open('{{ $message->full_media_url }}', '_blank')">
                                                    @elseif($message->media_type === 'video')
                                                        <video controls class="message-video">
                                                            <source src="{{ $message->full_media_url }}" type="{{ $message->media_mime_type }}">
                                                        </video>
                                                    @elseif($message->media_type === 'audio')
                                                        <audio controls class="message-audio">
                                                            <source src="{{ $message->full_media_url }}" type="{{ $message->media_mime_type }}">
                                                        </audio>
                                                    @else
                                                        {{-- Document --}}
                                                        <div class="message-file">
                                                            <div class="file-icon">
                                                                @if(str_contains($message->media_mime_type, 'pdf'))
                                                                    <i class="fas fa-file-pdf"></i>
                                                                @elseif(str_contains($message->media_mime_type, 'word'))
                                                                    <i class="fas fa-file-word"></i>
                                                                @elseif(str_contains($message->media_mime_type, 'excel') || str_contains($message->media_mime_type, 'spreadsheet'))
                                                                    <i class="fas fa-file-excel"></i>
                                                                @elseif(str_contains($message->media_mime_type, 'powerpoint') || str_contains($message->media_mime_type, 'presentation'))
                                                                    <i class="fas fa-file-powerpoint"></i>
                                                                @else
                                                                    <i class="fas fa-file-alt"></i>
                                                                @endif
                                                            </div>
                                                            <div class="file-info">
                                                                <div class="file-name">{{ $message->media_filename }}</div>
                                                                <div class="file-size">{{ $message->formatted_filesize }}</div>
                                                            </div>
                                                            <a href="{{ $message->full_media_url }}" 
                                                               download="{{ $message->media_filename }}" 
                                                               class="file-download-btn">
                                                                <i class="fas fa-download"></i>
                                                            </a>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endif

                                            {{-- Display message text / caption --}}
                                            @if($message->message)
                                                <p>{{ $message->message }}</p>
                                            @endif
                                            
                                            <div class="message-meta">
                                                <span class="message-time">
                                                    {{ $message->created_at->format('h:i A') }}
                                                </span>
                                                @if($message->sender_type === 'admin')
                                                    <span class="message-status" data-message-id="{{ $message->id }}">
                                                        @if($message->status === 'sent')
                                                            <i class="fas fa-check"></i>
                                                        @elseif($message->status === 'delivered')
                                                            <i class="fas fa-check-double"></i>
                                                        @elseif($message->status === 'read')
                                                            <i class="fas fa-check-double status-read"></i>
                                                        @elseif($message->status === 'failed')
                                                            <i class="fas fa-exclamation-circle" title="For test accounts, messaging starts only after the user’s first message."></i>
                                                        @endif
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                        @if($message->sender_type === 'admin' && $message->sender)
                                            <div class="message-sender">
                                                {{ $message->sender->name }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    <!-- Typing Indicator -->
                    <div class="typing-indicator" id="typing-indicator" style="display: none;">
                        <div class="message message-received">
                            <div class="message-content">
                                <div class="message-bubble">
                                    <div class="typing-dots">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- File Preview Area --}}
                <div id="file-preview-area" class="file-preview-area" style="display: none;">
                    <div class="file-preview-container">
                        <div id="file-preview-content"></div>
                        <button type="button" class="remove-file-btn" onclick="removeSelectedFile()">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>

                <!-- Message Input -->
                <div class="message-input-area">
                    <form id="message-form" onsubmit="sendMessage(event)" enctype="multipart/form-data">
                        @csrf
                        
                        {{-- Hidden File Input --}}
                        <input type="file" 
                               id="file-input" 
                               accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,audio/*"
                               style="display: none;"
                               onchange="handleFileSelect(event)">
                        
                        <div class="input-wrapper">
                            {{-- Attach File Button --}}
                            <button type="button" class="attach-btn" onclick="document.getElementById('file-input').click()" title="Attach file">
                                <i class="fas fa-paperclip"></i>
                            </button>

                            <textarea 
                                id="message-input" 
                                placeholder="{{ __('Type a message') }}..." 
                                rows="1"></textarea>
                            
                            <button type="submit" class="send-btn" id="send-btn">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                </div>
            @else
                <!-- No Chat Selected -->
                <div class="no-chat-selected">
                    <i class="fab fa-whatsapp"></i>
                    <h3>{{ __('WhatsApp Web') }}</h3>
                    <p>{{ __('Select a conversation to start chatting') }}</p>
                </div>
            @endif
        </div>
    </div>
</div>
</div>


<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.15.3/dist/echo.iife.js"></script>
<script>
//  FIXED: Use actual session ID (integer) for real-time matching
let CURRENT_SESSION_ID = {{ $session->id ?? 'null' }};
// Keep encrypted ID for API calls
let ENCRYPTED_SESSION_ID = {!! $session ? "'" . urlencode(Crypt::encryptString($session->id)) . "'" : 'null' !!};
const CSRF_TOKEN = '{{ csrf_token() }}';
const ADMIN_ID = {{ auth()->id() }};

// File handling variables
let selectedFile = null;
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB

//  Pagination variables
let isLoadingOlderMessages = false;
let hasMoreMessages = {{ isset($session->total_messages) && $session->messages->count() < $session->total_messages ? 'true' : 'false' }};
let isInitialSessionLoad = false; // Flag to prevent scroll handler during initial session load

// Auto-resize textarea
document.getElementById('message-input')?.addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});

// Handle file selection
function handleFileSelect(event) {
    const file = event.target.files[0];
    
    if (!file) {
        return;
    }

    // Validate file size
    if (file.size > MAX_FILE_SIZE) {
        toastr.error('{{ __('File size must be under 10MB') }}');
        event.target.value = '';
        return;
    }

    // Validate file type
    const allowedTypes = [
        'image/jpeg', 'image/png', 'image/gif', 'image/webp',
        'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/webm',
        'application/pdf',
        'application/msword',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'application/vnd.ms-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.ms-powerpoint',
        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        'text/plain',
        'text/csv',
        'audio/mpeg',
        'audio/wav',
        'audio/ogg',
        'audio/mp4'
    ];

    if (!allowedTypes.includes(file.type)) {
        toastr.error('{{ __('File type not supported') }}');
        event.target.value = '';
        return;
    }

    selectedFile = file;
    showFilePreview(file);
}

// Show file preview
function showFilePreview(file) {
    const previewArea = document.getElementById('file-preview-area');
    const previewContent = document.getElementById('file-preview-content');
    
    let previewHTML = '';

    if (file.type.startsWith('image/')) {
        // Image preview
        const reader = new FileReader();
        reader.onload = (e) => {
            previewHTML = `
                <img src="${e.target.result}" class="file-preview-image" alt="Preview">
                <div class="file-preview-info">
                    <div class="file-preview-name">${file.name}</div>
                    <div class="file-preview-size">${formatFileSize(file.size)}</div>
                </div>
            `;
            previewContent.innerHTML = previewHTML;
        };
        reader.readAsDataURL(file);
    } else {
        // Other files
        const icon = getFileIcon(file.type);
        previewHTML = `
            <div class="file-preview-icon">
                <i class="${icon}"></i>
            </div>
            <div class="file-preview-info">
                <div class="file-preview-name">${file.name}</div>
                <div class="file-preview-size">${formatFileSize(file.size)}</div>
            </div>
        `;
        previewContent.innerHTML = previewHTML;
    }

    previewArea.style.display = 'block';
}

// Remove selected file
function removeSelectedFile() {
    selectedFile = null;
    document.getElementById('file-input').value = '';
    document.getElementById('file-preview-area').style.display = 'none';
    document.getElementById('file-preview-content').innerHTML = '';
}

// Get file icon class
function getFileIcon(mimeType) {
    if (mimeType.includes('pdf')) return 'fas fa-file-pdf';
    if (mimeType.includes('word')) return 'fas fa-file-word';
    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'fas fa-file-excel';
    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'fas fa-file-powerpoint';
    if (mimeType.includes('video')) return 'fas fa-file-video';
    if (mimeType.includes('audio')) return 'fas fa-file-audio';
    return 'fas fa-file-alt';
}

// Format file size
function formatFileSize(bytes) {
    if (bytes >= 1048576) {
        return (bytes / 1048576).toFixed(2) + ' MB';
    } else if (bytes >= 1024) {
        return (bytes / 1024).toFixed(2) + ' KB';
    } else {
        return bytes + ' bytes';
    }
}

// Load session
//  Load session via AJAX (no page reload)
async function loadSession(encryptedSessionId) {
    try {
        // Set flag to prevent scroll handler during initial load
        isInitialSessionLoad = true;
        
        // Show skeleton loaders
        const headerSkeleton = document.getElementById('chat-header-skeleton');
        const chatHeader = document.getElementById('chat-header');
        const messagesLoadingSkeleton = document.getElementById('messages-loading-skeleton');
        const messagesWrapper = document.getElementById('messages-wrapper');
        const loadingOlderMessages = document.getElementById('loading-older-messages');
        
        if (headerSkeleton) {
            headerSkeleton.classList.remove('hidden');
        }
        if (chatHeader) {
            chatHeader.classList.add('hidden');
        }
        if (messagesLoadingSkeleton) {
            messagesLoadingSkeleton.classList.remove('hidden');
        }
        if (messagesWrapper) {
            messagesWrapper.classList.add('hidden');
        }
        // Force hide loading older messages indicator during initial load
        if (loadingOlderMessages) {
            loadingOlderMessages.style.display = 'none';
        }

        // URL encode the encrypted session ID
        const encodedSessionId = encodeURIComponent(encryptedSessionId);
        
        // Update browser URL without page reload
        window.history.pushState({}, '', `/admin/whatsapp/${encodedSessionId}`);
        
        // Update active state in sidebar
        document.querySelectorAll('.session-item').forEach(item => {
            item.classList.remove('active');
        });
        const clickedSession = document.querySelector(`[onclick*="${encryptedSessionId}"]`);
        if (clickedSession) {
            clickedSession.classList.add('active');
        }

        // Fetch session data
        const response = await fetch(`/admin/whatsapp/${encodedSessionId}/load`, {
            headers: {
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'Accept': 'application/json'
            }
        });

        const data = await response.json();

        if (!data.success) {
            toastr.error('Failed to load session');
            // Hide skeleton loaders on error
            if (headerSkeleton) headerSkeleton.classList.add('hidden');
            if (chatHeader) chatHeader.classList.remove('hidden');
            if (messagesLoadingSkeleton) messagesLoadingSkeleton.classList.add('hidden');
            if (messagesWrapper) messagesWrapper.classList.remove('hidden');
            return;
        }

        // Update current session ID - store the encrypted version
        CURRENT_SESSION_ID = data.session.id; // Enn (Integer) ID-ai update seiyavum
        ENCRYPTED_SESSION_ID = encodedSessionId;
        
        //  Update pagination state
        hasMoreMessages = data.has_more || false;

        // Update chat header
        updateChatHeader(data.session);

        // Clear and load messages
        const messagesWrapperElement = document.getElementById('messages-wrapper');
        messagesWrapperElement.innerHTML = '';
        messagesWrapperElement.setAttribute('data-has-more', hasMoreMessages ? 'true' : 'false');

        let lastDate = null;
        data.messages.forEach(msg => {
            // Add date separator if needed
            if (msg.date !== lastDate) {
                const today = new Date().toISOString().split('T')[0];
                const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
                
                let dateLabel;
                if (msg.date === today) {
                    dateLabel = 'Today';
                } else if (msg.date === yesterday) {
                    dateLabel = 'Yesterday';
                } else {
                    const msgDate = new Date(msg.date);
                    dateLabel = msgDate.toLocaleDateString('en-US', { 
                        year: 'numeric', 
                        month: 'long', 
                        day: 'numeric' 
                    });
                }

                const dateSeparator = document.createElement('div');
                dateSeparator.className = 'date-separator';
                dateSeparator.innerHTML = `<span>${dateLabel}</span>`;
                messagesWrapperElement.appendChild(dateSeparator);
                
                lastDate = msg.date;
            }

            if (msg.sender_type !== 'system') {
                addMessageToUI(msg);
            }
        });

        // Hide skeleton loaders and show actual content
        if (headerSkeleton) {
            headerSkeleton.classList.add('hidden');
        }
        if (chatHeader) {
            chatHeader.classList.remove('hidden');
        }
        if (messagesLoadingSkeleton) {
            messagesLoadingSkeleton.classList.add('hidden');
        }
        if (messagesWrapperElement) {
            messagesWrapperElement.classList.remove('hidden');
        }

        scrollToBottom();

        updateSessionUnreadBadge(data.session.id, 0, 'set');
        
        // Reset flag after loading is complete
        isInitialSessionLoad = false;

    } catch (error) {
        
        toastr.error('Error loading chat session');
        
        // Hide skeleton loaders on error
        const headerSkeleton = document.getElementById('chat-header-skeleton');
        const chatHeader = document.getElementById('chat-header');
        const messagesLoadingSkeleton = document.getElementById('messages-loading-skeleton');
        const messagesWrapper = document.getElementById('messages-wrapper');
        
        if (headerSkeleton) headerSkeleton.classList.add('hidden');
        if (chatHeader) chatHeader.classList.remove('hidden');
        if (messagesLoadingSkeleton) messagesLoadingSkeleton.classList.add('hidden');
        if (messagesWrapper) messagesWrapper.classList.remove('hidden');
        
        // Reset flag on error too
        isInitialSessionLoad = false;
    }
}

// Update chat header with session info
function updateChatHeader(session) {
    const chatMain = document.querySelector('.chat-main');
    
    // Update header content
    const userNameEl = chatMain.querySelector('.chat-user-details h3');
    const userPhoneEl = chatMain.querySelector('.chat-user-details p');
    
    if (userNameEl) userNameEl.textContent = session.profile_name;
    if (userPhoneEl) userPhoneEl.innerHTML = `<i class="fas fa-phone"></i> ${session.phone_number}`;

    // Update action buttons with encrypted ID
    const closeBtn = chatMain.querySelector('[onclick*="closeSession"]');
    
    if (closeBtn && session.encrypted_id) {
        closeBtn.setAttribute('onclick', `closeSession('${session.encrypted_id}')`);
    }
}

// Send message
async function sendMessage(event) {
    event.preventDefault();
    
    const messageInput = document.getElementById('message-input');
    const sendBtn = document.getElementById('send-btn');
    const message = messageInput.value.trim();
    
    // Check if we have message or file
    if (!message && !selectedFile) return;
    
    if (!CURRENT_SESSION_ID) {
        toastr.error('No session selected');
        return;
    }
    
    // Disable button
    sendBtn.disabled = true;
    messageInput.disabled = true;
    
    try {
        // Create FormData to support file upload
        const formData = new FormData();
        
        if (message) {
            formData.append('message', message);
        }
        
        if (selectedFile) {
            formData.append('file', selectedFile); //  Changed from 'media' to 'file'
        }
        
        const response = await fetch(`/admin/whatsapp/${ENCRYPTED_SESSION_ID}/send`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': CSRF_TOKEN
            },
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Clear input
            messageInput.value = '';
            messageInput.style.height = 'auto';
            removeSelectedFile();  
            
            // Scroll to bottom (will auto-scroll when message arrives)
            scrollToBottom();
        } else {
            toastr.error('Failed to send message: ' + data.message);
        }
    } catch (error) {
        
        toastr.error('Failed to send message. Please try again.');
    } finally {
        sendBtn.disabled = false;
        messageInput.disabled = false;
        messageInput.focus();
    }
}

// Add message to UI
function addMessageToUI(messageData) {
    const messagesWrapper = document.getElementById('messages-wrapper');
    
    //  CRITICAL: Check if message already exists (prevent duplicates)
    const existingMessage = messagesWrapper.querySelector(`[data-message-id="${messageData.id}"]`);
    if (existingMessage) {
        return;
    }
    
    // Check if we need to add a date separator
    const messageDate = new Date(messageData.timestamp);
    const messageDateStr = messageDate.toISOString().split('T')[0];
    
    const today = new Date().toISOString().split('T')[0];
    const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
    
    let dateLabel;
    if (messageDateStr === today) {
        dateLabel = 'Today';
    } else if (messageDateStr === yesterday) {
        dateLabel = 'Yesterday';
    } else {
        dateLabel = messageDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
    }
    
    // Check if we need to add a date separator
    const lastDateSeparators = messagesWrapper.querySelectorAll('.date-separator');
    const lastDateSeparator = lastDateSeparators[lastDateSeparators.length - 1];
    let needDateSeparator = true;
    
    if (lastDateSeparator && lastDateSeparator.textContent.trim() === dateLabel) {
        needDateSeparator = false;
    }
    
    // Add date separator if needed
    if (needDateSeparator) {
        const dateSeparator = document.createElement('div');
        dateSeparator.className = 'date-separator';
        dateSeparator.innerHTML = `<span>${dateLabel}</span>`;
        messagesWrapper.appendChild(dateSeparator);
    }
    
    const messageDiv = document.createElement('div');
    messageDiv.className = `messages ${messageData.sender_type === 'admin' ? 'message-sent' : 'message-received'}`;
    messageDiv.setAttribute('data-message-id', messageData.id);
    
    // Build media HTML
    let mediaHTML = '';
    if (messageData.media_type) {
        if (messageData.media_type === 'image') {
            mediaHTML = `
                <div class="message-media">
                    <img src="${messageData.media_url}" 
                         alt="${messageData.media_filename || 'Image'}"
                         class="message-image"
                         onclick="window.open('${messageData.media_url}', '_blank')">
                </div>
            `;
        } else if (messageData.media_type === 'video') {
            mediaHTML = `
                <div class="message-media">
                    <video controls class="message-video">
                        <source src="${messageData.media_url}">
                    </video>
                </div>
            `;
        } else if (messageData.media_type === 'audio') {
            mediaHTML = `
                <div class="message-media">
                    <audio controls class="message-audio">
                        <source src="${messageData.media_url}">
                    </audio>
                </div>
            `;
        } else {
            // Document
            const iconClass = getFileIcon(messageData.media_mime_type || '');
            mediaHTML = `
                <div class="message-media">
                    <div class="message-file">
                        <div class="file-icon">
                            <i class="${iconClass}"></i>
                        </div>
                        <div class="file-info">
                            <div class="file-name">${messageData.media_filename || 'File'}</div>
                            <div class="file-size">${messageData.media_filesize || ''}</div>
                        </div>
                        <a href="${messageData.media_url}" download="${messageData.media_filename}" class="file-download-btn">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                </div>
            `;
        }
    }
    
    messageDiv.innerHTML = `
        <div class="message-content">
            <div class="message-bubble">
                ${mediaHTML}
                ${messageData.message ? `<p>${escapeHtml(messageData.message)}</p>` : ''}
                <div class="message-meta">
                    <span class="message-time">${messageData.created_at}</span>
                    ${messageData.sender_type === 'admin' ? `
                        <span class="message-status" data-message-id="${messageData.id}">
                            ${getStatusIcon(messageData.status)}
                        </span>
                    ` : ''}
                </div>
            </div>
            ${messageData.sender_type === 'admin' && messageData.sender_name ? `
                <div class="message-sender">${messageData.sender_name}</div>
            ` : ''}
        </div>
    `;
    
    messagesWrapper.appendChild(messageDiv);
}

//  Load older messages (pagination)
async function loadOlderMessages() {
    if (isLoadingOlderMessages || !hasMoreMessages || !CURRENT_SESSION_ID) {
        return;
    }
    
    isLoadingOlderMessages = true;
    
    const loadingIndicator = document.getElementById('loading-older-messages');
    const messagesWrapper = document.getElementById('messages-wrapper');
    const container = document.getElementById('messages-container');
    
    // Show loading indicator
    loadingIndicator.style.display = 'block';
    
    // Get the first message ID
    const firstMessage = messagesWrapper.querySelector('.messages[data-message-id]');
    if (!firstMessage) {
        isLoadingOlderMessages = false;
        loadingIndicator.style.display = 'none';
        return;
    }
    
    const beforeMessageId = firstMessage.getAttribute('data-message-id');
    
    // Save current scroll position
    const oldScrollHeight = container.scrollHeight;
    
    try {
        const response = await fetch(`/admin/whatsapp/${ENCRYPTED_SESSION_ID}/load-older?before_message_id=${beforeMessageId}&limit=50`, {
            headers: {
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'Accept': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (data.success && data.messages.length > 0) {
            // Prepend messages
            const fragment = document.createDocumentFragment();
            
            let lastDate = null;
            data.messages.forEach(msg => {
                // Add date separator if needed
                if (msg.date !== lastDate) {
                    const today = new Date().toISOString().split('T')[0];
                    const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
                    
                    let dateLabel;
                    if (msg.date === today) {
                        dateLabel = 'Today';
                    } else if (msg.date === yesterday) {
                        dateLabel = 'Yesterday';
                    } else {
                        const msgDate = new Date(msg.date);
                        dateLabel = msgDate.toLocaleDateString('en-US', { 
                            year: 'numeric', 
                            month: 'long', 
                            day: 'numeric' 
                        });
                    }

                    const dateSeparator = document.createElement('div');
                    dateSeparator.className = 'date-separator';
                    dateSeparator.innerHTML = `<span>${dateLabel}</span>`;
                    fragment.appendChild(dateSeparator);
                    
                    lastDate = msg.date;
                }

                if (msg.sender_type !== 'system') {
                    const messageElement = createMessageElement(msg);
                    fragment.appendChild(messageElement);
                }
            });
            
            // Insert at the beginning
            messagesWrapper.insertBefore(fragment, messagesWrapper.firstChild);
            
            // Update hasMoreMessages
            hasMoreMessages = data.has_more;
            messagesWrapper.setAttribute('data-has-more', hasMoreMessages ? 'true' : 'false');
            
            // Restore scroll position
            const newScrollHeight = container.scrollHeight;
            container.scrollTop = newScrollHeight - oldScrollHeight;
        }
    } catch (error) {
        
    } finally {
        isLoadingOlderMessages = false;
        loadingIndicator.style.display = 'none';
    }
}

//  Create message element (helper function)
function createMessageElement(messageData) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `messages ${messageData.sender_type === 'admin' ? 'message-sent' : 'message-received'}`;
    messageDiv.setAttribute('data-message-id', messageData.id);
    
    // Build media HTML
    let mediaHTML = '';
    if (messageData.media_type) {
        if (messageData.media_type === 'image') {
            mediaHTML = `
                <div class="message-media">
                    <img src="${messageData.media_url}" 
                         alt="${messageData.media_filename || 'Image'}"
                         class="message-image"
                         onclick="window.open('${messageData.media_url}', '_blank')">
                </div>
            `;
        } else if (messageData.media_type === 'video') {
            mediaHTML = `
                <div class="message-media">
                    <video controls class="message-video">
                        <source src="${messageData.media_url}">
                    </video>
                </div>
            `;
        } else if (messageData.media_type === 'audio') {
            mediaHTML = `
                <div class="message-media">
                    <audio controls class="message-audio">
                        <source src="${messageData.media_url}">
                    </audio>
                </div>
            `;
        } else {
            // Document
            const iconClass = getFileIcon(messageData.media_mime_type || '');
            mediaHTML = `
                <div class="message-media">
                    <div class="message-file">
                        <div class="file-icon">
                            <i class="${iconClass}"></i>
                        </div>
                        <div class="file-info">
                            <div class="file-name">${messageData.media_filename || 'File'}</div>
                            <div class="file-size">${messageData.media_filesize || ''}</div>
                        </div>
                        <a href="${messageData.media_url}" download="${messageData.media_filename}" class="file-download-btn">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                </div>
            `;
        }
    }
    
    messageDiv.innerHTML = `
        <div class="message-content">
            <div class="message-bubble">
                ${mediaHTML}
                ${messageData.message ? `<p>${escapeHtml(messageData.message)}</p>` : ''}
                <div class="message-meta">
                    <span class="message-time">${messageData.created_at}</span>
                    ${messageData.sender_type === 'admin' ? `
                        <span class="message-status" data-message-id="${messageData.id}">
                            ${getStatusIcon(messageData.status)}
                        </span>
                    ` : ''}
                </div>
            </div>
            ${messageData.sender_type === 'admin' && messageData.sender_name ? `
                <div class="message-sender">${messageData.sender_name}</div>
            ` : ''}
        </div>
    `;
    
    return messageDiv;
}

//  Get status icon based on message status
function getStatusIcon(status) {
    switch(status) {
        case 'sent':
            return '<i class="fas fa-check"></i>';
        case 'delivered':
            return '<i class="fas fa-check-double"></i>';
        case 'read':
            return '<i class="fas fa-check-double status-read"></i>';
        case 'failed':
            return '<i class="fas fa-exclamation-circle" title="For test accounts, messaging starts only after the user’s first message."></i>';
        default:
            return '<i class="fas fa-clock"></i>';
    }
}

// Escape HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Scroll to bottom
function scrollToBottom() {
    const container = document.getElementById('messages-container');
    if (container) {
        setTimeout(() => {
            container.scrollTop = container.scrollHeight;
        }, 100);
    }
}

//  Handle scroll to show/hide scroll-to-bottom button and load older messages
function handleScroll() {
    const container = document.getElementById('messages-container');
    const scrollBtn = document.getElementById('scroll-to-bottom-btn');
    
    if (!container || !scrollBtn) return;
    
    // Don't trigger scroll actions during initial session load
    if (isInitialSessionLoad) return;
    
    // Calculate if user is near bottom (within 100px)
    const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
    
    // Show button if scrolled up, hide if at bottom
    if (!isNearBottom) {
        scrollBtn.classList.add('show');
    } else {
        scrollBtn.classList.remove('show');
    }
    
    //  Load older messages when scrolled to top
    if (container.scrollTop < 100 && hasMoreMessages && !isLoadingOlderMessages) {
        loadOlderMessages();
    }
}

// Initialize scroll listener
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('messages-container');
    if (container) {
        container.addEventListener('scroll', handleScroll);
    }
});


// Refresh messages
async function refreshMessages() {
    if (!CURRENT_SESSION_ID) return;
    
    try {
        const response = await fetch(`/admin/whatsapp/${ENCRYPTED_SESSION_ID}/messages`);
        const data = await response.json();
        
        if (data.success) {
            const messagesWrapper = document.getElementById('messages-wrapper');
            messagesWrapper.innerHTML = '';
            
            let lastDate = null;
            data.messages.forEach(msg => {
                // Add date separator if needed
                if (msg.date !== lastDate) {
                    const today = new Date().toISOString().split('T')[0];
                    const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
                    
                    let dateLabel;
                    if (msg.date === today) {
                        dateLabel = 'Today';
                    } else if (msg.date === yesterday) {
                        dateLabel = 'Yesterday';
                    } else {
                        const msgDate = new Date(msg.timestamp);
                        dateLabel = msgDate.toLocaleDateString('en-US', { 
                            year: 'numeric', 
                            month: 'long', 
                            day: 'numeric' 
                        });
                    }

                    const dateSeparator = document.createElement('div');
                    dateSeparator.className = 'date-separator';
                    dateSeparator.innerHTML = `<span>${dateLabel}</span>`;
                    messagesWrapper.appendChild(dateSeparator);
                    
                    lastDate = msg.date;
                }
                
                if (msg.sender_type !== 'system') {
                    addMessageToUI(msg);
                }
            });
            
            scrollToBottom();
        }
    } catch (error) {
        
    }
}

// Close session
async function closeSession(encryptedSessionId) {
    if (!confirm('Are you sure you want to close this chat session?')) return;
    
    try {
        // URL encode the encrypted session ID
        const encodedSessionId = encodeURIComponent(encryptedSessionId);
        
        const response = await fetch(`/admin/whatsapp/${encodedSessionId}/close`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF_TOKEN
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            toastr.success('Session closed successfully');
            window.location.href = '/admin/whatsapp';
        }
    } catch (error) {
        console.error('Error closing session:', error);
    }
}

// Initialize Echo for real-time updates

@if(config('broadcasting.default') === 'pusher')
if (typeof Echo !== 'undefined') {
    const echo = new Echo({
         broadcaster: '{{ config('broadcasting.default') }}',
        key: '{{ config('broadcasting.connections.pusher.key') }}',
        cluster: '{{ config('broadcasting.connections.pusher.options.cluster') }}',
        forceTLS: true
    });

    // Listen for new messages
   echo.channel('whatsapp-admin')
    .listen('.new-message', (e) => {
        
        //  FIXED: Show ALL messages in current session (both user AND admin)
        if (e.session_id == CURRENT_SESSION_ID) {
            
            addMessageToUI(e);
            scrollToBottom();
            
            // Mark user messages as read
            if (e.sender_type === 'user') {
                setTimeout(() => {
                    markMessagesAsRead();
                }, 500);
            }
        } else {
            
        }
        
        // Update sidebar for user messages
        if (e.sender_type === 'user') {
            updateSessionUnreadBadge(e.session_id, 1, 'increment');
            updateSessionLastMessage(e.session_id, e.message || '[Media]');
        }
    })
    .listen('.message-status-updated', (e) => {
        
        updateMessageStatus(e.message_id, e.status);
    })
    .listen('.unread-count-updated', (e) => {
        
        updateSessionUnreadBadge(e.session_id, e.unread_count, 'set');
    });
} else {
    
}
@endif

// Auto-scroll to bottom on load
window.addEventListener('DOMContentLoaded', () => {
    scrollToBottom();
});

// Also scroll after window load (images, etc.)
window.addEventListener('load', () => {
    scrollToBottom();
});

//  Update message status (tick mark)
function updateMessageStatus(messageId, status) {
    const statusElement = document.querySelector(`[data-message-id="${messageId}"] .message-status`);
    if (!statusElement) return;
    
    statusElement.innerHTML = getStatusIcon(status);
    
    // Add animation for read status
    if (status === 'read') {
        const icon = statusElement.querySelector('.status-read');
        if (icon) {
            icon.style.animation = 'tickRead 0.3s ease';
        }
    }
}

//  Update session unread badge
function updateSessionUnreadBadge(sessionId, count, mode = 'set') {
    const sessionElement = document.querySelector(`[data-session-id="${sessionId}"]`);
    if (!sessionElement) return;

    let badgeElement = sessionElement.querySelector('.session-unread');

    if (mode === 'increment') {
        if (badgeElement) {
            const currentCount = parseInt(badgeElement.textContent) || 0;
            const newCount = currentCount + count;
            badgeElement.textContent = newCount;
        } else {
            // Create badge
            const metaDiv = sessionElement.querySelector('.session-meta');
            if (metaDiv) {
                badgeElement = document.createElement('div');
                badgeElement.className = 'session-unread';
                badgeElement.textContent = count;
                metaDiv.appendChild(badgeElement);
            }
        }
        
        // Add has-unread class
        sessionElement.classList.add('has-unread');
    } else if (mode === 'set') {
        if (count > 0) {
            if (badgeElement) {
                badgeElement.textContent = count;
            } else {
                // Create badge
                const metaDiv = sessionElement.querySelector('.session-meta');
                if (metaDiv) {
                    badgeElement = document.createElement('div');
                    badgeElement.className = 'session-unread';
                    badgeElement.textContent = count;
                    metaDiv.appendChild(badgeElement);
                }
            }
            sessionElement.classList.add('has-unread');
        } else {
            // Remove badge
            if (badgeElement) {
                badgeElement.remove();
            }
            sessionElement.classList.remove('has-unread');
        }
    }
}

//  Update session last message preview in sidebar
function updateSessionLastMessage(sessionId, message) {
    const sessionElement = document.querySelector(`[data-session-id="${sessionId}"]`);
    if (!sessionElement) return;
    
    const lastMessageElement = sessionElement.querySelector('.session-last-message');
    if (lastMessageElement) {
        lastMessageElement.textContent = message.length > 40 ? message.substring(0, 40) + '...' : message;
    }
}

//  Mark messages as read when viewing
function markMessagesAsRead() {
    if (!CURRENT_SESSION_ID) return;
    
    fetch(`/admin/whatsapp/${ENCRYPTED_SESSION_ID}/mark-read`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': CSRF_TOKEN
        }
    }).catch(err => console.error('Error marking messages as read:', err));
}

// Search sessions
document.getElementById('session-search')?.addEventListener('input', function(e) {
    const search = e.target.value.toLowerCase();
    const sessions = document.querySelectorAll('.session-item');
    
    sessions.forEach(session => {
        const name = session.querySelector('.session-name').textContent.toLowerCase();
        const message = session.querySelector('.session-last-message').textContent.toLowerCase();
        
        if (name.includes(search) || message.includes(search)) {
            session.style.display = 'flex';
        } else {
            session.style.display = 'none';
        }
    });
});

// Handle browser back/forward buttons
window.addEventListener('popstate', function(event) {
    // Reload the page when user navigates back/forward
    window.location.reload();
});
</script>
@endsection