@extends('layouts.index')
@section('title')
    AI
@endsection
@section('css')
    <style>
        :dark-mode {
            --text-color: #ffffff;
            --icon-color: #acacbe;
            --icon-hover-bg: #5b5e71;
            --placeholder-color: #cccccc;
            --outgoing-chat-bg: #343541;
            --incoming-chat-bg: #444654;
            --outgoing-chat-border: #343541;
            --incoming-chat-border: #444654;
        }

        :root {
            --text-color: #343541;
            --icon-color: #a9a9bc;
            --icon-hover-bg: #f1f1f3;
            --placeholder-color: #9f9f9f;
            --outgoing-chat-bg: #ffffff;
            --incoming-chat-bg: #f7f7f8;
            --outgoing-chat-border: #ffffff;
            --incoming-chat-border: #d9d9e3;
        }

        .chat-container {
            max-height: 100vh;
            padding-bottom: 150px;
            overflow-y: auto;
            background: var(--outgoing-chat-bg);
        }

        .default-text {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 70vh;
            padding: 0 10px;
            text-align: center;
            color: var(--text-color);
        }

        .default-text h1 {
            font-size: 3.3rem;
        }

        .typing-wrapper {
            align-self: flex-start;
            width: 100%;
        }

        .typing-wrapper p {
            font-size: 1.2em;
            color: #333;
            white-space: pre-wrap;
            overflow: hidden;
            text-align: left;
            margin: 10px auto;
            max-width: 75%;
        }

        :where(.chat-container, textarea)::-webkit-scrollbar {
            width: 6px;
        }

        :where(.chat-container, textarea)::-webkit-scrollbar-track {
            background: var(--incoming-chat-border);
            border-radius: 25px;
        }

        :where(.chat-container, textarea)::-webkit-scrollbar-thumb {
            background: var(--text-color);
            border-radius: 25px;
        }

        .chat-container .chat {
            color: var(--text-color);
            padding: 25px 10px;
            display: flex;
            justify-content: center;
        }

        .chat-container .chat.outgoing {
            background: var(--outgoing-chat-bg);
            /* border: 1px solid var(--outgoing-chat-border); */
        }

        .chat-container .chat.incoming {
            background: var(--incoming-chat-bg);
            /* border: 1px solid var(--incoming-chat-border); */
        }

        .chat .chat-content {
            display: flex;
            margin-left: 20px;
            max-width: 1200px;
            width: 100%;
            align-items: flex-start;
            justify-content: space-between;
        }

        .chat .chat-content-user {
            display: flex;
            margin-right: 30px;
            max-width: 1200px;
            width: 100%;
            align-items: flex-end;
            justify-content: flex-end;
        }

        .chat .chat-details-user {
            display: flex;
            align-items: center;
        }

        .chat .chat-details-user img {
            width: 33px;
            height: 33px;
            align-self: flex-start;
            object-fit: cover;
            border-radius: 2px;
        }

        .chat .chat-details-user p {
            white-space: pre-wrap;
            font-size: 1.05rem;
            padding: 0 25px 0 90px;
        }

        .chat .chat-content span {
            font-size: 1.3rem;
            color: var(--text-color);
            visibility: hidden;
            margin-right: 40px;
        }

        .chat:hover .chat-content:not(:has(.typing-animation, .error)) span {
            visibility: visible;
        }

        .chat .chat-details {
            display: flex;
            align-items: center;
            padding-left: 10px;
        }

        .chat .chat-details img {
            width: 30px;
            height: 30px;
            align-self: flex-start;
            object-fit: cover;
            border-radius: 2px;
        }

        .chat .chat-details p {
            white-space: pre-wrap;
            font-size: 1.05rem;
            padding: 0 50px 0 25px;
        }

        .chat .chat-details p.error {
            color: #2b2b2b;
            /* background: #15435A; */
        }

        span.material-symbols-rounded {
            user-select: none;
            cursor: pointer;
        }

        .typing-animation {
            display: inline-flex;
            padding-left: 25px;
        }

        .typing-animation .typing-dot {
            height: 7px;
            width: 7px;
            opacity: 0.7;
            margin: 0 3px;
            border-radius: 50%;
            background: var(--text-color);
            animation: animateDots 1.5s var(--delay) ease-in-out infinite;
        }

        @keyframes animateDots {

            0%,
            44% {
                transform: translateY(0px);
            }

            22% {
                opacity: 0.4;
                transform: translateY(-6px);
            }

            44% {
                opacity: 0.2;
            }
        }

        .typing-container {
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            padding: 20px 10px;
            left: 250px;
            width: calc(100% - 250px);
            justify-content: center;
            background: var(--outgoing-chat-bg);
            /* border: 1px solid var(--incoming-chat-border) */
        }

        .typing-container .typing-content {
            max-width: 950px;
            width: 100%;
            display: flex;
            align-items: flex-end;
        }

        .typing-content .typing-textarea {
            width: 100%;
            display: flex;
            position: relative;
        }

        .typing-textarea textarea {
            width: 100%;
            height: 55px;
            border: none;
            resize: none;
            margin-bottom: 10px;
            font-size: 1rem;
            max-height: 250px;
            overflow-y: auto;
            border-radius: 50px;
            box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
            color: var(--text-color);
            padding: 15px 45px 15px 20px;
            background: var(--incoming-chat-bg);
            /* outline: 1px solid var(--incoming-chat-border); */
        }

        .typing-textarea textarea::placeholder {
            color: var(--text-color);
        }

        .typing-textarea span {
            position: absolute;
            right: 0;
            bottom: 0;
            visibility: hidden;
        }

        .typing-textarea textarea:valid~span {
            visibility: visible;
        }

        .typing-content span {
            margin-bottom: 10px;
            height: 55px;
            width: 55px;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            color: var(--text-color);
        }

        .typing-control {
            display: flex;
        }

        .typing-control span {
            margin-left: 15px;
            font-size: 1.4rem;
            border-radius: 50px;
            background: var(--incoming-chat-bg);
            box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
            /* border: 1px solid var(--incoming-chat-border); */
        }

        .typing-control span:hover {
            background: var(--icon-hover-bg);
        }

        .sidebar {
            position: fixed;
            right: -250px;
            top: 0;
            height: 100%;
            width: 250px;
            background: #ffffff;
            color: #4c4c4c;
            box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
            transition: right 0.3s ease;
            padding: 20px;
            overflow-y: auto;
            z-index: 1000;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar ul li {
            margin: 15px 0;
        }

        .sidebar ul li a {
            color: #454545;
            text-decoration: none;
        }

        .sidebar ul li a:hover {
            text-decoration: underline;
        }

        .sidebar-toggle {
            position: fixed;
            /* bottom: 17%; */
            top: 10%;
            right: 25px;
            background: var(--incoming-chat-bg);
            box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
            padding: 10px 15px 10px 15px;
            font-size: 18px;
            /* background: #b4b4b436; */
            color: #8d8d8d;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            z-index: 1001;
            transition: background 0.3s ease;
        }

        .sidebar-toggle.active {
            font-size: 18px;
            background: var(--incoming-chat-bg);
            animation: moveRight 0.3s forwards;
        }

        .sidebar-toggle.inactive {
            font-size: 18px;
            background: var(--incoming-chat-bg);
            animation: moveLeft 0.3s forwards;
        }

        @keyframes moveRight {
            0% {
                right: 25px;
            }

            100% {
                right: 270px;
            }
        }

        @keyframes moveLeft {
            0% {
                right: 270px;
            }

            100% {
                right: 25px;
            }
        }

        .sidebar-toggle:hover {
            background: var(--icon-hover-bg);
        }

        .sidebar.active {
            right: 0;
        }

        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            overflow-x: auto;
        }

        code {
            background-color: #e8e8e8;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: monospace;
        }

        strong {
            font-weight: bold;
        }
    </style>
@endsection
@section('content')
    <div class="chat-container"></div>

    <div class="typing-container">
        <div class="typing-content">
            <div class="typing-textarea">
                <textarea name="prompt" id="chat-input" cols="30" rows="10" placeholder="Tanyakan kesulitan pekerjaan anda atau hal lain pada saya untuk memecahkan masalah" required></textarea>
                <span id="send-btn" class="material-symbols-rounded">send</span>
            </div>
            <div class="typing-control">
                {{-- <span id="theme-btn" class="material-symbols-rounded">light_mode</span> --}}
                <span id="delete-btn" class="material-symbols-rounded">delete</span>
            </div>
        </div>
    </div>

    <div class="sidebar" id="rightSidebar">
        <h3>Run Setting</h3>
        <ul>
            <label for="Model" class="form-label">Model Pengetahuan</label>
            <select class="form-select" name="model" id="Model">
                <option selected>UID Global</option>
                <option value="UID Internal">UID Internal</option>
            </select>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul>
    </div>

    {{-- <button class="sidebar-toggle" id="sidebarToggle">☰</button> --}}
    @php
        $auth = Auth::user();
        $id = $auth->id;
        $name = $auth->name;

        $path = isset(Auth::user()->pegawai)
            ? asset(Auth::user()->pegawai->foto)
            : 'https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80';
        if (Storage::exists(Auth::user()->photos)) {
            $path = Storage::url(Auth::user()->photos);
        }
    @endphp
@endsection
@section('js')
    <script>
        const chatInput = document.querySelector("#chat-input");
        const sendButton = document.querySelector("#send-btn");
        const chatContainer = document.querySelector(".chat-container");
        const deleteButton = document.querySelector("#delete-btn");

        let userText = null;
        const API_KEY =
            "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";
        const initialHeight = chatInput.scrollHeight;

        const loadDataFromLocalstorage = () => {
            const defaultText = `<div class="default-text">
                                    <div class="d-flex">
                                        <img src="{{ asset('back/ai/ai-robot.png') }}" style="margin-right: 30px;" width="100px" height="100px" alt="Robot AI">
                                        <img src="{{ asset('back/ai/robot-ai-tf.png') }}" width="200px" height="200px" alt="Robot AI">
                                        <img src="{{ asset('back/ai/ai.png') }}" style="margin-left: 30px;" width="100px" height="100px" alt="Robot AI">
                                    </div>
                                    <div class="typing-wrapper">
                                        <p id="typingText"></p>
                                    </div>
                                </div>`;

            const formatApiResponse = (responseText) => {
                const formattedText = responseText
                    .replace(/```([\s\S]*?)```/g, '<code>$1</code>')
                    .replace(/`([^`]+)`/g, '<code>$1</code>')
                .replace(/\*\*([^\*]+)\*\*/g, '<strong>$1</strong>')
                .replace(/^\* /gm, '• ')
                .replace(/\*([^\*]+)\*/g, '<strong>$1</strong>');
            return formattedText;
        };

        let content = localStorage.getItem("all-chats") || defaultText;
        chatContainer.innerHTML = formatApiResponse(content);
        chatContainer.scrollTo(0, chatContainer.scrollHeight);
        console.log(chatContainer.innerHTML);
    };

    loadDataFromLocalstorage();

    const createElement = (html, className) => {
        const chatDiv = document.createElement("div");
        chatDiv.classList.add("chat", className);
        chatDiv.innerHTML = html;
        return chatDiv;
    }

    const getChatResponse = async (incomingChatDiv) => {
        const API_URL =
            "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent";
        const API_KEY = "AIzaSyDOR_GJ6b8nAPVwbAaL-APJTN-GkA8xR6U";
        const pElement = document.createElement("p");
        const chatDetails = incomingChatDiv.querySelector(".chat-details");
        chatDetails.appendChild(pElement);

        const requestBody = {
            contents: [{
                parts: [{
                    text: userText
                }]
            }]
        };

        try {
            const response = await fetch(`${API_URL}?key=${API_KEY}`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(requestBody)
            });

            const data = await response.json();
            // console.log("Full response data:", data);

            if (response.ok) {
                const responseAI = data.candidates[0].content.parts[0].text.trim();
                // console.log(responseAI);

                typeWriterEffect(pElement, responseAI, 1, () => {
                    localStorage.setItem("all-chats", chatContainer.innerHTML);
                    // console.log("Chat stored in localStorage after typing animation");

                    const formattedResponse = formatApiResponse(responseAI);
                    pElement.innerHTML = formattedResponse;

                    const encodedResponse = encodeURIComponent(chatContainer.innerHTML);

                    fetch('/store-response', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                    .getAttribute('content')
                            },
                            body: JSON.stringify({
                                content: encodedResponse,
                                aitext: responseAI,
                                usertext: userText
                            })
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Failed to send data to Laravel');
                            }
                            return response.json();
                        })
                        .then(data => {
                            
                            const decodedResponse = decodeURIComponent(data.content);
                            pElement.innerHTML = formattedResponse;
                            console.log('Response from Laravel:', data);
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                });
            } else {
                pElement.classList.add("error");
                pElement.textContent =
                    "Oops! Something went wrong while retrieving the response. Please try again.";
                console.error("API Error:", data);
            }
        } catch (error) {
            console.error("Fetch error:", error);
            pElement.classList.add("error");
            const ResponError = "Maaf, ada kesalahan saat menghubungkan ke jaringan.";
            typeWriterEffect(pElement, ResponError, 1, () => {
                
                localStorage.setItem("all-chats", chatContainer.innerHTML);
                console.log("Chat stored in localStorage after typing animation");

                const formattedResponse = formatApiResponse(ResponError);
                pElement.innerHTML = formattedResponse;
            });
        }

        incomingChatDiv.querySelector(".typing-animation").remove();
        chatContainer.scrollTo(0, chatContainer.scrollHeight);
        // localStorage.setItem("all-chats", chatContainer.innerHTML);
    };

    const formatApiResponse = (responseText) => {
        const formattedText = responseText
            .replace(/```([\s\S]*?)```/g, '<code>$1</code>')
            .replace(/`([^`]+)`/g, '<code>$1</code>')
                .replace(/\*\*([^\*]+)\*\*/g, '<strong>$1</strong>')
                .replace(/^\* /gm, '• ')
                .replace(/\*([^\*]+)\*/g, '<strong>$1</strong>');
            return formattedText;
        };

        const typeWriterEffect = (element, text, speed = 1, callback) => {
            let index = 0;

            function typeCharacter() {
                if (index < text.length) {
                    element.textContent += text.charAt(index);
                    index++;
                    setTimeout(typeCharacter, speed);
                } else if (callback) {
                    callback();
                }
            }

            typeCharacter();
        };

        const copyResponse = (copyBtn) => {
            const responseTextElement = copyBtn.parentElement.querySelector("p");
            navigator.clipboard.writeText(responseTextElement.textContent);
            copyBtn.textContent = "done";
            setTimeout(() => (copyBtn.textContent = "content_copy"), 1000);
        };
        loadDataFromLocalstorage();

        const showTypingAnimation = () => {
            const html = `<div class="chat-content">
                                <div class="chat-details">
                                    <img src="{{ asset('back/ai/robot-ai-fp.png') }}" width="50px" height="50px" alt="Robot AI">
                                    <div class="typing-animation">
                                        <div class="typing-dot" style="--delay: 0.2s"></div>
                                        <div class="typing-dot" style="--delay: 0.3s"></div>
                                        <div class="typing-dot" style="--delay: 0.4s"></div>
                                    </div>
                                </div>
                                <span onclick="copyResponse(this)" class="material-symbols-rounded">content_copy</span>
                            </div>`;
            const incomingChatDiv = createElement(html, "incoming");
            chatContainer.appendChild(incomingChatDiv);
            chatContainer.scrollTo(0, chatContainer.scrollHeight);
            getChatResponse(incomingChatDiv);
        };

        const handleOutgoingChat = () => {
            userText = chatInput.value.trim();
            if (!userText) return;

            chatInput.value = "";
            chatInput.style.height = `${initialHeight}px`;
            chatInput.style.height = `${chatInput.scrollHeight}px`;

            const imagePath = @json($path);
            const html = `<div class="chat-content-user">
                                        <div class="chat-details-user">
                                            <p></p>
                                            <img src="${imagePath}" alt="user" width="50" height="50" class="profile-pic rounded-circle" style="object-fit:cover" />
                                        </div>
                                    </div>`;
            const outgoingChatDiv = createElement(html, "outgoing");
            outgoingChatDiv.querySelector("p").textContent = userText;
            document.querySelector(".default-text")?.remove();
            chatContainer.appendChild(outgoingChatDiv);
            chatContainer.scrollTo(0, chatContainer.scrollHeight);
            setTimeout(showTypingAnimation, 500);
        }

        deleteButton.addEventListener("click", () => {
            Swal.fire({
                title: 'Are you sure delete all chat?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#4287f5',
                cancelButtonColor: '#ff1100',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    localStorage.removeItem("all-chats");
                    window.location.reload();
                    loadDataFromLocalstorage();
                }
            });
        })


        chatInput.addEventListener("input", () => {
            chatInput.style.height = `${initialHeight}px`;
            chatInput.style.height = `${chatInput.scrollHeight}px`;
        })

        chatInput.addEventListener("keydown", (e) => {
            if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
                e.preventDefault();
                handleOutgoingChat();
            }
        })

        sendButton.addEventListener("click", handleOutgoingChat)
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const userId = @json($auth->id);
            const userName = @json($auth->name);
            const text =
                `Haii <b>${userName}</b>. Perkenalkan, saya adalah AI (Artificial Intelligence) atau Kecerdasan Buatan yang dikembangkan oleh seorang dari internal UID yang ahli di bidang pemrograman atau programmer. Tujuan saya dikembangkan untuk membantu pekerjaan menjadi lebih cepat, mudah, dan efisien. Dengan kemampuan analisis data yang sangat canggih, saya dapat mengidentifikasi pola dan tren yang mungkin tidak terlihat oleh mata manusia. Jika anda mengalami kesulitan dengan pekerjaan yang sedang anda kerjakan, atau ingin menanyakan hal lain, anda bisa menanyakan kepada saya.`;
            const typingTextElement = document.getElementById("typingText");

            let index = 0;
            let isTag = false;
            let currentTag = "";

            function typeWriter() {
                if (index < text.length) {
                    let char = text[index];

                    if (char === "<") {
                        isTag = true;
                        currentTag = char;
                    } else if (isTag) {
                        currentTag += char;
                        if (char === ">") {
                            isTag = false;
                            typingTextElement.innerHTML += currentTag;
                            currentTag = "";
                        }
                    } else {
                        typingTextElement.innerHTML += char;
                    }

                    index++;
                    setTimeout(typeWriter, isTag ? 0 : 5);
                }
            }

            let parameter = localStorage.getItem("first");

            if (parameter == "true") {
                typingTextElement.style.textAlign = "justify";
                typingTextElement.innerHTML = text;
            } else {
                typingTextElement.style.textAlign = "justify";
                typeWriter();
            }
            localStorage.setItem("first", "true");

        });
    </script>
    <script>
        const sidebar = document.getElementById("rightSidebar");
        const toggleButton = document.getElementById("sidebarToggle");

        toggleButton.addEventListener("click", () => {
            const isActive = sidebar.classList.toggle("active");

            if (isActive) {
                toggleButton.classList.remove("inactive");
                toggleButton.classList.add("active");
                toggleButton.textContent = "✖";
            } else {
                toggleButton.classList.remove("active");
                toggleButton.classList.add("inactive");
                toggleButton.textContent = "☰";
            }
        });
    </script>
@endsection