@extends('layout.app')
@section('title', 'Single Chat')

@section('style')
    <style>
        body {
            background-color: #f1f1f1;
        }

        .chat-wrapper {
            height: 80vh;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .chat-list {
            border-right: 1px solid #dee2e6;
            height: 100%;
            overflow-y: auto;
        }

        .chat-list-item {
            padding: 12px 15px;
            border-bottom: 1px solid #f1f1f1;
            cursor: pointer;
        }

        .chat-list-item:hover,
        .chat-list-item.active {
            background-color: #f8f9fa;
        }

        .chat-list-item img {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            object-fit: cover;
        }

        .chat-area {
            height: 100%;
            position: relative;
        }

        #chatBox, #emptyState {
            position: absolute;
            top: 70px;
            bottom: 60px;
            left: 0;
            right: 0;
            padding: 20px;
            overflow-y: auto;
            background-color: #f8f9fa;
            display: none;
        }

        .message {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 20px;
            margin-bottom: 10px;
        }

        .message.sent {
            background-color: #d1e7dd;
            margin-left: auto;
            text-align: right;
        }

        .message.received {
            background-color: #ffffff;
            margin-right: auto;
            text-align: left;
        }

        #chatInput {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px 20px;
            border-top: 1px solid #dee2e6;
            background-color: #fff;
            display: none;
        }

        #chatHeader {
            height: 70px;
        }
    </style>
@endsection

@section('main')
    <div class="container mt-3">

        <div class="row chat-wrapper">
            {{--<a href="{{ route('team-members-view') }}" class="btn btn-outline-secondary btn-sm mb-2">
                ← Back to Team Members
            </a>--}}
            <div class="col-md-5 col-lg-3 chat-list" id="chat-user-list"></div>

            <div class="col-md-7 col-lg-9 chat-area">
                <div class="border-bottom p-3 bg-white" id="chatHeader" style="display: none;">
                    <h5 class="mb-0" id="chatTitle">Chat</h5>
                    <small class="text-muted" id="chatStatus"></small>
                </div>

                <div class="chat-messages d-flex justify-content-center align-items-center flex-column text-center"
                     id="emptyState">
                    <h5 class="mt-3 text-muted">Select a conversation to start chatting.</h5>
                    <img src="{{ asset('assets/img/chat_bg.jpg') }}" alt="Empty Chat" width="100%"/>
                </div>

                <div class="chat-messages" id="chatBox"></div>

                <div class="chat-input" id="chatInput">
                    <form id="chat-form" class="d-flex">
                        <input type="text" id="chat-message" class="form-control me-2" placeholder="Type a message..." required>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            loadUserList();

            const urlParams = new URLSearchParams(window.location.search);
            const userIdFromUrl = urlParams.get('user_id');
            const userNameFromUrl = urlParams.get('user_name');

            if (userIdFromUrl && userNameFromUrl) {
                loadChat(userNameFromUrl, userIdFromUrl, true);
            } else {
                resetChatView();
            }
        });

        let currentUserId = {{ auth()->id() }};
        let currentChatUserId = null;
        let chatRefreshInterval = null;

        function loadUserList() {
            $.ajax({
                url: "{{ route('chat.users') }}",
                method: "GET",
                success: function (users) {
                    let list = $('#chat-user-list');
                    list.empty();

                    users.forEach(user => {
                        let status = user.is_online ? 'Online' : 'Last seen ' + user.last_seen_human;
                        let lastMessageSnippet = user.last_message ? user.last_message.substring(0, 30) + (user.last_message.length > 30 ? '...' : '') : 'No messages yet';
                        let image = user.image ?? '{{ asset("default-user.png") }}';
                        let activeClass = (currentChatUserId == user.id) ? 'active' : '';

                        list.append(`
                                <div class="chat-list-item ${activeClass}" data-user-id="${user.id}" data-user-name="${user.name}" onclick="loadChat('${user.name}', ${user.id}, true)">
                                    <div class="d-flex align-items-center">
                                        <img src="${image}" class="me-2" alt="${user.name}">
                                        <div class="flex-grow-1">
                                            <strong>${user.name}</strong><br>
                                            <small class="text-muted">${lastMessageSnippet}</small>
                                        </div>
                                        <small style="font-size: 0.75rem;" class="${user.is_online ? 'text-success' : 'text-muted'} ms-2">${status}</small>
                                    </div>
                                </div>
                            `);
                    });

                    if (currentChatUserId) {
                        $(`.chat-list-item[data-user-id="${currentChatUserId}"]`).addClass('active');
                    }
                }
            });
        }

        setInterval(loadUserList, 5000);

        function resetChatView() {
            $('#chatHeader, #chatBox, #chatInput').hide();
            $('#emptyState').show();
            currentChatUserId = null;
            clearInterval(chatRefreshInterval);
            $('.chat-list-item').removeClass('active');
        }

        function loadChat(name, userId, activateListItem = false) {
            currentChatUserId = userId;

            $('#chatTitle').text(name);
            $('#chatStatus').text(activateListItem);
            $('#emptyState').hide();
            $('#chatHeader, #chatBox, #chatInput').show();

            $('.chat-list-item').removeClass('active');
            if (activateListItem) {
                $(`.chat-list-item[data-user-id="${userId}"]`).addClass('active');
            }

            clearInterval(chatRefreshInterval);

            const fetchMessages = () => {
                $.ajax({
                    url: `/chat/messages/${userId}`,
                    method: 'GET',
                    success: function (messages) {
                        let chatBox = $('#chatBox');
                        let currentScrollHeight = chatBox[0].scrollHeight - chatBox[0].scrollTop;
                        let atBottom = chatBox[0].scrollHeight - chatBox[0].scrollTop === chatBox[0].clientHeight;

                        chatBox.html('');

                        messages.forEach(msg => {
                            let isSent = msg.sender_id == currentUserId;
                            let cls = isSent ? 'sent text-end' : 'received';

                            chatBox.append(`
                                    <div class="message ${cls}">
                                        ${msg.message}
                                        <div class="text-muted small mt-1">${msg.time}</div>
                                    </div>
                                `);
                        });

                        if (atBottom || messages.length === 0) {
                            chatBox.animate({ scrollTop: chatBox[0].scrollHeight }, 'fast');
                        } else if (chatBox[0].scrollHeight - chatBox[0].scrollTop < currentScrollHeight + 50) {
                            chatBox.animate({ scrollTop: chatBox[0].scrollHeight - currentScrollHeight }, 'fast');
                        }
                    }
                });
            };

            fetchMessages();
            chatRefreshInterval = setInterval(fetchMessages, 3000);
        }

        $('#chat-form').on('submit', function (e) {
            e.preventDefault();

            let message = $('#chat-message').val();
            if (!message.trim() || !currentChatUserId) return;

            $.ajax({
                url: `/chat/send`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    receiver_id: currentChatUserId,
                    message: message
                },
                success: function (data) {
                    $('#chat-message').val('');
                    loadChat($('#chatTitle').text(), data.receiver_id, true);
                },
                error: function(xhr, status, error) {
                    console.error("Error sending message:", error);
                }
            });
        });
    </script>
@endsection