@extends('layouts.main',['title'=>'Chat Summery'])

@section('content')
<div class="container">
    <h3>Chat with {{ $user->usDisplayname }}</h3>

    <div id="chat-box" style="max-height: 500px; overflow-y: auto; margin-bottom: 20px;"></div>

    <form id="chat-form" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="receiver_id" value="{{ $user->usID }}">
        <input type="hidden" name="receiver_type" value="user">
        <textarea
            name="message"
            id="message"
            class="form-control mb-3"
            placeholder="Type your message..."
            oninput="sendTypingEvent()"
        ></textarea>
        <div id="message-bottom"></div>
        <input type="file" name="attachment" id="attachment">
        <div class="mt-3 d-flex justify-content-end">
            <button class="btn btn-secondary" type="submit">Send</button>
        </div>
    </form>
</div>
@endsection

@section('script')
<script src="https://js.pusher.com/8.4/pusher.min.js"></script>
<!-- Laravel Echo (IIFE version for direct use) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.11.3/echo.iife.min.js"></script>

<script>
    function scrollToBottom() {
        const el = document.getElementById('chat-box');
        if (el) {
            el.scrollTo({
                top: el.scrollHeight,
                behavior: 'smooth',
            });
        }
    }

    window.addEventListener('load', scrollToBottom);

    // Echo needs to be assigned globally since we're using IIFE version
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: '{{ env("PUSHER_APP_KEY") }}',
        cluster: '{{ env("PUSHER_APP_CLUSTER") }}',
        forceTLS: true,
        authEndpoint: '/broadcasting/auth', // Laravel route for private channels
    });

    const userId = {{ $user->usID }};
    const memberId = {{ auth()->guard('member')->user()->id }};
    const chatBox = document.getElementById('chat-box');

    loadMessages();
    function loadMessages() {
        fetch(`/messages/${userId}`)
            .then(response => response.json())
            .then(data => {
                chatBox.innerHTML = '';
                data.forEach(msg => {
                    const filename = msg.cbmAttachment ? msg.cbmAttachment.split('/').pop() : '';
                    const div = document.createElement('div');
                    div.innerHTML = `
                        <div class="${msg.cbmSenderType === 'member' ? 'text-end' : 'text-start'}">
                            ${msg.cbmAttachment ? `<a href="/messages/download/${filename}" target="_blank">📎</a><br>` : ''}
                            <p>${msg.cbmMessage}</p>
                        </div>
                    `;
                    chatBox.appendChild(div);
                });
                chatBox.scrollTop = chatBox.scrollHeight;
            });
    }

    function sendMessage(e) {
        e.preventDefault();
        const form = document.getElementById('chat-form');
        const formData = new FormData(form);
        const sendBtn = form.querySelector('button[type="submit"]');
        const messageInput = form.querySelector('textarea[name="message"]');
        const attachmentInput = form.querySelector('input[name="attachment"]');

        // Reset any previous errors
        messageInput.classList.remove('is-invalid');
        attachmentInput.classList.remove('is-invalid');
        form.querySelectorAll('.invalid-feedback').forEach(el => el.remove());

        sendBtn.disabled = true;
        sendBtn.textContent = 'Sending...';

        fetch(`/messages`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
            }
        }).then(response => {
        sendBtn.disabled = false;
        sendBtn.textContent = 'Send';
        if (!response.ok) {
            return response.json().then(data => { throw data; });
        }
        return response.json();
    })
        .then(data => {
            form.reset();
            scrollToBottom();
            //loadMessages();
        })
        .catch(error => {
        if (error.errors) {
            // Handle and show Laravel validation errors
            if (error.errors.message) {
                messageInput.classList.add('is-invalid');
                const feedback = document.createElement('div');
                feedback.className = 'invalid-feedback';
                feedback.innerText = error.errors.message[0];
                messageInput.parentNode.appendChild(feedback);
            }

            if (error.errors.attachment) {
                attachmentInput.classList.add('is-invalid');
                const feedback = document.createElement('div');
                feedback.className = 'invalid-feedback';
                feedback.innerText = error.errors.attachment[0];
                attachmentInput.parentNode.appendChild(feedback);
            }
        }
    });
    }

    Echo.private(`chat.${memberId}`)
    .listen('MessageSent', (e) => {
        console.log(Echo.connector.pusher.connection.state)
        loadMessages();
        scrollToBottom(); 
    });

    let typingIndicator = null;
    Echo.private(`chat.${memberId}`)
    .listenForWhisper('typing', (e) => {
        console.log('Received typing whisper:', e); 
        showTypingIndicator(e.name);
    });

    function showTypingIndicator(name) {
        removeTypingIndicator();

        typingIndicator = document.createElement('div');
        typingIndicator.className = 'text-muted small mb-2';
        typingIndicator.innerText = `${name} is typing...`;
        document.getElementById('message-bottom').appendChild(typingIndicator);
        scrollToBottom();

        setTimeout(removeTypingIndicator, 3000);
    }
    function removeTypingIndicator() {
        if (typingIndicator) {
            document.getElementById('message-bottom').removeChild(typingIndicator);
            typingIndicator = null;
        }
    }

    let typingTimeout = null;
    function sendTypingEvent() {
        Echo.private(`chat.${memberId}`)
            .whisper('typing', {
                //user_id: memberId,
                name: '{{ auth()->guard("member")->user()->name }}'
            });

        // You can debounce or throttle this as needed
        console.log('input event');
    }

    document.getElementById('chat-form').addEventListener('submit', sendMessage);    
</script>
@endsection