@extends('layouts.app')

@section('content')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
        <div>
            <h1 class="h3 mb-1">Team Chat</h1>
            <p class="text-muted mb-0">Message another user directly. Messages update automatically while this page is open.</p>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-12 col-xl-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body p-0">
                    <div class="px-3 py-3 border-bottom">
                        <input id="chatUserSearch" type="search" class="form-control form-control-sm" placeholder="Search users..." autocomplete="off">
                        <div class="small text-muted mt-2">Showing {{ $users->count() }} of up to 50 users.</div>
                    </div>
                    <div class="list-group list-group-flush" id="chatUserList">
                        @forelse($users as $user)
                            <a href="{{ route('chat.index', ['user' => $user->id]) }}"
                               data-username="{{ strtolower($user->name) }}"
                               class="list-group-item list-group-item-action d-flex justify-content-between align-items-center chat-user-item {{ $selectedUser && $selectedUser->id === $user->id ? 'active' : '' }}">
                                <span>{{ $user->name }}</span>
                                <div class="d-flex align-items-center gap-2">
                                    @if(isset($unreadCounts[$user->id]) && $unreadCounts[$user->id] > 0)
                                        <span class="badge bg-danger rounded-pill">{{ $unreadCounts[$user->id] }}</span>
                                    @endif
                                    @if($user->id !== auth()->id())
                                        <span class="badge bg-secondary rounded-pill">Message</span>
                                    @endif
                                </div>
                            </a>
                        @empty
                            <div class="p-4 text-center text-secondary">
                                No other users are available to chat with yet.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-8">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body d-flex flex-column" style="min-height: 560px;">
                    @if($selectedUser)
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h5 class="mb-0">Chat with {{ $selectedUser->name }}</h5>
                                <small class="text-muted">Direct one-to-one conversation</small>
                            </div>
                            <button id="refreshChat" type="button" class="btn btn-sm btn-outline-primary">Refresh</button>
                        </div>

                        <div id="chatMessages" class="flex-grow-1 overflow-auto p-3 mb-3 bg-light rounded-4 border" style="min-height: 320px; max-height: 520px;">
                            <div class="text-center text-secondary">Loading messages…</div>
                        </div>

                        <form id="chatForm" class="d-flex gap-2">
                            <input type="hidden" name="receiver_id" value="{{ $selectedUser->id }}">
                            <input id="chatMessageInput" name="message" type="text" class="form-control" placeholder="Write a message..." autocomplete="off">
                            <button id="sendMessageBtn" type="button" class="btn btn-primary">Send</button>
                        </form>
                    @else
                        <div class="d-flex align-items-center justify-content-center flex-column text-center flex-grow-1">
                            <div class="mb-3">
                                <span class="badge bg-secondary">No chat selected</span>
                            </div>
                            <h5 class="text-muted">Pick a user from the list to start messaging.</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if($selectedUser)
        <script>
            const selectedUser = @json($selectedUser);
            const authUserId = {{ auth()->id() }};
            const chatContainer = document.getElementById('chatMessages');
            const chatForm = document.getElementById('chatForm');
            const chatInput = document.getElementById('chatMessageInput');
            const refreshButton = document.getElementById('refreshChat');
            const userSearch = document.getElementById('chatUserSearch');
            const chatUserItems = document.querySelectorAll('.chat-user-item');
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            let pollingInterval = null;

            const formatDate = (value) => new Date(value).toLocaleString(undefined, {
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
            });

            const filterUsers = () => {
                if (!userSearch) {
                    return;
                }

                const query = userSearch.value.trim().toLowerCase();

                chatUserItems.forEach((item) => {
                    const username = item.dataset.username || '';

                    item.style.display = username.includes(query) ? '' : 'none';
                });
            };

            const renderMessages = (messages) => {
                if (!chatContainer) {
                    return;
                }

                if (messages.length === 0) {
                    chatContainer.innerHTML = '<div class="text-center text-secondary">No messages yet. Send the first message.</div>';
                    return;
                }

                chatContainer.innerHTML = messages.map((message) => {
                    const isOwner = message.sender_id === authUserId;
                    return `
                        <div class="d-flex ${isOwner ? 'justify-content-end' : 'justify-content-start'} mb-3">
                            <div class="p-3 rounded-4 ${isOwner ? 'bg-primary text-white' : 'bg-white text-dark border'}" style="max-width: 78%;">
                                <div class="small text-muted mb-2">${isOwner ? 'You' : message.sender.name} · ${formatDate(message.created_at)}</div>
                                <div>${message.message.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
                            </div>
                        </div>
                    `;
                }).join('');
                chatContainer.scrollTop = chatContainer.scrollHeight;
            };

            const fetchMessages = async () => {
                try {
                    const response = await fetch(`{{ url('/chat/messages') }}/${selectedUser.id}`);
                    const data = await response.json();
                    renderMessages(data.messages);
                } catch (error) {
                    console.error('Unable to load chat messages:', error);
                }
            };

            const sendMessage = async (event) => {
                if (event) {
                    event.preventDefault();
                    event.stopImmediatePropagation();
                }

                const message = chatInput.value.trim();

                if (message.length === 0) {
                    return;
                }

                const sendBtn = document.getElementById('sendMessageBtn');
                const originalText = sendBtn.textContent;
                sendBtn.disabled = true;
                sendBtn.textContent = 'Sending...';

                try {
                    const response = await fetch(`{{ route('chat.messages.store') }}`, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                        body: JSON.stringify({
                            receiver_id: selectedUser.id,
                            message,
                        }),
                    });

                    if (!response.ok) {
                        const body = await response.text();
                        console.error('Unable to send message:', response.status, body);
                        return;
                    }

                    chatInput.value = '';
                    await fetchMessages();
                } catch (error) {
                    console.error('Unable to send message:', error);
                } finally {
                    sendBtn.disabled = false;
                    sendBtn.textContent = originalText;
                }
            };

            document.addEventListener('DOMContentLoaded', () => {
                const sendBtn = document.getElementById('sendMessageBtn');
                if (sendBtn) {
                    sendBtn.addEventListener('click', sendMessage);
                }

                if (chatForm) {
                    chatForm.addEventListener('submit', sendMessage);
                }

                if (refreshButton) {
                    refreshButton.addEventListener('click', fetchMessages);
                }

                if (userSearch) {
                    userSearch.addEventListener('input', filterUsers);
                    filterUsers();
                }

                fetchMessages();
                pollingInterval = setInterval(fetchMessages, 3000);
            });
        </script>
    @endif
@endsection