console.log( '1714208835' );
var fetchInProgress = false;

function generateRandomSessionID(length = 32) {
  const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let sessionID = '';
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charset.length);
    sessionID += charset.charAt(randomIndex);
  }
  return sessionID;
}

function encodeHtmlEntities(str) {
    const htmlEntities = {
        'Ã': '&Agrave;', 'Ã': '&Aacute;', 'Ã': '&Acirc;', 'Ã': '&Atilde;', 'Ã': '&Auml;', 'Ã': '&Aring;',
        'Ã': '&AElig;', 'Ã': '&Ccedil;', 'Ã': '&Egrave;', 'Ã': '&Eacute;', 'Ã': '&Ecirc;', 'Ã': '&Euml;',
        'Ã': '&Igrave;', 'Ã': '&Iacute;', 'Ã': '&Icirc;', 'Ã': '&Iuml;', 'Ã': '&ETH;', 'Ã': '&Ntilde;',
        'Ã': '&Ograve;', 'Ã': '&Oacute;', 'Ã': '&Ocirc;', 'Ã': '&Otilde;', 'Ã': '&Ouml;', 'Ã': '&times;',
        'Ã': '&Oslash;', 'Ã': '&Ugrave;', 'Ã': '&Uacute;', 'Ã': '&Ucirc;', 'Ã': '&Uuml;', 'Ã': '&Yacute;',
        'Ã': '&THORN;', 'Ã': '&szlig;', 'à': '&agrave;', 'á': '&aacute;', 'â': '&acirc;', 'ã': '&atilde;',
        'ä': '&auml;', 'å': '&aring;', 'æ': '&aelig;', 'ç': '&ccedil;', 'è': '&egrave;', 'é': '&eacute;',
        'ê': '&ecirc;', 'ë': '&euml;', 'ì': '&igrave;', 'í': '&iacute;', 'î': '&icirc;', 'ï': '&iuml;',
        'ð': '&eth;', 'ñ': '&ntilde;', 'ò': '&ograve;', 'ó': '&oacute;', 'ô': '&ocirc;', 'õ': '&otilde;',
        'ö': '&ouml;', '÷': '&divide;', 'ø': '&oslash;', 'ù': '&ugrave;', 'ú': '&uacute;', 'û': '&ucirc;',
        'ü': '&uuml;', 'ý': '&yacute;', 'þ': '&thorn;', 'ÿ': '&yuml;'
    };
    return str.replace(/[\u00C0-\u00FF]/g, (char) => htmlEntities[char] || char);
}

function updateURLWithoutReload(path, queryParams) {
    const url = new URL(window.location.href);

    // Set the new path
    url.pathname = path;

    // Set query parameters
    for (const key in queryParams) {
        if (queryParams.hasOwnProperty(key)) {
            url.searchParams.set(key, queryParams[key]);
        }
    }

    // Modify the URL without reloading the page
    history.pushState({}, '', url.toString());
}

// Function to call the Text API with a callback
function fetchText(inputText, inputAmount, inputCountry, callback) {

    // Encode the data for x-www-form-urlencoded
    if ( inputAmount == 0 ){
	var encodedData = 'translate=' + encodeURIComponent(inputText) +'&amount='+ encodeURIComponent(inputAmount) +'&country='+ encodeURIComponent(inputCountry);
    } else {
	fetchInProgress = true;
        var encodedData = 'text=' + encodeURIComponent(inputText) +'&amount='+ encodeURIComponent(inputAmount) +'&country='+ encodeURIComponent(inputCountry);
    }

    // Define the fetch options for a POST request
    const fetchOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: encodedData,
    };

    fetch('https://sponsor-me.aivisions.no/testopen?x=3x4fSfUDs1sd3a2d1d2', fetchOptions)
        .then(response => response.json()) // Assuming the response is still JSON formatted
        .then(data => callback(data))
        .catch(error => {
	    console.log( inputText );
            console.error('Error fetching text:', error);
        });
}

const currentUrlPath = window.location.pathname;

console.log( 'AIVI-test4' );

// script.js
document.addEventListener('DOMContentLoaded', function () {

    const formElement = document.querySelector('form[action="campaignconfiguration.jsp"][method="post"]');
    if ( currentUrlPath === '/start' && formElement ){

	// Generate a session ID
        const sessionID = generateRandomSessionID();

        console.log('sessionID: '+ sessionID);

	// Modify the URL without reloading the page
	history.pushState({}, '', '/start?s=' + sessionID);

	// Create the "Show Overlay" button
        const showOverlayButton = document.createElement('div');
        showOverlayButton.id = 'showOverlay';
        showOverlayButton.textContent = 'Click test';

        // Find the <div class="form"> element
        const formDiv = document.querySelector('.form');

        // Insert the button before the <div class="form"> element
//        formDiv.parentNode.insertBefore(showOverlayButton, formDiv);

        // Add a click event listener to the dynamically created button
        showOverlayButton.addEventListener('click', function (event) {
	    event.preventDefault(); // Prevent the default action (e.g., form submission)

	    alert('Click - sessionID: '+ sessionID);
	});

    } else if ( currentUrlPath === '/campaignconfiguration.jsp' ){

	document.getElementById('text').style.maxHeight = 'none';
	document.getElementById('text').style.height = '110px';

	// Get the referrer URL
	const referrerURL = document.referrer;

	// Parse the referrer URL to extract the "s" parameter
	const url = new URL(referrerURL);
	const sessionID = url.searchParams.get('s') || 0;

	console.log('Session ID from referrer URL:', sessionID);

	// Create the "Show Overlay" button
//        const showOverlayButton = document.createElement('button');
        const showOverlayButton = document.createElement('div');
        showOverlayButton.id = 'showOverlay';
        showOverlayButton.textContent = 'AI';

	showOverlayButton.style.display = 'flex';
	showOverlayButton.style.width = '100%';
        showOverlayButton.style.height = '37px';
        showOverlayButton.style.fontFamily = 'US-101, Tahoma';
        showOverlayButton.style.color = '#ff7800';
        showOverlayButton.style.fontSize = '24px';
        showOverlayButton.style.cursor = 'pointer';
        showOverlayButton.style.backgroundColor = 'buttonface';
	showOverlayButton.style.border = '1px solid #888888';
	showOverlayButton.style.borderRadius = '5px';
	showOverlayButton.style.textAlign = 'center';
	showOverlayButton.style.alignItems = 'center';
	showOverlayButton.style.justifyContent = 'center';

	// Add AI button to form
	document.getElementById('aiButton').appendChild(showOverlayButton);

        // Add a click event listener to the dynamically created button
        showOverlayButton.addEventListener('click', function (event) {
	    event.preventDefault(); // Prevent the default action (e.g., form submission)

            // Fetch the user's IP address
	    fetch('https://sponsor-me.aivisions.no/api?t=ip&s='+ sessionID)
        	.then(response => response.json())
    		.then(data => {
            	    const userIP = data.ip;

            	    // Create a div element for the overlay
            	    const overlay = document.createElement('div');
            	    overlay.style.position = 'fixed';
            	    overlay.style.top = '0';
            	    overlay.style.left = '0';
            	    overlay.style.width = '100%';
            	    overlay.style.height = '100%';
            	    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; // Semi-transparent black background
            	    overlay.style.zIndex = '100000'; // Adjust the z-index to control the overlay's stacking order

            	    // Create a container div for centering the content
            	    const container = document.createElement('div');
            	    container.style.display = 'flex';
            	    container.style.flexDirection = 'column'; // Stack items vertically
            	    container.style.justifyContent = 'center';
            	    container.style.alignItems = 'center';
            	    container.style.height = 'calc(100% - 60px)'; // 30px top and 30px bottom margins
            	    container.style.padding = '0 10px'; // Add padding for better visibility

//		    const infoScreenString = '<center><h2 id="ai-wait_header">Vennligst vent&hellip;</h2><span id="ai-wait_text">N&aring; jobber AI-motoren aktivt med &aring; lage et forslag til tekst om innsamlingen din.</span><br><br><img height="30px" src="https://aivisions.no/imgs/waiting.gif"><center>';
		    const infoScreenString = '<center><h2 id="ai-wait_header"></h2><span id="ai-wait_text"></span><br><br><img height="30px" src="https://aivisions.no/imgs/waiting.gif"><center>';

		    // Create a div element with id 'infoscreen'
		    const infoScreen = document.createElement('div');
		    infoScreen.id = 'infoscreen';

		    // Set the content of the div
		    infoScreen.innerHTML = infoScreenString;

		    // Apply styling to the div
		    infoScreen.style.width = '550px';
		    infoScreen.style.maxWidth = '100%';
//		    infoScreen.style.height = 'calc(60% - 40px)';
		    infoScreen.style.padding = '25px';
		    infoScreen.style.border = '1px solid #dddddd';
		    infoScreen.style.borderRadius = '5px';
		    infoScreen.style.marginTop = '10px';
		    infoScreen.style.fontFamily = '"Roboto Condensed", Helvetica';
		    infoScreen.style.fontSize = '16pt';
		    infoScreen.style.fontWeight = '300';
		    infoScreen.style.color = '#ff7800';
		    infoScreen.style.backgroundColor = '#ffffff';
		    infoScreen.style.display = 'block';

            	    // Create an editable textarea with initial text as the user's IP address
            	    const textarea = document.createElement('textarea');
//            	    textarea.value = 'Layover: '+ userIP + "\n\n" +'sessionID: '+ sessionID +"\n\n"+ document.getElementById('text').value +"\n\n"+ infoScreenString;
            	    textarea.value = infoScreenString;
            	    textarea.style.width = '550px'; // Set the width to 550px
		    textarea.style.maxWidth = '100%';
            	    textarea.style.height = 'calc(60% - 40px)'; // Adjusted height for buttons (20px top and 20px bottom)
            	    textarea.style.padding = '25px';
            	    textarea.style.border = '1px solid #dddddd';
            	    textarea.style.resize = 'none'; // Prevent resizing of the textarea
            	    textarea.style.borderRadius = '5px';
            	    textarea.style.marginTop = '10px';

            	    textarea.style.fontFamily = '"Roboto Condensed", Helvetica';
		    textarea.style.fontSize = '16pt';
		    textarea.style.fontWeight = '300';
		    textarea.style.color = '#ff7800';

            	    // Create a div for the buttons
            	    const buttonDiv = document.createElement('div');
            	    buttonDiv.style.display = 'flex';
            	    buttonDiv.style.justifyContent = 'space-between'; // Place buttons side by side with spacing
            	    buttonDiv.style.margin = '10px'; // Add 20px top margin for spacing

            	    // Create "OK" button
            	    const okButton = document.createElement('button');
            	    okButton.textContent = 'BRUK';
            	    okButton.style.backgroundColor = '#ff7800';
            	    okButton.style.color = 'white';
            	    okButton.style.padding = '10px';
            	    okButton.style.border = '0';
            	    okButton.style.marginRight = '5px';
		    okButton.style.cursor = 'pointer';
            	    okButton.style.display = 'inline-block';

            	    okButton.style.width = '100%';
            	    okButton.style.height = '50px';
            	    okButton.style.fontFamily = 'US-101, Tahoma';
            	    okButton.style.fontSize = '24px';

            	    // Function to handle "OK" button click
            	    okButton.addEventListener('click', function () {
			document.getElementById('text').value = textarea.value;
//                	console.log(textarea.value); // Log the textarea content to the console
                	overlay.remove(); // Remove the overlay from the DOM
            	    });

            	    // Create "Cancel" button
            	    const cancelButton = document.createElement('button');
            	    cancelButton.textContent = 'X';
            	    cancelButton.style.backgroundColor = '#bbbbbb';
            	    cancelButton.style.color = 'white';
            	    cancelButton.style.padding = '10px';
            	    cancelButton.style.border = '0';
            	    cancelButton.style.marginLeft = '5px';
		    cancelButton.style.cursor = 'pointer';
            	    cancelButton.style.display = 'inline-block';

            	    cancelButton.style.height = '50px';
            	    cancelButton.style.width = '100%';
            	    cancelButton.style.fontFamily = 'US-101, Tahoma';
            	    cancelButton.style.fontSize = '24px';

    	    	    // Function to handle "Cancel" button click
            	    cancelButton.addEventListener('click', function () {
                	overlay.remove(); // Remove the overlay from the DOM
		    });

            	    // Append the textarea to the container
            	    container.appendChild(infoScreen);

            	    // Append the textarea to the container
            	    container.appendChild(textarea);

            	    // Append the buttons to the button div with spacing
            	    buttonDiv.appendChild(okButton);
            	    buttonDiv.appendChild(cancelButton);

            	    // Append the button div to the container
            	    container.appendChild(buttonDiv);

            	    // Append the container to the overlay
            	    overlay.appendChild(container);

            	    // Append the overlay to the body
            	    document.body.appendChild(overlay);

		    // Show / Hide
		    infoScreen.style.display = 'block';
		    textarea.style.display = 'none';
		    okButton.style.display = 'none';
		    cancelButton.style.display = 'inline-block';

		    amount = document.getElementById('value').value;
		    country = document.getElementById('country').value.toUpperCase();

		    // Call the API with the variable 's' and update textarea using a lambda function
		    var translation = 'Please wait...|The AI engine is now actively working on creating a draft text about your fundraising.|Cancel|Ok';
		    fetchText( translation, 0, country, (data2) => {
			const splitText = data2.text.replace( /<.*?>/g ,'' ).replace( '</TRANSLATED_TEXT>', '' ).split( "|", 4);
			document.getElementById('ai-wait_header').innerHTML = splitText[0];
			document.getElementById('ai-wait_text').innerHTML = splitText[1];
			cancelButton.innerHTML = splitText[2].replace( ' ', '&nbsp;' );
			okButton.innerHTML = splitText[3].replace( ' ', '&nbsp;' );
		    });

		    var fetchTextString = '<INSPIRATION_TEXT>'+ document.getElementById('text').value +'</INSPIRATION_TEXT><CATEGORY>'+ document.getElementById('subcategory').options[document.getElementById('subcategory').selectedIndex].text +'</CATEGORY><TOTAL_AMOUNT>'+ document.getElementById('value').value +' '+ document.getElementById('currency').value +'</TOTAL_AMOUNT><CAMPAIGN_LENGTH>'+ document.getElementById('days').value +' days</CAMPAIGN_LENGTH>';
		    fetchTextString = fetchTextString.replace( document.getElementById('form_name').value.replace(/.*\s(\w+)$/, '$1'), '' );

		    if ( fetchInProgress == false ){

			// Call the API with the variable 's' and update textarea using a lambda function
			fetchText( fetchTextString, amount, country, (data) => {
			    textarea.value = data.text.replace( /<.*?>/g, '' );

		    	    // Show / Hide
			    infoScreen.style.display = 'none';
			    textarea.style.display = 'block';
			    okButton.style.display = 'inline-block';
			    cancelButton.style.display = 'inline-block';

			    fetchInProgress = false;
			});
		    }

        	})
        	.catch(error => {
            	    console.error('Error fetching IP address:', error);
    	    });
	});
    }
});