@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/glightbox/css/glightbox.min.css') }}">
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">

    <style>
        .main-chat-area {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 140px);
            min-height: 500px;
            background-color: #f0f2f5;
            border-radius: 12px;
            border: 1px solid #eef0f7;
            overflow: hidden;
            position: relative;
        }

        .main-chat-head {
            flex: 0 0 auto;
            background: #fff;
            padding: 15px 20px;
            border-bottom: 1px solid #eaeaea;
            z-index: 10;
        }

        .chat-content {
            flex: 1 1 auto;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .chat-content::-webkit-scrollbar { width: 6px; }
        .chat-content::-webkit-scrollbar-track { background: transparent; }
        .chat-content::-webkit-scrollbar-thumb { background-color: #cfd5db; border-radius: 20px; }

        .chat-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .chat-day-label { 
            text-align: center; 
            margin: 15px 0; 
            width: 100%;
        }
        .chat-day-label span { 
            background: rgba(0,0,0,0.05); 
            padding: 4px 12px; 
            border-radius: 10px; 
            font-size: 12px; 
            color: #666; 
        }

        .chat-item {
            display: flex;
            align-items: flex-end;
            max-width: 80%;
            margin-bottom: 25px;
            position: relative;
        }

        .chat-item-start {
            align-self: flex-start;
            flex-direction: row;
        }
        
        .chat-item-end {
            align-self: flex-end;
            flex-direction: row-reverse;
        }

        .chat-bubble {
            padding: 12px 16px;
            position: relative;
            min-width: 120px;
            font-size: 14px;
            line-height: 1.5;
            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        }

        .chat-username {
            display: block;
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .chat-item-start .chat-bubble {
            background-color: #ffffff;
            border: 1px solid #eef0f7;
            color: #1f2937;
            border-radius: 12px 12px 12px 0;
            margin-left: 10px;
        }
        .chat-item-start .chat-username { color: #d6293e; } 
        .chat-item-start.is-admin-msg .chat-username { color: #6f42c1; } 

        .chat-item-end .chat-bubble {
            background-color: #4e3fff;
            color: #ffffff;
            border-radius: 12px 12px 0 12px;
            margin-right: 10px;
            text-align: left;
        }
        .chat-item-end .chat-username { color: rgba(255,255,255,0.9); text-align: right; }
        .chat-item-end .chat-meta { color: rgba(255,255,255,0.75); justify-content: flex-end; }

        .chat-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }

        .chat-img-wrapper img {
            max-width: 250px;
            max-height: 250px;
            border-radius: 8px;
            margin-top: 8px;
            border: 1px solid rgba(0,0,0,0.1);
            cursor: pointer;
        }

        .chat-actions {
            position: absolute;
            top: -10px;
            right: -10px;
            display: none; 
            gap: 5px;
            z-index: 10;
        }

        .chat-bubble:hover .chat-actions { display: flex; }

        .action-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #eaeaea;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.2s;
            font-size: 12px;
        }

        .delete-chat-btn { color: #ff4d4d; border-color: #ffcccc; }
        .delete-chat-btn:hover { background: #ff4d4d; color: #fff; }

        .reply-chat-btn { color: #4e3fff; border-color: #e0e0e0; }
        .reply-chat-btn:hover { background: #4e3fff; color: #fff; }


        .chat-footer {
            flex: 0 0 auto;
            background: #fff;
            padding: 12px 15px;
            border-top: 1px solid #eaeaea;
            display: flex;
            align-items: center;
            gap: 8px; 
        }
        
        .chat-message-space {
            border-radius: 24px;
            background-color: #f0f2f5;
            border: 1px solid transparent;
            padding: 10px 18px;
        }
        .chat-message-space:focus { background-color: #fff; box-shadow: 0 0 0 2px rgba(78, 63, 255, 0.1); }
        
        .fg-emoji-picker {
            width: 300px !important;
            max-width: 90vw !important;
            z-index: 9999 !important;
        }
    </style>
@endsection

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="auth-id" content="{{ auth()->check() ? auth()->id() : 0 }}" />

    <div class="row mt-2">
        <div class="col-xl-3 col-lg-4 d-none d-lg-block">
            <x-ui.card title="Chat Setting">
                <form action="{{ route('admin.chat.setting.update') }}" method="POST">
                    @csrf
                    <x-form.textarea tooltip="Enter words that you want to ban" col="col-xl-12"
                        label="Banned Words" name="banned_words" :required="true"
                        :value="$setting->banned_words" />

                    <x-form.textarea tooltip="Warning message for users"
                        col="col-xl-12" label="Warning Message" name="chat_warning_msg" :required="true"
                        :editor="true" :value="$setting->chat_warning_msg" />

                    <button type="submit" class="btn btn-primary mt-3 w-100">Save Settings</button>
                </form>
            </x-ui.card>
        </div>

        <div class="col-xl-8 col-lg-8">
            <div class="card shadow-none border">
                <div class="main-chat-area">
                    
                    <div class="main-chat-head d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-md online me-3">
                                <img src="{{ asset('build/assets/images/faces/6.jpg') }}" alt="img" class="rounded-circle">
                            </span>
                            <div>
                                <h6 class="mb-0 fw-bold">Global Chat</h6>
                                <small class="text-success"><i class="ri-record-circle-line align-middle"></i> Live</small>
                            </div>
                        </div>
                        <div>
                            <button type="button" class="btn btn-light text-danger btn-sm" id="btnDeleteChat" title="Clear History">
                                <i class="ri-delete-bin-line"></i> Clear Chat
                            </button>
                        </div>
                    </div>

                    <div class="chat-content" id="main-chat-content">
                        <ul id="chat-list" class="chat-list">
                            <li class="chat-day-label"><span>Loading messages...</span></li>
                        </ul>
                        
                        <button id="btnScrollBottom" class="btn btn-primary btn-sm rounded-circle shadow" 
                            style="display:none; position:absolute; right:20px; bottom:80px; width:40px; height:40px; z-index:20; border:none;">
                            <i class="ri-arrow-down-line"></i>
                        </button>
                    </div>

                    <div class="chat-footer">
                        <button class="btn btn-light btn-icon rounded-circle" id="btnAttach" title="Attach Image">
                            <i class="ri-image-add-line"></i>
                        </button>
                        <input type="file" id="fileInput" accept="image/*" style="display:none" />
                        
                        <button class="btn btn-light btn-icon rounded-circle" id="btnEmoji" title="Emoji">
                            <i class="ri-emotion-line"></i>
                        </button>

                        <input id="chatInput" class="form-control chat-message-space" placeholder="Type a message..." type="text" autocomplete="off">
                        
                        <button id="btnSend" class="btn btn-primary btn-icon rounded-circle">
                            <i class="ri-send-plane-fill"></i>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @include('layouts.components.common-script')

    <script src="{{ asset('build/assets/libs/fg-emoji-picker/fgEmojiPicker.js') }}"></script>
    <script src="{{ asset('build/assets/libs/glightbox/js/glightbox.min.js') }}"></script>

    <script>
        const ADMIN_FETCH_URL = "{{ route('admin.chat.fetch') }}";
        const ADMIN_SEND_URL = "{{ route('admin.chat.send') }}";
        const ADMIN_DELETE_CHAT_URL = "{{ route('admin.chat.deleteChat') }}";
        
        const CURRENT_USER_ID = Number($('meta[name="auth-id"]').attr('content'));
        
        const ADMIN_AVATAR = '{{ asset('build/assets/images/faces/6.jpg') }}';
        const CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        
        const POLL_INTERVAL_MS = 3000;
        const FETCH_PAGE_SIZE = 20;

        let lastId = 0;  
        let firstId = 0; 
        let pollTimer = null;
        let isFetchingOlder = false;

        function _escapeHtml(s) {
            if (s == null) return '';
            return String(s).replace(/[&<>"'`]/g, ch => ({ '&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','`': '&#96;'}[ch]));
        }

        function _fmtTime(iso) {
            try { var d = new Date(iso); return d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); } catch (e) { return iso; }
        }

        function toNumberIfPossible(v) { const n = Number(v); return isNaN(n) ? 0 : n; }

        function getAvatarUrl(avatar, isAdmin = false) {
            if (avatar && avatar.toString().startsWith('http')) return avatar;
            if (isAdmin) return avatar ? "{{ asset('uploads') }}/" + avatar : ADMIN_AVATAR;
            return avatar ? "{{ asset('uploads/user') }}/" + avatar : "{{ asset('build/assets/images/faces/6.jpg') }}";
        }

        function serverToClient(m) {
            const senderId = m.user ? m.user.id : (m.user_id || 0);
            const isMe = (Number(senderId) === CURRENT_USER_ID);
            const isAdmin = (m.user && m.user.is_admin == 1) || (m.is_admin == 1);

            return {
                id: m.id,
                user: {
                    id: senderId,
                    name: (m.user && m.user.name) || m.name || 'User',
                    avatar: (m.user && m.user.avatar) || m.avatar || null,
                    is_admin: isAdmin
                },
                message: m.message || null,
                image_url: m.image_url || m.image_path || null,
                created_at: m.created_at || m.datetime || (new Date().toISOString()),
                outgoing: isMe, 
                read: !!m.read
            };
        }

        function renderIncoming(msg) {
            var avatar = _escapeHtml(getAvatarUrl(msg.user.avatar, msg.user.is_admin));
            var name = _escapeHtml(msg.user.name);
            var text = _escapeHtml(msg.message || '');
            var time = _fmtTime(msg.created_at);
            
            var imgHtml = '';
            if(msg.image_url) {
                imgHtml = `<div class="chat-img-wrapper"><a href="/uploads/chat/${_escapeHtml(msg.image_url)}" class="glightbox">
                    <img src="/uploads/chat/${_escapeHtml(msg.image_url)}" alt="attachment">
                </a></div>`;
            }

            // Buttons: Reply & Delete
            return `
            <li class="chat-item chat-item-start" data-id="${msg.id}">
                <img class="chat-avatar" src="${avatar}" alt="img">
                <div class="chat-bubble">
                    <div class="chat-actions">
                        <button class="action-btn reply-chat-btn" title="Reply / Mention" onclick="mentionUser('${name}')">
                            <i class="ri-reply-fill"></i>
                        </button>
                        <button class="action-btn delete-chat-btn" title="Delete" onclick="deleteMessage('${msg.id}')">
                            <i class="ri-delete-bin-line"></i>
                        </button>
                    </div>

                    <span class="chat-username">${name}</span>
                    <div class="chat-text">${text}</div>
                    ${imgHtml}
                    <div class="chat-meta" style="display:flex; justify-content:flex-end; gap:5px; font-size:10px; opacity:0.6; margin-top:4px;">
                        ${time}
                    </div>
                </div>
            </li>`;
        }

        function renderOutgoing(msg) {
            var avatar = _escapeHtml(getAvatarUrl(msg.user.avatar, true));
            var text = _escapeHtml(msg.message || '');
            var time = _fmtTime(msg.created_at);
            var readIcon = msg.read ? '<i class="ri-check-double-line text-info"></i>' : '<i class="ri-check-line"></i>';

            var imgHtml = '';
            if(msg.image_url) {
                imgHtml = `<div class="chat-img-wrapper"><a href="/uploads/chat/${_escapeHtml(msg.image_url)}" class="glightbox">
                    <img src="/uploads/chat/${_escapeHtml(msg.image_url)}" alt="attachment">
                </a></div>`;
            }

            return `
            <li class="chat-item chat-item-end" data-id="${msg.id}">
                <img class="chat-avatar" src="${avatar}" alt="img">
                <div class="chat-bubble">
                    <div class="chat-actions">
                         <button class="action-btn delete-chat-btn" title="Delete" onclick="deleteMessage('${msg.id}')">
                            <i class="ri-delete-bin-line"></i>
                        </button>
                    </div>

                    <span class="chat-username">You</span>
                    <div class="chat-text">${text}</div>
                    ${imgHtml}
                    <div class="chat-meta">
                        <span>${time}</span> ${readIcon}
                    </div>
                </div>
            </li>`;
        }
        
        function mentionUser(name) {
            const input = $('#chatInput');
            const currentVal = input.val();
            const prefix = (currentVal.length > 0 && !currentVal.endsWith(' ')) ? ' ' : '';
            
            input.val(currentVal + prefix + '@' + name + ' ');
            input.focus();
        }

        function appendHtmlAndUpdateIds(html, scroll = true, specificId = null) {
            if (specificId && $(`li[data-id="${specificId}"]`).length > 0) return;
            
            $('#chat-list').append(html);
            
            const $last = $('#chat-list').find('li[data-id]').last();
            if ($last.length) {
                let newId = toNumberIfPossible($last.data('id'));
                if (newId > lastId) lastId = newId;
            }
            if (scroll) scrollToBottom(true);
            if(typeof GLightbox !== 'undefined') GLightbox({ selector: '.glightbox' });
        }

        function prependHtmlAndUpdateIds(html) {
            const container = document.getElementById('main-chat-content');
            const oldH = container.scrollHeight;
            const oldT = container.scrollTop;
            
            $('#chat-list').prepend(html);
            
            const $first = $('#chat-list').find('li[data-id]').first();
            if ($first.length) firstId = toNumberIfPossible($first.data('id'));
            
            container.scrollTop = oldT + (container.scrollHeight - oldH);
            if(typeof GLightbox !== 'undefined') GLightbox({ selector: '.glightbox' });
        }

        function scrollToBottom(force = true) {
            const el = document.getElementById('main-chat-content');
            if (!el) return;
            const nearBottom = (el.scrollHeight - el.scrollTop - el.clientHeight) < 300;
            if (force || nearBottom) {
                setTimeout(() => { el.scrollTop = el.scrollHeight; $('#btnScrollBottom').fadeOut(); }, 50);
            }
        }

        function loadInitial() {
            $.get(ADMIN_FETCH_URL, { limit: FETCH_PAGE_SIZE }).done(function(res) {
                const arr = res.messages || res.data || [];
                if (arr.length > 1 && Number(arr[0].id) > Number(arr[arr.length - 1].id)) arr.reverse();
                
                let html = '';
                arr.forEach(m => {
                    const msg = serverToClient(m);
                    html += msg.outgoing ? renderOutgoing(msg) : renderIncoming(msg);
                });
                
                $('#chat-list').html(html || '<li class="chat-day-label"><span>Today</span></li>');
                
                const $lis = $('#chat-list li[data-id]');
                if ($lis.length) {
                    firstId = toNumberIfPossible($lis.first().data('id'));
                    lastId = toNumberIfPossible($lis.last().data('id'));
                }
                
                setTimeout(() => scrollToBottom(true), 100);
                startPolling();
                if(typeof GLightbox !== 'undefined') GLightbox({ selector: '.glightbox' });
            });
        }

        function fetchNewOnce() {
            if (!lastId) return;
            $.get(ADMIN_FETCH_URL, { after_id: lastId }).done(function(res) {
                const arr = res.messages || res.data || [];
                if (!arr.length) return;
                if (arr.length > 1 && Number(arr[0].id) > Number(arr[arr.length - 1].id)) arr.reverse();
                
                arr.forEach(m => {
                    const msg = serverToClient(m);
                    if ($(`li[data-id="${msg.id}"]`).length === 0) {
                        appendHtmlAndUpdateIds(msg.outgoing ? renderOutgoing(msg) : renderIncoming(msg), true, msg.id);
                    }
                });
            });
        }

        function fetchOlder() {
            if (isFetchingOlder || !firstId) return;
            isFetchingOlder = true;
            $.get(ADMIN_FETCH_URL, { before_id: firstId, limit: FETCH_PAGE_SIZE }).done(function(res) {
                isFetchingOlder = false;
                const arr = res.messages || res.data || [];
                if (!arr.length) return;
                if (arr.length > 1 && Number(arr[0].id) > Number(arr[arr.length - 1].id)) arr.reverse();
                
                let html = '';
                arr.forEach(m => {
                    const msg = serverToClient(m);
                    if ($(`li[data-id="${msg.id}"]`).length === 0) {
                        html += msg.outgoing ? renderOutgoing(msg) : renderIncoming(msg);
                    }
                });
                if(html) prependHtmlAndUpdateIds(html);
            }).fail(() => { isFetchingOlder = false; });
        }

        function sendMessage(text, file) {
            const tempId = 'local-' + Date.now();
            
            const optMsg = {
                id: tempId,
                user: { id: CURRENT_USER_ID, name: 'You', avatar: ADMIN_AVATAR, is_admin: true },
                message: text,
                created_at: new Date().toISOString(),
                outgoing: true,
                image_url: file ? 'uploading' : null 
            };

            appendHtmlAndUpdateIds(renderOutgoing(optMsg), true);

            var fd = new FormData();
            fd.append('_token', CSRF_TOKEN);
            fd.append('message', text);
            if (file) fd.append('image', file);

            $.ajax({
                url: ADMIN_SEND_URL,
                method: 'POST',
                data: fd,
                contentType: false,
                processData: false
            }).done(function(resp) {
                $(`li[data-id="${tempId}"]`).remove();
                
                let savedMsg = null;
                if (resp.data && resp.data.id) savedMsg = resp.data;
                else if (resp.id) savedMsg = resp;
                else if (Array.isArray(resp.data)) savedMsg = resp.data[resp.data.length - 1];

                if (savedMsg) {
                    const msg = serverToClient(savedMsg);
                    appendHtmlAndUpdateIds(msg.outgoing ? renderOutgoing(msg) : renderIncoming(msg), true, msg.id);
                } else {
                    fetchNewOnce();
                }
            }).fail(function() {
                $(`li[data-id="${tempId}"]`).css('opacity', '0.5').attr('title', 'Failed to send');
            });
        }

        function deleteMessage(id) {
            if(confirm("Delete this message permanently?")) {
                $(`li[data-id="${id}"]`).fadeOut(200, function(){ $(this).remove(); });
                $.get('/admin/chat/delete-message/' + id);
            }
        }
        
        function deleteChat() {
            if(confirm("Are you sure you want to clear all chat history?")) {
                $.get(ADMIN_DELETE_CHAT_URL).done(function() {
                    $('#chat-list').html('<li class="chat-day-label"><span>Chat Cleared</span></li>');
                    lastId=0; firstId=0;
                });
            }
        }

        $(document).ready(function() {
            loadInitial();

            if (typeof FgEmojiPicker !== 'undefined') {
                new FgEmojiPicker({
                    trigger: ['#btnEmoji'],
                    dir: 'https://cdn.jsdelivr.net/npm/fg-emoji-picker@latest/', 
                    position: ['top', 'right'],
                    preFetch: true,
                    emit(obj) {
                        const input = document.getElementById('chatInput');
                        input.value += obj.emoji;
                        input.focus();
                    }
                });
            }
            
            const $fileInput = $('#fileInput');
            const $attachBtn = $('#btnAttach');
            const $chatInput = $('#chatInput');

            $attachBtn.on('click', () => $fileInput.trigger('click'));
            
            $fileInput.on('change', function() {
                if(this.files && this.files.length) {
                    $chatInput.attr('placeholder', '📷 Image Attached! Press Enter to send...');
                    $attachBtn.addClass('btn-success').removeClass('btn-light');
                    $chatInput.focus();
                }
            });

            
            $('#btnSend').on('click', function(e) {
                e.preventDefault();
                var txt = $chatInput.val().trim();
                var file = $fileInput[0].files[0];
                
                if (!txt && !file) return;

                $chatInput.val('').attr('placeholder', 'Type a message...');
                $attachBtn.removeClass('btn-success').addClass('btn-light');
                $fileInput.val('');
                
                sendMessage(txt, file);
            });

            $chatInput.on('keypress', function(e) {
                if (e.which === 13 && !e.shiftKey) {
                    e.preventDefault();
                    $('#btnSend').trigger('click');
                }
            });

            $('#main-chat-content').on('scroll', function() {
                if (this.scrollTop < 50) fetchOlder();
                if ((this.scrollHeight - this.scrollTop - this.clientHeight) > 300) $('#btnScrollBottom').fadeIn();
                else $('#btnScrollBottom').fadeOut();
            });
            
            $('#btnScrollBottom').on('click', () => scrollToBottom(true));
            $('#btnDeleteChat').on('click', deleteChat);
        });

        function startPolling() {
            if (pollTimer) clearInterval(pollTimer);
            pollTimer = setInterval(fetchNewOnce, POLL_INTERVAL_MS);
        }
    </script>
@endsection