@auth
@php
    $userActiveSession = \App\Models\ChatSession::where('user_id', auth()->id())->where('status', 'open')->first();
    $activeSessionId = $userActiveSession ? $userActiveSession->id : 0;
@endphp

<!-- সরাসরি চ্যাট পেজে যাওয়ার ড্র্যাগেবল বাটন -->
<div id="live-chat-bubble" style="position:fixed;bottom:90px;right:18px;z-index:99999;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ff5a00,#ff8c00);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,0.3);cursor:grab;touch-action:none;user-select:none;">
    <i class="fa-solid fa-comment-dots" style="font-size:22px;pointer-events:none;"></i>
    
    <!-- লাল বাতি / আনরিড ব্যাজ -->
    <span id="chat-unread-badge" style="display:none;position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;border-radius:10px;border:2px solid #fff;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(239,68,68,0.8);animation:pulseRed 1.2s infinite alternate;">
        0
    </span>
</div>

<style>
@keyframes pulseRed {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    100% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
</style>

<!-- Pusher CDN -->
<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>

<script>
(function() {
    const bubble = document.getElementById('live-chat-bubble');
    const badge = document.getElementById('chat-unread-badge');
    if(!bubble) return;

    // ইউজার যদি ইতিমধ্যে চ্যাট পেজেই থাকে তবে বাবল হাইড রাখা হবে
    const isInsideChat = window.location.pathname.includes('/chat');
    if (isInsideChat) {
        bubble.style.display = 'none';
        return;
    }

    let isDragging = false;
    let startX, startY;
    let initialX, initialY;
    let hasMoved = false;

    function onPointerDown(e) {
        isDragging = true;
        hasMoved = false;
        bubble.style.cursor = 'grabbing';

        const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
        const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;

        startX = clientX;
        startY = clientY;

        const rect = bubble.getBoundingClientRect();
        initialX = rect.left;
        initialY = rect.top;

        bubble.style.bottom = 'auto';
        bubble.style.right = 'auto';
        bubble.style.left = initialX + 'px';
        bubble.style.top = initialY + 'px';

        document.addEventListener('mousemove', onPointerMove);
        document.addEventListener('mouseup', onPointerUp);
        document.addEventListener('touchmove', onPointerMove, { passive: false });
        document.addEventListener('touchend', onPointerUp);
    }

    function onPointerMove(e) {
        if (!isDragging) return;

        const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
        const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;

        const dx = clientX - startX;
        const dy = clientY - startY;

        if (Math.abs(dx) > 6 || Math.abs(dy) > 6) {
            hasMoved = true;
            if(e.cancelable) e.preventDefault();
        }

        let newX = initialX + dx;
        let newY = initialY + dy;

        const maxX = window.innerWidth - bubble.offsetWidth;
        const maxY = window.innerHeight - bubble.offsetHeight;

        newX = Math.max(10, Math.min(newX, maxX - 10));
        newY = Math.max(10, Math.min(newY, maxY - 10));

        bubble.style.left = newX + 'px';
        bubble.style.top = newY + 'px';
    }

    function onPointerUp(e) {
        if (!isDragging) return;
        isDragging = false;
        bubble.style.cursor = 'grab';

        document.removeEventListener('mousemove', onPointerMove);
        document.removeEventListener('mouseup', onPointerUp);
        document.removeEventListener('touchmove', onPointerMove);
        document.removeEventListener('touchend', onPointerUp);

        if (!hasMoved) {
            window.location.href = "{{ route('user.chat.index') }}";
        }
    }

    bubble.addEventListener('mousedown', onPointerDown);
    bubble.addEventListener('touchstart', onPointerDown, { passive: false });

    function playMessengerNotificationSound() {
        try {
            const ctx = new (window.AudioContext || window.webkitAudioContext)();
            const now = ctx.currentTime;

            const osc1 = ctx.createOscillator();
            const gain1 = ctx.createGain();
            osc1.type = 'sine';
            osc1.frequency.setValueAtTime(740, now);
            gain1.gain.setValueAtTime(0.35, now);
            gain1.gain.exponentialRampToValueAtTime(0.01, now + 0.12);
            osc1.connect(gain1);
            gain1.connect(ctx.destination);
            osc1.start(now);
            osc1.stop(now + 0.12);

            const osc2 = ctx.createOscillator();
            const gain2 = ctx.createGain();
            osc2.type = 'sine';
            osc2.frequency.setValueAtTime(987.77, now + 0.10);
            gain2.gain.setValueAtTime(0.4, now + 0.10);
            gain2.gain.exponentialRampToValueAtTime(0.01, now + 0.35);
            osc2.connect(gain2);
            gain2.connect(ctx.destination);
            osc2.start(now + 0.10);
            osc2.stop(now + 0.35);
        } catch (e) {}
    }

    let currentUnread = 0;

    // প্রাথমিক আনরিড কাউন্ট লোড
    function fetchInitialUnread() {
        fetch("{{ route('user.chat.unread') }}")
        .then(res => res.json())
        .then(data => {
            currentUnread = parseInt(data.unread || 0);
            updateBadgeUI();
        })
        .catch(err => console.error(err));
    }

    function updateBadgeUI() {
        if (currentUnread > 0) {
            badge.innerText = currentUnread > 99 ? '99+' : currentUnread;
            badge.style.display = 'flex';
        } else {
            badge.style.display = 'none';
        }
    }

    fetchInitialUnread();

    // Pusher রিয়েল-টাইম লিসেনার
    const activeSessionId = "{{ $activeSessionId }}";
    const pusherKey = '{{ config("broadcasting.connections.pusher.key") ?? env("PUSHER_APP_KEY") }}';
    const pusherCluster = '{{ config("broadcasting.connections.pusher.options.cluster") ?? env("PUSHER_APP_CLUSTER", "ap2") }}';

    if (pusherKey && activeSessionId > 0) {
        if (Notification.permission !== "granted" && Notification.permission !== "denied") {
            Notification.requestPermission();
        }

        const pusher = new Pusher(pusherKey, {
            cluster: pusherCluster,
            forceTLS: true
        });

        const channel = pusher.subscribe('chat-channel-' + activeSessionId);

        channel.bind('new-message', function(data) {
            // অ্যাডমিন বা বট থেকে মেসেজ আসলে
            if (data.sender_type === 'admin' || data.sender_type === 'bot') {
                currentUnread++;
                updateBadgeUI();
                playMessengerNotificationSound();

                // ব্রাউজারের বাইরে বা অন্য ট্যাবে থাকলে সিস্টেম নোটিফিকেশন
                if (document.hidden && Notification.permission === "granted") {
                    const notif = new Notification("লাইভ চ্যাটে আপনার জন্য একটি নতুন মেসেজ রয়েছে", {
                        body: data.message || 'একটি নতুন ফাইল পাঠানো হয়েছে',
                        icon: '/assets/images/logo.png'
                    });

                    notif.onclick = function() {
                        window.focus();
                        window.location.href = "{{ route('user.chat.index') }}";
                    };
                }
            }
        });
    }
})();
</script>
@endauth