{{-- resources/views/admin/messages/index.blade.php --}}
@extends('layouts.app')


@section('title', 'Messages')

@section('content')
    @include('Partials.sidebar')

    <style>
        .msg-wrap {
            display: flex;
            height: calc(100vh - 140px);
            gap: 0;
            background: #0f172a;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .msg-sidebar {
            width: 320px;
            flex-shrink: 0;
            border-right: 1px solid rgba(255, 255, 255, 0.07);
            display: flex;
            flex-direction: column;
        }

        .msg-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .conv-item {
            display: flex;
            gap: 12px;
            padding: 14px 16px;
            cursor: pointer;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            transition: background .15s;
        }

        .conv-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .conv-item.active {
            background: rgba(201, 169, 110, 0.1);
            border-left: 3px solid #c9a96e;
        }

        .bubble-admin {
            background: linear-gradient(135deg, #c9a96e, #a07840);
            color: #000;
            border-radius: 16px 16px 2px 16px;
        }

        .bubble-user {
            background: rgba(255, 255, 255, 0.08);
            color: #e2e8f0;
            border-radius: 16px 16px 16px 2px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
    </style>

     <section class="main_content dashboard_part large_header_bg">

        @include('Partials.header')

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <div>
                        <h4 style="color:#bf9d63;font-weight:800;margin:0;">💬 Messages</h4>
                        <p style="color:#475569;font-size:13px;margin:4px 0 0;">
                            Conversations with users and brokers
                            @if($unreadTotal > 0)
                                <span
                                    style="background:#ef4444;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;margin-left:8px;">
                                    {{ $unreadTotal }} unread
                                </span>
                            @endif
                        </p>
                    </div>
                    <button onclick="showNewMessageForm()" style="padding:9px 20px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;
                                   background:linear-gradient(135deg,#c9a96e,#a07840);color:#fff;border:none;">
                        + New Message
                    </button>
                </div>

                <div class="msg-wrap">

                    {{-- ── Sidebar: conversation list ────────────────────────── --}}
                    <div class="msg-sidebar">
                        <div style="padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.07);">
                            <input type="text" id="conv-search" placeholder="Search conversations..."
                                oninput="filterConversations(this.value)" style="width:100%;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.06);
                                          border:1px solid rgba(255,255,255,0.1);color:#e2e8f0;font-size:13px;
                                          outline:none;box-sizing:border-box;">
                        </div>

                        <div id="conv-list" style="flex:1;overflow-y:auto;">
                            @forelse($conversations as $conv)
                                @php $u = $conv['user'];
                                $latest = $conv['latest']; @endphp
                                <div class="conv-item {{ request('user') == $u->id ? 'active' : '' }}"
                                    data-user-id="{{ $u->id }}" data-name="{{ $u->name }}"
                                    onclick="loadConversation({{ $u->id }}, '{{ addslashes($u->name) }}')">
                                    <div style="width:42px;height:42px;border-radius:50%;flex-shrink:0;
                                                    background:linear-gradient(135deg,#334155,#1e293b);
                                                    display:flex;align-items:center;justify-content:center;
                                                    font-size:16px;font-weight:800;color:#c9a96e;position:relative;">
                                        {{ strtoupper(substr($u->name, 0, 1)) }}
                                        @if($conv['unread'] > 0)
                                            <span style="position:absolute;top:-3px;right:-3px;width:16px;height:16px;
                                                                 border-radius:50%;background:#ef4444;border:2px solid #0f172a;
                                                                 font-size:9px;color:#fff;display:flex;align-items:center;
                                                                 justify-content:center;font-weight:800;">
                                                {{ $conv['unread'] > 9 ? '9+' : $conv['unread'] }}
                                            </span>
                                        @endif
                                    </div>
                                    <div style="flex:1;min-width:0;">
                                        <div
                                            style="display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;">
                                            <span style="font-size:13px;font-weight:{{ $conv['unread'] > 0 ? '700' : '600' }};
                                                             color:{{ $conv['unread'] > 0 ? '#e2e8f0' : '#94a3b8' }};">
                                                {{ $u->name }}
                                            </span>
                                            <span style="font-size:10px;color:#334155;">
                                                {{ $latest ? $latest->created_at->diffForHumans(null, true) : '' }}
                                            </span>
                                        </div>
                                        <div
                                            style="font-size:12px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                            {{ $latest ? ($latest->sender === 'admin' ? 'You: ' : '') . Str::limit($latest->message, 40) : 'No messages yet' }}
                                        </div>
                                        <div style="margin-top:3px;">
                                            <span
                                                style="font-size:10px;color:{{ $u->role === 'broker' ? '#c9a96e' : '#475569' }};
                                                             background:rgba(255,255,255,0.04);padding:1px 6px;border-radius:4px;">
                                                {{ ucfirst($u->role) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div style="text-align:center;padding:40px 20px;color:#475569;font-size:13px;">
                                    <div style="font-size:36px;margin-bottom:10px;">💬</div>
                                    No conversations yet
                                </div>
                            @endforelse
                        </div>
                    </div>

                    {{-- ── Main: message thread ─────────────────────────────── --}}
                    <div class="msg-main">

                        {{-- Empty state --}}
                        <div id="msg-empty" style="flex:1;display:flex;flex-direction:column;align-items:center;
                                                    justify-content:center;color:#475569;">
                            <div style="font-size:56px;margin-bottom:14px;">💬</div>
                            <div style="font-size:15px;font-weight:600;color:#64748b;margin-bottom:6px;">Select a
                                conversation</div>
                            <div style="font-size:13px;">or start a new message</div>
                            <button onclick="showNewMessageForm()" style="margin-top:20px;padding:9px 22px;border-radius:8px;cursor:pointer;
                                           font-size:13px;font-weight:700;
                                           background:linear-gradient(135deg,#c9a96e,#a07840);
                                           color:#000;border:none;">
                                + New Message
                            </button>
                        </div>

                        {{-- Thread view (hidden until conversation selected) --}}
                        <div id="msg-thread" style="display:none;flex-direction:column;height:100%;">

                            {{-- Thread header --}}
                            <div id="msg-thread-header" style="padding:14px 20px;border-bottom:1px solid rgba(255,255,255,0.07);
                                        display:flex;align-items:center;gap:12px;flex-shrink:0;
                                        background:rgba(255,255,255,0.02);">
                            </div>

                            {{-- Messages --}}
                            <div id="msg-thread-body" style="flex:1;overflow-y:auto;padding:20px;
                                        display:flex;flex-direction:column;gap:12px;">
                            </div>

                            {{-- Reply input --}}
                            <div style="padding:14px 20px;border-top:1px solid rgba(255,255,255,0.07);
                                        display:flex;gap:10px;align-items:flex-end;
                                        background:rgba(0,0,0,0.15);">
                                <textarea id="msg-reply-input" placeholder="Type your reply... (Enter to send)" rows="2"
                                    onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendReply();}"
                                    style="flex:1;padding:10px 14px;border-radius:12px;resize:none;
                                                 background:rgba(255,255,255,0.06);
                                                 border:1px solid rgba(255,255,255,0.1);
                                                 color:#e2e8f0;font-size:13px;outline:none;
                                                 font-family:inherit;line-height:1.5;">
                                </textarea>
                                <button onclick="sendReply()" style="padding:10px 22px;border-radius:10px;cursor:pointer;
                                               background:linear-gradient(135deg,#c9a96e,#a07840);
                                               color:#000;border:none;font-weight:700;font-size:13px;
                                               flex-shrink:0;">
                                    Send →
                                </button>
                            </div>
                        </div>

                        {{-- New message form (hidden by default) --}}
                        <div id="msg-new-form" style="display:none;flex-direction:column;height:100%;padding:30px;">
                            <h5 style="color:#e2e8f0;font-weight:700;margin-bottom:20px;">✉️ New Message</h5>

                            <div style="margin-bottom:14px;">
                                <label
                                    style="font-size:12px;color:#64748b;font-weight:600;
                                              text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px;">
                                    Send To *
                                </label>
                                <select id="new-msg-user-select" style="width:100%;padding:10px 14px;border-radius:8px;
                                               background:rgba(255,255,255,0.06);
                                               border:1px solid rgba(255,255,255,0.1);
                                               color:#e2e8f0;font-size:13px;outline:none;">
                                    <option value="">Select a user...</option>
                                    @foreach($users as $u)
                                        <option value="{{ $u->id }}">
                                            {{ $u->name }} — {{ $u->email }} ({{ ucfirst($u->role) }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div style="margin-bottom:14px;flex:1;display:flex;flex-direction:column;">
                                <label
                                    style="font-size:12px;color:#64748b;font-weight:600;
                                              text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px;">
                                    Message *
                                </label>
                                <textarea id="new-msg-body" placeholder="Type your message here..." style="flex:1;padding:12px 14px;border-radius:10px;resize:none;
                                                 background:rgba(255,255,255,0.06);
                                                 border:1px solid rgba(255,255,255,0.1);
                                                 color:#e2e8f0;font-size:13px;outline:none;
                                                 font-family:inherit;line-height:1.6;min-height:160px;">
                                </textarea>
                            </div>

                            <div style="display:flex;gap:10px;">
                                <button onclick="sendNewMessage()" style="flex:1;padding:11px;border-radius:8px;cursor:pointer;
                                               background:linear-gradient(135deg,#c9a96e,#a07840);
                                               color:#000;border:none;font-weight:700;font-size:14px;">
                                    Send Message
                                </button>
                                <button onclick="document.getElementById('msg-new-form').style.display='none';
                                                document.getElementById('msg-empty').style.display='flex';" style="padding:11px 20px;border-radius:8px;cursor:pointer;
                                               background:rgba(255,255,255,0.06);
                                               border:1px solid rgba(255,255,255,0.1);
                                               color:#64748b;font-size:13px;">
                                    Cancel
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
     </section>

         @include('Partials.footer')
@endsection
@push('scripts')
    <script>
        var activeUserId = null;
        var activeUserName = null;
        var pollTimer = null;
        var lastMsgId = null;
        var CSRF = document.querySelector('meta[name=csrf-token]')?.content || '';

        function apiFetch(url, opts) {
            return fetch(url, Object.assign({
                credentials: 'same-origin',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
            }, opts || {})).then(function (r) { return r.ok ? r.json() : null; }).catch(function () { return null; });
        }

        function timeAgo(dateStr) {
            var d = Date.now() - new Date(dateStr).getTime(), m = Math.floor(d / 60000);
            if (m < 1) return 'Just now';
            if (m < 60) return m + 'm ago';
            var h = Math.floor(m / 60);
            if (h < 24) return h + 'h ago';
            return Math.floor(h / 24) + 'd ago';
        }

        function loadConversation(userId, userName) {
            activeUserId = userId;
            activeUserName = userName;
            lastMsgId = null;

            // Update sidebar active state
            document.querySelectorAll('.conv-item').forEach(function (el) {
                el.classList.toggle('active', parseInt(el.dataset.userId) === parseInt(userId));
            });

            // Show thread, hide others
            document.getElementById('msg-empty').style.display = 'none';
            document.getElementById('msg-new-form').style.display = 'none';
            var thread = document.getElementById('msg-thread');
            thread.style.display = 'flex';

            // Set header
            document.getElementById('msg-thread-header').innerHTML =
                '<div style="width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#334155,#1e293b);' +
                'display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#c9a96e;">' +
                userName.charAt(0).toUpperCase() + '</div>' +
                '<div><div style="font-size:15px;font-weight:700;color:#e2e8f0;">' + userName + '</div>' +
                '<div style="font-size:12px;color:#22c55e;">Active now</div></div>';

            // Load messages
            var body = document.getElementById('msg-thread-body');
            body.innerHTML = '<div style="text-align:center;color:#475569;font-size:13px;padding:30px;">Loading...</div>';

            apiFetch('{{ url("admin/messages") }}/' + userId).then(function (data) {
                if (!data) { body.innerHTML = '<div style="text-align:center;color:#475569;padding:30px;">Failed to load messages.</div>'; return; }
                renderMessages(data.messages);
                if (data.messages.length > 0) lastMsgId = data.messages[data.messages.length - 1].id;
                scrollToBottom();
            });

            // Start polling for new messages every 8s
            if (pollTimer) clearInterval(pollTimer);
            pollTimer = setInterval(pollNewMessages, 8000);

            document.getElementById('msg-reply-input').focus();
        }

        // document.getElementById('msg-reply-input').addEventListener('input', function() {
        //     if (!activeUserId || !this.value.trim()) return;
        //     apiFetch('{{-- route("admin.messages.typing") --}}', {
        //         method: 'POST',
        //         headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
        //         body: JSON.stringify({ user_id: activeUserId }),
        //     });
        // });

        function renderMessages(messages) {
            var body = document.getElementById('msg-thread-body');
            if (!messages.length) {
                body.innerHTML = '<div style="text-align:center;color:#475569;font-size:13px;padding:40px;">No messages yet. Say hello! 👋</div>';
                return;
            }
            var html = '';
            messages.forEach(function (m) {
                var isAdmin = m.sender === 'admin';
                html += '<div style="display:flex;justify-content:' + (isAdmin ? 'flex-end' : 'flex-start') + ';align-items:flex-end;gap:8px;">';
                if (!isAdmin) {
                    html += '<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#334155,#1e293b);' +
                        'display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#94a3b8;flex-shrink:0;">' +
                        activeUserName.charAt(0).toUpperCase() + '</div>';
                }
                html += '<div style="max-width:70%;">';
                html += '<div class="' + (isAdmin ? 'bubble-admin' : 'bubble-user') + '" style="padding:10px 14px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;">' + escHtml(m.message) + '</div>';
                html += '<div style="font-size:10px;color:#334155;margin-top:3px;text-align:' + (isAdmin ? 'right' : 'left') + ';padding:0 4px;">' +
                    timeAgo(m.created_at) + (isAdmin ? ' ✓' : '') + '</div>';
                html += '</div></div>';
            });
            body.innerHTML = html;
        }

        function pollNewMessages() {
            if (!activeUserId) return;
            apiFetch('{{ url("admin/messages") }}/' + activeUserId + (lastMsgId ? '?after=' + lastMsgId : '')).then(function (data) {
                if (!data || !data.messages.length) return;
                var newMsgs = lastMsgId ? data.messages.filter(function (m) { return m.id > lastMsgId; }) : data.messages;
                if (!newMsgs.length) return;
                lastMsgId = newMsgs[newMsgs.length - 1].id;
                var body = document.getElementById('msg-thread-body');
                // Remove "no messages" placeholder if present
                if (body.innerHTML.includes('No messages yet')) body.innerHTML = '';
                newMsgs.forEach(function (m) {
                    var isAdmin = m.sender === 'admin';
                    var div = document.createElement('div');
                    div.style.cssText = 'display:flex;justify-content:' + (isAdmin ? 'flex-end' : 'flex-start') + ';align-items:flex-end;gap:8px;';
                    var inner = '';
                    if (!isAdmin) {
                        inner += '<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#334155,#1e293b);' +
                            'display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#94a3b8;flex-shrink:0;">' +
                            activeUserName.charAt(0).toUpperCase() + '</div>';
                    }
                    inner += '<div style="max-width:70%;"><div class="' + (isAdmin ? 'bubble-admin' : 'bubble-user') +
                        '" style="padding:10px 14px;font-size:13px;line-height:1.6;">' + escHtml(m.message) + '</div>' +
                        '<div style="font-size:10px;color:#334155;margin-top:3px;text-align:' + (isAdmin ? 'right' : 'left') + ';padding:0 4px;">' +
                        'Just now' + (isAdmin ? ' ✓' : '') + '</div></div>';
                    div.innerHTML = inner;
                    body.appendChild(div);
                });
                scrollToBottom();
            });
        }

        function sendReply() {
            if (!activeUserId) return;
            var input = document.getElementById('msg-reply-input');
            var message = input.value.trim();
            if (!message) return;

            input.value = '';
            input.disabled = true;

            apiFetch('{{ route("admin.messages.send") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ user_id: activeUserId, message: message }),
            }).then(function (data) {
                input.disabled = false;
                if (data) {
                    var body = document.getElementById('msg-thread-body');
                    if (body.innerHTML.includes('No messages yet')) body.innerHTML = '';
                    var div = document.createElement('div');
                    div.style.cssText = 'display:flex;justify-content:flex-end;align-items:flex-end;gap:8px;';
                    div.innerHTML = '<div style="max-width:70%;"><div class="bubble-admin" style="padding:10px 14px;font-size:13px;line-height:1.6;">' +
                        escHtml(message) + '</div>' +
                        '<div style="font-size:10px;color:#334155;margin-top:3px;text-align:right;padding:0 4px;">Just now ✓</div></div>';
                    body.appendChild(div);
                    scrollToBottom();
                    if (data.message) lastMsgId = data.message.id;
                    if (typeof toastr !== 'undefined') toastr.success('Message sent!');
                } else {
                    if (typeof toastr !== 'undefined') toastr.error('Failed to send. Try again.');
                }
            });
        }

        function sendNewMessage() {
            var userId = document.getElementById('new-msg-user-select').value;
            var message = document.getElementById('new-msg-body').value.trim();
            if (!userId || !message) {
                if (typeof toastr !== 'undefined') toastr.warning('Please select a user and enter a message.');
                return;
            }

            apiFetch('{{ route("admin.messages.send") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify({ user_id: userId, message: message }),
            }).then(function (data) {
                if (data) {
                    document.getElementById('new-msg-body').value = '';
                    document.getElementById('new-msg-user-select').value = '';
                    if (typeof toastr !== 'undefined') toastr.success('Message sent successfully!');
                    // Load the conversation we just messaged
                    var sel = document.getElementById('new-msg-user-select');
                    var name = sel.options[sel.selectedIndex]?.text.split(' —')[0] || 'User';
                    loadConversation(userId, name);
                    // Reload page after brief delay to update sidebar
                    setTimeout(function () { location.reload(); }, 1500);
                } else {
                    if (typeof toastr !== 'undefined') toastr.error('Failed to send.');
                }
            });
        }

        function showNewMessageForm() {
            if (pollTimer) clearInterval(pollTimer);
            activeUserId = null;
            document.getElementById('msg-empty').style.display = 'none';
            document.getElementById('msg-thread').style.display = 'none';
            document.getElementById('msg-new-form').style.display = 'flex';
            document.querySelectorAll('.conv-item').forEach(function (el) { el.classList.remove('active'); });
        }

        function filterConversations(q) {
            q = q.toLowerCase();
            document.querySelectorAll('.conv-item').forEach(function (el) {
                var name = (el.dataset.name || '').toLowerCase();
                el.style.display = name.includes(q) ? '' : 'none';
            });
        }

        function scrollToBottom() {
            var body = document.getElementById('msg-thread-body');
            if (body) body.scrollTop = body.scrollHeight;
        }

        // ── Admin typing signal ────────────────────────────────────────────────────
            var adminTypingDebounce = null;

            // document.getElementById('msg-reply-input').addEventListener('input', function () {
            //     if (!activeUserId || !this.value.trim()) return;

            //     // Debounce — only fire once per 2s while typing continuously
            //     clearTimeout(adminTypingDebounce);
            //     adminTypingDebounce = setTimeout(function () {
            //         apiFetch('{{-- route("admin.messages.typing") --}}', {
            //             method: 'POST',
            //             headers: { 'Content-Type': 'application/json' },
            //             body: JSON.stringify({ user_id: activeUserId }),
            //         });
            //     }, 200); // fire 200ms after keystroke
            // });

            document.addEventListener('DOMContentLoaded', function () {
                var replyInput = document.getElementById('msg-reply-input');
                if (!replyInput) return;

                var adminTypingDebounce = null;
                replyInput.addEventListener('input', function () {
                    if (!activeUserId || !this.value.trim()) return;
                    clearTimeout(adminTypingDebounce);
                    adminTypingDebounce = setTimeout(function () {
                        apiFetch('{{ route("admin.messages.typing") }}', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ user_id: activeUserId }),
                        });
                    }, 200);
                });
            });

        function escHtml(str) {
            return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }

        // Auto-open first conversation if URL has ?user=
        (function () {
            var params = new URLSearchParams(window.location.search);
            var uid = params.get('user');
            if (uid) {
                var el = document.querySelector('.conv-item[data-user-id="' + uid + '"]');
                if (el) el.click();
            }
        })();
    </script>

@endpush