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 dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const minifiedSize = document.getElementById('minified-size');
const sourceEditorDiv = document.getElementById("editor");
const minifiedEditorDiv = document.getElementById("minified");
const loadingEditor = document.getElementById("loading-editor");
const loadingMinified = document.getElementById("loading-minified");
const typeOverlay = document.getElementById("type-overlay");
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, btnTimeout, typingTimeout, sourceEditor, minifiedEditor, diffEditor, darkModeEnabled, compileTime, compileData, lastLoadedUrl;
let typingInProgress = false;
var sources = ['#PyFile-1'];
var sourcesOut = ['#PyFile-out-1'];
let uniqueTabCounter = 2;
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 sweetAlertTimeout = 3000;

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 encoder = new TextEncoder();
	const encodedBytes = encoder.encode(content);

	if (encodedBytes.length > maxFileSizeInBytes) {
		const slicedBytes = encodedBytes.slice(0, maxFileSizeInBytes);

		const decoder = new TextDecoder("utf-8");
		return decoder.decode(slicedBytes);
	}

	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");

		autoMiddleScroll(pyTerminal, "center");
	} 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 = typingInProgress ? sampleCode : ((originalContent && originalContent.length) > 0 ? originalContent : "#Original code is empty!");
	const minifiedSource = minifiedContent && minifiedContent.length > 0 ? minifiedContent : "#Not Minified!";

	const currentModels = diffEditor.getModel();
	if (currentModels && currentModels.original && currentModels.modified) {
		currentModels.original.setValue(originalSource);
		currentModels.modified.setValue(minifiedSource);
	} else {
		const originalEditorModel = monaco.editor.createModel(originalSource, 'python');
		const minifiedEditorModel = monaco.editor.createModel(minifiedSource, 'python');
		diffEditor.setModel({
			original: originalEditorModel,
			modified: minifiedEditorModel
		});
	}

	if (typingInProgress) {
		disableTyping();
		sourceEditor.getModel().setValue(sampleCode);
	}

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

function showDiffPopup() {
	if (currentTabIndex !== currentTabIndexOut) {
		showSweetAlert({
			text: "Diff Editor is not available, reload the page and try again!",
			icon: "warning",
			confirmButtonColor: "#d33",
			confirmButtonText: "Close",
			timer: sweetAlertTimeout,
		}).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 = '';
	}, 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');
	});

	async function handleFiles(files) {
		var fileCount = 0;
		for (const file of Array.from(files)) {
			if (fileCount < getMaxTabs()) {
				handleErrorMessage();
				await handleFilePromise(file);
				fileCount++;
			}
		}
	}

	function handleFilePromise(file) {
		return new Promise((resolve) => {
			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();
					resolve();
				};
				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 = '';
				resolve();
			}
		});
	}
}

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', () => {
	downloadDialog(false)
});

document.addEventListener("keydown", (event) => {
	if ((event.ctrlKey || event.metaKey) && event.key === "s") {
		event.preventDefault();
		downloadDialog(true);
	}
});

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 downloadDialog(fromShortcut) {
	const content = minifiedEditor.getModel().getValue();
	const tabFileName = getCurrentTabName().replace(/\.py$/, "");

	if (content === "") {
		showSweetAlert({
			title: "Minification Required",
			text: "Switch to a minified tab to download",
			icon: "info",
			confirmButtonColor: "#d33",
			confirmButtonText: "Close",
			timer: sweetAlertTimeout,
		});
		return;
	};

	disableDwSrCpBtn(true);
	animateIcon("fade-1", "fa-fade", 3000);

	if (minifiedTabs() === 1) {
		downloadFile(content, "text/x-python", getCurrentTabName());
		disableDwSrCpBtn(false);
		return;
	}

	showSweetAlert({
		title: "Download",
		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: () => {
			downloadFile(content, "text/x-python", getCurrentTabName());
			disableDwSrCpBtn(false);
			return false;
		}
	}).then((result) => {
		if (result.isDenied) {
			compressPyFiles(fromShortcut);
		} else if (result.isDismissed) {
			disableDwSrCpBtn(false);
		}
	});
}

async function compressFiles(selectedIndices, sortedKeys, maxLength, baseFileName, fileFormat, addReadme, fastCompress, fromShortcut) {
	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 (fromShortcut && !fastCompress && minifiedTabs() >= 5) {
			autoMiddleScroll(compressProgress, "center");
		}

		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 (compressedBlob) {
			showSweetAlert({
				title: `Download`,
				html: `<p class="pb-3 font-bold text-neutral-500 hover:underline" title="${baseFileName}.${fileFormat}">${addFontAwesomeIcon('fa-regular fa-file-zipper', ["mr-1"], false)} ${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();
					});
				}
			});
		}

		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() {
	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 cursor-pointer";
		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]"
	}));

	fragment.appendChild(checkboxDiv);

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

	return tempDiv.innerHTML;
}

async function showMinifiedFilesPopup(fromShortcut) {
	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(fromShortcut);
	}
}

async function compressPyFiles(fromShortcut) {
	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);

	const {
		value,
		isConfirmed,
		isDismissed,
		isDenied
	} = await showSweetAlert({
		html: compressOptions(),
		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
			};

			return result;
		}
	});

	if (isConfirmed) {
		const {
			fileFormat,
			fileName,
			addReadme,
			fastCompress
		} = value;

		await compressFiles(selectedIndices, sortedKeys, Math.min(20, maxLength), fileName, fileFormat, addReadme, fastCompress, fromShortcut);
	} else if (isDismissed) {
		disableDwSrCpBtn(false);
		handleTabsOverlay(false);
		return;
	} else if (isDenied) {
		await showMinifiedFilesPopup(fromShortcut);
		return;
	}

}

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();

		const capturedTabIndexOut = currentTabIndexOut;
		const capturedStorageKey = sourcesOut[capturedTabIndexOut];

		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");

				let response;
				let retries = 3;

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

					if (response.ok || (response.status !== 429 && response.status !== 504)) {
						break;
					}
					const backoffDelay = (1500 * (4 - retries)) + Math.floor(Math.random() * 500);
					await new Promise(r => setTimeout(r, backoffDelay));
					retries--;
				}

				if (response.ok) {
					try {
						const minified = await response.json();

						if (!sourcesOut.includes(capturedStorageKey)) {
							return;
						}

						tempStorage[capturedStorageKey] = minified.minified_code;

						if (currentTabIndexOut === capturedTabIndexOut) {
							minifiedEditor.getModel().setValue(minified.minified_code);
							minifiedEditor.revealLine(1, monaco.editor.ScrollType.Immediate);
							disableDwSrCpBtn(false);
							graphContainer.classList.remove("hidden");
						}

					} catch (parseError) {
						disableDwSrCpBtn(true);
						clearPyComplier(true);
						minifiedSize.innerHTML = `${addFontAwesomeIcon('fa-solid fa-circle-exclamation')} Invalid server response!`;
					}
				} else {
					disableDwSrCpBtn(true);
					clearPyComplier(true);
					if (response.status === 429) {
						minifiedSize.innerHTML = `${addFontAwesomeIcon('fa-solid fa-circle-exclamation')} Rate limit exceeded. Try later.`;
					} else {
						minifiedSize.innerHTML = `${addFontAwesomeIcon('fa-solid fa-circle-exclamation')} Server error (${response.status})!`;
					}
				}
			} 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 = '';
	lastLoadedUrl = '';
	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",
						timer: sweetAlertTimeout
					});
				} else if (result.isDenied) {
					minifiedEditor.getModel().setValue('');
					sourceEditor.getModel().setValue('');
					lastLoadedUrl = '';
					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;
	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() {
	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 cursor-pointer 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']);
		tabToUpdate.appendChild(document.createTextNode(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",
			timer: sweetAlertTimeout
		});
		return;
	}

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

	const newFileIndex = sources.length;
	const currentUniqueId = uniqueTabCounter++;
	const newSourceId = `#PyFile-${currentUniqueId}`;
	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-${currentUniqueId}`;
	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] cursor-pointer 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="${escapeHtml(tabFileName.trim())}">${escapeHtml(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, scrollBlock = "nearest") {
	if (!(tab instanceof HTMLElement))
		return;

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

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 cursor-pointer 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-${uniqueTabCounter - 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-${uniqueTabCounter - 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] cursor-pointer 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);
})