@extends('organizations.layouts.default')
@section('title')
    / Details
@endsection
@section('content')
    <main class="u-min-h-screen">
        <div class="mx-auto h-[calc(100vh-80px)] max-w-screen-2xl p-4 md:p-6 2xl:p-10">
            <!-- Breadcrumb Start -->
            <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <h2 class="text-title-md2 font-bold text-black dark:text-white">
                    AI
                </h2>

                <nav>
                    <ol class="flex items-center gap-2">
                        <li>
                            <a class="font-medium" href="index.html">Dashboard /</a>
                        </li>
                        <li class="font-medium text-primary">AI</li>
                    </ol>
                </nav>
            </div>
            <!-- Breadcrumb End -->

            <div class="h-[calc(100vh-186px)] overflow-hidden sm:h-[calc(100vh-174px)]">
                <div
                    class="h-full rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark xl:flex">
                    <div class="flex h-full flex-col border-l border-stroke dark:border-strokedark w-full">
                        <!-- ====== Chat Box Start -->
                        <div
                            class="sticky flex items-center justify-between border-b border-stroke px-6 py-4.5 dark:border-strokedark">
                            <div class="flex items-center">
                                <div>
                                    <h5 class="font-medium text-black dark:text-white">
                                        TORNepal AI Chat
                                    </h5>
                                </div>
                            </div>
                        </div>
                        <div class="no-scrollbar max-h-[500px] space-y-3.5 overflow-auto px-6 py-7.5" id="chat-container">
                            <!-- Chat messages will be dynamically rendered here -->
                        </div>

                        <div
                            class="sticky bottom-0 border-t border-stroke bg-white px-6 py-5 dark:border-strokedark dark:bg-boxdark">
                            <form id="chat-form" action="{{ route('organization.ai.prompt') }}" method="POST"
                                class="flex items-center justify-between space-x-4.5">
                                @csrf
                                <div class="relative w-full">
                                    <input type="text" name="prompt" id="prompt-input" placeholder="Type something here"
                                        class="h-13 w-full rounded-md border border-stroke bg-gray pl-5 pr-19 font-medium text-black placeholder-body outline-none focus:border-primary dark:border-strokedark dark:bg-boxdark-2 dark:text-white">
                                </div>
                                <button type="submit"
                                    class="flex h-13 w-full max-w-13 items-center justify-center rounded-md bg-primary text-white hover:bg-opacity-90">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M22 2L11 13" stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round"></path>
                                        <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                        <!-- ====== Chat Box End -->
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Fetch chats from the server on page load
            function fetchChats() {
                fetch("{{ route('organization.ai.chats') }}", {
                        method: "GET",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        renderChats(data.model);
                        scrollToLastMessage();
                    })
                    .catch(error => console.error('Error fetching chats:', error));
            }

            // Function to replace \n and \t with HTML equivalent
            function formatMessage(message) {
                if (!message) return ''; // Return empty string if message is null or undefined
                return message
                    .replace(/\n/g, '<br>') // Replace \n with <br>
                    .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp'); // Replace \t with 4 non-breaking spaces
            }

            // Render chat messages dynamically
            function renderChats(chats) {
                const chatContainer = document.getElementById('chat-container');
                chatContainer.innerHTML = ''; // Clear previous content

                chats.forEach(chat => {
                    const humanMessage = `
                        <div class="ml-auto max-w-125">
                            <div class="mb-2.5 rounded-2xl rounded-br-none bg-primary px-5 py-3">
                                <p class="font-medium text-white">${formatMessage(chat.human_prompt)}</p>
                            </div>
                        </div>`;
                    const aiResponse = `
                        <div class="max-w-125">
                            <p class="mb-2.5 text-sm font-medium">AI</p>
                            <div class="mb-2.5 rounded-2xl rounded-tl-none bg-gray px-5 py-3 dark:bg-boxdark-2">
                                <p class="font-medium">${formatMessage(chat.ai_response)}</p>
                            </div>
                        </div>`;

                    chatContainer.insertAdjacentHTML('beforeend', humanMessage);
                    chatContainer.insertAdjacentHTML('beforeend', aiResponse);
                });
            }

            // Scroll to the last message
            function scrollToLastMessage() {
                const chatContainer = document.getElementById('chat-container');
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }

            // Handle form submission to send a new message
            const form = document.getElementById('chat-form');
            const sendButton = form.querySelector('button[type="submit"]');
            const loadingSpinner = document.createElement('div');
            loadingSpinner.innerHTML = `
                <div class="flex justify-center items-center">
                    <div class="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-primary"></div>
                </div>`;
            loadingSpinner.style.display = 'none'; // Initially hidden

            // Append the loading spinner right before the send button
            sendButton.parentNode.insertBefore(loadingSpinner, sendButton.nextSibling);

            form.addEventListener('submit', function(event) {
                event.preventDefault();
                const promptInput = document.getElementById('prompt-input');

                if (promptInput.value.trim() !== '') {
                    const formData = new FormData(form);

                    // Disable the button and show the loading spinner
                    sendButton.disabled = true;
                    loadingSpinner.style.display = 'block';

                    fetch(form.action, {
                            method: "POST",
                            body: formData,
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            fetchChats(); // Fetch new chats after submitting
                            promptInput.value = ''; // Clear input field
                            sendButton.disabled = false; // Re-enable the button
                            loadingSpinner.style.display = 'none'; // Hide the loading spinner
                        })
                        .catch(error => {
                            console.error('Error submitting prompt:', error);
                            sendButton.disabled = false; // Re-enable the button
                            loadingSpinner.style.display = 'none'; // Hide the loading spinner
                        });
                }
            });

            // Initial fetch on page load
            fetchChats();

            // Observe new messages and auto-scroll
            const observer = new MutationObserver(scrollToLastMessage);
            const chatContainer = document.getElementById('chat-container');
            observer.observe(chatContainer, {
                childList: true
            });
        });
    </script>
@endsection