script.js

import Typewriter from 'typewriter-effect/dist/core';
import '../css/style.css'
import 'sweetalert2/src/sweetalert2.scss'
import '@fortawesome/fontawesome-free/css/all.min.css';
import articleData from './articleData.json';
import sampleCode from '../python/sample.py?raw'

const minifyButton = document.getElementById('minify');
const minifyAllBtn = document.getElementById('minifyAll');
const minifyBtnText = minifyButton.querySelector('span.relative');
const copyButton = document.getElementById('copy');
const aniText = document.getElementById("anitext");
const errorMessage = document.getElementById('errmsg');
const dwButton = document.getElementById('dw');
const shareButton = document.getElementById("share");
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const minifiedSize = document.getElementById('minified-size');
const fileLinkLoad = document.getElementById("fileLink-load");
const sourceEditorDiv = document.getElementById("editor");
const minifiedEditorDiv = document.getElementById("minified");
const loadingEditor = document.getElementById("loading-editor");
const loadingMinified = document.getElementById("loading-minified");
const qrCode = document.getElementById("qrCode");
const copyMsg = document.getElementById('copy-msg');
const fileShareLink = document.getElementById("fileLink");
const closePopupOverlay = document.getElementById('closePopup');
const popup = document.getElementById("popup");
const shareOverlay = document.getElementById("overlay");
const typeOverlay = document.getElementById("type-overlay");
const orScan = document.getElementById('scantocopy');
const downloadLinkUrl = document.getElementById('downloadLinkurl');
const helpMsg = document.getElementById('help-msg');
const linkNewtab = document.getElementById("new_tab");
const inputContainer = document.getElementById("inputContainer");
const fileLinkInput = document.getElementById("fileLinkInput");
const loadFileBtn = document.getElementById("load_File");
const darkModeToggle = document.getElementById("darkModeToggle");
const selectallopt = document.getElementById('selectall');
const resetOpt = document.getElementById('resetOpt');
const fileTabs = document.getElementById('file-tabs');
const fileTabsOut = document.getElementById('file-tabs-out');
const fileTabsOverlay = document.getElementById("tabs-overlay");
const fileTabsOverlayOut = document.getElementById("tabs-overlay-out");
const filetabOutOne = document.getElementById("file-out-1");
const btnsOverlay = document.getElementById("btns-overlay");
const addNewTabBtn = document.getElementById("addNewTab");
const compressProgress = document.getElementById('comProgress')
const compressProgressBar = document.getElementById('comProgressBar');
const compressProgressStatus = document.getElementById('comProgressStatus');
const codeRunBtn = document.getElementById("runCode");
const pyTerminal = document.getElementById("pyterminal");
const terminalText = document.getElementById("terminaltext");
const closeCompilerBtn = document.getElementById("closeCompiler");
const copyCompilertextBtn = document.getElementById("copyCompilertext")
const graphContainer = document.getElementById("graph-container");
const graphKbSize = document.getElementById("graphkbsize");
const graphLines = document.getElementById("graphlines");
const diffPopup = document.getElementById('diff-popup');
const diffPopupContent = document.getElementById('diff-popup-content');
const diffTabs = document.getElementById("diff-tabs");
const openDiffPopupBtn = document.getElementById('diffPopup');
const closeDiffPopupBtn = document.getElementById('close-diff-popup');
const diffWrapSwitch = document.getElementById('diff-text-wrap');
const headerMenuToggle = document.getElementById('menuToggle');
const headerMenu = document.getElementById('menu');
const showOptionsContent = document.getElementById('showOptionsContent');
const optionContainer = document.getElementById('minifyOptionContainer');
let errorTimeout, cpyTimeout0, cpyTimeout1, btnTimeout, typingTimeout, sourceEditor, minifiedEditor, diffEditor, darkModeEnabled, compileTime, compileData;
let typingInProgress = false;
var sources = ['#PyFile-1'];
var sourcesOut = ['#PyFile-out-1'];
var currentTabIndex = 0;
var currentTabIndexOut = 0;
var currentTabIndexDiff = 0;
var pyCompileAtTabIndex = 0;
let startIndex = 0;
let isGetLines = false;
let isTabNameEdit = false;
let isTabNameEditOut = false;
let isDiffTextWrapEnabled = false;
let graph = null;
let tempStorage = {};
const defaultFilename = 'default.py';
const defaultContent = "#Empty Python file, Enter code to minify";
const defaultOutput = "Compiled but no output!";
const maxFileSizeInBytes = 800 * 1024;

const sentences = [
	"A Python minifier is a tool used to shrink Python code size by eliminating unnecessary elements like white spaces, comments, and line breaks.",
	"Its primary purpose is to enhance the loading speed of Python scripts, particularly beneficial for web applications.",
	"By reducing the overall size of the code, the minifier contributes to faster script loading times, optimizing web performance.",
	"The process of minification streamlines code readability without affecting its functionality or logic.",
	"Minified code is more efficiently transmitted and executed across various platforms, aiding developers in delivering smoother user experiences.",
	"Minification is a standard practice for web optimization, mitigating download and execution times of scripts to create a more responsive environment."
];

const dateformat = {
	year: 'numeric',
	month: '2-digit',
	day: '2-digit',
	hour: '2-digit',
	minute: '2-digit',
	timeZoneName: 'short'
};

const fontSizeMap = {
	pc: 14,
	tablet: 14,
	mobile: 12,
};

const features = [{
		text: 'Efficiency',
		color: '#4CAF50'
	},
	{
		text: 'Safety',
		color: '#2196F3'
	},
	{
		text: 'Quickness',
		color: '#FF9800'
	},
	{
		text: 'Reliability',
		color: '#F44336'
	},
	{
		text: 'Protection',
		color: '#009688'
	},
	{
		text: 'Robust',
		color: '#C775C9'
	}
];

const options = [
	'remove_annotations',
	'remove_pass',
	'remove_literal_statements',
	'combine_imports',
	'hoist_literals',
	'remove_object_base',
	'rename_locals',
	'rename_globals',
	'convert_posargs_to_args',
	'preserve_shebang',
	'remove_asserts',
	'remove_debug',
	'remove_explicit_return_none',
	'remove_builtin_exception_brackets',
	'constant_folding',
];

const checkboxesOpt = [{
		id: "remove_annotations",
		label: "Remove Annotations",
		checked: false
	},
	{
		id: "remove_pass",
		label: "Remove Pass statements",
		checked: false
	},
	{
		id: "remove_literal_statements",
		label: "Remove literal statements (docstrings)",
		checked: true
	},
	{
		id: "combine_imports",
		label: "Combine Import statements",
		checked: true
	},
	{
		id: "hoist_literals",
		label: "Hoist Literals",
		checked: false
	},
	{
		id: "remove_object_base",
		label: "Remove Object base",
		checked: false
	},
	{
		id: "rename_locals",
		label: "Rename Locals",
		checked: false
	},
	{
		id: "rename_globals",
		label: "Rename Globals",
		checked: false
	},
	{
		id: "convert_posargs_to_args",
		label: "Convert Positional-Only to Normal Args",
		checked: true
	},
	{
		id: "preserve_shebang",
		label: "Preserve any shebang line",
		checked: true
	},
	{
		id: "remove_asserts",
		label: "Remove assert statements",
		checked: false
	},
	{
		id: "remove_debug",
		label: "Remove if debug being True",
		checked: true
	},
	{
		id: "remove_explicit_return_none",
		label: "Remove unnecessary return none",
		checked: true
	},
	{
		id: "remove_builtin_exception_brackets",
		label: "Remove builtin exception brackets",
		checked: false
	},
	{
		id: "constant_folding",
		label: "Evaluate constant expressions",
		checked: true
	}
];

const inputFields = [{
	id: 'preserve_locals',
	label: 'Preserved Locals:'
}, {
	id: 'preserve_globals',
	label: 'Preserved Globals:'
}];

const schema = {
	"@context": "http://schema.org",
	"@type": "Website",
	"url": "https://glad432.github.io",
	"name": "Python Minifier - GLAD432",
	"description": "Optimize your python code's performance with our Python minifier online. Python minifier remove whitespace, comments, and line breaks to compress code, optimizing script size for faster loading and improved efficiency.",
	"keywords": "Python, minifier, Python code optimization, online tool, script compression, code minification, web development, optimize Python code, improve script performance, reduce code size, web application optimization, code efficiency, code speed, streamline Python scripts",
	"publisher": {
		"@type": "Organization",
		"name": "GLAD432",
		"logo": {
			"@type": "ImageObject",
			"url": "https://glad432.github.io/favicon.ico"
		}
	}
};

document.addEventListener('DOMContentLoaded', () => {
	const jsonScript = document.createElement('script');
	jsonScript.type = 'application/ld+json';
	jsonScript.text = JSON.stringify(schema);
	document.head.appendChild(jsonScript);

	headerMenuToggle.addEventListener('click', () => {
		headerMenu.classList.remove('hidden');
		headerMenu.classList.add('flex');
	});

	document.getElementById('menuClose').addEventListener('click', () => {
		headerMenu.classList.add('hidden');
		headerMenu.classList.remove('flex');
	});

	document.addEventListener('click', (event) => {
		if (!headerMenu.contains(event.target) && !headerMenuToggle.contains(event.target)) {
			headerMenu.classList.add('hidden');
			headerMenu.classList.remove('flex');
		}
	});

	if (!darkModeToggle) return;
	const isDarkMode = JSON.parse(localStorage.getItem("darkMode")) ?? false;
	document.documentElement.classList.toggle("dark", isDarkMode);
	darkModeToggle.checked = isDarkMode;
	const updateTheme = (isDark) => {
		document.documentElement.classList.toggle("dark", isDark);
		localStorage.setItem("darkMode", JSON.stringify(isDark));
	};
	darkModeToggle.addEventListener("change", () => {
		updateTheme(darkModeToggle.checked);
	});
});

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]];
	}
}

function getOrdinalSuffix(index) {
	const suffixes = ["th", "st", "nd", "rd"];
	const value = index + 1;
	const mod100 = value % 100;
	const mod10 = value % 10;

	if (mod100 >= 11 && mod100 <= 13) {
		return value + suffixes[0];
	}

	return value + (suffixes[mod10] || suffixes[0]);
}

shuffleArray(features);

const typewriter = new Typewriter(aniText, {
	loop: true,
	delay: 50,
});

function typeFeatures() {
	features.forEach((feature, index) => {
		typewriter
			.pauseFor(1000)
			.deleteAll()
			.typeString(`<span style="color: ${feature.color}">${feature.text}</span>`)
			.pauseFor(1000)
			.callFunction(() => {
				if (index === features.length - 1) {
					typeFeatures();
				}
			});
	});
}

window.addEventListener("load", () => {
	typeFeatures();
	typewriter.start();
});

document.getElementById("year").textContent = new Date().getFullYear().toString();

require.config({
	paths: {
		'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.51.0/min/vs'
	}
});

require(['vs/editor/editor.main'], () => {
	sourceEditor = monaco.editor.create(sourceEditorDiv, {
		language: 'python',
		minimap: {
			enabled: false
		},
		theme: darkModeEnabled ? 'vs-dark' : 'vs',
		matchBrackets: 'always',
		fontFamily: 'Source Code Pro',
		renderValidationDecorations: 'on',
		scrollbar: {
			vertical: 'visible',
			horizontal: 'visible'
		},
		fontWeight: 'bold',
		formatOnPaste: true,
		semanticHighlighting: true,
		folding: isMobile() ? false : true,
		fontSize: getFontSize(),
		cursorBlinking: 'smooth',
		cursorSmoothCaretAnimation: true,
		cursorStyle: 'line',
		automaticLayout: true
	});

	minifiedEditor = monaco.editor.create(minifiedEditorDiv, {
		language: 'python',
		minimap: {
			enabled: false
		},
		theme: darkModeEnabled ? 'vs-dark' : 'vs',
		matchBrackets: 'always',
		fontFamily: 'Source Code Pro',
		renderValidationDecorations: 'on',
		scrollbar: {
			vertical: 'visible',
			horizontal: 'visible'
		},
		fontWeight: 'bold',
		semanticHighlighting: true,
		folding: isMobile() ? false : true,
		fontSize: getFontSize(),
		cursorBlinking: 'smooth',
		cursorSmoothCaretAnimation: true,
		cursorStyle: 'line',
		readOnly: true,
		automaticLayout: true
	});

	sourceEditor.onDidChangeModelContent(async () => {
		if ((new Blob([sourceEditor.getModel().getValue()])).size / maxFileSizeInBytes > 1) {
			sourceEditor.getModel().setValue(await truncateCode(sourceEditor.getModel().getValue()));
			const totalLines = sourceEditor.getModel().getLineCount();
			sourceEditor.setPosition({
				lineNumber: totalLines,
				column: sourceEditor.getModel().getLineMaxColumn(totalLines)
			});
			sourceEditor.revealLineInCenter(Math.max(totalLines - 5, 1));
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} Maximum Size limit (${maxFileSizeInBytes / 1024} KB) reached!`);
		}
	});

	setTimeout(() => {
		loadingMinified.classList.add("hidden");
		loadingEditor.classList.add("hidden");
		sourceEditorDiv.classList.remove("hidden");
		minifiedEditorDiv.classList.remove("hidden");

	}, 300)

	sourceEditor.onDidChangeModelContent(() => {
		saveEditorContent();
		document.getElementById('line-count').textContent = `Lines: ${sourceEditor.getModel().getLineCount()}`;
		document.getElementById('text-size').textContent = `${(sourceEditor.getModel().getValueLength() / 1024).toFixed(3)} Kb`;
	});

	minifiedEditor.onDidChangeModelContent(() => {
		saveEditorContent(true);
		document.getElementById('line-count-out').textContent = `Lines: ${minifiedEditor.getModel().getLineCount()}`;
		minifiedSize.textContent = `${(minifiedEditor.getModel().getValueLength() / 1024).toFixed(3)} Kb`;
	});

	function typeInEditor() {
		if (typingInProgress) return;

		const typingPYcode = sampleCode.replace(/\r/g, '');

		if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
			typeOverlay.classList.remove('!hidden');
			let index = 0;

			function type() {
				if (typingPYcode.length > index) {
					sourceEditor.trigger('', 'type', {
						text: typingPYcode[index]
					});
					index++;
					typingTimeout = setTimeout(type, 1);
				} else {
					typeOverlay.classList.add('!hidden');
					typingInProgress = false;
				}
			};
			type();
			typingInProgress = true;
		} else {
			typeOverlay.classList.add('!hidden');
			sourceEditor.getModel().setValue(typingPYcode);
		}
	}
	window.addEventListener("load", typeInEditor);
});

function disableTyping() {
	clearTimeout(typingTimeout);

	if (typingInProgress) {
		sourceEditor.getModel().setValue('');
	}

	typingInProgress = false;
	typeOverlay.classList.add('!hidden');
}

function setGraphTheme() {
	if (graph) {
		graph.updateOptions({
			theme: {
				mode: darkModeEnabled ? 'dark' : 'light'
			},
			xaxis: {
				axisTicks: {
					color: darkModeEnabled ? '#737373' : '#242424',
				}
			}
		});
		updateGraph();
	}
}

function setTheme() {
	if (typeof darkModeToggle !== 'undefined' && 'checked' in darkModeToggle) {
		darkModeEnabled = darkModeToggle.checked;
	} else {
		return;
	}

	const localStorageDarkMode = localStorage.getItem("darkMode");
	if (localStorageDarkMode !== 'light') {
		darkModeEnabled = localStorageDarkMode === 'true';
	}

	if (localStorageDarkMode === 'dark') {
		darkModeEnabled = localStorageDarkMode === 'true';
	}

	const vsTheme = darkModeEnabled ? 'vs-dark' : 'vs';

	if (sourceEditor && minifiedEditor) {
		sourceEditor.updateOptions({
			theme: vsTheme
		});
		minifiedEditor.updateOptions({
			theme: vsTheme
		});
		if (diffEditor) {
			diffEditor.updateOptions({
				theme: vsTheme
			});
		}
		setGraphTheme();
	}
}

document.addEventListener("DOMContentLoaded", () => {
	setTheme();
	darkModeToggle.addEventListener("change", setTheme);
	window.addEventListener("storage", (event) => {
		if (event.key === "darkMode") {
			setTheme();
			if (darkModeEnabled) {
				darkModeToggle.checked = true;
				document.documentElement.classList.add("dark");
				document.documentElement.classList.remove("light");

			} else {
				darkModeToggle.checked = false;
				document.documentElement.classList.add("light");
				document.documentElement.classList.remove("dark");
			}
		}
	});
});

window.addEventListener("load", setTheme);

function getFontSize() {
	const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	if (width <= 600) {
		return fontSizeMap.mobile;
	} else if (width > 600 && width <= 1024) {
		return fontSizeMap.tablet;
	} else {
		return fontSizeMap.pc;
	}
}

function isMobile() {
	const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	return width <= 600;
}

function updateEditorOptions() {
	sourceEditor.updateOptions({
		fontSize: getFontSize()
	});
	minifiedEditor.updateOptions({
		fontSize: getFontSize()
	});

	if (isMobile()) {
		sourceEditor.updateOptions({
			folding: false
		});
		minifiedEditor.updateOptions({
			folding: false
		});
	} else if (!isMobile()) {
		sourceEditor.updateOptions({
			folding: true
		});
		minifiedEditor.updateOptions({
			folding: true
		});
	}
};

window.addEventListener('resize', () => {
	if (sourceEditor && minifiedEditor) {
		updateEditorOptions();
	}
});

async function truncateCode(content) {
	const pyblob = new Blob([content]);
	if (pyblob.size > maxFileSizeInBytes) {
		return new Promise(resolve => {
			const pyreader = new FileReader();
			pyreader.onloadend = () => resolve(pyreader.result);
			pyreader.readAsText(pyblob.slice(0, maxFileSizeInBytes));
		});
	}
	return content;
}

async function showSweetAlert(options) {
	const Swal = (await import('sweetalert2/dist/sweetalert2.esm.js')).default;

	return Swal.fire({
		...options,
		didOpen: () => {
			if (options.didOpen) {
				options.didOpen(Swal);
			}
		},
		preConfirm: async () => {
			if (options.preConfirm) {
				return await options.preConfirm(Swal);
			}
			return undefined;
		}
	});
}

async function codeCompile() {
	if (minifiedEditor.getModel().getValue() === '') {
		return;
	}

	const fileName = getCurrentTabName();
	const truncatedFileName = fileName.length >= 50 ? `${fileName.slice(0, 50)}.py` : fileName;
	const code = minifiedEditor.getModel().getValue();
	try {
		codeRunBtn.innerHTML = `Running... ${addFontAwesomeIcon('fa-regular fa-circle-play fa-fade')}`;
		codeRunBtn.disabled = true;

		const response = await fetch('https://python-compile.vercel.app/run', {
			method: 'POST',
			headers: {
				'Content-Type': 'text/plain',
			},
			body: code
		});

		if (!response.ok) {
			throw new Error('Network error');
		}

		const data = await response.json();
		pyCompileAtTabIndex = currentTabIndex;
		compileTime = new Date();
		compileData = /\r|\n/.test(data.output) || data.output.length !== 0 ? data.output : defaultOutput;
		terminalText.textContent = `[${compileTime.toLocaleTimeString()}] ~/temp/${Array.from({ length: 5 }, () => Math.floor(Math.random() * 10)).join('')}$ python "${truncatedFileName.trim()}"\n${compileData}`;
		pyTerminal.classList.remove("hidden");
	} catch {
		pyTerminal.classList.remove("hidden");
		terminalText.textContent = 'Error occurred while running the code. Please check your code and try again.';
	} finally {
		codeRunBtn.innerHTML = `Run code ${addFontAwesomeIcon('fa-regular fa-circle-play')}`;
		codeRunBtn.disabled = false;
	}
}

function clearPyComplier(jusDelete = false) {
	if (jusDelete || (pyCompileAtTabIndex === currentTabIndex && pyCompileAtTabIndex === currentTabIndexOut)) {
		pyTerminal.classList.add("hidden");
		terminalText.textContent = '';
	}
}

codeRunBtn.addEventListener("click", () => {
	if (minifiedEditor.getModel().getValue().trim() !== "") {
		codeCompile();
	}
});

closeCompilerBtn.addEventListener("click", () => {
	animateIcon("closeCompiler", "fa-fade", 1000);
	setTimeout(clearPyComplier, 1100, true)
})

copyCompilertextBtn.addEventListener("click", async () => {
	if (compileData.length > 0) {
		await navigator.clipboard.writeText(compileData);
	}

	if (btnTimeout) {
		clearTimeout(btnTimeout);
	}

	copyCompilertextBtn.textContent = "Copied";
	animateIcon("copyCompilertext", "fa-fade", 1400);

	btnTimeout = setTimeout(() => {
		copyCompilertextBtn.textContent = "Copy";
		btnTimeout = null;
	}, 1500);
});

document.getElementById("exportCompilertext").addEventListener("click", () => {
	animateIcon("exportCompilertext", "fa-fade", 1000);
	const exportFlename = getCurrentTabName(pyCompileAtTabIndex);
	const exportOutput = compileData.length === 0 ? defaultOutput : compileData;

	downloadFile(exportOutput, 'text/plain', `${exportFlename.trim().replace(/\.(py)$/,"")}-${compileTime.toLocaleString()}.txt`);
});

function handleAutoScrollDiff() {
	const activeTab = diffTabs.children[currentTabIndexDiff];
	const tabPosition = activeTab.offsetLeft;
	const tabEndPosition = tabPosition + activeTab.offsetWidth;
	const leftVisible = diffTabs.scrollLeft;
	const rightVisible = leftVisible + diffTabs.offsetWidth;

	autoMiddleScroll(activeTab);

	if (tabPosition < leftVisible) {
		diffTabs.scrollLeft = tabPosition;
	} else if (tabEndPosition > rightVisible) {
		diffTabs.scrollLeft = tabPosition + activeTab.offsetWidth - diffTabs.offsetWidth;
	}
}

function createDiffTabs() {
	diffTabs.innerHTML = '';

	for (let index = 0; index < sourcesOut.length; index++) {
		const isActive = index === currentTabIndexDiff;
		const diffTab = document.createElement('li');
		diffTab.id = `diff-tab-${index + 1}`;
		diffTab.className = `diff-tab relative cursor-pointer bg-[#f0f0f0] border-[#ccc] px-[25px] py-2 mb-[5px] border border-solid rounded mr-[5px] transition-opacity ${isActive ? 'active' : ''}`;
		diffTab.innerHTML = `${addFontAwesomeIcon('fa-brands fa-python', [isActive ? "text-blue-600" : '', 'pr-2'])} ${getCurrentTabName(index)}`;

		if (fileTabsOut.children[index] && fileTabsOut.children[index].classList.contains('error')) {
			diffTab.classList.add("error");
			diffTab.title = `Minification failed at ${getOrdinalSuffix(index)} Tab`;
		} else {
			diffTab.title = `${getOrdinalSuffix(index)} Tab`;
		}

		diffTab.addEventListener('click', () => {
			if (index === currentTabIndexDiff) return;
			switchTabDiff(index);
			handleAutoScrollDiff();
		});

		diffTabs.appendChild(diffTab);
	}

	if (currentTabIndexOut >= 0 && currentTabIndexOut < sourcesOut.length) {
		switchTabDiff(currentTabIndexOut);
		handleAutoScrollDiff();
	}
}

function updateDiffEditor() {
	if (!diffEditor) return;

	const originalContent = tempStorage[sources[currentTabIndexDiff]];
	const minifiedContent = tempStorage[sourcesOut[currentTabIndexDiff]];

	const originalSource = originalContent && originalContent.length > 0 ? originalContent : "#Original code is empty!";
	const minifiedSource = minifiedContent && minifiedContent.length > 0 ? minifiedContent : "#Not Minified!";

	const originalEditorModel = monaco.editor.createModel(originalSource, 'python');
	const minifiedEditorModel = monaco.editor.createModel(minifiedSource, 'python');

	diffEditor.updateOptions({
		wordWrap: isDiffTextWrapEnabled ? 'on' : 'off'
	});

	diffEditor.setModel({
		original: originalEditorModel,
		modified: minifiedEditorModel
	});
}

function showDiffPopup() {
	if (currentTabIndex !== currentTabIndexOut) {
		showSweetAlert({
			text: "Diff Editor is not available, reload the page and try again!",
			icon: "warning",
			confirmButtonColor: "#6E7881",
			confirmButtonText: "Close"
		}).then((result) => {
			if (result.isConfirmed) {
				disableDwSrCpBtn(false);
			}
		});
		return;
	}

	if (!isMobile() && (sourceEditor.getModel().getValue().trim() === '' || minifiedEditor.getModel().getValue().trim() === '')) {
		return;
	}

	createDiffTabs();

	diffPopupContent.classList.remove('scale-90', 'opacity-0');
	diffPopupContent.classList.add('scale-100', 'opacity-100');

	setTimeout(() => {
		diffPopup.classList.remove('hidden');
		diffPopup.classList.add('flex');
		document.body.classList.add("overflow-y-hidden");
		document.body.classList.remove("overflow-y-scroll");
		closeDiffPopupBtn.classList.remove('hidden');
	}, 200);

	if (!diffEditor) {
		require(['vs/editor/editor.main'], () => {
			diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
				theme: darkModeEnabled ? 'vs-dark' : 'vs',
				readOnly: true,
				minimap: {
					enabled: false
				},
				fontFamily: 'Source Code Pro',
				renderValidationDecorations: 'on',
				scrollbar: {
					vertical: 'visible',
					horizontal: 'visible'
				},
				fontWeight: 'bold',
				semanticHighlighting: true,
				folding: true,
				cursorBlinking: 'smooth',
				cursorSmoothCaretAnimation: true,
				cursorStyle: 'line',
				wordWrap: isDiffTextWrapEnabled ? 'on' : 'off',
				automaticLayout: true
			});

			updateDiffEditor();

			sourceEditor.getModel().onDidChangeContent(updateDiffEditor);
			minifiedEditor.getModel().onDidChangeContent(updateDiffEditor);
		});
	} else {
		updateDiffEditor();
		diffWrapSwitch.checked = isDiffTextWrapEnabled;
	}

	setTimeout(handleAutoScrollDiff, 300);
}

diffWrapSwitch.addEventListener('change', (event) => {
	isDiffTextWrapEnabled = event.target.checked;
	if (diffEditor) {
		diffEditor.updateOptions({
			wordWrap: isDiffTextWrapEnabled ? 'on' : 'off'
		});
	}
});

function hideDiffPopup() {
	diffPopupContent.classList.remove('scale-100', 'opacity-100');
	diffPopupContent.classList.add('scale-90', 'opacity-0');
	switchTab(currentTabIndexDiff);

	setTimeout(() => {
		diffPopup.classList.add('hidden');
		diffPopup.classList.remove('flex');
		document.body.classList.remove("overflow-y-hidden");
		document.body.classList.add("overflow-y-scroll");
		closeDiffPopupBtn.classList.add('hidden');
		diffTabs.innerHTML = '';

		if (diffEditor) {
			diffEditor.dispose();
			diffEditor = null;
		}
	}, 300);
}

function switchTabDiff(index) {
	if (index >= 0 && index < sourcesOut.length) {
		currentTabIndexDiff = index;

		handleAutoScrollDiff();

		const tabs = diffTabs.querySelectorAll('li');
		tabs.forEach((tab, i) => {
			const icon = tab.querySelector('.fa-python');
			if (i === index) {
				updateDiffEditor();
				animateIcon(`diff-tab-${currentTabIndexDiff + 1}`, "animate-pulse", 700);
				tab.classList.add('active');
				if (icon) {
					icon.classList.add('text-blue-600');
				}

				autoMiddleScroll(tab);

				const containerHeight = diffTabs.clientHeight;
				const tabHeight = tab.clientHeight;
				const tabTop = tab.offsetTop;
				const tabBottom = tabTop + tabHeight;
				const containerTop = diffTabs.scrollTop;
				const containerBottom = containerTop + containerHeight;

				if (tabTop < containerTop || tabBottom > containerBottom) {
					diffTabs.scrollTop = tabTop - (containerHeight / 2) + (tabHeight / 2);
				}

			} else {
				tab.classList.remove('active');
				if (icon) {
					icon.classList.remove('text-blue-600');
				}
			}
		});
	}
}

openDiffPopupBtn.addEventListener('click', () => {
	if (minifiedEditor.getModel().getValue() !== "" && (currentTabIndex === currentTabIndexOut)) {
		animateIcon("fade-10", "fa-fade", 500);
		setTimeout(showDiffPopup, 400);
		disableDwSrCpBtn(true);
	}
});

closeDiffPopupBtn.addEventListener('click', () => {
	animateIcon("fade-11", "fa-fade", 400);
	setTimeout(hideDiffPopup, 300);
	disableDwSrCpBtn(false);
});

function validateFiles(files) {
	const validFiles = [];
	const invalidFiles = [];

	for (let i = 0; i < files.length; i++) {
		const file = files[i];
		if (file.name.toLowerCase().trim().endsWith('.py')) {
			validFiles.push(file);
		} else {
			invalidFiles.push(file);
		}
		fileInput.value = '';
	}

	if (invalidFiles.length > 0) {
		handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} Invalid file format. Please select only .py file(s).`);
		fileInput.value = '';
	}

	return validFiles;
}

function fileContent(e) {
	const fileContent = e.target.result;
	if (fileContent.length === 0) {
		return defaultContent;
	} else {
		return fileContent;
	}
}

function setupFileInput() {
	function dragpy(event) {
		disableTyping();
		handleFiles(validateFiles(event.dataTransfer.files));
	}

	fileInput.addEventListener('change', (event) => {
		disableTyping();
		const pyFiles = [...event.target.files].filter(file => file.name.trim().toLowerCase().endsWith('.py'));

		if (pyFiles.length === 0) {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} Invalid file format. Please select only .py file(s).`);
		} else {
			handleFiles(pyFiles);
			fileInput.value = '';
		}
	});

	dropArea.addEventListener('click', () => {
		fileInput.click();
	});

	document.addEventListener('dragover', (event) => {
		event.preventDefault();
	});

	dropArea.addEventListener('dragover', (event) => {
		event.preventDefault();
		dropArea.classList.add('!bg-blue-100/[.2]', '!border-blue-400/[.2]', 'scale-x-105', 'scale-y-110');
	});

	dropArea.addEventListener('dragleave', (event) => {
		event.preventDefault();
		dropArea.classList.remove('!bg-blue-100/[.2]', '!border-blue-400/[.2]', 'scale-x-105', 'scale-y-110');
	});

	document.addEventListener('drop', (event) => {
		event.preventDefault();
		dragpy(event);
	});

	dropArea.addEventListener('drop', (event) => {
		event.preventDefault();
		dropArea.classList.remove('!bg-blue-100/[.2]', '!border-blue-400/[.2]', 'scale-x-105', 'scale-y-110');
	});

	function handleFiles(files) {
		var fileCount = 0;

		Array.from(files).forEach((file) => {
			if (fileCount < getMaxTabs()) {
				handleErrorMessage();
				handleFile(file);
				fileCount++;
			}
		});
	}

	function handleFile(file) {
		if (file.size <= maxFileSizeInBytes) {
			const reader = new FileReader();
			reader.onload = (e) => {
				if (sourceEditor.getModel().getValue().trim() !== '' && (sources.length < getMaxTabs() && sourcesOut.length < getMaxTabs())) {
					addEmptyTab();
				}

				sourceEditor.getModel().setValue(fileContent(e));
				sourceEditor.revealLine(1, monaco.editor.ScrollType.Immediate);
				handleErrorMessage();
				updateNametoTab(file.name.trim());
				minifiedEditor.getModel().setValue('');
				handleAutoScroll();
				updateGraph();
			};
			reader.readAsText(file);
		} else {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} File size exceeds ${maxFileSizeInBytes / 1024} KB. Please select a smaller file.`);
			fileInput.value = '';
		}
	}
}

window.addEventListener('DOMContentLoaded', setupFileInput);

function downloadFile(content, mimeType, fileName) {
	const blob = new Blob([content], {
		type: mimeType
	});
	const dataUri = URL.createObjectURL(blob);
	const downloadLink = document.createElement("a");

	downloadLink.href = dataUri;
	downloadLink.download = fileName.trim();

	document.body.appendChild(downloadLink);
	downloadLink.click();
	document.body.removeChild(downloadLink);
	URL.revokeObjectURL(dataUri);
}

function minifiedTabs() {
	const sortedKeys = Object.keys(tempStorage)
		.filter(key => key.startsWith("#PyFile-out-"))
		.sort((a, b) => {
			const aNum = parseInt(a.split("-")[2], 10);
			const bNum = parseInt(b.split("-")[2], 10);
			return aNum - bNum;
		});

	const nonEmptyCount = sortedKeys.reduce((count, key) => {
		const value = (tempStorage[key]?.trim()) || "";
		if (value !== "") {
			count++;
		}

		return count;
	}, 0);

	return nonEmptyCount;
}

dwButton.addEventListener('click', () => shareOrDownload('download'));

async function createShareLink(file, filename) {
	const response = await fetch('https://file.io/?expires=2d', {
		method: 'POST',
		body: createFormData(file, filename)
	});

	const result = await response.json();
	return result;
}

function getCompressMimetype(fileFormat) {
	const fileType = fileFormat.trim().toLowerCase();

	if (fileType === 'zip') {
		return 'application/zip';
	} else if (fileType === 'rar') {
		return 'application/vnd.rar';
	} else if (fileType === '7z') {
		return 'application/x-7z-compressed';
	}
}

function shareLink(content, filename, isCompressed, fileFormat) {
	handleTabsOverlay(false);
	fileLinkLoad.innerHTML = `<span class="font-bold text-gray-500">loading ${addFontAwesomeIcon('fa-solid fa-spinner fa-spin')}</span>`;

	createShareLink(content, filename).then(result => {
		if (result.success) {
			const fileLink = result.link;
			const finalFileFormat = fileFormat.trim().toLowerCase() !== "7z" ? fileFormat.toUpperCase().trim() : fileFormat.trim();
			const expTime = `${isCompressed ? finalFileFormat + ' File' : 'Python file'} will be deleted after download.<br> Link expires on <span class="font-bold">${new Date(result.expires).toLocaleDateString('en-US', dateformat)}</span>`;

			shareOverlay.classList.remove("hidden");
			popup.classList.remove("hidden");
			document.body.classList.add("overflow-y-hidden");
			document.body.classList.remove("overflow-y-scroll");
			fileShareLink.classList.add('hidden');
			copyMsg.textContent = '';
			helpMsg.innerHTML = '';

			displayQRCode(fileLink);

			setTimeout(() => {
				copyMsg.innerHTML = `Tap to copy ${addFontAwesomeIcon('fa-solid fa-copy',['hover:text-blue-600'])}`;
				linkNewtab.href = fileLink;
				linkNewtab.classList.add('text-white', 'focus:ring-4', 'font-medium', 'rounded-lg', 'text-sm', 'px-5', 'py-2.5', 'bg-blue-600', 'hover:bg-blue-700');
				linkNewtab.innerHTML = addFontAwesomeIcon('fa-solid fa-up-right-from-square');
				linkNewtab.target = "_blank";
				linkNewtab.title = 'Open in new tab';
				orScan.innerHTML = `or Scan ${addFontAwesomeIcon('fa-solid fa-expand')}`;
				downloadLinkUrl.classList.remove('hidden');
				helpMsg.innerHTML = `${addFontAwesomeIcon('fa-solid fa-question-circle' ,['text-blue-500' ,'text-2xl'])}<div class="help-content rounded-lg"><p class="text-sm text-center">${expTime}</span></p></div>`;
				orScan.classList.add('block', 'pt-2', 'mb-2', 'text-lg', 'text-neutral-500', 'font-medium');
				closePopupOverlay.classList.remove('hidden');
				qrCode.title = "Double Click to zoom-in and zoom-out";
				qrCode.classList.add('!bg-white', 'rounded-lg', 'border-2', 'border-dashed', 'border-black', 'w-36', 'ml-12', 'p-3', 'mr-12', 'mt-2');
				qrCode.classList.remove('hidden');
				fileShareLink.classList.remove('hidden');
				fileLinkLoad.innerHTML = '';
				qrCode.classList.remove('inline');
				fileShareLink.href = fileLink;
				fileShareLink.value = fileLink;
				downloadLinkUrl.innerHTML = `Download ${finalFileFormat} ${addFontAwesomeIcon('fa-solid fa-file-zipper')}`

				if (isCompressed) {
					downloadLinkUrl.onclick = () => {
						downloadFile(content, getCompressMimetype(fileFormat), filename.trim());
					};
					downloadLinkUrl.classList.remove('hidden');
				} else {
					downloadLinkUrl.classList.add('hidden');
				}
			}, 1500);
		} else {
			throw new Error('Failed to create share link');
		}
	}).catch(error => {
		showSweetAlert({
			html: `${addFontAwesomeIcon('fa-solid fa-circle-exclamation')} ${error.message}, try again later`,
			icon: "error",
			confirmButtonColor: "#179fff"
		});
		disableDwSrCpBtn(false);
	});
}

qrCode.addEventListener('dblclick', () => {
	animateIcon("qrCode", "fa-fade", 300);
	setTimeout(() => {
		qrCode.classList.remove('w-39');
		qrCode.classList.toggle('w-60');
	}, 400)
});

function shareOrDownload(type) {
	const content = minifiedEditor.getModel().getValue();
	const tabFileName = getCurrentTabName().replace(/\.py$/, "");

	if (content === "") return;

	disableDwSrCpBtn(true);
	animateIcon(type === 'download' ? "fade-1" : "fade-2", "fa-fade", 3000);

	if (minifiedTabs() === 1) {
		if (type === 'download') {
			downloadFile(content, "text/x-python", getCurrentTabName());
		} else if (type === 'share') {
			shareLink(content, getCurrentTabName(), false, 'python');
		}
		disableDwSrCpBtn(false);
		return;
	}

	showSweetAlert({
		title: type === 'download' ? "Download" : "Share",
		showDenyButton: true,
		showCancelButton: true,
		allowOutsideClick: false,
		confirmButtonText: `${tabFileName.length > 20 ? `${tabFileName.slice(0, 7)}...${tabFileName.slice(-3)}` : tabFileName}.py`,
		denyButtonText: `All minified files`,
		cancelButtonText: "Close",
		denyButtonColor: '#22C55E',
		didOpen: (Swal) => {
			const confirmButton = Swal.getConfirmButton();
			confirmButton.title = tabFileName.trim();
		},
		preConfirm: () => {
			if (type === 'download') {
				downloadFile(content, "text/x-python", getCurrentTabName());
				return false;
			} else if (type === 'share') {
				shareLink(content, getCurrentTabName(), false, 'python');
			}
			disableDwSrCpBtn(false);
		}
	}).then((result) => {
		if (result.isDenied) {
			if (type === 'download') {
				compressPyFiles(false);
			} else if (type === 'share') {
				compressPyFiles(true);
			}
		} else if (result.isDismissed) {
			disableDwSrCpBtn(false);
		}
	});
}

shareButton.addEventListener('click', () => shareOrDownload('share'));

function createFormData(content, fileName) {
	shuffleArray(sentences);
	const formData = new FormData();
	const blob = new Blob([content], {
		type: 'application/x-python'
	});

	formData.append('file', blob, fileName);
	formData.append('description', `Python Minifier - Glad432 (glad432.github.io)\n${sentences[0]}`);
	return formData;
}

async function displayQRCode(fileLink) {
	const {
		default: QRCode
	} = await import('qrcode-generator');

	const qr = QRCode(10, 'M');
	qr.addData(fileLink.trim());
	qr.make();

	const imgTag = qr.createImgTag(6, 0);
	qrCode.innerHTML = imgTag;
}

function closePopup() {
	animateIcon("closePopup", "fa-fade", 700);
	setTimeout(() => {
		disableDwSrCpBtn(false);
		qrCode.classList.remove('!bg-white', 'rounded-lg', 'border-2', 'border-dashed', 'border-black', 'w-36', 'ml-12', 'p-3', 'mr-12', 'mt-2');
		orScan.classList.remove('block', 'pt-2', 'mb-2', 'text-lg', 'text-neutral-500', 'font-medium');
		linkNewtab.classList.remove('text-white', 'bg-blue-600', 'hover:bg-blue-700', 'focus:ring-4', 'font-medium', 'rounded-lg', 'text-sm', 'px-5', 'py-2.5');
		closePopupOverlay.classList.add('hidden');
		shareOverlay.classList.add("hidden");
		downloadLinkUrl.classList.add('hidden');
		popup.classList.add("hidden");
		document.body.classList.remove("overflow-y-hidden");
		document.body.classList.add("overflow-y-scroll");
		qrCode.classList.add('hidden');
		qrCode.innerHTML = '';
		qrCode.title = '';
		fileLinkLoad.innerHTML = '';
		fileShareLink.value = '';
		copyMsg.innerHTML = '';
		orScan.innerHTML = '';
		helpMsg.innerHTML = '';
		linkNewtab.innerHTML = '';
		linkNewtab.href = '';
		linkNewtab.target = '';
		downloadLinkUrl.innerHTML = '';
	}, 800);
}

closePopupOverlay.addEventListener('click', closePopup);

async function copyfilelink() {
	await navigator.clipboard.writeText(fileShareLink.value);
	if (cpyTimeout1) {
		clearTimeout(cpyTimeout1);
	}
	copyMsg.innerHTML = `Copied ${addFontAwesomeIcon('fa-solid fa-copy fa-fade')}`;
	cpyTimeout1 = setTimeout(() => {
		copyMsg.innerHTML = `Tap to copy ${addFontAwesomeIcon('fa-solid fa-copy')}`;
		cpyTimeout1 = null;
	}, 3000);
}

fileShareLink.addEventListener('click', copyfilelink);

async function compressFiles(selectedIndices, sortedKeys, maxLength, baseFileName, fileFormat, addReadme, fastCompress, generateLink) {
	const {
		default: JSZip
	} = await import('jszip');

	const zipArchive = new JSZip();
	const fileOccurrences = {};
	let nonEmptyFilesCount = 0;
	let fileNamesList = 'The list of the python files minified:\n\n';
	const fileFormatFinal = fileFormat.trim().toLowerCase() !== "7z" ? fileFormat.toUpperCase().trim() : fileFormat.trim();

	function delay(time) {
		return new Promise((resolve) => {
			setTimeout(resolve, time);
		});
	}

	function getFileNameFromTabId(tabId) {
		const fileTab = document.getElementById(tabId);
		return fileTab ? fileTab.textContent.trim() : '';
	}

	const finalFileNames = selectedIndices.map(index => {
		const fileNameOut = getFileNameFromTabId(`file-out-${index + 1}`);
		const fileNameIn = getFileNameFromTabId(`file-${index + 1}`);
		let finalFileName = fileNameOut || fileNameIn || baseFileName;

		const occurrence = (fileOccurrences[finalFileName] || 0) + 1;
		fileOccurrences[finalFileName] = occurrence;

		if (occurrence > 1) {
			const extensionIndex = finalFileName.lastIndexOf('.');
			const basename = extensionIndex === -1 ? finalFileName : finalFileName.slice(0, extensionIndex);
			const extension = extensionIndex === -1 ? '' : finalFileName.slice(extensionIndex);
			finalFileName = `${basename}-${occurrence - 1}${extension}`;
		}

		return finalFileName;
	});

	for (const index of selectedIndices) {
		const fileKey = sortedKeys[index];
		const fileName = finalFileNames[selectedIndices.indexOf(index)];

		if (fileName) {
			const minifiedCode = tempStorage[fileKey] || "";

			if (minifiedCode.trim() !== '') {
				zipArchive.file(fileName, minifiedCode);
				if (addReadme) {
					fileNamesList += `${(nonEmptyFilesCount + 1).toString().padStart(2, '0')}. ${fileName}\n`;
				}
				nonEmptyFilesCount++;

				const totalCompressProgress = ((nonEmptyFilesCount / maxLength) * 100);
				compressProgressBar.value = totalCompressProgress;
				compressProgressStatus.innerText = `Compressing... ${totalCompressProgress.toFixed(2)}%`;
				compressProgress.classList.remove('hidden');

				await delay(fastCompress || (nonEmptyFilesCount > 10 ? 100 : 200));
			}
		}
	}

	if (nonEmptyFilesCount > 0 && addReadme) {
		fileNamesList += `\n${fileFormatFinal} File Created on: ${new Date().toLocaleString()}\nhttps://glad432.github.io`;
		zipArchive.file('readme.txt', fileNamesList);
	}

	compressProgressBar.value = 100;
	compressProgressStatus.textContent = `${fileFormatFinal} File Created`;
	setTimeout(() => {
		compressProgress.classList.add('hidden');
	}, 500);

	const compressedBlob = await zipArchive.generateAsync({
		type: 'blob',
		compression: 'DEFLATE'
	});

	setTimeout(() => {
		if (!generateLink) {
			if (compressedBlob) {
				showSweetAlert({
					title: `Download`,
					html: `<p class="pb-3 font-bold text-neutral-500 hover:underline" title="${baseFileName}.${fileFormat}">${baseFileName.length > 25 ? `${baseFileName.slice(0, 11)}...${baseFileName.slice(-12)}.${fileFormat}` : `${baseFileName}.${fileFormat}`}</p><button id="download-btn" class="swal2-confirm swal2-styled bg-red-500 rounded text-white hover:bg-red-600">Download</button><button id="close-btn" class="swal2-cancel swal2-styled">Close</button>`,
					showConfirmButton: false,
					allowOutsideClick: false,
					didOpen: (Swal) => {
						Swal.getPopup().querySelector('#download-btn').addEventListener('click', () => {
							downloadFile(compressedBlob, getCompressMimetype(fileFormat), `${baseFileName.trim()}.${fileFormat.trim().toLowerCase()}`);
						});
						Swal.getPopup().querySelector('#close-btn').addEventListener('click', () => {
							disableDwSrCpBtn(false);
							Swal.close();
						});
					}
				});
			}
		} else {
			shareLink(compressedBlob, `${baseFileName.trim()}.${fileFormat.trim().toLowerCase()}`, true, fileFormat);
		}

		handleTabsOverlay(false);
	}, 600);
}

async function filterFileNames() {
	const fileTabsOutArray = [];
	const tabFileNamesFiltered = [];
	const minifiedData = [];
	const minifierFilesContent = [];

	Object.keys(tempStorage).forEach(key => {
		if (key.startsWith("#PyFile-out")) {
			minifierFilesContent.push(key);
		}
	});

	const numericalSort = (a, b) => parseInt(a.match(/\d+/)[0]) - parseInt(b.match(/\d+/)[0]);
	minifierFilesContent.sort(numericalSort);

	await processAndPush(minifierFilesContent, minifiedData, false);

	if (fileTabsOut) {
		Array.from(fileTabsOut.children).forEach(child => {
			fileTabsOutArray.push(child.textContent.trim());
		});
	}

	tabFileNamesFiltered.push(...fileTabsOutArray.filter((_, index) => minifiedData[index] > 0));

	return tabFileNamesFiltered;
}

function compressOptions(isShareLink) {
	const fragment = document.createDocumentFragment();

	const div1 = document.createElement('div');
	div1.className = 'justify-center flex flex-row my-5';
	['ZIP', 'RAR', '7z'].forEach(labelText => {
		const div = document.createElement('div');
		if (labelText !== "7z") {
			div.className = "mr-5";
		}
		const input = document.createElement('input');
		input.className = "mr-1";
		input.type = 'radio';
		input.id = `format-${labelText.toLowerCase()}`;
		input.name = 'file-format';
		input.value = labelText.toLowerCase();
		if (labelText === 'ZIP') {
			input.checked = true;
		}

		if (input.checked) {
			input.setAttribute('checked', '');
		}

		const label = document.createElement('label');
		label.className = 'active:font-bold focus:font-bold';
		label.setAttribute('for', `format-${labelText.toLowerCase()}`);
		label.textContent = labelText;
		div.appendChild(input);
		div.appendChild(label);
		div1.appendChild(div);
	});
	fragment.appendChild(div1);

	const divCenter = document.createElement('div');
	divCenter.className = 'justify-center flex mb-5 dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]';
	const div2 = document.createElement('div');
	div2.className = 'relative';
	const input2 = document.createElement('input');
	input2.type = 'text';
	input2.id = 'file-name-input';
	input2.className = 'block rounded-lg px-2.5 pb-2.5 pt-5 text-sm text-gray-900 w-64 border border-solid border-gray-400 appearance-none focus:outline-none focus:ring-0 peer dark:text-[#d6d3cd]';
	input2.placeholder = ' ';
	const label1 = document.createElement('label');
	label1.setAttribute('for', 'file-name-input');
	label1.textContent = 'Enter File Name: (Optional)';
	label1.className = 'absolute cursor-text text-bold text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto';
	div2.appendChild(input2);
	div2.appendChild(label1);
	divCenter.appendChild(div2);
	fragment.appendChild(divCenter);

	const checkboxDiv = document.createElement('div');
	checkboxDiv.className = 'justify-center flex flex-col items-center mb-5';

	checkboxDiv.appendChild(checkboxField({
		id: 'add-readme',
		label: 'Add readme.txt file',
		checked: true
	}));

	checkboxDiv.appendChild(checkboxField({
		id: 'fast-compression',
		label: 'Fast Compression',
		checked: false,
		labelClass: "relative right-[7px]"
	}));

	if (isShareLink) {
		checkboxDiv.appendChild(checkboxField({
			id: 'generate-link',
			label: 'Generate Share Link',
			checked: true,
			labelClass: "relative left-[2px]"
		}));
	}

	fragment.appendChild(checkboxDiv);
	const tempDiv = document.createElement('div');
	tempDiv.appendChild(fragment);

	return tempDiv.innerHTML;
}

async function showMinifiedFilesPopup(isShareLink) {
	const ul = document.createElement("ul");
	ul.className = "max-h-60 overflow-y-auto overflow-x-hidden list-none p-4 text-center [scrollbar-width:thin] dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]";

	const finalMinifiedTabs = await filterFileNames();

	finalMinifiedTabs.forEach((file) => {
		const li = document.createElement("li");
		li.className = "flex items-center justify-start py-2 border-2 rounded-lg shadow hover:shadow-md transition-shadow transition-transform duration-200 transform hover:scale-105 file-item pl-[20%] hover:bg-[#68686821] hover:border-[#82828221] dark:bg-[#363636] dark:border-[#444343] dark:text-[#e8e8e8] dark:hover:bg-[#393838a9]";

		const tabFileName = file.replace(/\.py$/, '');
		const displayName = tabFileName.length > 25 ? `${tabFileName.slice(0, 11)}...${tabFileName.slice(-12)}.py` : `${tabFileName}.py`;

		li.title = tabFileName.trim();
		li.appendChild(addFontAwesomeIcon('fa-brands fa-python', ["text-blue-600", "mr-2"], true));
		li.appendChild(document.createTextNode(displayName));
		ul.appendChild(li);
	});

	const {
		isConfirmed
	} = await showSweetAlert({
		title: `${minifiedTabs()} Minified Files`,
		html: `<div class="py-4 border rounded-lg dark:bg-[#3d3d3e] dark:border-transparent">${ul.outerHTML}</div>`,
		confirmButtonText: "Back",
		allowOutsideClick: false,
	});

	if (isConfirmed) {
		disableDwSrCpBtn(false);
		handleTabsOverlay(false);
		compressPyFiles(isShareLink);
	}
}

async function compressPyFiles(isShareLink = false) {
	const sortedKeys = Object.keys(tempStorage)
		.filter(key => key.startsWith("#PyFile-out-"))
		.sort((a, b) => {
			const aNum = parseInt(a.split("-")[2], 10);
			const bNum = parseInt(b.split("-")[2], 10);
			return aNum - bNum;
		});


	const maxLength = sortedKeys.filter(key => {
		return (tempStorage[key]?.trim() !== "");
	}).length;

	const tabContents = Array.from(fileTabsOut.children)
		.map((_, index) => ({
			index: index,
			content: minifiedEditor.getModel().getValue()
		}));

	const relevantTabs = tabContents.filter(tab => tab.content !== '');
	const selectedIndices = relevantTabs.map(tab => tab.index);

	handleTabsOverlay(true);
	shareButton.disabled = true;

	const {
		value,
		isDismissed,
		isDenied
	} = await showSweetAlert({
		html: compressOptions(isShareLink),
		inputValidator: (value) => {
			if (!value.fileFormat) {
				return "You need to choose one file format!";
			}
		},

		allowOutsideClick: false,
		confirmButtonColor: "#179fff",
		showCancelButton: true,
		cancelButtonText: 'Cancel',
		cancelButtonColor: "#d33",
		showDenyButton: true,
		denyButtonText: 'View Files',
		denyButtonColor: "#22C55E",

		preConfirm: () => {
			const enteredFileName = document.getElementById('file-name-input').value.trim().slice(0, 256);
			const sanitizedFileName = enteredFileName.replace(/[^a-zA-Z0-9,\s.()]|,(?![a-zA-Z])|\.(?![a-zA-Z]|py$)/g, "_") || 'minified_files';

			const result = {
				fileFormat: document.querySelector('input[name="file-format"]:checked').value,
				fileName: sanitizedFileName,
				addReadme: document.getElementById('add-readme').checked,
				fastCompress: document.getElementById('fast-compression').checked
			};

			if (isShareLink) {
				result.generateLink = document.getElementById('generate-link').checked;
			}

			return result;
		}
	});

	if (isDismissed) {
		disableDwSrCpBtn(false);
		handleTabsOverlay(false);
		return;
	} else if (isDenied) {
		await showMinifiedFilesPopup(isShareLink);
		return;
	}

	const {
		fileFormat,
		fileName,
		addReadme,
		fastCompress,
		generateLink
	} = value;

	await compressFiles(selectedIndices, sortedKeys, Math.min(20, maxLength), fileName, fileFormat, addReadme, fastCompress, generateLink);

}

function initializeMinifier() {
	function buildQuery() {
		const preserveGlobals = document.getElementById('preserve_globals');
		const preserveLocals = document.getElementById('preserve_locals');

		const queryParts = options.map(option => {
			const checkbox = document.getElementById(option);
			return checkbox && checkbox.checked ? `${option}=true` : `${option}=false`;
		});

		function processPreserveInput(inputElement, key) {
			if (inputElement) {
				const processedValues = inputElement.value
					.replace(/\s*,\s*|\s+/g, ',')
					.split(',')
					.map(str => str.trim())
					.filter(Boolean);

				if (processedValues.length > 0) {
					queryParts.push(`${key}=${encodeURIComponent(JSON.stringify(processedValues))}`);
				}
			}
		}

		processPreserveInput(preserveGlobals, 'preserve_globals');
		processPreserveInput(preserveLocals, 'preserve_locals');

		return queryParts.join('&');
	}

	async function copyClick() {
		await navigator.clipboard.writeText(minifiedEditor.getModel().getValue());
		const lastLineNumber = minifiedEditor.getModel().getLineCount();
		minifiedEditor.revealLine(lastLineNumber);
		minifiedEditor.setSelection({
			startLineNumber: 1,
			startColumn: 1,
			endLineNumber: lastLineNumber,
			endColumn: minifiedEditor.getModel().getLineMaxColumn(lastLineNumber)
		});

		if (cpyTimeout0) {
			clearTimeout(cpyTimeout0);
		}

		copyButton.innerHTML = `Copied ${addFontAwesomeIcon('fa-solid fa-clipboard fa-fade')}`;
		cpyTimeout0 = setTimeout(() => {
			copyButton.innerHTML = `Copy ${addFontAwesomeIcon('fa-solid fa-clipboard')}`;
			cpyTimeout0 = null;
		}, 2500);
	}

	async function minifyClick() {
		handleTabsOverlay(true);
		disableDwSrCpBtn(true);
		selectallopt.disabled = true;
		resetOpt.disabled = true;

		const allOptions = [...options, "preserve_locals", "preserve_globals"];
		allOptions.forEach(option => {
			const checkbox = document.getElementById(option);
			checkbox.disabled = true;
		});

		selectallopt.classList.add("cursor-not-allowed");
		resetOpt.classList.add("cursor-not-allowed");
		minifiedEditor.getModel().setValue('');
		minifiedSize.innerHTML = `${addFontAwesomeIcon('fa-solid fa-spinner fa-spin-pulse')} Loading....`;

		const code = typingInProgress ? sampleCode.replace(/\r/g, '') : sourceEditor.getModel().getValue();

		if (code !== '' && minifiedEditor.getModel().getValue() === '') {
			try {
				minifyBtnText.innerHTML = `Minifying ${addFontAwesomeIcon('fa-solid fa-down-left-and-up-right-to-center fa-sm fa-fade')}`;
				minifyButton.classList.add("pointer-events-none");

				const response = await fetch(`https://python-minify.vercel.app/minify?${buildQuery()}`, {
					method: 'POST',
					headers: {
						'Content-Type': 'text/plain'
					},
					body: code
				});

				if (response.ok) {
					const minified = await response.json();
					minifiedEditor.getModel().setValue(minified.minified_code);
					saveEditorContent(true);
					minifiedEditor.revealLine(1, monaco.editor.ScrollType.Immediate);
					disableDwSrCpBtn(false);
					graphContainer.classList.remove("hidden");
				} else {
					disableDwSrCpBtn(true);
					clearPyComplier(true);
					minifiedSize.innerHTML = `${addFontAwesomeIcon('fa-solid fa-circle-exclamation')} Minification failed!`;
				}
			} catch {
				disableDwSrCpBtn(true);
				clearPyComplier(true);
				minifiedSize.innerHTML = `${addFontAwesomeIcon('fa-solid fa-circle-exclamation')} Minification failed!`;
			} finally {
				minifyBtnText.innerHTML = `Minify ${addFontAwesomeIcon('fa-solid fa-down-left-and-up-right-to-center fa-sm')}`;
				minifyButton.classList.remove("pointer-events-none");
				updateGraph();
			}
		} else {
			minifiedSize.textContent = "Enter Code";
		}

		handleTabsOverlay(false);
		selectallopt.disabled = false;
		resetOpt.disabled = false;
		allOptions.forEach(option => {
			const checkbox = document.getElementById(option);
			checkbox.disabled = false;
		});

		selectallopt.classList.remove("cursor-not-allowed");
		resetOpt.classList.remove("cursor-not-allowed");
		minifyButton.classList.remove("pointer-events-none");

		if (minifiedEditor.getModel().getValue().trim() === "" && sourceEditor.getModel().getValue() !== "") {
			fileTabsOut.children[currentTabIndexOut].classList.add("error");
			fileTabsOut.children[currentTabIndexOut].title = `Minification failed at ${getOrdinalSuffix(currentTabIndexOut)} Tab`;
		} else {
			fileTabsOut.children[currentTabIndexOut].classList.remove("error");
			fileTabsOut.children[currentTabIndexOut].title = `${getOrdinalSuffix(currentTabIndexOut)} Tab`;
		}
	}

	minifyButton.addEventListener('click', minifyClick);
	copyButton.addEventListener('click', () => {
		if (minifiedEditor.getModel().getValue() !== "") {
			copyClick();
		}
	});

	minifyButton.classList.remove("pointer-events-none");
	let isProcessing = false;

	minifyAllBtn.addEventListener('click', async () => {
		if (isProcessing) return;
		isProcessing = true;
		animateIcon(`minifyAll`, "fa-fade", 800);
		minifyAllBtn.disabled = true;
		minifyButton.classList.add("pointer-events-none");

		const maxIndex = sourcesOut.length;
		const endIndex = Math.min(startIndex + 5, maxIndex);

		await processTabs(startIndex, endIndex);

		startIndex = endIndex >= maxIndex ? 0 : endIndex;

		if (startIndex % 5 === 0) {
			minifyButton.classList.remove("pointer-events-none");
			minifyAllBtn.disabled = false;
		}

		isProcessing = false;
	});

	async function processTabs(start, end) {
		for (let i = start; i < end; i++) {
			switchTabOut(i);
			await minifyClick(true);
			updateEditorContent(true);
			await delay(100);
		}
	}

	function delay(time) {
		return new Promise(resolve => setTimeout(resolve, time));
	}
}

window.addEventListener("DOMContentLoaded", initializeMinifier);

function clearSource() {
	deleteAllTabs();
	updateNametoTab("File 1.py");
	disableTyping();
	disableDwSrCpBtn(true);
	handleErrorMessage();
	clearPyComplier(true);
	fileInput.value = '';
	minifiedEditor.getModel().setValue('');
	sourceEditor.getModel().setValue('');
	fileLinkInput.value = '';
	minifiedSize.textContent = '0.000 kB';
	updateGraph();
}

document.getElementById('clearAll').addEventListener('click', () => {
	if (sources.length === 1 && sourcesOut.length === 1) {
		animateIcon("fade-5", "fa-fade", 1500);
		clearSource();
	} else if (sources.length > 1 && sourcesOut.length > 1) {
		animateIcon("fade-5", "fa-fade", 500);
		setTimeout(() => {
			showSweetAlert({
				title: "Are you sure?",
				text: "You won't be able to revert this!",
				icon: "warning",
				showDenyButton: true,
				showCancelButton: true,
				allowOutsideClick: false,
				confirmButtonColor: "#d33",
				cancelButtonColor: "#179fff",
				denyButtonColor: "#ffA500",
				confirmButtonText: "Clear All",
				denyButtonText: "Clear this tab"
			}).then((result) => {
				if (result.isConfirmed) {
					clearSource();
					showSweetAlert({
						title: "Cleared!",
						text: "All the tabs are Cleared.",
						icon: "success",
						confirmButtonColor: "#179fff",
						confirmButtonText: "Ok"
					});
				} else if (result.isDenied) {
					minifiedEditor.getModel().setValue('');
					sourceEditor.getModel().setValue('');
					handleErrorMessage();
					disableTyping();
					clearPyComplier();
					updateNametoTab(`File ${currentTabIndex + 1}.py`);
					minifiedSize.textContent = '0.000 kB';
					updateGraph();
					if (filetabOutOne.classList.contains("error") && currentTabIndex === 0 && currentTabIndexOut === 0) {
						filetabOutOne.classList.remove("error");
					}
				}
			});
		}, 200);
	}
});

function disableDwSrCpBtn(disable) {
	copyButton.disabled = disable;
	shareButton.disabled = disable;
	dwButton.disabled = disable;
}

function animateIcon(fade, fadeClass, fadeDur) {
	let aniTimeout;
	if (aniTimeout) {
		clearTimeout(aniTimeout);
	}

	const aniIcon = document.getElementById(fade);
	aniIcon.classList.add(fadeClass);
	aniTimeout = setTimeout(() => {
		aniIcon.classList.remove(fadeClass);
		aniTimeout = null;
	}, fadeDur);
}

function addFontAwesomeIcon(iconClass, customClasses = [], forAppend = false, id = '') {
	const validIconClasses = (iconClass || '')
		.split(' ')
		.filter(cls => cls.startsWith('fa'));

	const validCustomClasses = (Array.isArray(customClasses) ? customClasses : [])
		.filter(cls => typeof cls === 'string');

	const allClasses = [...validIconClasses, ...validCustomClasses].filter(Boolean).join(' ');

	const validId = id && typeof id === 'string' ? ` id="${id}"` : '';

	if (forAppend) {
		const icon = document.createElement('i');
		icon.className = allClasses;
		if (validId) {
			icon.id = id;
		}
		return icon;
	}

	return `<i class="${allClasses}"${validId}></i>`;
}

function handleErrorMessage(text) {
	const classlst = ['font-bold', 'bg-red-500', 'text-white', 'py-1', 'px-2', 'rounded', 'max-w-fit', 'mt-4', 'transition', 'opacity-100'];

	if (text === undefined) {
		errorMessage.classList.add('opacity-0');
		errorMessage.textContent = '';
		errorMessage.classList.remove(...classlst);
	} else {
		if (errorTimeout) {
			clearTimeout(errorTimeout);
		}

		errorMessage.innerHTML = text;
		errorMessage.classList.add(...classlst);

		setTimeout(() => {
			errorMessage.classList.remove('opacity-0');
			errorMessage.classList.add('opacity-100', 'duration-500');
		}, 50);

		errorTimeout = setTimeout(() => {
			errorMessage.classList.remove('opacity-100');
			errorMessage.classList.add('opacity-0');

			setTimeout(() => {
				errorMessage.textContent = '';
				errorMessage.classList.remove(...classlst);
				errorMessage.classList.add('opacity-0');
				errorTimeout = null;
			}, 500);
		}, 3500);
	}
}

function checkboxField({
	id,
	label,
	checked = false,
	inputClass = '',
	labelClass = '',
	divClass = ''
}) {
	const labelElement = document.createElement('label');
	labelElement.setAttribute('for', id);
	labelElement.className = `flex items-center mb-5 cursor-pointer pl-2 ${labelClass}`;

	const input = document.createElement('input');
	input.type = 'checkbox';
	input.id = id;
	input.className = `sr-only peer ${inputClass} ${checked ? 'checked' : ''}`;
	input.checked = checked;

	if (checked) {
		input.setAttribute("checked", "");
	}

	const div = document.createElement('div');
	div.className = `absolute w-9 h-5 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600 ${divClass}`;

	const span = document.createElement('span');
	span.className = "cursor-pointer ml-2 text-neutral-500 text-lg font-medium pl-10";
	span.innerHTML = label;

	labelElement.appendChild(input);
	labelElement.appendChild(div);
	labelElement.appendChild(span);
	return labelElement;
}

function inputField(id, labelText) {
	const container = document.createElement('div');
	container.className = "relative mb-3";

	const input = document.createElement('input');
	input.type = 'text';
	input.id = id;
	input.className = "block rounded-lg px-2.5 pb-2.5 pt-5 w-full text-sm bg-gray-50 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 peer focus:!border-[#2563eb] dark:bg-[#333] dark:border-[#3c4143]";
	input.placeholder = " ";
	input.spellcheck = false;

	const label = document.createElement('label');
	label.setAttribute('for', id);
	label.className = "absolute cursor-text text-bold text-gray-500 duration-200 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto";
	label.textContent = labelText;

	container.appendChild(input);
	container.appendChild(label);
	return container;
}

document.addEventListener('DOMContentLoaded', () => {
	checkboxesOpt.forEach(option => {
		optionContainer.appendChild(checkboxField(option));

		if (option.id === 'rename_locals' || option.id === 'rename_globals') {
			const index = option.id === 'rename_locals' ? 0 : 1;
			optionContainer.appendChild(inputField(inputFields[index].id, inputFields[index].label));
		}
	});
});

function showMinifyOptions() {
	animateIcon("showOptions", "fa-fade", 1000);
	if (showOptionsContent.style.maxHeight) {
		showOptionsContent.style.maxHeight = null;
	} else {
		showOptionsContent.style.maxHeight = `${showOptionsContent.scrollHeight}px`;
	}
}

document.getElementById('showOptions').addEventListener('click', showMinifyOptions);

function tickAllOptions() {
	animateIcon("selectall", "fa-fade", 800);
	optionContainer.querySelectorAll('#showOptionsContent input').forEach(input => input.checked = true);
}

selectallopt.addEventListener('click', tickAllOptions);

function resetOptions() {
	animateIcon("resetOpt", "fa-fade", 800);
	inputFields.forEach((inputField) => {
		const preserve = document.getElementById(inputField.id);
		if (preserve) {
			preserve.value = '';
		}
	});
	optionContainer.querySelectorAll('#showOptionsContent input').forEach(input => input.checked = false);
}

resetOpt.addEventListener('click', resetOptions);

function inputFromUrl() {
	animateIcon("fade-4", "fa-fade", 1000);
	setTimeout(() => {
		inputContainer.classList.toggle("hidden");
		inputContainer.classList.toggle("flex");
		fileLinkInput.focus();
		fileLinkInput.select();
	}, 500);
}

document.getElementById("from_url").addEventListener("click", inputFromUrl);

function fileUpload() {
	let lastLoadedUrl = '';

	async function loadFileContent(fileUrl) {
		try {
			loadFileBtn.innerHTML = `Loading ${addFontAwesomeIcon('fa-solid fa-spinner fa-spin')}`;
			loadFileBtn.disabled = true;

			const response = await fetch(fileUrl);

			if (!response.ok) {
				if (response.status === 404) {
					throw new Error("File not found (404).");
				} else if (response.status === 500) {
					throw new Error("Server error (500). Please try again later.");
				} else {
					throw new Error(`Unexpected error: ${response.statusText}`);
				}
			}

			const contentDisposition = response.headers.get("content-disposition");
			const fileNameMatch = contentDisposition && contentDisposition.match(/filename="(.+)"/);
			const fileName = fileNameMatch ? fileNameMatch[1] : fileUrl.split('/').pop();

			const contentLength = response.headers.get("content-length");
			if (contentLength && parseInt(contentLength, 10) > maxFileSizeInBytes) {
				lastLoadedUrl = "";
				throw new Error(`File size exceeds ${maxFileSizeInBytes / 1024} KB limit`);
			}

			if (sourceEditor.getModel().getValue().trim() !== '' && (sources.length < getMaxTabs() && sourcesOut.length < getMaxTabs())) {
				addEmptyTab();
			}

			const data = await response.text();

			if (data.length === 0) {
				sourceEditor.getModel().setValue(defaultContent);
			} else {
				sourceEditor.getModel().setValue(data);
			}

			sourceEditor.revealLine(1, monaco.editor.ScrollType.Immediate);
			updateNametoTab(fileName.trim());
			minifiedEditor.getModel().setValue('');

			handleAutoScroll();
			updateGraph();

		} catch (error) {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} ${error.message}`);
		} finally {
			loadFileBtn.innerHTML = `Load ${addFontAwesomeIcon('fa-solid fa-cloud-arrow-down', [], false, 'fade-3')}`;
			loadFileBtn.disabled = false;
		}
	}

	function loadFile() {
		disableTyping();
		const fileLink = fileLinkInput.value.trim();

		if (fileLink === '') {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} URL cannot be empty.`);
			return;
		}

		try {
			new URL(fileLink);
		} catch {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} Invalid URL.`);
			return;
		}

		if (!/\.(py)$/.test(fileLink.toLowerCase())) {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} Please enter a valid .py file link.`);
			return;
		}

		if (fileLink !== lastLoadedUrl) {
			loadFileContent(fileLink);
			lastLoadedUrl = fileLink;
		} else {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} File already loaded.`);
		}
	}

	document.getElementById("load_File").addEventListener("click", () => {
		const currentUrl = fileLinkInput.value.trim();

		if (currentUrl !== lastLoadedUrl) {
			loadFile(currentUrl);
		} else {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} File already loaded.`);
		}
	});

	document.getElementById("sample_link").addEventListener("click", () => {
		const githubrawlink = "https://gist.githubusercontent.com/glad432/4d1935413e012cd54130a1fc6f31b4bf/raw/5f3aaae4b9a360b64a1146e6540804af4a91b7b1/sample.py";

		fileLinkInput.value = githubrawlink;

		if (githubrawlink === lastLoadedUrl) {
			handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} File already loaded.`);
		} else {
			loadFileContent(githubrawlink);
			lastLoadedUrl = githubrawlink;
		}
	});

	fileLinkInput.addEventListener("keyup", (event) => {
		if (event.key === "Enter") {
			const currentUrl = fileLinkInput.value.trim();
			if (currentUrl !== lastLoadedUrl) {
				loadFile(currentUrl);
			} else {
				handleErrorMessage(`${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} File already loaded.`);
			}
		}
	});

	document.getElementById("clear_link").addEventListener("click", () => {
		if (fileLinkInput.value !== '') {
			fileLinkInput.value = '';
			lastLoadedUrl = '';
			animateIcon("fade-7", "fa-fade", 1000);
		}
	});
};

document.addEventListener("DOMContentLoaded", fileUpload);

function showArticle() {
	animateIcon("rot-1", "fa-fade", 1000);
	const displayContent = document.getElementById("display-content");
	const rotateOne = document.getElementById("rot-1");
	displayContent.classList.toggle("content");
	rotateOne.classList.toggle("fa-caret-down");
	displayContent.classList.toggle("hidden");
	rotateOne.classList.toggle("fa-caret-up");
}

document.addEventListener('DOMContentLoaded', () => {
	document.getElementById("show-btn").addEventListener("click", showArticle);
});

document.addEventListener('DOMContentLoaded', async () => {
	var content = '<div id="display-content" class="hidden overflow-y-auto max-h-[100%]">';
	content += '<h2 id="article-title" class="text-xl lg:text-3xl text-gray-600 text-left font-bold mb-4 opacity-0 transition-opacity duration-1000">' +
		addFontAwesomeIcon('fa-brands fa-python', ['text-blue-500', 'pr-2']) +
		escapeHtml(articleData.article.title) +
		'</h2>';

	articleData.article.sections.forEach((section) => {
		if (section.section_title !== "FAQs") {
			content += '<div class="mb-4 opacity-0 transition-opacity duration-1000">' +
				'<h3 class="text-[15px] text-gray-500 lg:text-xl font-bold py-4">' +
				addFontAwesomeIcon('fa-solid fa-diamond', ['text-cyan-900', 'pr-2']) +
				escapeHtml(section.section_title) +
				'</h3>' +
				'<p class="text-[13px] lg:text-[15px]">' +
				escapeHtml(section.section_content || '') +
				'</p>';

			if (section.sub_sections && section.sub_sections.length > 0) {
				content += '<div class="ml-4 mb-2">';
				section.sub_sections.forEach((subsection) => {
					content += '<h4 class="text-sm text-gray-500 lg:text-lg font-bold py-2">' +
						addFontAwesomeIcon('fa-solid fa-square-caret-right', ['text-cyan-900', 'pr-2']) +
						escapeHtml(subsection.subsubsection_title) +
						'</h4>' +
						'<p class="text-[13px] lg:text-[15px]">' +
						escapeHtml(subsection.subsubsection_content || '') +
						'</p>';
				});
				content += '</div>';
			}
			content += '</div>';
		}
	});

	content += '<h3 class="text-[15px] text-gray-500 lg:text-xl font-bold py-4 opacity-0 transition-opacity duration-1000">' +
		addFontAwesomeIcon('fa-solid fa-circle-question', ['text-blue-700', 'pr-2']) +
		'FAQs' +
		'</h3>' +
		'<ul class="list-none list-inside opacity-0 transition-opacity duration-1000">';

	var faqSection = articleData.article.sections.find((section) => {
		return section.section_title === "FAQs";
	});

	if (faqSection && faqSection.section_content) {
		var faqPairs = faqSection.section_content.split('\n\n');
		faqPairs.forEach((pair) => {
			var parts = pair.split('\nA:');
			if (parts.length === 2) {
				var question = escapeHtml(parts[0]);
				var answer = escapeHtml(parts[1]);
				content += '<li class="text-[13px] lg:text-[15px]">' +
					'<strong>' + question + '</strong><br/>' +
					'A: ' + answer +
					'</li>';
			}
		});
	}

	content += '</ul></div>';
	document.getElementById('article').innerHTML = content;

	const observer = new IntersectionObserver((entries) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				entry.target.classList.remove('opacity-0');
				entry.target.classList.add('opacity-100');
				observer.unobserve(entry.target);
			}
		});
	}, {
		root: null,
		rootMargin: '0px',
		threshold: 0.1
	});

	document.querySelectorAll('#display-content .opacity-0').forEach((element) => {
		observer.observe(element);
	});
});

function escapeHtml(text) {
	const element = document.createElement('div');
	element.innerText = text;
	return element.innerHTML;
}

async function graphConfig(originalData, minifiedData, tabFileNames) {
	const {
		default: ApexCharts
	} = await import('apexcharts/dist/apexcharts.esm.js');

	return new ApexCharts(document.getElementById("line-graph"), {
		chart: {
			height: "250vh",
			maxWidth: "100%",
			type: "area",
			fontFamily: "Source Code Pro",
			zoom: {
				enabled: false,
			},
			animations: {
				enabled: true,
				easing: 'linear',
				speed: 800,
				animateGradually: {
					enabled: true,
					delay: 150
				},
				dynamicAnimation: {
					enabled: true,
					speed: 350
				}
			}
		},
		grid: {
			show: false,
		},
		tooltip: {
			enabled: true,
			x: {
				show: false,
			},
		},
		dataLabels: {
			enabled: false,
		},
		series: [{
				data: originalData,
				color: "#1A56DB",
			},
			{
				data: minifiedData,
				color: "#EF4444",
			},
		],
		legend: {
			show: true,
		},
		stroke: {
			curve: 'smooth',
		},
		fill: {
			type: "gradient",
			gradient: {
				opacityFrom: 0.6,
				opacityTo: 0,
				shade: "#1C64F2",
				gradientToColors: ["#1C64F2"],
			},
		},
		xaxis: {
			categories: tabFileNames,
			labels: {
				show: false,
			},
			axisBorder: {
				show: false,
			},
			axisTicks: {
				show: true,
			},
		},
		yaxis: {
			show: true,
			min: 0,
			labels: {
				show: false,
				formatter: (value) => {
					if (isGetLines) {
						return Math.round(value);
					}
					return value;
				}
			},
		},
	});
}

async function processAndPush(list, dataArray, isGetLines) {
	for (let key of list) {
		const value = tempStorage[key] || "";

		if (isGetLines) {
			const lineCount = value.split("\n").length;
			dataArray.push(lineCount);
		} else {
			const sizeKB = (value.length / 1024).toFixed(3);
			dataArray.push(sizeKB);
		}
	}
}

async function updateGraph() {
	const pycodeOutList = [];
	const pycodeList = [];
	const originalData = [];
	const minifiedData = [];
	const tabFileNames = [];
	const minifiedDataFiltered = [];
	const originalDataFiltered = [];
	const tabFileNamesFiltered = [];
	const percentageSavings = [];
	const fileTabsArray = [];
	const fileTabsOutArray = [];

	Object.keys(tempStorage).forEach(key => {
		if (key.startsWith("#PyFile-out")) {
			pycodeOutList.push(key);
		} else if (key.startsWith("#PyFile")) {
			pycodeList.push(key);
		}
	});

	const numericalSort = (a, b) => parseInt(a.match(/\d+/)[0]) - parseInt(b.match(/\d+/)[0]);
	pycodeList.sort(numericalSort);
	pycodeOutList.sort(numericalSort);

	await processAndPush(pycodeOutList, minifiedData, isGetLines);
	await processAndPush(pycodeList, originalData, isGetLines);

	if (fileTabs) {
		Array.from(fileTabs.children).forEach(child => {
			fileTabsArray.push(child.textContent.trim());
		});
	}

	if (fileTabsOut) {
		Array.from(fileTabsOut.children).forEach(child => {
			fileTabsOutArray.push(child.textContent.trim());
		});
	}

	for (let i = 0; i < Math.max(fileTabsArray.length, fileTabsOutArray.length); i++) {
		const tabNameA = fileTabsArray[i] || '';
		const tabNameB = fileTabsOutArray[i] || '';
		const chosenName = tabNameA || tabNameB || defaultFilename;
		const baseName = chosenName.replace(/\.py$/, '');
		const displayName = baseName.length > 20 ?
			`${baseName.slice(0, 11)}...${baseName.slice(-12)}` :
			baseName;
		tabFileNames.push(displayName);
	}

	minifiedDataFiltered.push(...minifiedData.filter(value => value > 0));
	originalDataFiltered.push(...originalData.filter((_, index) => minifiedData[index] > 0));
	tabFileNamesFiltered.push(...tabFileNames.filter((_, index) => minifiedData[index] > 0));

	if (minifiedDataFiltered.length > 1) {
		minifiedData.splice(0, minifiedData.length, ...minifiedDataFiltered);
		originalData.splice(0, originalData.length, ...originalDataFiltered);
		tabFileNames.splice(0, tabFileNames.length, ...tabFileNamesFiltered);

		if (!isGetLines) {
			for (let i = 0; i < originalData.length; i++) {
				const original = originalData[i];
				const minified = minifiedData[i];
				if (original === 0 || minified === 0) {
					percentageSavings.push("N/A");
				} else {
					const savingsPercentage = ((original - minified) / original) * 100;
					if (savingsPercentage === 0) {
						percentageSavings.push("0% Saved");
					} else if (savingsPercentage === 100) {
						percentageSavings.push("Not minified");
					} else {
						percentageSavings.push(`${savingsPercentage.toFixed(2)}% Saved`);
					}
				}
			}
		}

		if (graph) {
			graph.updateSeries([{
					name: `Original ${!isGetLines ? 'Size' : 'Lines'}`,
					data: originalData
				},
				{
					name: `Minified ${!isGetLines ? 'Size' : 'Lines'}`,
					data: minifiedData
				}
			], true);
			graph.updateOptions({
				xaxis: {
					categories: tabFileNames.map((name, index) => !isGetLines ? `${name} (${percentageSavings[index]})` : `${name}`)
				}
			}, true);
		} else {
			graph = await graphConfig(originalData, minifiedData, tabFileNames);
			graph.render();
			setGraphTheme();
		}

		graphContainer.classList.remove("hidden");
	} else {
		graphContainer.classList.add("hidden");
	}
}

document.addEventListener('DOMContentLoaded', () => {
	if (graphKbSize) {
		graphKbSize.addEventListener("click", () => {
			isGetLines = false;
			updateGraph();
		});
	}

	if (graphLines) {
		graphLines.addEventListener("click", () => {
			isGetLines = true;
			updateGraph();
		});
	}
});

function getCurrentTabName(index = currentTabIndex || currentTabIndexOut) {
	if (index == null || isNaN(index)) {
		return defaultFilename;
	}

	const fileTab = fileTabs?.children[index]?.textContent;
	if (fileTab) {
		return fileTab.trim();
	}

	const fileTabOut = fileTabsOut?.children[index]?.textContent;
	if (fileTabOut) {
		return fileTabOut.trim();
	}

	return defaultFilename.trim();
}

function handleTabsOverlay(enable) {
	fileTabsOverlay.classList.toggle("hidden", !enable)
	fileTabsOverlayOut.classList.toggle("hidden", !enable)
	btnsOverlay.classList.toggle("hidden", !enable)
}

function getMaxTabs() {
	return isMobile() ? 10 : 20
}

function handleAutoScroll() {
	const activeTab = fileTabs.children[currentTabIndex];
	const tabPosition = activeTab.offsetLeft - fileTabs.offsetLeft;
	const leftVisible = fileTabs.scrollLeft;
	const rightVisible = leftVisible + fileTabs.offsetWidth;

	if (tabPosition >= leftVisible && tabPosition + activeTab.offsetWidth <= rightVisible) {
		return;
	}

	if (tabPosition < leftVisible) {
		fileTabs.scrollLeft = tabPosition;
	} else if (tabPosition + activeTab.offsetWidth > rightVisible) {
		fileTabs.scrollLeft = tabPosition + activeTab.offsetWidth - fileTabs.offsetWidth;
	}
}

function saveEditorContent(isOut = false) {
	const content = (isOut ? minifiedEditor : sourceEditor).getModel().getValue();
	const storageKey = isOut ? sourcesOut[currentTabIndexOut] : sources[currentTabIndex];

	tempStorage[storageKey] = content.length === 0 ? "" : content;
}

function updateEditorContent(isOut = false) {
	const storageKey = isOut ? sourcesOut[currentTabIndexOut] : sources[currentTabIndex];
	const editor = isOut ? minifiedEditor : sourceEditor;

	let storedContent = tempStorage[storageKey];

	if (storedContent === undefined || storedContent.length === 0) {
		storedContent = "";
	}

	if (editor) {
		editor.getModel().setValue(storedContent);
	}
}

function updateEmptyTabInput(tabNameInput, index, isOut) {
	if (index < 0 || (index >= sources.length && index >= sourcesOut.length)) {
		return;
	}

	const filename = (isOut ? fileTabs.children[index].textContent : fileTabsOut.children[index].textContent) || `File ${index + 1}.py`;

	if (tabNameInput.value.trim() === '' || tabNameInput.value.trim() === '.py') {
		updateNametoTab(filename.trim());
	}

	isTabNameEdit = false;
	isTabNameEditOut = false;
}

function updateTab(tabNameInputElement) {
	updateEmptyTabInput(tabNameInputElement, currentTabIndex, false);
	updateTabName('.tab-name-input', fileTabs, currentTabIndex);
	updateGraph();
}

function editTabName() {
	const activeTab = fileTabs.children[currentTabIndex];

	const tabNameInput = document.createElement('input');
	tabNameInput.type = 'text';
	tabNameInput.placeholder = "Enter:";
	tabNameInput.value = activeTab.textContent.trim();
	tabNameInput.autocorrect = "off";
	tabNameInput.spellcheck = false;
	tabNameInput.className = "tab-name-input focus:outline-none bg-transparent";
	tabNameInput.style.width = `${activeTab.offsetWidth - 90}px`;
	tabNameInput.focus();

	tabNameInput.addEventListener('keypress', (event) => {
		if (event.key === 'Enter') {
			updateTab(tabNameInput);
			isTabNameEdit = false;
			saveEditorContent();
		}
	});

	tabNameInput.addEventListener('blur', () => {
		updateTab(tabNameInput);
		isTabNameEdit = false;
		saveEditorContent();
	});

	const saveIcon = document.createElement('button');
	saveIcon.className = 'save-tab-icon hover:text-green-400 text-green-500';
	saveIcon.title = 'Save or press enter';
	saveIcon.innerHTML = addFontAwesomeIcon('fa-solid fa-floppy-disk', ['px-0.5']);

	saveIcon.addEventListener('click', () => {
		updateTab(tabNameInput);
		isTabNameEdit = false;
		saveEditorContent();
	});

	activeTab.innerHTML = '';
	activeTab.appendChild(addFontAwesomeIcon('fa-brands fa-python', ['text-blue-600', 'pr-2'], true));
	activeTab.appendChild(tabNameInput);
	activeTab.appendChild(saveIcon);

	tabNameInput.focus();
	isTabNameEdit = true;
}

function updateTabName(tabQueryInput, fileTabs, currentTabIndex) {
	const tabNameInput = document.querySelector(tabQueryInput);

	if (!tabNameInput || currentTabIndex < 0 || currentTabIndex >= fileTabs.children.length) {
		return;
	}

	const baseName = tabNameInput.value.trim().replace(/\.py$/, '').slice(0, 200);

	if (baseName.length > 0 && !/^\s+$/.test(baseName)) {
		const sanitizedName = baseName
			.replace(/[^a-zA-Z0-9,\s.()]|,(?![a-zA-Z])|\.(?![a-zA-Z]|py$)/g, "_");

		const finalName = sanitizedName.endsWith('.py') ? sanitizedName : `${sanitizedName}.py`;

		const currentTab = fileTabs.children[currentTabIndex];
		currentTab.textContent = finalName;

		const existingIcon = currentTab.querySelector('i');
		if (existingIcon) {
			currentTab.removeChild(existingIcon);
		}

		currentTab.insertBefore(addFontAwesomeIcon('fa-brands fa-python', ['text-blue-600', 'pr-2'], true), currentTab.firstChild);

		updateNametoTab(finalName);
		tabNameInput.value = finalName;
	}
}

function updateNametoTab(fileName, isOut = false) {
	if (!isOut) {
		updateNametoTab(fileName, true);
	}
	const activeTabIndex = isOut ? currentTabIndexOut : currentTabIndex;
	const fileTabsToUpdate = isOut ? fileTabsOut : fileTabs;
	const tabToUpdate = fileTabsToUpdate.children[activeTabIndex];

	if (tabToUpdate) {
		tabToUpdate.innerHTML = `${addFontAwesomeIcon('fa-brands fa-python', ['text-blue-600', 'pr-2'])}${fileName.trim()}`;
	}
}

function addEmptyTab() {
	disableTyping(true);

	if (sources.length >= getMaxTabs() && sourcesOut.length >= getMaxTabs()) {
		showSweetAlert({
			icon: "error",
			html: `${addFontAwesomeIcon('fa-solid fa-file-circle-exclamation')} You can't add more than ${getMaxTabs()} tabs.`,
			confirmButtonColor: "#179fff"
		});
		return;
	}

	saveEditorContent();
	addNewTabBtn.classList.remove("hidden");
	minifyAllBtn.disabled = false;
	minifyAllBtn.classList.remove("hidden");

	const newFileIndex = sources.length;
	const newSourceId = `#PyFile-${newFileIndex + 1}`;
	const newTab = document.createElement('li');
	newTab.className = 'file-tab relative cursor-pointer bg-[#f0f0f0] border-[#ccc] px-[25px] py-2 mb-[5px] border border-solid rounded mr-[5px] transition-opacity';
	newTab.innerHTML = `${addFontAwesomeIcon('fa-brands fa-python', ['text-blue-600', 'pr-2'])}File ${newFileIndex + 1}.py`;
	newTab.id = `file-${newFileIndex + 1}`;
	newTab.title = `${getOrdinalSuffix(newFileIndex)} Tab`;

	newTab.addEventListener("click", () => {
		if (!isTabNameEdit) {
			updateTabStyles();
		}

		if (newFileIndex !== currentTabIndex) {
			switchTab(newFileIndex);
			autoMiddleScroll(newTab);
		}
	});

	addTabOut();
	updateTabStyles();
	fileTabs.appendChild(newTab);
	sources.push(newSourceId);
	switchTab(newFileIndex);
	tempStorage[newSourceId] = '';
	sourceEditor.getModel().setValue('');

	if (sources.length >= getMaxTabs() && sourcesOut.length >= getMaxTabs()) {
		addNewTabBtn.classList.add("hidden");
	}
}

addNewTabBtn.addEventListener("click", () => {
	animateIcon("addNewTab", "fa-fade", 500);
	setTimeout(() => {
		addEmptyTab();
		sourceEditor.setPosition({
			lineNumber: 1,
			column: 1
		});
		sourceEditor.focus();
	}, 400);
});

function updateTabStyles() {
	handleAutoScroll();
	if (sourcesOut.length < 2) {
		minifyAllBtn.disabled = true;
		minifyAllBtn.classList.add("hidden");
	}

	const tabs = document.querySelectorAll('.file-tab');
	if (currentTabIndex >= 0 && currentTabIndex < tabs.length) {
		tabs.forEach((tab, index) => {
			const icon = tab.querySelector('.fa-python');
			const isActive = index === currentTabIndex;

			if (isActive) {
				tab.classList.add('active');
				icon.classList.add('text-blue-600');

				if (!tab.querySelector('.edit-tab-icon')) {
					const editBtn = document.createElement('button');
					editBtn.id = `editbtn-${currentTabIndex + 1}`;
					editBtn.className = 'edit-tab-icon mr-0.5 ml-[3px] hover:text-blue-400 text-blue-600';
					editBtn.title = 'Edit file name';
					editBtn.innerHTML = addFontAwesomeIcon('fa-solid fa-pen-to-square');
					editBtn.addEventListener('click', () => {
						animateIcon(editBtn.id, "fa-bounce", 800);
						setTimeout(editTabName, 800);
					});
					tab.appendChild(editBtn);
				}

				if (index === tabs.length - 1 && !tab.querySelector('.delete-tab-icon')) {
					const deleteBtn = document.createElement('button');
					deleteBtn.id = `delbtn-${currentTabIndex + 1}`;
					deleteBtn.className = 'delete-tab-icon absolute pl-[5px] right-[5px] top-2 font-bold cursor-pointer mr-0.5 ml-[3px] hover:text-red-400 text-red-500';
					deleteBtn.title = 'Delete this tab';
					deleteBtn.innerHTML = addFontAwesomeIcon('fa-solid fa-trash');
					deleteBtn.addEventListener('click', () => {
						addNewTabBtn.disabled = true;
						animateIcon(deleteBtn.id, "fa-bounce", 800);
						setTimeout(confirmDeleteFile, 800, currentTabIndex);
					});
					tab.appendChild(deleteBtn);
				}
			} else {
				tab.classList.remove('active');
				icon.classList.remove('text-blue-600');

				const editBtn = tab.querySelector('.edit-tab-icon');
				const deleteBtn = tab.querySelector('.delete-tab-icon');
				if (editBtn) {
					tab.removeChild(editBtn);
				}

				if (deleteBtn) {
					tab.removeChild(deleteBtn);
				}
			}
		});
	}
}

function deleteFile(index, isOut = false) {
	if (!isOut) {
		addNewTabBtn.classList.remove("hidden");
		delete tempStorage[sources[index]];
		sources.splice(index, 1);
		fileTabs.removeChild(fileTabs.children[index]);
		if (currentTabIndex >= sources.length) {
			currentTabIndex = sources.length - 1;
		} else if (currentTabIndex > index) {
			currentTabIndex--;
		}

		updateTabStyles();
		switchTab(currentTabIndex);
		updateEditorContent();
	} else {
		delete tempStorage[sourcesOut[index]];
		sourcesOut.splice(index, 1);
		fileTabsOut.removeChild(fileTabsOut.children[index]);
		if (currentTabIndexOut >= sourcesOut.length) {
			currentTabIndexOut = sourcesOut.length - 1;
		} else if (currentTabIndexOut > index) {
			currentTabIndexOut--;
		}

		updateTabStylesOut();
		switchTabOut(currentTabIndexOut);
		updateEditorContent(true);
	}
}

function confirmDeleteFile(index) {
	const tabFileName = getCurrentTabName().replace(/\.py$/, "");
	const fileNameDisplay = tabFileName.length > 15 ? `${tabFileName.slice(0,7)}...${tabFileName.slice(-3)}` : tabFileName;
	const confirmationMessage = `Are you sure you want to delete <span class="font-bold text-neutral-500 hover:underline" title="${tabFileName.trim()}">${fileNameDisplay}</span> tab?`;

	showSweetAlert({
		html: confirmationMessage,
		icon: "question",
		allowOutsideClick: false,
		showCancelButton: true,
		confirmButtonColor: "#d33",
		confirmButtonText: "Yes",
		cancelButtonText: "No",
		cancelButtonColor: "#179fff",
	}).then((result) => {
		if (result.isConfirmed) {
			clearPyComplier();

			if (sources.length === 1) {
				startIndex = 0;
				minifiedEditor.getModel().setValue('');
				sourceEditor.getModel().setValue('');
				handleErrorMessage();
				disableTyping();
				clearPyComplier();
				updateNametoTab(`File ${currentTabIndex + 1}.py`);
				minifiedSize.textContent = '0.000 kB';
				updateGraph();
				if (filetabOutOne.classList.contains("error") && currentTabIndex === 0 && currentTabIndexOut === 0) {
					filetabOutOne.classList.remove("error");
				}
			} else {
				deleteFile(index);
				deleteFile(index, true);
				fileLinkInput.value = '';
			}

			updateGraph();
		}
		addNewTabBtn.disabled = false;
	});
}

function deleteAllTabs() {
	const numTabs = sources.length;

	minifyAllBtn.disabled = true;
	minifyAllBtn.classList.add("hidden");

	const currentTab = fileTabsOut.children[currentTabIndexOut];
	currentTab.classList.remove("error");

	if (fileTabsOut.children[currentTabIndexOut] && fileTabsOut.children[currentTabIndexOut].classList.contains('error')) {
		fileTabsOut.children[currentTabIndexOut].title = `Minification failed at ${getOrdinalSuffix(currentTabIndexOut)} Tab`;
	} else {
		fileTabsOut.children[currentTabIndexOut].title = `${getOrdinalSuffix(currentTabIndexOut)} Tab`;
	}

	if (numTabs > 1) {
		for (var i = numTabs - 1; i > 0; i--) {
			deleteFile(i);
			deleteFile(i, true);
		}
	}

	if (filetabOutOne.classList.contains("error")) {
		filetabOutOne.classList.remove("error");
	}

	if (numTabs === 0) {
		addEmptyTab();
	}

	startIndex = 0;
}

window.addEventListener('beforeunload', (e) => {
	e.preventDefault();
	e.returnValue = '';
	return '';
});

window.addEventListener('load', () => {
	tempStorage = {};
});

function switchTab(index, fromSwitchTabOut = false) {
	if (!fromSwitchTabOut) {
		switchTabOut(index);
	}

	disableTyping();
	const previousIndex = currentTabIndex;
	currentTabIndex = Math.max(0, Math.min(index, sources.length - 1));

	if (!isTabNameEdit) {
		animateIcon(`file-${currentTabIndex + 1}`, "animate-pulse", 700);
		updateTabStyles();
	}

	updateEditorContent();

	if (previousIndex !== currentTabIndex) {
		if (fileTabs.children[previousIndex].querySelector('.tab-name-input')) {
			updateTabName('.tab-name-input', fileTabs, currentTabIndex);

		}
	}
}

document.getElementById("file-1").addEventListener('click', () => {
	if (!isTabNameEdit) {
		updateTabStyles();
	}

	if (0 === currentTabIndex) return;
	switchTab(0);
})

function autoMiddleScroll(tab) {
	if (!(tab instanceof HTMLElement))
		return;

	tab.scrollIntoView({
		behavior: 'smooth',
		inline: 'center',
		block: 'nearest'
	});
}

function handleAutoScrollOut() {
	handleAutoScroll();
	const activeTab = fileTabsOut.children[currentTabIndexOut];
	const tabPosition = activeTab.offsetLeft - fileTabsOut.offsetLeft;
	const leftVisible = fileTabsOut.scrollLeft;
	const rightVisible = leftVisible + fileTabsOut.offsetWidth;

	if (tabPosition >= leftVisible && tabPosition + activeTab.offsetWidth <= rightVisible) {
		return;
	}

	if (tabPosition < leftVisible) {
		fileTabsOut.scrollLeft = tabPosition;
	} else if (tabPosition + activeTab.offsetWidth > rightVisible) {
		fileTabsOut.scrollLeft = tabPosition + activeTab.offsetWidth - fileTabsOut.offsetWidth;
	}
}

function updateTabOut(tabNameInputElement) {
	updateEmptyTabInput(tabNameInputElement, currentTabIndexOut, true);
	updateTabName('.tab-name-input-out', fileTabsOut, currentTabIndexOut, true);
	updateGraph();
}

function editTabNameOut() {
	const activeTab = fileTabsOut.children[currentTabIndexOut];

	const tabNameInput = document.createElement('input');
	tabNameInput.type = 'text';
	tabNameInput.placeholder = "Enter:";
	tabNameInput.value = activeTab.textContent.trim();
	tabNameInput.autocorrect = "off";
	tabNameInput.spellcheck = false;
	tabNameInput.className = "tab-name-input-out focus:outline-none bg-transparent";
	tabNameInput.style.width = `${activeTab.offsetWidth - 90}px`;
	tabNameInput.focus();

	tabNameInput.addEventListener('keypress', (event) => {
		if (event.key === 'Enter') {
			updateTabOut(tabNameInput);
			isTabNameEditOut = false;
			saveEditorContent(true);
		}
	});

	tabNameInput.addEventListener('blur', () => {
		updateTabOut(tabNameInput);
		isTabNameEditOut = false;
		saveEditorContent(true);
	});

	const saveIcon = document.createElement('button');
	saveIcon.className = 'save-tab-icon hover:text-green-400 text-green-500';
	saveIcon.title = 'Save or press enter';
	saveIcon.innerHTML = addFontAwesomeIcon('fa-solid fa-floppy-disk', ['px-0.5']);

	saveIcon.addEventListener('click', () => {
		updateTabOut(tabNameInput);
		isTabNameEditOut = false;
		saveEditorContent(true);
	});

	activeTab.innerHTML = '';
	activeTab.appendChild(addFontAwesomeIcon('fa-brands fa-python', ['text-blue-600', 'pr-2'], true));
	activeTab.appendChild(tabNameInput);
	activeTab.appendChild(saveIcon);

	tabNameInput.focus();
	isTabNameEditOut = true;
}

function addTabOut() {
	disableTyping();
	saveEditorContent(true);

	const newFileIndexOut = sourcesOut.length;
	const newSourceId = `#PyFile-out-${newFileIndexOut + 1}`;

	const newTab = document.createElement('li');
	newTab.className = 'file-tab-out relative cursor-pointer bg-[#f0f0f0] border-[#ccc] px-[25px] py-2 mb-[5px] border border-solid rounded mr-[5px] transition-opacity';
	newTab.innerHTML = `${addFontAwesomeIcon('fa-brands fa-python', ['text-blue-600', 'pr-2'])}File ${newFileIndexOut + 1}.py`;
	newTab.id = `file-out-${newFileIndexOut + 1}`;
	newTab.title = `${getOrdinalSuffix(newFileIndexOut)} Tab`;

	newTab.addEventListener("click", () => {
		if (!isTabNameEditOut) {
			updateTabStylesOut();
		}

		if (newFileIndexOut !== currentTabIndexOut) {
			switchTabOut(newFileIndexOut);
			autoMiddleScroll(newTab);
		}
	});

	updateTabStylesOut();
	fileTabsOut.appendChild(newTab);
	sourcesOut.push(newSourceId);
	switchTabOut(newFileIndexOut);
	tempStorage[newSourceId] = '';
	minifiedEditor.getModel().setValue('');
}

function updateTabStylesOut() {
	handleAutoScrollOut();
	minifyAllBtn.title = (sourcesOut.length === 1) ? '' : 'Minify More';
	const tabs = document.querySelectorAll('.file-tab-out');

	if (currentTabIndexOut >= 0 && currentTabIndexOut < tabs.length) {
		tabs.forEach((tab, index) => {
			const icon = tab.querySelector('.fa-python');
			const isActive = index === currentTabIndexOut;

			if (isActive) {
				tab.classList.add('active');
				icon.classList.add('text-blue-600');

				if (!tab.querySelector('.edit-tab-icon-out')) {
					const editBtn = document.createElement('button');
					editBtn.id = `editbtnout-${currentTabIndexOut + 1}`;
					editBtn.className = 'edit-tab-icon-out mr-0.5 ml-[3px] hover:text-blue-400 text-blue-600';
					editBtn.title = 'Edit file name';
					editBtn.innerHTML = addFontAwesomeIcon('fa-solid fa-pen-to-square');
					editBtn.addEventListener('click', () => {
						animateIcon(editBtn.id, "fa-bounce", 800);
						setTimeout(editTabNameOut, 800);
					});
					tab.appendChild(editBtn);
				}

				if (index === tabs.length - 1 && !tab.querySelector('.delete-tab-icon-out')) {
					const deleteBtn = document.createElement('button');
					deleteBtn.id = `delbtnout-${currentTabIndexOut + 1}`;
					deleteBtn.className = 'delete-tab-icon-out absolute pl-[5px] right-[5px] top-2 font-bold cursor-pointer mr-0.5 ml-[3px] hover:text-red-400 text-red-500';
					deleteBtn.title = 'Delete this tab';
					deleteBtn.innerHTML = addFontAwesomeIcon('fa-solid fa-trash');
					deleteBtn.addEventListener('click', () => {
						addNewTabBtn.disabled = true;
						animateIcon(deleteBtn.id, "fa-bounce", 800);
						setTimeout(confirmDeleteFile, 800, currentTabIndexOut);
					});
					tab.appendChild(deleteBtn);
				}
			} else {
				tab.classList.remove('active');
				icon.classList.remove('text-blue-600');

				const editBtn = tab.querySelector('.edit-tab-icon-out');
				const deleteBtn = tab.querySelector('.delete-tab-icon-out');
				if (editBtn) {
					tab.removeChild(editBtn);
				}

				if (deleteBtn) {
					tab.removeChild(deleteBtn);
				}
			}
		});
	}
}

function switchTabOut(index) {
	switchTab(index, true);
	const previousIndexOut = currentTabIndexOut;
	currentTabIndexOut = Math.max(0, Math.min(index, sourcesOut.length - 1));

	if (!isTabNameEditOut) {
		animateIcon(`file-out-${currentTabIndexOut + 1}`, "animate-pulse", 700);
		updateTabStylesOut();
	}

	updateEditorContent(true);

	if (previousIndexOut !== currentTabIndexOut) {
		if (fileTabsOut.children[previousIndexOut].querySelector('.tab-name-input-out')) {
			updateTabName('.tab-name-input-out', fileTabsOut, currentTabIndexOut, true);
		}
	}
}

filetabOutOne.addEventListener('click', () => {
	if (!isTabNameEditOut) {
		updateTabStylesOut();
	}

	if (0 === currentTabIndexOut) return;
	switchTabOut(0);
})