{{-- resources/views/admin/messages/index.blade.php --}}

@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
                            @if(isset($currentTenant))
                            <span class="ml-2" style="color:#64748b;font-size:11px;">
                                • {{ $currentTenant->name ?? 'Tenant' }}
                            </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'];
                            $tenantParam = $tenantSlug ?? request()->route('tenant');
                            @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:rgb(0 0 0);
                                                   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')

<script>
    var activeUserId = null;
    var activeUserName = null;
    var pollTimer = null;
    var lastMsgId = null;
    var CSRF = document.querySelector('meta[name=csrf-token]')?.content || '';
    var tenantSlug = '{{ $tenantSlug ?? request()->route('tenant') }}';

    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 getApiUrl(endpoint, params) {
        var url = '/' + tenantSlug + '/admin/messages' + endpoint;
        if (params) {
            var query = new URLSearchParams(params).toString();
            if (query) url += '?' + query;
        }
        return url;
    }

    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(getApiUrl('/' + 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();
    }

    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;
        var url = getApiUrl('/' + activeUserId);
        if (lastMsgId) url += '?after=' + lastMsgId;
        apiFetch(url).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');
            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(getApiUrl('/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(getApiUrl('/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!');
                var sel = document.getElementById('new-msg-user-select');
                var name = sel.options[sel.selectedIndex]?.text.split(' —')[0] || 'User';
                loadConversation(userId, name);
                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;
    }

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

    // Typing indicator
    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(getApiUrl('/typing'), {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ user_id: activeUserId }),
                });
            }, 200);
        });
    });

    // 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>