@extends('front.layout.layout')

@section('title', 'My Chats')

@section('content')
    <section>
        <div class="container my-4">
            <div class="row">
                @if ($chatted_businesses->isNotEmpty())
                    <div class="col-lg-4 col-md-5">
                        <h4 class="main-title">My Chats</h4>
                        <div id="business-list" class="list-group">
                            @foreach ($chatted_businesses as $key => $business)
                                @php
                                    $bussinesCurrent = $business->business;
                                    $isOwner = $bussinesCurrent->user_id === $user->id;
                                    $displayName = $isOwner
                                        ? "{$business->sender?->first_name} {$business->sender?->last_name}"
                                        : $bussinesCurrent->name;

                                    $key = "{$business->business_id}_{$business->sender_id}";
                                    $unreadCount = $unreadMessages[$key] ?? 0;
                                @endphp

                                <div class="useravatar business-chat list-group-item d-flex justify-content-between align-items-center list-group-item-action cursor {{ $key == 0 && !Request::get('businessId') ? 'active' : '' }} {{ $business->business_id == Request::get('businessId') ? 'active' : '' }}"
                                    data-business-id="{{ $bussinesCurrent->id }}"
                                    data-business-name="{{ $bussinesCurrent->name }}"
                                    data-business-owner-id="{{ $bussinesCurrent->user_id }}"
                                    data-business-address="{{ $bussinesCurrent->address }}"
                                    data-sender-id="{{ $business->sender_id }}"
                                    data-business-avatar="{{ $bussinesCurrent->logo ? Storage::url($bussinesCurrent->logo) : '/frontend/assets/images/default.png' }}">
                                    <div class="left-side">
                                        <img src="{{ $bussinesCurrent->logo ? Storage::url($bussinesCurrent->logo) : '/frontend/assets/images/default.png' }}"
                                            alt="" class="rounded-circle" width="40" height="40">
                                        <span class="ms-2">{{ ucfirst($displayName) }}</span>
                                    </div>
                                    <div class="right-side">
                                        {{ $business->created_at->diffForHumans() }}
                                        @if ($unreadCount > 0)
                                            <span class="badge bg-info " style="font-size: .7rem">
                                                {{ $unreadCount }} Unread
                                            </span>
                                        @endif

                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    @if (!request()->get('businessId'))
                        <div class="text-info text-center p-4">No Chat Found</div>
                        <div class="row">
                            @forelse ($businesses as $biz)
                                <div class="col-md-4 mb-4">
                                    <x-vertical-card :biz="$biz" />
                                </div>
                            @empty
                                <p>No businesses found.</p>
                            @endforelse
                        </div>
                    @endif
                @endif


                @if ($currentBusiness)
                    <div class="col-lg-8 col-md-7">
                        <div class="chat-content">
                            <div class="chat-header d-flex justify-content-between align-items-center">
                                <div class="left-area">
                                    <h6 id="business-name" class="text-capitalize mb-0">
                                        {{ ucfirst($currentBusiness->name) }}
                                    </h6>
                                    <div id="business-address" class="text-capitalize">
                                        {{ $currentBusiness->address ?? '' }}
                                    </div>
                                </div>

                                @if ($currentBusiness && auth()->id() == $currentBusiness->user_id)
                                    <div class="zoom-meeting">
                                        Zoom <i class="fa-solid fa-phone"></i>
                                    </div>
                                @endif
                            </div>

                            <div class="chat-body">
                                <ul id="chatting-area" data-business-id="{{ $currentBusiness->id }}" class="chatting-area">
                                    @if ($messages->isNotEmpty())
                                        @php $lastDate = null; @endphp
                                        @foreach ($messages as $message)
                                            @php $messageDate = $message->created_at->format('l, d F'); @endphp
                                            @if ($lastDate !== $messageDate)
                                                <div class="date">{{ $messageDate }}</div>
                                                @php $lastDate = $messageDate; @endphp
                                            @endif

                                            <li class="{{ $message->sender_id == $user->id ? 'me' : 'you' }}"
                                                data-message-id="{{ $message->id }}">
                                                <figure>
                                                    <img src="{{ $message->sender->avatar ? Storage::url($message->sender->avatar) : asset('frontend/assets/images/default.png') }}"
                                                        alt="">
                                                </figure>
                                                <p>
                                                    <strong>
                                                        {{ $message->sender_id == $user->id ? 'You' : $message->sender->first_name . ' ' . $message->sender->last_name }}
                                                    </strong>

                                                    <br>
                                                    @if (str_starts_with($message->message, '<a'))
                                                        {!! $message->message !!}
                                                    @else
                                                        <span>{{ $message->message }}</span>
                                                    @endif

                                                    @if ($message->sender_id == $user->id)
                                                        <span
                                                            class="{{ $message->is_read ? 'double-tick' : 'single-tick' }}">
                                                            {!! $message->is_read ? '<span style="color:blue;">&#10004;&#10004;</span>' : '&#10004;' !!}
                                                        </span>
                                                    @endif
                                                    <span class="mt-2 text-end  timeStamp d-block">
                                                        {{ $message->created_at->setTimezone('Asia/Karachi')->format('g:i A') }}</span>
                                                </p>
                                            </li>
                                        @endforeach
                                    @else
                                        {{-- <li class="no-messages">No messages yet.</li> --}}
                                    @endif
                                </ul>
                            </div>

                            <div class="message-text-container">
                                @if ($currentBusiness)
                                    <form id="send-message-form">
                                        <input type="hidden" id="receiver-id"
                                            value="{{ $currentSender ? $currentSender->id : '' }}">
                                        <input type="hidden" id="business-id" value="{{ $currentBusiness->id }}">
                                        <div id="typing-indicator" style="display: none;">
                                            <img src="{{ asset('frontend/assets/images/typing-indicator.gif') }}"
                                                alt="">
                                        </div>
                                        <textarea rows="1" id="message-content" placeholder="Type your message..." class="form-control"></textarea>
                                        <button type="submit" id="send-message-btn" title="send" class="mt-2">
                                            <i class="fa-solid fa-circle-chevron-right"></i>
                                        </button>

                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection


@push('bottom-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"></script>
    <script>
        class ChatApplication {
            constructor() {
                 this.isMessageSending = false;
                this.userId = {{ auth()->id() }};
                this.receiverId = null;
                this.currentBusinessId = {{ $currentBusiness->id ?? 'null' }};
                this.currentReceiverId =
                    {{ $currentBusiness && $currentBusiness->user_id != auth()->id() ? $currentBusiness->user_id : 'null' }};
                this.userAvatar =
                    "{{ $user->avatar ? Storage::url($user->avatar) : '/frontend/assets/images/default.png' }}";
                this.csrfToken = '{{ csrf_token() }}';



                this.elements = {
                    zoomMeeting: document.querySelector('.zoom-meeting'),
                    messageContent: document.querySelector('#message-content'),
                    messageForm: document.querySelector('#send-message-form'),
                    receiverId: document.querySelector('#receiver-id'),
                    typingIndicator: document.querySelector('#typing-indicator'),
                    chatArea: document.querySelector('#chatting-area')
                };

                this.routes = {
                    createZoomMeeting: "{{ route('create.zoomMeeting') }}",
                    sendMessage: "{{ route('send.message') }}",
                    markRead: "{{ route('messages.read') }}",

                };
                this.messageId = null;
                this.lastReadTimestamp = Date.now();

                this.initializeAxios();
                this.init();
            }

            initializeAxios() {
                axios.defaults.headers.common['X-CSRF-TOKEN'] = this.csrfToken;
                axios.defaults.headers.common['Accept'] = 'application/json';
                axios.defaults.headers.post['Content-Type'] = 'application/json';

                axios.interceptors.response.use(
                    response => response,
                    error => {
                        console.error('API Error:', error.response?.data?.message || error.message);
                        return Promise.reject(error);
                    }
                );
            }

            init() {
                document.addEventListener('DOMContentLoaded', () => {
                    this.handleUrlParams();
                    this.setupEventListeners();
                    this.initializeWebSockets();

                });
            }


            handleUrlParams() {
                const urlParams = new URLSearchParams(window.location.search);
                const activeBusiness = urlParams.get('active_business');

                if (activeBusiness) {
                    this.currentBusinessId = activeBusiness;
                    const businessChat = document.querySelector(`.business-chat[data-business-id="${activeBusiness}"]`);
                    businessChat?.click();
                }
            }

            setupEventListeners() {
                if (this.elements.zoomMeeting) {
                    this.elements.zoomMeeting.addEventListener('click', (e) => this.handleZoomMeeting(e));
                }

                document.querySelectorAll('.business-chat').forEach(business => {
                    business.addEventListener('click', (e) => {
                        document.querySelectorAll('.business-chat').forEach(b => b.classList.remove(
                            'active'));

                        const clickedBusiness = e.target.closest('.business-chat');
                        clickedBusiness.classList.add('active');

                        const chattingArea = document.querySelector('.chatting-area');
                        if (chattingArea) {
                            chattingArea.scrollTop = chattingArea.scrollHeight;
                        }
                        this.handleBusinessChat(business);
                    })
                });

                if (this.elements.messageContent) {
                    this.elements.messageContent.addEventListener('keydown', (e) => this.handleMessageInput(e));
                }

                if (this.elements.messageForm) {
                    this.elements.messageForm.addEventListener('submit', (e) => this.handleMessageSubmit(e));
                }
            }

            initializeWebSockets() {
                this.setupTypingListener();
                this.setupChatListener();
                this.messageSeenListner();

            }

            async handleZoomMeeting(e) {
                e.preventDefault();
                const receiverId = this.elements.receiverId.value;
                try {
                    const {
                        data
                    } = await axios.post(this.routes.createZoomMeeting, {
                        business_id: this.currentBusinessId,
                        receiver_id: receiverId,
                        agenda: 'Optional meeting agenda'
                    });

                    if (data.redirect_url) {
                        window.location.href = data.redirect_url;
                    } else if (data.success) {
                        if (data.meeting) {
                            $('.zoom-meeting').html(
                                `<a href="${data.meeting.join_url}" target="_blank">Join Meeting <i class="fa-solid fa-phone"></i></a>`
                            );
                        } else {
                            $('.zoom-meeting').text('Join Meeting');
                        }
                    }

                } catch (error) {
                    console.error('Error creating Zoom meeting:', error.response?.data || error.message);
                }
            }

            handleBusinessChat(business) {
                this.currentBusinessId = business.dataset.businessId;
                this.receiverId = Number(business.dataset.senderId)
                this.updateBusinessInfo(business);
                this.fetchMessages();
            }

            updateBusinessInfo(business) {
                document.querySelector('#business-id').value = this.currentBusinessId;
                document.querySelector('#business-name').textContent = business.dataset.businessName;
                document.querySelector('#business-address').textContent = business.dataset.businessAddress;

                const businessOwnerId = business.dataset.businessOwnerId;
                this.currentReceiverId = businessOwnerId != this.userId ? businessOwnerId : '';
            }

            async fetchMessages() {
                try {
                    const {
                        data
                    } = await axios.get(`/fetch-messages/${this.currentBusinessId}/${this.receiverId}`);
                    this.updateChatArea(data.messages);
                } catch (error) {
                    console.error('Error fetching messages:', error.response?.data || error.message);
                }
            }

            updateChatArea(messages) {
                const chatArea = this.elements.chatArea;
                chatArea.setAttribute('data-business-id', this.currentBusinessId);
                chatArea.innerHTML = '';

                messages.forEach(message => {
                    this.elements.receiverId.value = message.sender_id;
                });

                this.addMessageToChat(messages);
                this.scrollToBottom(chatArea);
            }

            handleMessageInput(e) {
                this.sendTypingEvent();
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    if (!this.isMessageSending) {
                    this.elements.messageForm.querySelector('button[type="submit"]').click();
                    }
                }
            }

            async handleMessageSubmit(e) {
                e.preventDefault();
                const content = this.elements.messageContent.value;
                const receiverId = this.elements.receiverId.value;

                if (!content || this.isMessageSending) return;
                this.isMessageSending = true; // Set flag
                  // Get the button and icon
                const sendButton = document.getElementById('send-message-btn');
                const icon = sendButton.querySelector('i');
            
                // Change the icon to a spinner
                icon.classList.remove('fa-circle-chevron-right');
                icon.classList.add('fa-spinner', 'fa-spin');
                try {
                    const {
                        data
                    } = await axios.post(this.routes.sendMessage, {
                        business_id: this.currentBusinessId,
                        receiver_id: receiverId,
                        message: content
                    });

                    this.addMessageToChat(data.message);
                    this.elements.messageContent.value = '';
                } catch (error) {
                    console.error('Error sending message:', error.response?.data || error.message);
                } finally {
                    // Restore the original icon
                    icon.classList.remove('fa-spinner', 'fa-spin');
                    icon.classList.add('fa-circle-chevron-right');
                    this.isMessageSending = false; // Clear flag
                }
            }

            sendTypingEvent() {
                const receiverId = this.elements.receiverId.value;
                if (receiverId && receiverId !== 'null') {
                    Echo.private(`chat.${receiverId}`).whisper('typing', {
                        sender_id: this.userId,
                        business_id: this.currentBusinessId
                    });
                }
            }

            setupTypingListener() {
                Echo.private(`chat.${this.userId}`).listenForWhisper('typing', (e) => {
                    if (e.business_id == this.currentBusinessId) {
                        this.elements.typingIndicator.style.display = 'block';
                        setTimeout(() => {
                            this.elements.typingIndicator.style.display = 'none';
                        }, 3000);
                    }
                });
            }

            setupChatListener() {
                Echo.private(`chat.${this.userId}`).listen('MessageSent', (e) => {
                    const receiverId = this.elements.receiverId.value;
                    if (e.message.business_id == this.currentBusinessId && e.message.sender_id == receiverId &&
                        (e.message.sender_id == this.userId || e.message.receiver_id == this.userId)) {
                        this.addMessageToChat(e.message);
                    }
                });
            }

            messageSeenListner() {
                Echo.private(`chat.${this.userId}`).listen('MessageReadEvent', (event) => {

                    const messageElement = document.querySelector(`li[data-message-id="${event.messageId}"]`);

                    if (messageElement) {
                        const tickStatus = messageElement.querySelector('.tick-status');
                        if (tickStatus) {
                            tickStatus.classList.add('double-tick');
                            tickStatus.classList.remove('tick-status');
                            tickStatus.innerHTML =
                                '<span style="color:blue;">✔✔</span>';
                        } else {
                            console.warn('Tick status element not found within the message element.');
                        }
                    } else {
                        console.warn(`Message element not found for messageId: ${event.messageId}`);
                    }
                });
            }

            addMessageToChat(messages) {

                if (messages.length > 0) {
                    messages.forEach(message => {
                        const timeAgoText = this.timeFormatted(message.created_at);


                        const chatArea = document.querySelector(
                            `#chatting-area[data-business-id="${this.currentBusinessId}"]`);
                        if (!chatArea) return;

                        const messageElement = document.createElement('li');
                        messageElement.dataset.messageId = message.id;
                        const isUserSender = message.sender_id === this.userId;
                        messageElement.classList.add(isUserSender ? 'me' : 'you');

                        const avatarUrl = message.sender.avatar ? message.sender.avatar :
                            '/frontend/assets/images/default.png';
                        const tickStatus = isUserSender ? (message.is_read ?
                            '<span style="color:blue;">✔✔</span>' : '✓') : '';

                        messageElement.innerHTML = `
                                <figure><img src="${avatarUrl}" alt=""></figure>
                                <p>
                                  <strong>
                                            ${isUserSender ? 'You' : `${message.sender.first_name} ${message.sender.last_name}`}
                                        </strong>
                                        <br>
                                    ${message.message}
                                    ${isUserSender ? `<span class="tick-status">${tickStatus}</span>` : ""}
                                    <span class="mt-2 d-block text-end  timeStamp">${timeAgoText}</span>


                                </p>
                         `;

                        chatArea.appendChild(messageElement);
                        this.scrollToBottom(chatArea);
                        this.messageId = message.id;


                    })

                } else {
                    const timeAgoText = this.timeFormatted(messages.created_at);


                    const chatArea = document.querySelector(
                        `#chatting-area[data-business-id="${this.currentBusinessId}"]`);
                    if (!chatArea) return;

                    const messageElement = document.createElement('li');
                    messageElement.dataset.messageId = messages.id;
                    const isUserSender = messages.sender_id === this.userId;
                    messageElement.classList.add(isUserSender ? 'me' : 'you');

                    const avatarUrl = messages.sender.avatar ? messages.sender.avatar :
                        '/frontend/assets/images/default.png';
                    const tickStatus = isUserSender ? (messages.is_read ?
                        '<span style="color:blue;">✔✔</span>' : '✓') : '';

                    messageElement.innerHTML = `
                                <figure><img src="${avatarUrl}" alt=""></figure>
                                <p>
                                    <strong>${isUserSender ? 'You' : messages.sender.first_name}</strong><br>
                                    ${messages.message}
                                    ${isUserSender ? `<span class="tick-status">${tickStatus}</span>` : ""}
                                    <span class="mt-2 text-end d-block  timeStamp">${timeAgoText}</span>

                                </p>
                         `;

                    chatArea.appendChild(messageElement);
                    this.scrollToBottom(chatArea);
                    this.messageId = messages.id;

                    // this.seeMessage(messages.sender_id, messages.id);
                }

            }
            timeFormatted(timestamp) {
                const date = new Date(timestamp);

                const options = {
                    hour: 'numeric',
                    minute: '2-digit',
                    hour12: true,
                    timeZone: 'Asia/Karachi'
                };

                return date.toLocaleString('en-US', options);
            }


            async seeMessage(senderId, messageId) {
                try {
                    await axios.post(`/seen/message/`, {
                        sender_id: senderId,
                        id: messageId,
                    });
                } catch (error) {
                    console.error('Error marking message as seen:', error.message);
                }
            }


            scrollToBottom(element) {
                element.scrollTop = element.scrollHeight;
            }
        }

        new ChatApplication();
    </script>
@endpush