@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="card shadow-sm">

        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0">Chat with {{ $receiver->name }}</h5>
                @if(!empty($courseId))
                    <small class="text-muted">Course ID: {{ $courseId }}</small>
                @endif
            </div>

            @if(auth()->user()->hasRole('teacher'))
                <a href="{{ route('teacher.chats.students', ['course_id' => $courseId]) }}"
                   class="btn btn-outline-secondary btn-sm">Back</a>
            @endif
        </div>

        <div id="chatBox" class="card-body" style="height:450px; overflow-y:auto; background:#f4f6f9;">
            {{-- ✅ Blade render + put data-id to track --}}
            @foreach($messages as $msg)
                <div class="mb-3 d-flex {{ (int)$msg->sender_id === (int)auth()->id() ? 'justify-content-end' : 'justify-content-start' }}"
                     data-msg-id="{{ $msg->id }}">
                    <div class="p-2 rounded shadow-sm {{ (int)$msg->sender_id === (int)auth()->id() ? 'bg-primary text-white' : 'bg-white border' }}"
                         style="max-width:65%; font-size:14px;">
                        <div style="white-space: pre-wrap;">{{ $msg->message }}</div>
                        <div class="small mt-1 {{ (int)$msg->sender_id === (int)auth()->id() ? 'text-white-50' : 'text-muted' }}">
                           {{ $msg->created_at->timezone('Asia/Karachi')->format('d M Y, H:i') }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="card-footer">
            <div id="chatAlert" class="alert alert-danger d-none py-2 mb-2"></div>

            <form id="chatForm">
                @csrf

                <input type="hidden" id="receiver_id" name="receiver_id" value="{{ $receiver->id }}">
                <input type="hidden" id="course_id" name="course_id" value="{{ $courseId ?? request()->query('course_id') }}">

                <div class="input-group">
                    <input type="text"
                           id="messageInput"
                           name="message"
                           class="form-control"
                           placeholder="Type message..."
                           autocomplete="off"
                           required>

                    <button class="btn btn-primary" id="sendBtn" type="submit">Send</button>
                </div>
            </form>
        </div>

    </div>
</div>
@endsection


@push('script')
<script>
(function () {
    const chatBox = document.getElementById('chatBox');
    const chatForm = document.getElementById('chatForm');
    const msgInput = document.getElementById('messageInput');
    const alertBox = document.getElementById('chatAlert');
    const sendBtn = document.getElementById('sendBtn');

    const receiverId = document.getElementById('receiver_id').value;
    const courseId = document.getElementById('course_id').value || '';
    const myId = {{ (int)auth()->id() }};

    // ✅ Track rendered message IDs to prevent duplicates
    const renderedIds = new Set();

    // ✅ Initialize lastId from Blade-rendered messages
    let lastId = {{ $messages->count() ? (int)$messages->last()->id : 0 }};

    // ✅ fill renderedIds from Blade DOM
    document.querySelectorAll('#chatBox [data-msg-id]').forEach(el => {
        renderedIds.add(parseInt(el.getAttribute('data-msg-id')));
    });

    function escapeHtml(str) {
        return String(str)
            .replaceAll('&','&amp;')
            .replaceAll('<','&lt;')
            .replaceAll('>','&gt;')
            .replaceAll('"','&quot;')
            .replaceAll("'","&#039;");
    }

    function scrollBottom() {
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    function showError(msg) {
        alertBox.textContent = msg || 'Something went wrong.';
        alertBox.classList.remove('d-none');
        setTimeout(() => alertBox.classList.add('d-none'), 3500);
    }

    function renderMessage(m) {
        const id = parseInt(m.id);

        // ✅ DUPLICATE GUARD
        if (renderedIds.has(id)) return;

        renderedIds.add(id);

        const isMe = parseInt(m.sender_id) === myId;

        const wrap = document.createElement('div');
        wrap.className = 'mb-3 d-flex ' + (isMe ? 'justify-content-end' : 'justify-content-start');
        wrap.setAttribute('data-msg-id', id);

        const bubble = document.createElement('div');
        bubble.className = 'p-2 rounded shadow-sm ' + (isMe ? 'bg-primary text-white' : 'bg-white border');
        bubble.style.maxWidth = '65%';
        bubble.style.fontSize = '14px';

        const text = document.createElement('div');
        text.style.whiteSpace = 'pre-wrap';
        text.innerHTML = escapeHtml(m.message);

        const time = document.createElement('div');
        time.className = 'small mt-1 ' + (isMe ? 'text-white-50' : 'text-muted');
       time.textContent = m.display_time || m.datetime || m.time || '';

        bubble.appendChild(text);
        bubble.appendChild(time);
        wrap.appendChild(bubble);

        chatBox.appendChild(wrap);

        // ✅ keep lastId updated
        lastId = Math.max(lastId, id);
    }

    async function fetchMessages() {
        try {
            const url = `{{ route('chats.conversation.messages', $receiver->id) }}?course_id=${encodeURIComponent(courseId)}&after_id=${encodeURIComponent(lastId)}`;

            const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!res.ok) return;

            const data = await res.json();
            if (!data.ok) return;

            const msgs = data.messages || [];
            if (msgs.length) {
                msgs.forEach(renderMessage);
                scrollBottom();
            }
        } catch (e) {
            // silent
        }
    }

    async function sendMessage(message) {
        try {
            sendBtn.disabled = true;

            const res = await fetch(`{{ route('chats.sendAjax') }}`, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    receiver_id: receiverId,
                    course_id: courseId || null,
                    message: message
                })
            });

            const data = await res.json().catch(() => null);

            if (!res.ok || !data || !data.ok) {
                showError((data && data.message) ? data.message : 'Message not sent.');
                return;
            }

            // ✅ render once + prevent duplication via renderedIds
            renderMessage(data.message);
            scrollBottom();
            msgInput.value = '';
            msgInput.focus();

        } catch (e) {
            showError('Network error.');
        } finally {
            sendBtn.disabled = false;
        }
    }

    chatForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const message = (msgInput.value || '').trim();
        if (!message) return;
        sendMessage(message);
    });

    document.addEventListener('DOMContentLoaded', function () {
        scrollBottom();

        // ✅ ONLY polling (NO initial full fetch)
        // setInterval(fetchMessages, 2000);
    });

})();
</script>
@endpush