@extends('layout')
<header>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
        .spinner {
          animation: spin 1s linear infinite;
        }
	 #threads-container {
            width: 30%;
        }
        #messages-container {
            width: 70%;
        }
	
	#info-message{
	  display: flex;
	}
	.thread-card{
	  padding: 1.25rem;
	}
    #main-container {
        padding: 1.5rem;
    }
    @media (min-width: 992px) and (max-width:1290px)  {
        #threads-container {
            width: 45%;
        }
        #messages-container {
            width: 55%;
        }
    }
        @media (max-width: 978px) {
           #main-container {
            flex-direction: column;
            padding: 0.625rem;
           }
           #threads-container, #messages-container {
             width: 100%;
           }
	   #threadsList{
	    
	    display: flex;
	    gap: 8px;
	    overflow-x: auto;
	    margin-top: 8px;
   	   }
	   .thread-card{
	     min-width: 300px;
	     padding: 0px;
	     margin: auto 0;
     	   }
	   #info-message{
 	     display: none;
	   }
        }

        </style>

</header>
@inject('carbon', 'Carbon\Carbon')
@php
    $showedTodayHeader = false;
    function getCommunicationChannelIconClass($channel)
    {
        switch ($channel) {
            case 'Readonly':
                return 'fas fa-comment';
            case 'Email':
                return 'fas fa-envelope';
            case 'Airbnb':
                return 'fa-brands fa-airbnb';
           
            case 'BookingCom':
                return 'fas fa-hotel';
           
            case 'Vrbo':
                return 'fas fa-home';
            case 'Expedia':
                return 'fas fa-plane';
            default:
                return 'fas fa-question-circle'; // Fallback icon
        }
    }
@endphp


@section('content')
    <div class=" page-header-light" style="border-radius: 0px;">
        <div class="d-flex justify-content-between align-items-center mx-3 my-2">
            <div class="d-flex flex-column tailwind-scope">
                <h4 class="text-white text-2xl font-bold mb-1">Clients & Engagement</h4>
                <p class="text-white text-sm">Messagerie</p>
            </div>
            @include('shared.navbar')
        </div>
    </div>

    <!-- Content area -->
    <div class="tailwind-scope  mb-8">
        <div id="main-container" class="flex gap-8 h-full">


            <div id="threads-container" class="bg-[#F7F7F7] h-100 overflow-y-scroll p-2 border-t border-[#F7F7F7] rounded-lg" style="max-height: 100vh;">
                <div class="flex flex-col items-center justify-start h-100">
                    <h2 class="text-[#1B4E4D] text-2xl font-bold mb-4">Messages</h2>
                    <div class="w-full max-w-sm min-w-[200px]">
                       
                          <input
                            class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-28 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
                            placeholder="Rechercher..."  id="searchInput"
                          />
                          
                       
                      </div>
                    <div id="threadsList" class="w-full">


                        @foreach ($threads as $index => $thread)
                            @php
                                $lastMessageDate = isset($thread['LastMessageDate']) ? $carbon::parse($thread['LastMessageDate']) : null;
                                $isToday = $lastMessageDate && $lastMessageDate->isToday();
                            @endphp
                            @if ($isToday && !$showedTodayHeader)
                                <div id="info-message" class="text-[#31b08f] text-center my-4 font-semibold">
                                    Messages du jour
                                </div>
                                @php $showedTodayHeader = true; @endphp
                            @endif
                            @if (!$isToday && $showedTodayHeader)
                            <div id="info-message" class="text-[#31b08f] text-center my-4 font-semibold">
                                Messages plus anciens
                            </div>
                            @php $showedTodayHeader = false; // Reset to avoid repeating header multiple times
                            @endphp
                            @endif
                            <div class="relative message-item thread-card bg-white p-3 rounded-lg shadow-md mb-4 w-full"
                                data-thread-index="{{ $index }}">
                                <div class="flex items-center gap-3 w-full">
                                    <i
                                        class="{{ getCommunicationChannelIconClass($thread['CommunicationChannel']) }} text-[#31b08f] text-2xl"></i>
                                    <div class="flex flex-col w-full mb-2">

                                        <div class="flex items-center justify-between ">

                                            <h3 class="text-lg font-semibold">{{ $thread['RecipientName'] }}</h3>
                                            <p class="text-gray-500">{{ $thread['ParentID'] }}</p>
                                        </div>
                                        <p class="text-gray-500">
                                            {{ $carbon::parse($thread['checkin'])->format('d M Y') }}-{{ $carbon::parse($thread['checkout'])->format('d M Y') }}
                                        </p>
                                        <p class="text-gray-700">{{ $thread['propertyName'] }}</p>


                                    </div>
                                    {{-- <p class="text-gray-500 text-sm mt-2">Sent on
                                        {{ $carbon::parse($thread['LastMessageDate'])->format('d M Y') }}
                                    </p> --}}
                                </div>
                                <p class="text-gray-700 font-semibold">{{ $thread['Preview'] }}</p>
                                {{-- Display unread count if available --}}
                                @if (isset($thread['NumberOfUnreadMessages']) && $thread['NumberOfUnreadMessages'] > 0)
                                    <span
                                        class="absolute bottom-2 right-2 bg-[#31b08f] text-white text-xs font-bold px-2 py-1 rounded-full">
                                        {{ $thread['NumberOfUnreadMessages'] }}</span>
                                @endif
                            </div>
                        @endforeach
                    </div>
                    @if (count($errors) > 0)
                        {{-- Display error messages if any threads failed to fetch --}}
                        <div class="alert alert-danger">
                            <strong>Certains messages n'ont pas pu être récupérés :</strong>
                            <ul>
                                @foreach ($errors as $error)
                                    <li>Reservation ID {{ $error['reservation_id'] }}: {{ $error['message'] }}</li>
                                @endforeach
                            </ul>
                            <p>Veuillez réessayer plus tard.</p>
                        </div>
                    @endif

                    {{-- @if ($threads->isEmpty())
                    <p class="text-white">No messages found.</p>
                    @endif --}}
                </div>

            </div>
            <div id="messages-container" class="bg-white flex flex-col  relative border rounded-lg shadow-sm" style="max-height: 100vh;">
                <div id="loading-spinner" class="hidden flex absolute inset-0 justify-center items-center">
                    <div class="w-8 h-8 border-4 border-[#31b08f] border-t-[#1B4E4D] rounded-full spinner"></div>
                </div>
                <div id="messagesContainer" class="flex-1 overflow-y-auto p-4">
                    <p class="text-gray-400 text-center mt-20">Sélectionnez une conversation</p>
                </div>
                <div class="p-4 border-t flex">
                    <input type="text" id="messageInput" placeholder="Entrer votre message..."
                        class="flex-1 p-2 rounded border mr-2" />
                    <button id="sendMessageBtn" class=" 
                        bg-[#31b08f] text-white px-4 py-2 rounded hover:bg-[#1B4E4D] transition duration-200 ease-in-out"
                        >Envoyer</button>
                  
                </div>
            </div>
        </div>
    </div>
    <script>
        //search functionality
        const searchInput = document.getElementById('searchInput');
        const messageItems = document.querySelectorAll('.message-item');

        searchInput.addEventListener('input', function () {
            const searchValue = this.value.toLowerCase();

            messageItems.forEach(item => {
                const text = item.innerText.toLowerCase();
                if (text.includes(searchValue)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });

        // Click event for message items
        const threads = @json($threads); // Laravel to JS
        const threadsList = document.getElementById('threadsList');
        const messagesContainer = document.getElementById('messagesContainer');
        const messageInput = document.getElementById('messageInput');
        const sendMessageBtn = document.getElementById('sendMessageBtn');
        let activeThreadIndex = null;

        threadsList.addEventListener('click', function (e) {
            const card = e.target.closest('.thread-card');
            if (!card) return;

            activeThreadIndex = card.dataset.threadIndex;
            console.log('Active thread index:', activeThreadIndex);
            const thread = threads[activeThreadIndex];
            console.log('Selected thread:', thread);
           

                loadThreadMessages(thread.ID, activeThreadIndex);
            
            if (thread.NumberOfUnreadMessages !== 0) {
                markThreadAsRead(thread.ID); // Mark thread as read when clicked
            }
        });

        function markThreadAsRead(threadId) {
            fetch(`/thread/${threadId}/mark-as-read`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Thread marked as read:', data);
                })
                .catch(error => {
                    console.error('Error marking thread as read:', error);
                });
        }

        function sendMessage(threadId, messageText) {
            sendMessageBtn.disabled = true;
            sendMessageBtn.innerText = 'Sending...';
            fetch(`/thread/${threadId}/send`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')

                },
                body: JSON.stringify({ message: messageText }),
            })
                .then(response => {
                    console.log('Response status:', response.status);  // Check the status code
                    return response.text();  // Read as text to check the full response
                })
                .then(responseText => {
                    console.log('Response body:', responseText);  // Log the response body (to see if it's HTML)
                    try {
                        const data = JSON.parse(responseText); 
                        console.log('Message sent:', data);
                        messageInput.value = '';  // Clear input field
                        loadThreadMessages(threadId, activeThreadIndex); // Reload messages
                    } catch (error) {
                        console.error('Error parsing JSON:', error);
                        alert('Failed to send message. Please try again.');
                    }
                })
                .catch(error => {
                    console.error('Error sending message:', error);
                    alert('Error sending message.');
                })
                .finally(() => {
                    // Re-enable button + reset text
                    sendMessageBtn.disabled = false;
                    sendMessageBtn.innerText = 'Send';
                });
        }
        function toggleLoadingSpinner(show) {
            const spinner = document.querySelector('#loading-spinner');
            if (spinner) {
                spinner.classList.toggle('hidden', !show);
            }
        }
        function loadThreadMessages(threadId, threadIndex) {
            toggleLoadingSpinner(true);
            fetch(`/thread/${threadId}/messages?messageLimit=8`) 
                .then(response => response.json())
                .then(messages => {
                    threads[threadIndex].messages = messages;
                    activeThreadIndex = threadIndex;
                    loadMessages(); 
                    toggleLoadingSpinner(false); 
                })
                .catch(error => {
                    console.error('Failed to load messages:', error);
                    toggleLoadingSpinner(false); 
                    alert('Error loading messages.');
                });
        }
        sendMessageBtn.addEventListener('click', function () {
            if (activeThreadIndex === null) return alert('Choisissez un message avant!.');
            const messageText = messageInput.value.trim();
            if (!messageText) return;
            const threadId = threads[activeThreadIndex].ID;
            sendMessage(threadId, messageText);


        });

        function loadMessages() {
            const messages = threads[activeThreadIndex].messages;
            messages.sort((a, b) => new Date(a.CreateDate) - new Date(b.CreateDate));
            messagesContainer.innerHTML = '';

            if (!messages || messages.length === 0) {
                messagesContainer.innerHTML = '<p class="text-gray-400 text-center mt-20">No messages in this thread.</p>';
                return;
            }
            const sendDate = threads[activeThreadIndex].LastMessageDate || '';
            const sendDateHTML = `
                <div class="text-gray-500 text-center mt-2 mb-4 font-semibold">
                    Envoyé le ${new Date(sendDate).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}
                </div>
            `;
            messagesContainer.insertAdjacentHTML('afterbegin', sendDateHTML);

            messages.forEach(msg => {
                const messageText = msg.Body || '';
                const isIncoming = msg.IsIncoming;
                const isCohostOrIncoming = isIncoming === true || msg.SenderType === 'Cohost';
                const alignment = isCohostOrIncoming ? 'items-start' : 'items-end';
                const bubbleColor = isCohostOrIncoming ? 'bg-gray-200 text-black' : 'bg-[#1B4E4D] text-white';

                const marginLeft = isIncoming ? 'mr-auto' : 'ml-auto';
                const senderName = msg.SenderName || 'Unknown';
                const messageHTML = `
                            <div class="flex ${alignment} mb-2">
                              <div class="p-2 rounded-lg max-w-xs ${bubbleColor} ${marginLeft} ">
                                  <p class="font-bold">${senderName}</p>
                                  <p class="text-sm">${messageText}</p>
                                    <p class="text-[10px] text-right mt-1 opacity-70">${new Date(msg.CreateDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</p>
                                </div>
                            </div>`;
                messagesContainer.insertAdjacentHTML('beforeend', messageHTML);
            });
           
            messagesContainer.scrollTop = messagesContainer.scrollHeight; // scroll to bottom
        }
    </script>
@endsection