@extends('layouts.admin')

@section('title', 'Live Chat Konsultasi Pelanggan')

@section('content')
    <!-- Main Chat Workspace Card -->
    <div class="glass-card pro-shadow rounded-[35px] overflow-hidden flex flex-col md:flex-row" style="height: calc(100vh - 200px); min-height: 550px;">
        
        <!-- Left Panel: Conversations List (1/3 Width) -->
        <div class="w-full md:w-80 border-r border-slate-100 flex flex-col bg-white">
            <!-- Header List -->
            <div class="p-6 border-b border-slate-50">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-heading font-bold text-base text-slate-800 flex items-center gap-2">
                        <i class="fas fa-comments text-amber-500"></i> Percakapan Aktif
                    </h3>
                    <span id="activeConvoBadge" class="bg-amber-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full border border-amber-600 hidden">0</span>
                </div>
                <!-- Search Input -->
                <div class="relative">
                    <input type="text" id="convoSearchInput" placeholder="Cari nama pelanggan..." 
                           class="w-full text-xs font-semibold pl-10 pr-4 py-3 rounded-2xl border border-slate-200 focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition-all bg-slate-50/50"
                           onkeyup="filterConversations()">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
                </div>
            </div>

            <!-- List of Customers -->
            <div class="flex-1 overflow-y-auto divide-y divide-slate-50" id="convoListFeed">
                <div class="text-center py-12 text-slate-400 text-xs font-semibold">
                    <i class="fas fa-spinner fa-spin text-amber-500 text-lg mb-2 block"></i>
                    Memuat percakapan...
                </div>
            </div>
        </div>

        <!-- Right Panel: Active Chat Feed (2/3 Width) -->
        <div class="flex-grow flex flex-col bg-slate-50/30" id="chatAreaContainer">
            <!-- Placeholder State when no chat is active -->
            <div class="flex-grow flex flex-col items-center justify-center text-center p-12 bg-white" id="chatPlaceholderState">
                <div class="w-20 h-20 bg-amber-50 rounded-[28px] border-2 border-dashed border-amber-200 flex items-center justify-center text-amber-500 text-3xl mb-6 shadow-sm animate-pulse">
                    <i class="far fa-comments"></i>
                </div>
                <h4 class="font-heading font-bold text-lg text-slate-800 mb-2">Pusat Layanan Live Chat</h4>
                <p class="text-xs text-slate-400 max-w-sm leading-relaxed font-medium">Pilih salah satu ruang obrolan pelanggan di sebelah kiri untuk mulai berkonsultasi mengenai produk secara real-time.</p>
            </div>

            <!-- Chat Active Feed View (Hidden by default) -->
            <div class="flex-grow flex flex-col hidden" id="chatActiveState">
                <!-- Chat Feed Header -->
                <div class="p-6 bg-white border-b border-slate-100 flex items-center justify-between shadow-sm">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-amber-500 rounded-full flex items-center justify-center text-white text-base font-bold shadow-md shadow-amber-500/20" id="activeConvoInitials">
                            CP
                        </div>
                        <div>
                            <h4 class="font-heading font-bold text-sm text-slate-800" id="activeConvoName">Nama Pelanggan</h4>
                            <p class="text-[10px] font-semibold text-slate-400 mt-0.5" id="activeConvoEmail">customer@email.com</p>
                        </div>
                    </div>
                    <div>
                        <span class="inline-flex items-center space-x-1.5 font-bold text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-100 text-[9px] uppercase tracking-wider">
                            <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full inline-block animate-ping"></span>
                            <span>Tersambung</span>
                        </span>
                    </div>
                </div>

                <!-- Scrollable Messages feed -->
                <div class="flex-grow overflow-y-auto p-6 flex flex-col gap-4" id="adminChatMessagesFeed" style="scroll-behavior: smooth;">
                    <!-- Message bubbles render here -->
                </div>

                <!-- Input area -->
                <div class="p-4 bg-white border-t border-slate-100 flex gap-4 items-center">
                    <input type="text" id="adminMessageInput" placeholder="Tulis balasan pesan di sini..." 
                           class="flex-grow text-xs font-semibold px-5 py-4 rounded-2xl border border-slate-200 focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition-all bg-slate-50/50"
                           onkeydown="if(event.key === 'Enter') sendAdminReply()">
                    <button onclick="sendAdminReply()" class="w-12 h-12 bg-amber-500 hover:bg-amber-600 text-white rounded-2xl flex items-center justify-center font-bold shadow-lg shadow-amber-500/20 transition-all">
                        <i class="fas fa-paper-plane text-sm"></i>
                    </button>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('extra_js')
    <script>
        // ─── State ────────────────────────────────────────────────────────────────
        let activeUserId      = null;
        let lastMessageId     = 0;      // last known message id for incremental fetch
        let rawConversations  = [];
        let convoTimer        = null;
        let msgTimer          = null;
        let isFetchingConvo   = false;  // debounce flag
        let isFetchingMsg     = false;  // debounce flag

        // Interval durations (ms)
        const CONVO_INTERVAL = 10000;  // refresh conversation list every 10 s
        const MSG_INTERVAL   = 4000;   // poll new messages every 4 s

        // ─── Bootstrap ────────────────────────────────────────────────────────────
        document.addEventListener('DOMContentLoaded', () => {
            loadConversations();
            convoTimer = setInterval(() => {
                if (document.visibilityState === 'visible') loadConversations();
            }, CONVO_INTERVAL);
        });

        // ─── Conversations ────────────────────────────────────────────────────────
        function loadConversations() {
            if (isFetchingConvo) return;  // skip if previous request still running
            isFetchingConvo = true;

            fetch('{{ route("admin.chat.conversations") }}')
                .then(r => r.json())
                .then(res => {
                    if (res.status === 'success' && res.data) {
                        rawConversations = res.data;
                        renderConversations(res.data);
                        syncUnreadBadge(res.data);
                    }
                })
                .catch(err => console.warn('loadConversations:', err))
                .finally(() => { isFetchingConvo = false; });
        }

        function renderConversations(list) {
            const feed = document.getElementById('convoListFeed');
            if (list.length === 0) {
                feed.innerHTML = `
                    <div class="text-center py-12 text-slate-400 text-xs font-medium px-4">
                        <i class="far fa-comment-dots text-2xl text-slate-200 mb-2 block"></i>
                        Belum ada obrolan aktif dari pelanggan.
                    </div>`;
                return;
            }

            let html = '';
            list.forEach(item => {
                const isActive    = activeUserId === item.user.id;
                const activeClass = isActive ? 'bg-amber-50/70 border-l-4 border-amber-500' : 'hover:bg-slate-50/50';
                const boldClass   = item.unread_count > 0 ? 'font-bold text-slate-900' : 'font-medium text-slate-700';
                const badge       = item.unread_count > 0
                    ? `<span class="bg-red-500 text-white text-[9px] font-extrabold px-2 py-0.5 rounded-full shadow-sm animate-pulse">${item.unread_count}</span>`
                    : '';

                html += `
                    <div onclick="selectConversation(${item.user.id})"
                         class="p-5 flex items-center gap-4 cursor-pointer transition-base border-l-4 border-transparent ${activeClass}">
                        <div class="w-10 h-10 bg-amber-500 text-white rounded-full flex items-center justify-center text-xs font-extrabold flex-shrink-0 shadow-sm">
                            ${item.user.initials}
                        </div>
                        <div class="flex-grow min-w-0">
                            <div class="flex justify-between items-baseline mb-1">
                                <h5 class="text-xs truncate ${boldClass}">${escapeHtml(item.user.name)}</h5>
                                <span class="text-[9px] text-slate-400 font-bold flex-shrink-0 ml-2">${item.time}</span>
                            </div>
                            <div class="flex justify-between items-center gap-2">
                                <p class="text-[10px] text-slate-400 truncate flex-grow font-semibold">${escapeHtml(item.latest_message || 'Obrolan baru')}</p>
                                ${badge}
                            </div>
                        </div>
                    </div>`;
            });
            feed.innerHTML = html;
        }

        function syncUnreadBadge(list) {
            const total = list.reduce((sum, item) => sum + item.unread_count, 0);
            ['activeConvoBadge', 'adminSidebarChatBadge'].forEach(id => {
                const el = document.getElementById(id);
                if (!el) return;
                el.innerText = total;
                el.classList.toggle('hidden', total === 0);
            });
        }

        // ─── Select Conversation ──────────────────────────────────────────────────
        function selectConversation(userId) {
            // Stop previous message timer
            if (msgTimer) { clearInterval(msgTimer); msgTimer = null; }

            activeUserId  = userId;
            lastMessageId = 0;   // reset so we load full history

            // Show chat area
            document.getElementById('chatPlaceholderState').classList.add('hidden');
            document.getElementById('chatActiveState').classList.remove('hidden');

            // Update header
            const convo = rawConversations.find(c => c.user.id === userId);
            if (convo) {
                document.getElementById('activeConvoInitials').innerText = convo.user.initials;
                document.getElementById('activeConvoName').innerText     = convo.user.name;
                document.getElementById('activeConvoEmail').innerText    = convo.user.email;
            }

            // Load full history, then start incremental polling
            loadFullHistory(userId);

            // Refresh conversation list (marks as read server-side via getMessages call above)
            loadConversations();

            // Start lightweight incremental poll
            msgTimer = setInterval(() => {
                if (activeUserId && document.visibilityState === 'visible') {
                    pollNewMessages();
                }
            }, MSG_INTERVAL);
        }

        // ─── Full history (called once when opening a conversation) ──────────────
        function loadFullHistory(userId) {
            if (isFetchingMsg) return;
            isFetchingMsg = true;

            fetch(`{{ url('/admin/chat/messages') }}/${userId}`)
                .then(r => r.json())
                .then(res => {
                    if (res.status === 'success') {
                        lastMessageId = res.last_id || 0;
                        renderMessages(res.data, true);
                    }
                })
                .catch(err => console.warn('loadFullHistory:', err))
                .finally(() => { isFetchingMsg = false; });
        }

        // ─── Incremental poll (called every MSG_INTERVAL) ─────────────────────────
        function pollNewMessages() {
            if (!activeUserId || isFetchingMsg) return;
            isFetchingMsg = true;

            fetch(`{{ url('/admin/chat/messages') }}/${activeUserId}/new?since_id=${lastMessageId}`)
                .then(r => r.json())
                .then(res => {
                    if (res.status === 'success' && res.data && res.data.length > 0) {
                        // Only append the new messages — no full re-render
                        appendMessages(res.data);
                        lastMessageId = res.last_id;
                    }
                })
                .catch(err => console.warn('pollNewMessages:', err))
                .finally(() => { isFetchingMsg = false; });
        }

        // ─── Render helpers ───────────────────────────────────────────────────────
        function renderMessages(messages, scrollDown) {
            const feed    = document.getElementById('adminChatMessagesFeed');
            feed.innerHTML = buildMessagesHtml(messages);
            if (scrollDown) feed.scrollTop = feed.scrollHeight;
        }

        function appendMessages(messages) {
            const feed    = document.getElementById('adminChatMessagesFeed');
            const atBottom = (feed.scrollHeight - feed.scrollTop - feed.clientHeight) < 60;

            // Determine last date shown to continue date dividers correctly
            const lastDivider = feed.querySelector('.msg-date-divider:last-of-type');
            let lastDate = lastDivider ? lastDivider.dataset.date : '';

            let html = '';
            messages.forEach(msg => {
                if (msg.date !== lastDate) {
                    html += `<div class="msg-date-divider text-center py-2" data-date="${msg.date}">
                        <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest bg-slate-100 px-3 py-1 rounded-full">${msg.date}</span>
                    </div>`;
                    lastDate = msg.date;
                }
                html += buildBubbleHtml(msg);
            });

            feed.insertAdjacentHTML('beforeend', html);
            if (atBottom) feed.scrollTop = feed.scrollHeight;
        }

        function buildMessagesHtml(messages) {
            let html = '';
            let lastDate = '';
            messages.forEach(msg => {
                if (msg.date !== lastDate) {
                    html += `<div class="msg-date-divider text-center py-2" data-date="${msg.date}">
                        <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest bg-slate-100 px-3 py-1 rounded-full">${msg.date}</span>
                    </div>`;
                    lastDate = msg.date;
                }
                html += buildBubbleHtml(msg);
            });
            return html;
        }

        function buildBubbleHtml(msg) {
            const bubbleClass   = msg.is_admin
                ? 'bg-amber-500 text-white rounded-br-none self-end'
                : 'bg-white text-slate-700 rounded-bl-none self-start border border-slate-100 shadow-sm';
            const timeColorClass = msg.is_admin ? 'text-amber-100' : 'text-slate-400';

            return `
                <div class="chat-msg-bubble p-4 rounded-3xl max-w-[70%] text-xs font-semibold leading-relaxed ${bubbleClass}" data-id="${msg.id}">
                    <div>${escapeHtml(msg.message)}</div>
                    <div class="chat-msg-time text-[9px] mt-2 font-bold text-right ${timeColorClass}">${msg.time}</div>
                </div>`;
        }

        // ─── Send Reply ───────────────────────────────────────────────────────────
        function sendAdminReply() {
            if (!activeUserId) return;
            const input   = document.getElementById('adminMessageInput');
            const message = input.value.trim();
            if (!message) return;

            input.value = '';
            input.focus();

            fetch(`{{ url('/admin/chat/send') }}/${activeUserId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ message })
            })
            .then(r => r.json())
            .then(res => {
                if (res.status === 'success') {
                    // Append the sent message instantly without waiting for the next poll
                    appendMessages([res.data]);
                    lastMessageId = res.last_id;
                }
            })
            .catch(err => console.warn('sendAdminReply:', err));
        }

        // ─── Search ───────────────────────────────────────────────────────────────
        function filterConversations() {
            const q = document.getElementById('convoSearchInput').value.toLowerCase();
            renderConversations(
                rawConversations.filter(item =>
                    item.user.name.toLowerCase().includes(q) ||
                    item.user.email.toLowerCase().includes(q)
                )
            );
        }

        // ─── Visibility handling ──────────────────────────────────────────────────
        document.addEventListener('visibilitychange', () => {
            if (document.visibilityState === 'hidden') {
                if (msgTimer)   { clearInterval(msgTimer);   msgTimer   = null; }
                if (convoTimer) { clearInterval(convoTimer); convoTimer = null; }
            } else {
                // Resume timers
                loadConversations();
                convoTimer = setInterval(() => {
                    if (document.visibilityState === 'visible') loadConversations();
                }, CONVO_INTERVAL);

                if (activeUserId) {
                    loadFullHistory(activeUserId);
                    msgTimer = setInterval(() => {
                        if (activeUserId) pollNewMessages();
                    }, MSG_INTERVAL);
                }
            }
        });

        // ─── Escape helper ────────────────────────────────────────────────────────
        function escapeHtml(text) {
            if (!text) return '';
            return String(text)
                .replace(/&/g,  '&amp;')
                .replace(/</g,  '&lt;')
                .replace(/>/g,  '&gt;')
                .replace(/"/g,  '&quot;')
                .replace(/'/g,  '&#039;');
        }
    </script>
@endsection