@extends('layouts.adminlte.adminlte')

@section('title')
    {{ $displayName }} | {{ $conversationTitle }}
@endsection

@inject('chatHelper', 'App\Helpers\ChatHelper')

@section('content')
    <div class="card card-outline card-primary">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <span>
                    <a href="{{ route('chat.index') }}" class="btn btn-sm btn-outline-secondary mr-2">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    @if($isObserver ?? false)
                        <i class="fas fa-eye mr-1 text-info" title="Supervisor mode"></i>
                    @endif
                    {{ $displayName }} <span class="mx-2 text-muted">|</span> {{ $conversationTitle }}
                </span>

                {{-- Ban Management Dropdown --}}
                @php
                    $usersToManage = collect([$chat->agent, $chat->seller])->unique('id');
                    $canManageAny = false;
                    foreach ($usersToManage as $u) {
                        if ($chatHelper::canManageChatBan($u, auth()->user())) {
                            $canManageAny = true;
                            break;
                        }
                    }
                @endphp

                @if($canManageAny)
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-user-cog"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            @foreach($usersToManage as $u)
                                @if($chatHelper::canManageChatBan($u, auth()->user()))
                                    <h6 class="dropdown-header">{{ $u->name }} ({{ ucfirst($u->user_type) }})</h6>
                                    <a href="#" class="dropdown-item"
                                        onclick="toggleBan({{ $u->id }}, {{ $u->chat_banned ? 'false' : 'true' }}); return false;">
                                        <i class="fas {{ $u->chat_banned ? 'fa-check text-success' : 'fa-ban text-danger' }} mr-2"></i>
                                        {{ $u->chat_banned ? 'Unban User' : 'Ban User' }}
                                    </a>
                                    @if(!$loop->last)
                                    <div class="dropdown-divider"></div> @endif
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Ban Banner (only for agents/sellers) --}}
        @if(in_array(auth()->user()->user_type, ['agent', 'seller']))
            <div class="alert alert-danger m-3 {{ $isChatBanned ? '' : 'd-none' }}" role="alert" id="ban-banner">
                <i class="fas fa-ban mr-2"></i>
                <strong>Chat Disabled</strong> - You have been banned from using the chat. You cannot send messages.
            </div>
        @endif

        {{-- Admin/Manager Ban Info --}}
        @php
            $bannedParticipants = collect([$chat->agent, $chat->seller])
                ->filter(function ($u) {
                    return $u && $u->chat_banned;
                })
                ->unique('id');
        @endphp

        @foreach($bannedParticipants as $u)
            @if($chatHelper::canManageChatBan($u, auth()->user()))
                <div class="alert alert-warning m-3">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <strong>{{ $u->name }}</strong> was banned
                    @if($u->bannedBy)
                        @php
                            $bannerName = ($u->bannedBy->id === auth()->id()) ? 'Me' : $u->bannedBy->name;
                            $bannerRole = ucfirst($u->bannedBy->user_type);
                        @endphp
                        by <strong>{{ $bannerName }}</strong> ({{ $bannerRole }})
                    @endif
                    @if($u->chat_banned_at)
                        on {{ $u->chat_banned_at->format('d M Y') }} at {{ $u->chat_banned_at->format('H:i') }}
                    @endif
                    .
                </div>
            @endif
        @endforeach

        {{-- Observer Info Banner --}}
        @if($isObserver ?? false)
            <div class="alert alert-info m-3" role="alert">
                <i class="fas fa-info-circle mr-2"></i>
                <strong>Supervisor Mode</strong> - You can participate in this conversation. Your messages will be visible to
                the participants.
            </div>
        @endif

        <div class="card-body" id="chat-box" style="height:400px; overflow-y:scroll;">
            {{-- Load Older Messages Button --}}
            <div id="load-older-container" class="text-center mb-3 {{ $hasMoreMessages ? '' : 'd-none' }}">
                <button type="button" class="btn btn-sm btn-outline-primary" id="load-older-btn">
                    <i class="fas fa-history mr-1"></i> Load Older Messages
                </button>
            </div>

            <div id="messages-container">
                @foreach($messages as $msg)
                    @php
                        if ($msg->sender_type === 'agent') {
                            $msgSenderId = $msg->agent_id;
                        } elseif ($msg->sender_type === 'seller') {
                            $msgSenderId = $msg->seller_id;
                        } else {
                            // Extract ID from role:id (e.g. admin:13)
                            $parts = explode(':', $msg->sender_type);
                            $msgSenderId = (int) ($parts[1] ?? 0);
                        }
                        $isOwn = $msgSenderId == auth()->id();
                        $senderName = $senderNames[$msgSenderId] ?? 'Unknown';
                        $senderType = $senderTypes[$msgSenderId] ?? 'unknown';
                        $align = $isOwn ? 'text-right' : 'text-left';

                        // Color coding by user type
                        if ($isOwn) {
                            $bgStyle = 'background: rgba(108,117,125,0.15);'; // Gray for own messages
                        } elseif ($senderType === 'admin') {
                            $bgStyle = 'background: rgba(111,66,193,0.15);'; // Purple for admin
                        } elseif ($senderType === 'manager') {
                            $bgStyle = 'background: rgba(23,162,184,0.15);'; // Teal for manager
                        } else {
                            $bgStyle = 'background: rgba(0,123,255,0.15);'; // Blue for agent/seller
                        }
                    @endphp
                    <div class="message-wrapper {{ $align }} mb-2">
                        <div class="message-item message-bubble d-inline-block text-left p-2" data-message-id="{{ $msg->id }}"
                            data-sender-type="{{ $senderType }}" style="max-width: 75%; border-radius: 8px; {{ $bgStyle }}">
                            <strong>{{ $senderName }}</strong>
                            {{-- Edit/Delete Control --}}
                            @if($isOwn && $msg->created_at->diffInMinutes(now()) < 3)
                                @if(preg_match('/\[IMAGE:(.*?)\]/', $msg->message))
                                    <span class="msg-controls ml-2"><i class="fas fa-trash text-danger"
                                            style="cursor:pointer; font-size:0.8em;" onclick="deleteMessage({{ $msg->id }})"></i></span>
                                @else
                                    <span class="msg-controls ml-2"><i class="fas fa-pencil-alt text-muted"
                                            style="cursor:pointer; font-size:0.8em;" onclick="editMessage({{ $msg->id }})"></i></span>
                                @endif
                            @endif
                            <br>
                            @if(preg_match('/\[IMAGE:(.*?)\]/', $msg->message, $matches))
                                <a href="{{ asset('storage/chat/' . $matches[1]) }}" target="_blank">
                                    <img src="{{ asset('storage/chat/' . $matches[1]) }}" class="chat-image mb-2"
                                        style="max-width: 200px; max-height: 200px; border-radius: 5px; cursor: pointer;">
                                </a>
                            @else
                                <span style="white-space: pre-wrap;">{{ $msg->message }}</span><br>
                            @endif
                            <small class="text-muted">
                                {{ $msg->created_at->format('d M Y H:i') }}
                                @if($isOwn && ($isParticipant ?? true))
                                    | <span class="read-status" data-message-id="{{ $msg->id }}">
                                        @if($msg->read_at)
                                            Read {{ $msg->read_at->format('d M H:i') }}
                                        @else
                                            Sent
                                        @endif
                                    </span>
                                @endif

                                @if(!$isParticipant && ($isObserver ?? false))
                                    <div class="receipts" data-message-id="{{ $msg->id }}"
                                        style="font-size: 0.8em; color: #17a2b8;">
                                        @if($msg->agent_read_at && $msgSenderId !== $chat->agent_id)
                                            {{ $chat->agent->name }} read at {{ $msg->agent_read_at->format('d M Y H:i') }}<br>
                                        @endif
                                        @if($msg->seller_read_at && $msgSenderId !== $chat->seller_id)
                                            {{ $chat->seller->name }} read at {{ $msg->seller_read_at->format('d M Y H:i') }}
                                        @endif
                                    </div>
                                @endif
                            </small>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Message Form (render for participants and observers) --}}
        @if(($isParticipant ?? true) || ($isObserver ?? false))
            <div class="card-footer {{ $isChatBanned ? 'd-none' : '' }}" id="chat-form-container">
                <form id="chat-form" method="POST" action="javascript:void(0);">
                    @csrf
                    <input type="hidden" name="chat_id" value="{{ $chat->id }}">

                    <div class="input-group">
                        <div class="input-group-prepend">
                            <input type="file" id="image-input" accept="image/*" class="d-none">
                            <button type="button" class="btn btn-default"
                                onclick="document.getElementById('image-input').click()">
                                <i class="fas fa-paperclip"></i>
                            </button>
                        </div>
                        <textarea name="message" class="form-control" placeholder="Type a message..." required rows="1"
                            style="resize:none; overflow: hidden;"
                            oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"></textarea>
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary">Send</button>
                        </div>
                    </div>
                    <small class="text-muted d-block mt-1">
                        Note: A message can contain either text or an image, not both. / Nota: Un messaggio può contenere solo
                        testo o un'immagine, non entrambi.
                    </small>
                </form>
            </div>
        @endif
    </div>
@endsection

@section('js')
    @parent
    <script>
        function formatDate(isoString) {
            const date = new Date(isoString);
            return date.toLocaleString(undefined, {
                year: 'numeric',
                month: 'short',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            const chatForm = document.getElementById('chat-form');
            const chatBox = document.getElementById('chat-box');
            const messagesContainer = document.getElementById('messages-container');
            const loadOlderBtn = document.getElementById('load-older-btn');
            const loadOlderContainer = document.getElementById('load-older-container');
            const banBanner = document.getElementById('ban-banner');
            const chatFormContainer = document.getElementById('chat-form-container');

            const chatId = {{ $chat->id }};
            const isObserver = {{ ($isObserver ?? false) ? 'true' : 'false' }};
            const isParticipant = {{ ($isParticipant ?? true) ? 'true' : 'false' }};
            let isBanned = {{ $isChatBanned ? 'true' : 'false' }};
            let oldestMessageId = {{ $oldestMessageId ?? 'null' }};
            let lastMessageId = {{ $messages->last()->id ?? 0 }};
            const authUserId = {{ auth()->id() ?? 'null' }};
            const authUserType = "{{ auth()->user()->user_type ?? 'unknown' }}";
            const senderNames = @json($senderNames);
            const agentName = @json($chat->agent->name);
            const sellerName = @json($chat->seller->name);
            const senderTypes = @json($senderTypes ?? []);

            // Ban/Unban logic
            window.toggleBan = function (userId, shouldBan) {
                const url = shouldBan ? `/chat/ban/${userId}` : `/chat/unban/${userId}`;
                if (!confirm(`Are you sure you want to ${shouldBan ? 'BAN' : 'UNBAN'} this user?`)) return;

                fetch(url, {
                    method: 'POST',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json",
                        "Accept": "application/json"
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.error) {
                            alert(data.message);
                        } else {
                            alert(data.message);
                            location.reload(); // Reload to update UI state
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        alert('Action failed.');
                    });
            };

            // Editable check helper
            function isEditable(msg) {
                // 1. Check Ownership
                let isOwner = false;

                if (authUserType === 'agent') {
                    isOwner = (msg.sender_type === 'agent' && msg.agent_id == authUserId);
                } else if (authUserType === 'seller') {
                    isOwner = (msg.sender_type === 'seller' && msg.seller_id == authUserId);
                } else if (authUserType === 'admin' || authUserType === 'manager') {
                    // Admin/Manager sender_type format is "admin:ID" or "manager:ID"
                    isOwner = (msg.sender_type === `${authUserType}:${authUserId}`);
                }

                if (!isOwner) return false;

                // 2. Check Time Limit (3 minutes)
                const msgTime = new Date(msg.created_at).getTime();
                const now = Date.now();
                return (now - msgTime) < 180000;
            }

            // Edit Message Logic
            window.editMessage = function (msgId) {
                const container = document.querySelector(`.message-item[data-message-id="${msgId}"]`);
                if (!container) return;

                const textSpan = container.querySelector('span[style*="white-space: pre-wrap;"]');
                if (!textSpan) return;

                const currentText = textSpan.innerText;
                const controlsDiv = container.querySelector('.msg-controls');

                if (container.querySelector('.edit-area')) return;

                const editArea = document.createElement('div');
                editArea.className = 'edit-area mt-2';
                editArea.innerHTML = `
                                                                <textarea class="form-control form-control-sm mb-1" rows="2"></textarea>
                                                                <div class="text-right">
                                                                    <button class="btn btn-xs btn-success save-edit-btn">Save</button>
                                                                    <button class="btn btn-xs btn-secondary cancel-edit-btn">Cancel</button>
                                                                </div>
                                                        `;

                editArea.querySelector('textarea').value = currentText;

                textSpan.style.display = 'none';
                if (controlsDiv) controlsDiv.style.display = 'none';

                textSpan.parentNode.insertBefore(editArea, textSpan.nextSibling);

                const textarea = editArea.querySelector('textarea');
                textarea.focus();

                editArea.querySelector('.cancel-edit-btn').addEventListener('click', function () {
                    editArea.remove();
                    textSpan.style.display = '';
                    if (controlsDiv) controlsDiv.style.display = '';
                });

                editArea.querySelector('.save-edit-btn').addEventListener('click', function () {
                    const newText = textarea.value.trim();
                    if (!newText) {
                        alert("Message cannot be empty");
                        return;
                    }

                    fetch(`/chat/message/${msgId}`, {
                        method: 'PUT',
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            "Content-Type": "application/json",
                            "Accept": "application/json"
                        },
                        body: JSON.stringify({ message: newText })
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.error) {
                                alert(data.error);
                                if (data.error === 'Edit time expired') {
                                    if (controlsDiv) controlsDiv.remove();
                                }
                            } else {
                                textSpan.innerText = data.message.message;
                            }
                            editArea.remove();
                            textSpan.style.display = '';
                            if (controlsDiv) controlsDiv.style.display = '';
                        })
                        .catch(err => {
                            console.error(err);
                            alert('Failed to update message');
                            editArea.remove();
                            textSpan.style.display = '';
                            if (controlsDiv) controlsDiv.style.display = '';
                        });
                });
            };

            // Delete Message Logic (for images)
            window.deleteMessage = function (msgId) {
                if (!confirm("Are you sure you want to delete this image?")) return;

                fetch(`/chat/message/${msgId}`, {
                    method: 'DELETE',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Accept": "application/json"
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.error) {
                            alert(data.error);
                        } else {
                            const container = document.querySelector(`.message-wrapper:has(div[data-message-id="${msgId}"])`);
                            if (container) container.remove();
                            else {
                                const bubble = document.querySelector(`div[data-message-id="${msgId}"]`);
                                if (bubble) {
                                    const wrapper = bubble.closest('.message-wrapper');
                                    if (wrapper) wrapper.remove();
                                }
                            }
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        alert('Failed to delete message');
                    });
            };

            // Scroll to bottom initially
            chatBox.scrollTop = chatBox.scrollHeight;

            const fetchUrl = `/chat/room/${chatId}/fetch`;
            const fetchOlderUrl = `/chat/room/${chatId}/fetch-older`;

            // Send message
            if (chatForm) {
                const messageInput = chatForm.querySelector('[name="message"]');
                const submitBtn = chatForm.querySelector('button[type="submit"]');

                // Handle Enter to send, Shift+Enter for newline
                messageInput.addEventListener('keydown', function (e) {
                    if (e.key === 'Enter') {
                        if (!e.shiftKey) {
                            e.preventDefault();
                            chatForm.dispatchEvent(new Event('submit'));
                        }
                    }
                });

                chatForm.addEventListener('submit', function (e) {
                    e.preventDefault();

                    if (isBanned && !isObserver) {
                        alert('You have been banned from using the chat.');
                        return;
                    }

                    // Disable button and show loading state
                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.dataset.originalText = submitBtn.innerText;
                        submitBtn.innerText = 'Sending...';
                    }

                    // Re-select in case we changed input type
                    let messageEl = this.querySelector('[name="message"]');
                    let chatIdInput = this.querySelector('input[name="chat_id"]').value;
                    let messageVal = messageEl.value;

                    let formData = new FormData();
                    formData.append('chat_id', chatIdInput);

                    if (imageInput && imageInput.files.length > 0) {
                        formData.append('image', imageInput.files[0]);
                        // Clear input after appending
                    } else {
                        if (!messageVal.trim()) {
                            // Re-enable button if validation fails locally
                            if (submitBtn) {
                                submitBtn.disabled = false;
                                submitBtn.innerText = submitBtn.dataset.originalText;
                            }
                            return;
                        }
                        formData.append('message', messageVal);
                    }

                    fetch("{{ route('chat.send') }}", {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            "Accept": "application/json"
                        },
                        body: formData
                    })
                        .then(response => response.json())
                        .then(data => {
                            // Check for custom 'error' flag OR standard Laravel 'errors' object
                            if (data.error || data.errors) {
                                let msg = data.message || 'An error occurred';
                                if (data.errors) {
                                    // Combine validation errors
                                    msg = Object.values(data.errors).flat().join('\n');
                                }
                                alert(msg);

                                if (data.message && data.message.includes('banned')) {
                                    handleBanned();
                                }
                                // Reset file input on error
                                if (imageInput) imageInput.value = '';
                                return;
                            }
                            appendMessage(data, true);
                            lastMessageId = data.id;
                            messageEl.value = '';
                            if (imageInput) imageInput.value = ''; // Reset file input
                        })
                        .catch(error => {
                            console.error(error);
                            alert('Failed to send message.');
                        })
                        .finally(() => {
                            // Re-enable button
                            if (submitBtn) {
                                submitBtn.disabled = false;
                                submitBtn.innerText = submitBtn.dataset.originalText || 'Send';
                            }
                        });
                });
            }

            // Fetch new messages
            let lastFetchTime = '{{ now()->toDateTimeString() }}'; // Initial server time
            let isTabActive = !document.hidden;

            document.addEventListener("visibilitychange", () => {
                isTabActive = !document.hidden;
                if (isTabActive) {
                    // Tab became active, fetch immediately to mark read
                    fetchMessages(true);
                }
            });

            function fetchMessages(forceMarkRead = false) {
                const markRead = (isTabActive || forceMarkRead) ? '1' : '0';
                const url = fetchUrl + '?last_id=' + lastMessageId + '&last_fetch_time=' + encodeURIComponent(lastFetchTime) + '&mark_read=' + markRead;

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.server_time) {
                            lastFetchTime = data.server_time;
                        }

                        // Handle updated messages (edits/deletes)
                        if (data.updated_messages && data.updated_messages.length > 0) {
                            data.updated_messages.forEach(msg => {
                                const msgEl = document.querySelector(`.message-item[data-message-id="${msg.id}"]`);

                                if (msg.deleted_at) {
                                    // Message was deleted
                                    if (msgEl) {
                                        const wrapper = msgEl.closest('.message-wrapper');
                                        if (wrapper) wrapper.remove();
                                        else msgEl.remove();
                                    }
                                } else if (msgEl) {
                                    // Update edited message text
                                    const textSpan = msgEl.querySelector('span[style*="white-space: pre-wrap;"]');
                                    if (textSpan) textSpan.innerText = msg.message;
                                }
                            });
                        }

                        // Handle ban status change
                        if (!isObserver) {
                            if (data.is_banned && !isBanned) {
                                handleBanned();
                            } else if (!data.is_banned && isBanned) {
                                handleUnbanned();
                            }
                        }

                        // Append new messages
                        if (data.messages) {
                            data.messages.forEach(msg => {
                                appendMessage(msg, false);
                                lastMessageId = msg.id;
                            });
                        }

                        if (isParticipant && data.read_updates) {
                            data.read_updates.forEach(update => {
                                const statusEl = document.querySelector(`.read-status[data-message-id="${update.id}"]`);
                                if (statusEl && statusEl.textContent.trim() === 'Sent') {
                                    // Format the date if available
                                    // Custom short format for read receipt to match PHP 'd M H:i' approximately
                                    const d = new Date(update.read_at);
                                    const day = d.getDate();
                                    const month = d.toLocaleString('default', { month: 'short' });
                                    const hour = d.getHours().toString().padStart(2, '0');
                                    const minute = d.getMinutes().toString().padStart(2, '0');
                                    const formatted = `${day} ${month} ${hour}:${minute}`;

                                    statusEl.textContent = `Read ${formatted}`;
                                }
                            });
                        }

                        // Detailed read updates (for admins/managers only)
                        if (isObserver && data.detailed_read_updates) {
                            data.detailed_read_updates.forEach(update => {
                                const msgEl = document.querySelector(`.message-item[data-message-id="${update.id}"] small.text-muted`);
                                if (msgEl) {
                                    let receiptContainer = document.querySelector(`.receipts[data-message-id="${update.id}"]`);
                                    if (!receiptContainer) {
                                        receiptContainer = document.createElement('div');
                                        receiptContainer.className = 'receipts';
                                        receiptContainer.dataset.messageId = update.id;
                                        receiptContainer.style.fontSize = '0.8em';
                                        receiptContainer.style.color = '#17a2b8'; // Teal
                                        msgEl.parentNode.appendChild(receiptContainer);
                                    }

                                    // Rebuild receipt text
                                    let text = '';
                                    if (update.agent_read_at) text += `${agentName} read at ${formatDate(update.agent_read_at)}<br>`;
                                    if (update.seller_read_at) text += `${sellerName} read at ${formatDate(update.seller_read_at)}`;

                                    receiptContainer.innerHTML = text;
                                }
                            });
                        }
                    })
                    .catch(error => console.error(error));
            }

            setInterval(function () {
                // Poll normally
                fetchMessages();
            }, 3000);

            // Load older messages
            if (loadOlderBtn) {
                loadOlderBtn.addEventListener('click', function () {
                    if (!oldestMessageId) return;

                    loadOlderBtn.disabled = true;
                    loadOlderBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Loading...';

                    fetch(fetchOlderUrl + '?before_id=' + oldestMessageId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.messages && data.messages.length > 0) {
                                const scrollHeightBefore = chatBox.scrollHeight;

                                // Reverse messages to prepend them in the correct order (Newest of chunk first -> Oldest of chunk last)
                                // PHP returns [Oldest ... Newest].
                                // We want result [Oldest ... Newest] [Previous Content]
                                // Prepend Newest -> [Newest] [Previous Content]
                                // Prepend Older -> [Older] [Newest] [Previous Content]
                                data.messages.slice().reverse().forEach(msg => {
                                    prependMessage(msg);
                                });

                                // Maintain scroll position
                                chatBox.scrollTop = chatBox.scrollHeight - scrollHeightBefore;
                                oldestMessageId = data.oldest_id;

                                if (!data.has_more) {
                                    loadOlderBtn.style.display = 'none';
                                } else {
                                    loadOlderBtn.disabled = false;
                                    loadOlderBtn.innerHTML = '<i class="fas fa-history mr-1"></i> Load Older Messages';
                                }
                            } else {
                                // No more older messages
                                loadOlderBtn.style.display = 'none';
                            }
                        })
                        .catch(error => {
                            console.error(error);
                            loadOlderBtn.disabled = false;
                            loadOlderBtn.innerHTML = '<i class="fas fa-history mr-1"></i> Load Older Messages';
                        });
                });
            }

            function appendMessage(msg, isOwnMessage) {
                // Prevent duplicate messages
                if (document.querySelector(`.message-item[data-message-id="${msg.id}"]`)) {
                    return;
                }

                let msgSenderId;
                if (msg.sender_type === 'agent') msgSenderId = msg.agent_id;
                else if (msg.sender_type === 'seller') msgSenderId = msg.seller_id;
                else msgSenderId = parseInt(msg.sender_type.split(':')[1] || 0);

                const isOwn = isOwnMessage || msgSenderId == authUserId;

                // Use backend provided details if available, otherwise fallback to existing maps
                const senderName = msg.sender_name || (senderNames[msgSenderId] || 'User ' + msgSenderId);
                const senderType = msg.sender_role_label || (senderTypes[msgSenderId] || 'unknown');

                const align = isOwn ? 'text-right' : 'text-left';

                // Color coding by user type
                let bgStyle;
                if (isOwn) {
                    bgStyle = 'background: rgba(108,117,125,0.15);'; // Gray
                } else if (senderType === 'admin') {
                    bgStyle = 'background: rgba(111,66,193,0.15);'; // Purple
                } else if (senderType === 'manager') {
                    bgStyle = 'background: rgba(23,162,184,0.15);'; // Teal
                } else {
                    bgStyle = 'background: rgba(0,123,255,0.15);'; // Blue
                }

                let status = '';
                if (isOwn && isParticipant) {
                    status = `| <span class="read-status" data-message-id="${msg.id}">${msg.read_at ? 'Read' : 'Sent'}</span>`;
                }

                const imageTagMatch = msg.message.match(/\[IMAGE:(.*?)\]/);
                let messageContent = '';
                if (imageTagMatch) {
                    messageContent = `<a href="/storage/chat/${imageTagMatch[1]}" target="_blank">
                                                                    <img src="/storage/chat/${imageTagMatch[1]}" class="chat-image mb-2" style="max-width: 200px; max-height: 200px; border-radius: 5px; cursor: pointer;">
                                                                    </a>`;
                } else {
                    messageContent = `<span style="white-space: pre-wrap;">${escapeHtml(msg.message)}</span><br>`;
                }

                // Edit/Delete controls
                let controls = '';
                if (isEditable(msg)) {
                    if (imageTagMatch) {
                        // Delete button for images
                        controls = `<span class="msg-controls ml-2"><i class="fas fa-trash text-danger" style="cursor:pointer; font-size:0.8em;" onclick="deleteMessage(${msg.id})"></i></span>`;
                    } else {
                        // Edit button for text
                        controls = `<span class="msg-controls ml-2"><i class="fas fa-pencil-alt text-muted" style="cursor:pointer; font-size:0.8em;" onclick="editMessage(${msg.id})"></i></span>`;
                    }
                }

                const html = `
                                                                <div class="message-wrapper ${align} mb-2">
                                                                    <div class="message-item message-bubble d-inline-block text-left p-2" data-message-id="${msg.id}" data-sender-type="${senderType}" style="max-width: 75%; border-radius: 8px; ${bgStyle}">
                                                                        <strong>${escapeHtml(senderName)}</strong>
                                                                        ${controls}
                                                                        <br>
                                                                        ${messageContent}
                                                                        <small class="text-muted">${formatDate(msg.created_at)} ${status}</small>
                                                                    </div>
                                                                </div>
                                                            `;

                messagesContainer.insertAdjacentHTML('beforeend', html);
                chatBox.scrollTop = chatBox.scrollHeight;
            }

            // Image selection handler
            const imageInput = document.getElementById('image-input');
            const messageTextarea = chatForm.querySelector('[name="message"]');

            if (imageInput) {
                imageInput.addEventListener('change', function () {
                    if (this.files && this.files[0]) {
                        // Automatically submit when image is selected
                        chatForm.dispatchEvent(new Event('submit'));
                    }
                });
            }

            function prependMessage(msg) {
                const msgSenderId = (msg.sender_type === 'agent') ? msg.agent_id : msg.seller_id;
                const isOwn = msgSenderId == authUserId;
                const senderName = senderNames[msgSenderId] || 'User ' + msgSenderId;
                const senderType = senderTypes[msgSenderId] || 'unknown';
                const align = isOwn ? 'text-right' : 'text-left';

                // Color coding by user type
                let bgStyle;
                if (isOwn) {
                    bgStyle = 'background: rgba(108,117,125,0.15);'; // Gray
                } else if (senderType === 'admin') {
                    bgStyle = 'background: rgba(111,66,193,0.15);'; // Purple
                } else if (senderType === 'manager') {
                    bgStyle = 'background: rgba(23,162,184,0.15);'; // Teal
                } else {
                    bgStyle = 'background: rgba(0,123,255,0.15);'; // Blue
                }

                let status = '';
                if (isOwn && isParticipant) {
                    status = `| <span class="read-status" data-message-id="${msg.id}">${msg.read_at ? 'Read' : 'Sent'}</span>`;
                }

                const imageTagMatch = msg.message.match(/\[IMAGE:(.*?)\]/);
                let messageContent = '';
                if (imageTagMatch) {
                    messageContent = `<a href="/storage/chat/${imageTagMatch[1]}" target="_blank">
                                                                    <img src="/storage/chat/${imageTagMatch[1]}" class="chat-image mb-2" style="max-width: 200px; max-height: 200px; border-radius: 5px; cursor: pointer;">
                                                                    </a>`;
                } else {
                    messageContent = `<span style="white-space: pre-wrap;">${escapeHtml(msg.message)}</span><br>`;
                }

                // Edit/Delete controls
                let controls = '';
                if (isEditable(msg)) {
                    if (imageTagMatch) {
                        // Delete button for images
                        controls = `<span class="msg-controls ml-2"><i class="fas fa-trash text-danger" style="cursor:pointer; font-size:0.8em;" onclick="deleteMessage(${msg.id})"></i></span>`;
                    } else {
                        // Edit button for text
                        controls = `<span class="msg-controls ml-2"><i class="fas fa-pencil-alt text-muted" style="cursor:pointer; font-size:0.8em;" onclick="editMessage(${msg.id})"></i></span>`;
                    }
                }

                const html = `
                                                                <div class="message-wrapper ${align} mb-2">
                                                                    <div class="message-item message-bubble d-inline-block text-left p-2" data-message-id="${msg.id}" data-sender-type="${senderType}" style="max-width: 75%; border-radius: 8px; ${bgStyle}">
                                                                        <strong>${escapeHtml(senderName)}</strong>
                                                                        ${controls}
                                                                        <br>
                                                                        ${messageContent}
                                                                        <small class="text-muted">${formatDate(msg.created_at)} ${status}</small>
                                                                    </div>
                                                                </div>
                                                            `;

                messagesContainer.insertAdjacentHTML('afterbegin', html);
            }

            function handleBanned() {
                isBanned = true;
                if (banBanner) banBanner.classList.remove('d-none');
                if (chatFormContainer) chatFormContainer.classList.add('d-none');
            }

            function handleUnbanned() {
                isBanned = false;
                if (banBanner) banBanner.classList.add('d-none');
                if (chatFormContainer) chatFormContainer.classList.remove('d-none');
            }

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

            // Check for order_number in URL and pre-fill message
            // Check for order_number in URL and pre-fill message
            const urlParams = new URLSearchParams(window.location.search);
            const orderNumber = urlParams.get('order_number');

            function preFillOrder() {
                if (orderNumber && chatForm) {
                    const messageInput = chatForm.querySelector('[name="message"]');
                    if (messageInput) {
                        messageInput.value = `** Order: ${orderNumber} **\n\n`;
                        messageInput.focus();
                        // Trigger resize
                        messageInput.style.height = '';
                        messageInput.style.height = messageInput.scrollHeight + 'px';
                    }
                }
            }

            // Attempt immediately
            preFillOrder();

            // Attempt again after small delay to be safe
            setTimeout(preFillOrder, 300);
        });
    </script>
@endsection