// Use chrome or browser depending on the environment
const browser = chrome || browser;

let DEBUG; // Declare the DEBUG variable in the outer scope

browser.storage.sync.get("debug").then((result) => {
	DEBUG = result.debug;
	if (DEBUG) console.log("DEBUG mode:", DEBUG);
});

// Duration to show the banner (in milliseconds)
let DISPLAY_DURATION = 5000; // Initialize the duration to 5 seconds
let CSS_ANIMATION_DURATION,
	CSS_DURATION,
	CSS_DELAY = 0; // Initialize the CSS variables
let BANNER; // Declare the banner variable in the outer scope

function initializeCSSProperties(result) {
	DISPLAY_DURATION = result.duration || DISPLAY_DURATION;
	if (DEBUG) console.log("Duration set to:", DISPLAY_DURATION, "(in ms)");

	// Set variables to css for delay for animation
	CSS_ANIMATION_DURATION = 300 / 1000;
	CSS_DURATION = DISPLAY_DURATION / 1000;
	CSS_DELAY = CSS_DURATION - CSS_ANIMATION_DURATION - CSS_ANIMATION_DURATION;

	if (DEBUG) console.log("--duration:", `${CSS_ANIMATION_DURATION}s`);
	if (DEBUG) console.log("--delay:", `${CSS_DURATION}s`);

	CSS_ANIMATION_DURATION = CSS_ANIMATION_DURATION + "s";
	document.body.style.setProperty("--duration", CSS_ANIMATION_DURATION);

	CSS_DELAY = CSS_DELAY + "s";
	document.body.style.setProperty("--delay", CSS_DELAY);
}

function injectCSS() {
	// Inject the CSS file
	const link = document.createElement("link");
	link.href = browser.runtime.getURL("rtbh_style.css");
	link.rel = "stylesheet";
	document.head.appendChild(link);

	// Return the link element
	return link;
}

function createBanner() {
	// Create the banner container
	const banner = document.createElement("div");
	banner.classList.add("banner");

	const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";

	const bannerContent = `
	<div class="marquee">
		<span class="marquee__inner" style="--ad: 60s;">
			${new Array(30).fill(marqeeText).join("")}
		</span>
	</div>
	`;

	// Set the banner content
	banner.innerHTML = bannerContent;

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

	// Return the banner
	return banner;
}

function removeBanner() {
	setTimeout(() => {
		if (BANNER && BANNER.parentNode) {
			// Remove the banner
			BANNER.parentNode.removeChild(BANNER);
			if (DEBUG) console.log("Banner removed after duration.");

			// Remove the injected CSS file
			const link = document.querySelector('link[href$="rtbh_style.css"]'); // Match any href ending with "rtbh_style.css"
			link.parentNode.removeChild(link);
		}
	}, DISPLAY_DURATION);
}

(function () {
	// Get the duration from local storage and update the DISPLAY_DURATION variable
	browser.storage.sync
		.get(["duration", "status", "bannerInjected"]) // Fetch both duration and status
		.then((result) => {
			if (DEBUG)
				console.log(
					"content.js reads from storage: bannerInjected =",
					result.bannerInjected
				);
			if (!result.bannerInjected) {
				// Initialize the CSS properties
				initializeCSSProperties(result);

				if (result.status === 0) {
					// Extension is OFF, do nothing
					if (DEBUG) console.log("Extension is OFF, exiting.");
					return;
				}

				if (DEBUG) console.log("Injecting CSS...");

				// Inject the CSS file
				injectCSS();
				if (DEBUG) console.log("CSS file injected.");

				// Create the banner
				BANNER = createBanner();
				if (DEBUG) console.log("Banner injected:", BANNER);
			} else {
				// Banner has already been injected, remove the banner
				if (DEBUG)
					console.log("Banner already injected... removing banner.");
				removeBanner();
			}
		})
		.then(() => {
			// Remove the banner after the specified duration
			removeBanner();
		})
		.catch((error) => {
			console.error("Error in content script:", error);
		});
})();
