const chatWindow = document.getElementById('chatWindow');
    const userInput = document.getElementById('userInput');
    const sendBtn = document.getElementById('sendBtn');

    // Funzione per aggiungere un messaggio alla finestra della chat
    function addMessage(message, sender) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', sender);

        if (sender === 'bot') {
            const userIcon = document.createElement('div');
            userIcon.classList.add('userIcon');
            userIcon.innerHTML = '<img src="/chatbot/engine/meai.png" alt="">'; // Cambia il percorso dell'icona
            messageElement.appendChild(userIcon);

            setItemWithExpiry('sessioneAttiva', true, 3600000);
        }

        const textElement = document.createElement('span');
        textElement.textContent = message;
        messageElement.appendChild(textElement);

        chatWindow.appendChild(messageElement);
        chatWindow.scrollTop = chatWindow.scrollHeight;
    }

	function setItemWithExpiry(key, value, ttl) {
		const now = new Date();
		const item = {
			value: value,
			expiry: now.getTime() + ttl,
		};
		localStorage.setItem(key, JSON.stringify(item));
	}

	function getItemWithExpiry(key) {
		const itemStr = localStorage.getItem(key);

		if (!itemStr) {
			return null;
		}

		const item = JSON.parse(itemStr);
		const now = new Date();

		if (now.getTime() > item.expiry) {
			localStorage.removeItem(key);
			return null;
		}

		return item.value;
	}

	function showWelcomeMessage() {

		const domandeProposte = [
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Quanto dura?\')">quanto dura?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Cosa sono le fibre di cheratina?\')">cosa sono le fibre di cheratina?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Come scelgo il colore?\')">come scelgo il colore?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Come si applicano?\')">come si applicano?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Se piove?\')">se piove?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Le fibre sono nocive?\')">le fibre sono nocive?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Quanto costano?\')">quanto costano?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Di cosa sono composte?\')">di cosa sono composte?</a>',
		   '<a class="dpchat" onclick="sendMessageFromLink(\'Quanto costa?\')">quanto costa?</a>'
 
		];

		const domandeProposteId = [
		];

		// Funzione per mescolare l'array
		function shuffleArray(array) {
		  for (let i = array.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[array[i], array[j]] = [array[j], array[i]];
		  }
		  return array;
		}

		// Mescola l'array e prendi le prime 3 domande
		const domandeRandom = shuffleArray(domandeProposte).slice(0, 2);

		const sessioneAttiva = getItemWithExpiry('sessioneAttiva');

					if (sessioneAttiva == null) {
				// Aggiungi un messaggio vuoto per il bot
				addMessage('', 'bot');
				const lastMessage = chatWindow.lastChild.querySelector('span');

				const welcomeText = 'Ciao, sono Triko il tuo assistente personale, sono pronto ad aiutarti, chiedimi quello che vuoi su Tricomix e i suoi prodotti. You can ask me in your language, je parle plusieurs langues. Altri utenti mi hanno chiesto: ' + domandeRandom.join(' ');

				// Applica l'effetto typing
				showTypingEffect(welcomeText, lastMessage);

				// Salva la sessione attiva
				// 3600000 1 ora
				setItemWithExpiry('sessioneAttiva', true, 3600000);
			}
			else
			{
				// Recupera ultima domanda e risposta
				const ultima = localStorage.getItem('ultimaInterazione');
				if (ultima) {
				    const data = JSON.parse(ultima);
				    if (Array.isArray(data)) {
					data.forEach(item => {
					    if (item.domanda) addMessage(item.domanda, 'user');
					    if (item.risposta) {
					    	item.risposta = parseMarkdownLinks(item.risposta);
						addMessage('', 'bot');
						const lastMsg = chatWindow.lastChild.querySelector('span');
						lastMsg.innerHTML = item.risposta;
					    }
					});
				    }
					// Aggiungi il messaggio di benvenuto in coda
					const welcomeText = 'Ciao di nuovo, mi fa piacere rivederti. Come posso aiutarti? Recentemente mi hanno chiesto: ' + domandeRandom.join(' ');
					addMessage('', 'bot');
					const lastWelcome = chatWindow.lastChild.querySelector('span');
					lastWelcome.innerHTML = welcomeText;

				} else {

					// Aggiungi un messaggio vuoto per il bot
					addMessage('', 'bot');
					const lastMessage = chatWindow.lastChild.querySelector('span');

					const welcomeText = 'Ciao di nuovo, mi fa piacere rivederti. Come posso aiutarti? Recentemente mi hanno chiesto: ' + domandeRandom.join(' ');

					// Applica l'effetto typing
					showTypingEffect(welcomeText, lastMessage);
				}


			}
			}

	function sendMessageFromLink(question) {
		userInput.value = question;
		sendMessage();
	}

    // Funzione per l'effetto di typing
	function showTypingEffect(html, element) {
		html = parseMarkdownLinks(html);
		let index = 0;
		const interval = setInterval(() => {
			if (index < html.length) {
				element.innerHTML = html.substring(0, index + 1); // Usa innerHTML per aggiornare gradualmente il contenuto
				index++;
				chatWindow.scrollTop = chatWindow.scrollHeight;
			} else {
				clearInterval(interval);
			}
		}, 15);
	}

	function linkify(text) {
		return text.replace(
			/(https?:\/\/[^\s]+)/g,
			'<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
		);
	}

	function formatBotResponse(text) {
		let html = parseMarkdownLinks(text);
		html = linkify(html);
		return html;
	}

	function parseMarkdownLinks(text) {
		// Converte [testo](url) in <a href="url" target="_blank">testo</a>
		return text.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
			'<a href="$2" class="cbl" target="_blank" rel="noopener">$1</a>');
	}

    // Funzione per inviare un messaggio
    function sendMessage() {
        const message = userInput.value;
        if (message.trim() !== "") {
            addMessage(message, 'user');
            userInput.value = "";

            // Mostra un indicatore di typing
            const botMessageElement = document.createElement('div');
            botMessageElement.classList.add('message', 'bot');
            botMessageElement.innerHTML = '<div class="loaderchatbot"><div></div><div></div><div></div></div>';
            chatWindow.appendChild(botMessageElement);

            // Simula una chiamata al backend
            fetch('/chatbot/engine/bot.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ domanda: message })
            })
            .then(response => response.json())
            .then(data => {
                const loader = botMessageElement.querySelector('.loaderchatbot');
                loader.style.opacity = 0;
                setTimeout(() => {
                    loader.remove();
                    const responseTextStr = data.risposta;
					const responseTextArr = responseTextStr.split("<|>");
					const responseText = responseTextArr[1];
					const responseTextHTML = linkify(responseText); // trasforma i link in cliccabili
					const responseTokens = responseTextArr[0];

					// Scrivi log
					addlog(message, responseText, responseTokens);

					// Recupera le interazioni salvate precedentemente
					let storico = JSON.parse(localStorage.getItem('ultimaInterazione')) || [];

					// Aggiungi la nuova interazione in coda
					storico.push({
					    domanda: message,
					    risposta: responseText
					});

					// Mantieni solo le ultime 5
					if (storico.length > 5) {
					    storico = storico.slice(-5);
					}

					// Salva di nuovo in localStorage
					localStorage.setItem('ultimaInterazione', JSON.stringify(storico));


                    // Aggiungi il testo della risposta e l'icona
                    addMessage('', 'bot');
                    const lastMessage = chatWindow.lastChild.querySelector('span');
                    showTypingEffect(responseText, lastMessage);
                    //showTypingEffect(responseTextHTML, lastMessage);
                }, 500);
            })
            .catch(error => {
                botMessageElement.textContent = "Non riesco a connettermi alla mia mente :)";
            });

            ; chatWindow.scrollTop = chatWindow.scrollHeight;
            //window.scrollTo({top: document.getElementById('chat').offsetTop-120, behavior: 'smooth'});
        }
    }

	function addlog(domanda, risposta, tokens) {
		const endpoint = '/_apps/post.inc.html';
		$.ajax({
			url: endpoint,
			method: 'POST',
			data: {
				action: 'addlog',
				domanda: domanda,
				risposta: risposta,
				tokens: tokens,
				_type_: 1
			},
			success: function(data) {
				if (data) {
				} else {
					//console.error('La risposta non contiene il campo html atteso.');
				}
			},
			error: function(jqXHR, textStatus, errorThrown) {
				//console.error('Errore nella richiesta AJAX:', textStatus, errorThrown);
			}
		});
	}

    // Evento click sul pulsante Invia
    sendBtn.addEventListener('click', sendMessage);

    // Evento invio tramite il tasto Enter
    userInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

   // Mostra il messaggio di benvenuto all'avvio
    window.onload = function() {
        
    };
    
    showWelcomeMessage();