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/meai.png" alt="Antonio">'; // Cambia il percorso dell'icona
            messageElement.appendChild(userIcon);

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

        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(\'Di cosa si occupa Pietranera?\')">di cosa si occupa Pietranera?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Cosa è l`HEAD SPA Experience?\')">cosa è l`HEAD SPA Experience?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Lavaggi e benessere?\')">lavaggi e benessere?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Cosa è l`Holistic Wellness Hair?\')">cosa è l`Holistic Wellness Hair?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Qual è il vostro indirizzo?\')">qual è il vostro indirizzo?</a>',
		  '<a class="dpchat" onclick="sendMessageFromLink(\'Con quali vostri prodotti si parla HEAD SPA Experience?\')">con quali vostri prodotti si parla HEAD SPA Experience?</a>',
		   '<a class="dpchat" onclick="sendMessageFromLink(\'Descrivimi Fable Lift?\')">descrivimi Fable Lift?</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 il tuo assistente Pietranera, sono qui per presentarti e spiegarti il nostro servizio HEAD SPA Experience. 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
			{
				// Esempi di domanda da proporre

				// 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) {
		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);
	}

    // 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>';
            chatWindow.appendChild(botMessageElement);

            // Simula una chiamata al backend
            fetch('/chatbot/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 responseTokens = responseTextArr[0];

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

                    // Aggiungi il testo della risposta e l'icona
                    addMessage('', 'bot');
                    const lastMessage = chatWindow.lastChild.querySelector('span');
                    showTypingEffect(responseText, 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 = '/it';
		$.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();
    };